fix(core): allow number index for hit attribute #1261

.gitignore

@@ -12,6 +12,7 @@ dist/
 
 # IDE
 .vscode/
+.idea/
 
 # Environment files
 .env

examples/react-17/src/Highlight.tsx

@@ -11,7 +11,7 @@ type HighlightHitParams<THit> = {
    *
    * You can use the array syntax to reference nested attributes.
    */
-  attribute: keyof THit | string[];
+  attribute: keyof THit | (string | number)[];
   /**
    * The tag name to use for highlighted parts.
    *

examples/twitter-compose-with-typeahead/src/Autocomplete.tsx

@@ -235,7 +235,7 @@ function AccountItem({ hit }: AccountItemProps) {
 
 type HighlightParams<THit> = {
   hit: THit;
-  attribute: keyof THit | string[];
+  attribute: keyof THit | (string | number)[];
 };
 
 function Highlight<THit>({ hit, attribute }: HighlightParams<THit>) {

packages/autocomplete-preset-algolia/src/highlight/ParseAlgoliaHitParams.ts

@@ -1,4 +1,4 @@
 export type ParseAlgoliaHitParams<TItem> = {
   hit: TItem;
-  attribute: keyof TItem | string[];
+  attribute: keyof TItem | (string | number)[];
 };

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitHighlight.test.ts

@@ -167,6 +167,35 @@ describe('parseAlgoliaHitHighlight', () => {
     ]);
   });
 
+  test('returns the highlighted parts of the hit with an array result', () => {
+    expect(
+      parseAlgoliaHitHighlight({
+        attribute: ['titles', 1],
+        hit: {
+          objectID: '1',
+          titles: ['Hello', 'world'],
+          _highlightResult: {
+            titles: [{
+              value: 'Hello',
+              matchLevel: 'none',
+              matchedWords: [],
+            }, {
+              value: '__aa-highlight__world__/aa-highlight__',
+              matchLevel: 'full',
+              matchedWords: ['world'],
+              fullyHighlighted: true,
+            }]
+          },
+        },
+      })
+    ).toEqual([
+      {
+        isHighlighted: true,
+        value: 'world',
+      },
+    ]);
+  });
+
   test('returns the attribute value if the attribute cannot be highlighted', () => {
     expect(
       parseAlgoliaHitHighlight({

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseHighlight.test.ts

@@ -122,7 +122,7 @@ describe('parseAlgoliaHitReverseHighlight', () => {
     ]);
   });
 
-  test('returns the highlighted parts of the hit with a nested array attribute containing a dot', () => {
+  test('returns the reverse-highlighted parts of the hit with a nested array attribute containing a dot', () => {
     expect(
       parseAlgoliaHitReverseHighlight({
         attribute: ['hierarchy', 'lvl0.inside'],
@@ -164,6 +164,35 @@ describe('parseAlgoliaHitReverseHighlight', () => {
     ]);
   });
 
+  test('returns the reverse-highlighted parts of the hit with an array result', () => {
+    expect(
+      parseAlgoliaHitReverseHighlight({
+        attribute: ['titles', 1],
+        hit: {
+          objectID: '1',
+          titles: ['Hello', 'world'],
+          _highlightResult: {
+            titles: [{
+              value: 'Hello',
+              matchLevel: 'none',
+              matchedWords: [],
+            }, {
+              value: '__aa-highlight__world__/aa-highlight__',
+              matchLevel: 'full',
+              matchedWords: ['world'],
+              fullyHighlighted: true,
+            }]
+          },
+        },
+      })
+    ).toEqual([
+      {
+        isHighlighted: false,
+        value: 'world',
+      },
+    ]);
+  });
+
   test('returns the non-highlighted parts when every part matches', () => {
     expect(
       parseAlgoliaHitReverseHighlight({

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseSnippet.test.ts

@@ -116,7 +116,7 @@ describe('parseAlgoliaHitReverseSnippet', () => {
     ]);
   });
 
-  test('returns the highlighted snippet parts of the hit with a nested array attribute containing a dot', () => {
+  test('returns the reverse-highlighted snippet parts of the hit with a nested array attribute containing a dot', () => {
     expect(
       parseAlgoliaHitReverseSnippet({
         attribute: ['hierarchy', 'lvl0.inside'],
@@ -155,6 +155,32 @@ describe('parseAlgoliaHitReverseSnippet', () => {
     ]);
   });
 
+  test('returns the reverse-highlighted snippet parts of the hit with an array result', () => {
+    expect(
+      parseAlgoliaHitReverseSnippet({
+        attribute: ['titles', 1],
+        hit: {
+          objectID: '1',
+          titles: ['Hello', 'world'],
+          _snippetResult: {
+            titles: [{
+              value: 'Hello',
+              matchLevel: 'none',
+            }, {
+              value: '__aa-highlight__world__/aa-highlight__',
+              matchLevel: 'full',
+            }]
+          },
+        },
+      })
+    ).toEqual([
+      {
+        isHighlighted: false,
+        value: 'world',
+      },
+    ]);
+  });
+
   test('returns the non-highlighted parts when every part matches', () => {
     expect(
       parseAlgoliaHitReverseSnippet({

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitSnippet.test.ts

@@ -155,6 +155,32 @@ describe('parseAlgoliaHitSnippet', () => {
     ]);
   });
 
+  test('returns the highlighted snippet parts of the hit with an array result', () => {
+    expect(
+      parseAlgoliaHitSnippet({
+        attribute: ['titles', 1],
+        hit: {
+          objectID: '1',
+          titles: ['Hello', 'world'],
+          _snippetResult: {
+            titles: [{
+              value: 'Hello',
+              matchLevel: 'none',
+            }, {
+              value: '__aa-highlight__world__/aa-highlight__',
+              matchLevel: 'full',
+            }]
+          },
+        },
+      })
+    ).toEqual([
+      {
+        isHighlighted: true,
+        value: 'world',
+      },
+    ]);
+  });
+
   test('returns the attribute value if the attribute cannot be snippeted', () => {
     expect(
       parseAlgoliaHitSnippet({

packages/autocomplete-shared/src/getAttributeValueByPath.ts

@@ -1,6 +1,6 @@
 export function getAttributeValueByPath<TRecord>(
   record: TRecord,
-  path: string[]
+  path: (string | number)[]
 ): any {
   return path.reduce((current, key) => current && current[key], record);
 }

packages/autocomplete-shared/src/js/HighlightHitParams.ts

@@ -8,7 +8,7 @@ export type HighlightHitParams<THit> = {
    *
    * You can use the array syntax to reference nested attributes.
    */
-  attribute: keyof THit | string[];
+  attribute: keyof THit | (string | number)[];
   /**
    * The tag name to use for highlighted parts.
    *