Add cnstrc data attributes (#167)

Author: mocca102

src/components/Autocomplete/AutocompleteResults/AutocompleteResults.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode, useContext } from 'react';
-import { GetItemProps, Section } from '../../../types';
+import { Item, Section } from '../../../types';
 import { toKebabCase } from '../../../utils';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import SectionItemsList from '../SectionItemsList/SectionItemsList';
 
 export type RenderResults = (renderResultsArguments: {
   sections: Section[];
-  getItemProps: GetItemProps;
+  getItemProps: (item: Item) => any;
 }) => ReactNode;
 
 type AutocompleteResultsProps = {

src/hooks/useCioAutocomplete.ts

@@ -9,6 +9,7 @@ import {
   Section,
   UserDefinedSection,
   HTMLPropsWithCioDataAttributes,
+  Item,
 } from '../types';
 import usePrevious from './usePrevious';
 import {
@@ -122,7 +123,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     closeMenu,
     highlightedIndex,
     getInputProps,
-    getItemProps,
+    getItemProps: getItemPropsDownShift,
   } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
 
   // Log console errors
@@ -142,19 +143,24 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
       ...getMenuProps(),
       className: 'cio-results',
       'data-testid': 'cio-results',
+      'data-cnstrc-autosuggest': '',
     }),
     getLabelProps,
     openMenu,
     closeMenu,
-    getItemProps: (item) => {
+    getItemProps: (item: Item) => {
       const { index, sectionId } = getItemPosition({ item, items });
       const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
 
       return {
-        ...getItemProps({ item, index }),
+        ...getItemPropsDownShift({ item, index }),
         // @deprecated `sectionItemTestId` will be removed as a className in the next major version
         className: `cio-item ${sectionItemTestId}`,
         'data-testid': sectionItemTestId,
+        'data-cnstrc-item-section': item.section,
+        'data-cnstrc-item-group': item.groupId,
+        'data-cnstrc-item-name': item.value,
+        'data-cnstrc-item-id': item.data?.id,
       };
     },
     getInputProps: () => ({
@@ -193,6 +199,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
       },
       className: 'cio-input',
       'data-testid': 'cio-input',
+      'data-cnstrc-search-input': '',
       placeholder,
       onKeyDownCapture: ({ code, key, nativeEvent }) => {
         const isEnter = code === 'Enter' || key === 'Enter';
@@ -234,6 +241,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
       },
       className: 'cio-form',
       'data-testid': 'cio-form',
+      'data-cnstrc-search-form': '',
     }),
     getSectionProps: (section: Section) => {
       // @deprecated ClassNames derived from this fn will be removed in the next major version