@constructor-io/constructorio-ui-autocomplete 1.15.1 → 1.16.1

package/lib/mjs/utils.js

@@ -107,25 +107,61 @@ export const getCioClient = (apiKey, cioJsClientOptions) => {
     }
     return null;
 };
-export const getActiveSectionsWithData = (activeSections, sectionResults) => {
+export const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    activeSections?.forEach((config) => {
-        const { identifier } = config;
-        let data;
-        if (isCustomSection(config)) {
+    activeSections?.forEach((sectionConfig, index) => {
+        const { identifier } = sectionConfig;
+        let sectionData;
+        if (isCustomSection(sectionConfig)) {
             // Copy id from data to the top level
-            data = config.data.map((item) => ({
+            sectionData = sectionConfig.data.map((item) => ({
                 ...item,
                 id: item?.id || item?.data?.id,
             }));
         }
         else {
-            data = sectionResults[identifier];
+            sectionData = sectionResults[identifier];
         }
-        if (Array.isArray(data)) {
-            activeSectionsWithData.push({ ...config, data });
+        if (Array.isArray(sectionData)) {
+            const section = {
+                ...sectionConfig,
+                data: sectionData,
+            };
+            // If ref passed as part of `SectionConfiguration`, use it.
+            // Otherwise, use the ref from our library generated refs array
+            const userDefinedSectionRef = sectionConfig.ref;
+            const libraryGeneratedSectionRef = sectionsRefs.current[index];
+            section.ref = userDefinedSectionRef || libraryGeneratedSectionRef;
+            activeSectionsWithData.push(section);
         }
     });
     return activeSectionsWithData;
 };
 export const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+export const trackRecommendationView = (target, activeSectionsWithData, cioClient) => {
+    if (target.dataset.cnstrcRecommendationsPodId) {
+        // Pull recommendations from activeSectionsWithData by podId surfaced on target
+        const recommendationSection = activeSectionsWithData.find((section) => section.identifier === target.dataset.cnstrcRecommendationsPodId);
+        const recommendationItems = recommendationSection?.data.map((item) => ({
+            itemId: item.data?.id,
+            itemName: item.value,
+            variationId: item.data?.variation_id,
+        }));
+        cioClient?.tracker.trackRecommendationView({
+            podId: target.dataset.cnstrcRecommendationsPodId,
+            numResultsViewed: recommendationItems?.length || 0,
+            url: window.location.href,
+            section: target.dataset.cnstrcSection,
+            items: recommendationItems,
+        });
+    }
+};
+export const getItemsForActiveSections = (activeSectionsWithData) => {
+    const items = [];
+    activeSectionsWithData?.forEach((config) => {
+        if (config?.data) {
+            items.push(...config.data);
+        }
+    });
+    return items;
+};

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.15.1';
+export default '1.16.1';

package/lib/types/components/Autocomplete/CioAutocompleteProvider.d.ts

@@ -22,6 +22,7 @@ export declare const CioAutocompleteContext: React.Context<{
         className: string;
         'data-testid': string;
     };
+    getSectionProps: (section: import("../../types").Section) => import("../../types").HTMLPropsWithCioDataAttributes<any>;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 import { AutocompleteSubmitEvent } from './types';
 export declare const apiKey = "key_M57QS8SMPdLdLx4x";
 export declare const componentDescription = "- import `CioAutocomplete` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed. All other values are optional.\n- Use different props to configure the behavior of this component.\n- The following stories shows how different props affect the component's behavior\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
-export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed to the `useCioAutocomplete` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  query: string, // current input field value\n  sections: [{...}], // array of sections data to render in menu list\n  getFormProps: () => ({...})), // prop getter for jsx form element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container\n  getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result\n\n  // available for use, but not required for all use cases\n  selectedItem: item, // undefined or current selected item (via hover or arrow keys)\n  isOpen: boolean, // current state of the menu list\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\n  getLabelProps: () => ({...})), // prop getter for a jsx label element\n  cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n\nThe following stories show how different options affect the hook's behavior!\n";
+export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed to the `useCioAutocomplete` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  query: string, // current input field value\n  sections: [{...}], // array of sections data to render in menu list\n  getFormProps: () => ({...})), // prop getter for jsx form element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container\n  getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result\n  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.\n\n  // available for use, but not required for all use cases\n  selectedItem: item, // undefined or current selected item (via hover or arrow keys)\n  isOpen: boolean, // current state of the menu list\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\n  getLabelProps: () => ({...})), // prop getter for a jsx label element\n  cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n\nThe following stories show how different options affect the hook's behavior!\n";
 export declare const sectionsDescription = "- by default, typing a query will fetch data for search suggestions and Products\n- to override this, pass an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n  {\n    identifier: 'Search Suggestions',\n    type: 'autocomplete',\n    numResults: 8\n  },\n  {\n    identifier: 'Products',\n    type: 'autocomplete',\n    numResults: 8\n  }\n]\n```\n";
 export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- the onSubmit callback function will be called each time the user submits the form\n- the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F Use the Storybook Canvas Actions tab to explore the behavior of all of these `OnEvent` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.";
 export declare const zeroStateDescription = "- when the text input field has no text, we call this zero state\n- by default, the autocomplete shows nothing in the menu it's for zero state\n- to show zero state results, pass an array of section objects for `zeroStateSections`\n- when `zeroStateSections` has sections, the menu will open on user focus by default\n- set `openOnFocus` to false, to only show `zeroStateSections` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input\n- the order of the objects in the `zeroStateSections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";

package/lib/types/hooks/useCioAutocomplete.d.ts

@@ -1,9 +1,9 @@
-import { CioAutocompleteProps, UserDefinedSection } from '../types';
+import { CioAutocompleteProps, Section, UserDefinedSection, HTMLPropsWithCioDataAttributes } from '../types';
 export declare const defaultSections: UserDefinedSection[];
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
-    sections: import("../types").Section[];
+    sections: Section[];
     request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
     featureToggles: {
         featureDisplaySearchSuggestionImages: boolean;
@@ -23,6 +23,7 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
         className: string;
         'data-testid': string;
     };
+    getSectionProps: (section: Section) => HTMLPropsWithCioDataAttributes<any>;
     setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;

package/lib/types/hooks/useRecommendationsObserver.d.ts

@@ -0,0 +1,17 @@
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
+import ConstructorIO from '@constructor-io/constructorio-client-javascript';
+import { Section } from '../types';
+/**
+ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
+ * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
+ * That is done by passing the ref of each recommendation section to the IntersectionObserver.
+ * The refs are either passed as a prop in `SectionConfiguration` or created by the library by default.
+ * Either way the refs are stored in the sections array.
+ *
+ * @param menuIsOpen - A boolean indicating whether the menu is open.
+ * @param sections - An array of sections to observe.
+ * @param constructorIO - An instance of the ConstructorIO client.
+ * @param trackRecommendationView - A callback function to track the recommendation view event.
+ */
+declare function useRecommendationsObserver(menuIsOpen: boolean, sections: Section[], constructorIO: Nullable<ConstructorIO>, trackRecommendationView: (target: HTMLElement, sections: Section[], constructorIO: Nullable<ConstructorIO>) => void): void;
+export default useRecommendationsObserver;

package/lib/types/hooks/useSections.d.ts

@@ -1,9 +1,9 @@
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AdvancedParameters, UserDefinedSection } from '../types';
+import { AdvancedParameters, Section, UserDefinedSection } from '../types';
 export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections: UserDefinedSection[] | undefined, advancedParameters?: AdvancedParameters): {
     activeSections: UserDefinedSection[];
-    activeSectionsWithData: import("../types").Section[];
+    activeSectionsWithData: Section[];
     zeroStateActiveSections: false | UserDefinedSection[] | undefined;
     request: Partial<import("@constructor-io/constructorio-client-javascript/lib/types").AutocompleteRequestType>;
 };

package/lib/types/types.d.ts

@@ -63,6 +63,7 @@ export type SectionConfiguration = {
     displayName?: string;
     numResults?: number;
     displaySearchTermHighlights?: boolean;
+    ref?: React.RefObject<HTMLElement>;
 };
 export interface AutocompleteSection extends SectionConfiguration {
     type?: 'autocomplete';
@@ -91,3 +92,6 @@ export type InGroupSuggestion = SearchSuggestion & {
     groupId: string;
     groupName: string;
 };
+export type HTMLPropsWithCioDataAttributes<T = any> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T> & {
+    [key: `data-cnstrc-${string}`]: any;
+};

package/lib/types/utils.d.ts

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { AutocompleteRequestType, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { AutocompleteRequestType, Nullable, ConstructorClientOptions } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { OnSubmit, Item, Section, UserDefinedSection, SectionsData } from './types';
 export type GetItemPosition = (args: {
     item: Item;
@@ -37,6 +37,8 @@ export declare const stringifyWithDefaults: (obj: {
 }) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
-export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData) => Section[];
+export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
+export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
+export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];
 export {};

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.15.1";
+declare const _default: "1.16.1";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.15.1",
+  "version": "1.16.1",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -11,11 +11,13 @@
     },
     ".": {
       "import": "./lib/mjs/index.js",
-      "require": "./lib/cjs/index.js"
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
     },
     "./cjs": {
       "import": "./lib/cjs/index.js",
-      "require": "./lib/cjs/index.js"
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
     },
     "./constructorio-ui-autocomplete-bundled": {
       "import": "./dist/constructorio-ui-autocomplete-bundled.js",

package/lib/cjs/hooks/useItems.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const useItems = (activeSectionsWithData) => {
-    const items = [];
-    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
-        if (config === null || config === void 0 ? void 0 : config.data) {
-            items.push(...config.data);
-        }
-    });
-    return items;
-};
-exports.default = useItems;

package/lib/mjs/hooks/useItems.js

@@ -1,10 +0,0 @@
-const useItems = (activeSectionsWithData) => {
-    const items = [];
-    activeSectionsWithData?.forEach((config) => {
-        if (config?.data) {
-            items.push(...config.data);
-        }
-    });
-    return items;
-};
-export default useItems;

package/lib/types/hooks/useItems.d.ts

@@ -1,3 +0,0 @@
-import { Item, Section } from '../types';
-declare const useItems: (activeSectionsWithData: Section[]) => Item[];
-export default useItems;