@constructor-io/constructorio-ui-autocomplete 1.1.8 → 1.1.10

package/lib/mjs/utils.js

@@ -0,0 +1,58 @@
+export const getIndexOffset = ({ activeSections, sectionIdentifier }) => {
+    let indexOffset = 0;
+    if (sectionIdentifier) {
+        activeSections.find((config) => {
+            if (config?.identifier === sectionIdentifier)
+                return true; // break out of loop
+            indexOffset += config?.data?.length || 0;
+            return false; // continue
+        });
+    }
+    return indexOffset;
+};
+export const camelToStartCase = (camelCaseString) => camelCaseString
+    // insert a space before all caps
+    .replace(/([A-Z])/g, ' $1')
+    // uppercase the first character
+    .replace(/^./, (str) => str.toUpperCase());
+export function isTrackingRequestSent(trackingRequestUrl) {
+    // eslint-disable-next-line
+    const trackingRequestsQueue = window.localStorage?._constructorio_requests;
+    return (trackingRequestsQueue &&
+        JSON.parse(trackingRequestsQueue)?.some((request) => request?.url?.includes(trackingRequestUrl)));
+}
+export function clearConstructorRequests() {
+    // eslint-disable-next-line
+    if (window.localStorage?._constructorio_requests) {
+        window.localStorage.removeItem('_constructorio_requests');
+    }
+}
+// Function to emulate pausing between interactions
+export function sleep(ms) {
+    // eslint-disable-next-line
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+export const getStoryParams = (storyCode, templateCode, importCode) => {
+    const code = `
+${importCode}
+${storyCode}
+${templateCode}
+`;
+    return {
+        docs: {
+            source: {
+                code,
+                language: 'jsx',
+                format: true,
+                type: 'code',
+            },
+        },
+    };
+};
+export const stringify = (obj) => JSON.stringify(obj, null, '  ');
+export const disableStoryActions = (story) => {
+    // eslint-disable-next-line
+    story.parameters.actions = { argTypesRegex: null };
+};
+//# sourceMappingURL=utils.js.map

package/lib/mjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,cAAc,GAAmB,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACtF,IAAI,WAAW,GAAG,CAAC,CAAC;IAEpB,IAAI,iBAAiB,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC,MAA4B,EAAE,EAAE;YACnD,IAAI,MAAM,EAAE,UAAU,KAAK,iBAAiB;gBAAE,OAAO,IAAI,CAAC,CAAC,oBAAoB;YAC/E,WAAW,IAAI,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC;YACzC,OAAO,KAAK,CAAC,CAAC,WAAW;QAC3B,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,gBAAgB,GAAqB,CAAC,eAAe,EAAE,EAAE,CACpE,eAAe;IACb,iCAAiC;KAChC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;IAC3B,gCAAgC;KAC/B,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;AAE/C,MAAM,UAAU,qBAAqB,CAAC,kBAAkB;IACtD,2BAA2B;IAC3B,MAAM,qBAAqB,GAAG,MAAM,CAAC,YAAY,EAAE,uBAAuB,CAAC;IAE3E,OAAO,CACL,qBAAqB;QACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CACjG,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,2BAA2B;IAC3B,IAAI,MAAM,CAAC,YAAY,EAAE,uBAAuB,EAAE;QAChD,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;KAC3D;AACH,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,KAAK,CAAC,EAAE;IACtB,2BAA2B;IAC3B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3D,CAAC;AACD,mFAAmF;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IACpE,MAAM,IAAI,GAAG;EACb,UAAU;EACV,SAAS;EACT,YAAY;CACb,CAAC;IAEA,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAE,MAAM;aACb;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,2BAA2B;IAC3B,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AACrD,CAAC,CAAC"}

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { GetItemProps, SectionConfiguration } from '../../../types';
+export type RenderResults = (renderResultsArguments: {
+    sections: SectionConfiguration[];
+    getItemProps: GetItemProps;
+}) => ReactNode;
+type AutocompleteResultsProps = {
+    children?: RenderResults | ReactNode;
+};
+export default function AutocompleteResults(props: AutocompleteResultsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CioAutocompleteProps } from '../../../types';
+export default function CioAutocomplete(props: CioAutocompleteProps): JSX.Element;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CioAutocompleteProps } from '../../types';
+export declare const CioAutocompleteContext: React.Context<{
+    query: string;
+    sections: import("../../types").SectionConfiguration[];
+    isOpen: boolean;
+    getMenuProps: () => any;
+    getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
+    openMenu: () => void;
+    closeMenu: () => void;
+    getItemProps: ({ item, index, sectionIdentifier }: {
+        item: any;
+        index?: number | undefined;
+        sectionIdentifier?: string | undefined;
+    }) => any;
+    getInputProps: () => any;
+    getFormProps: () => {
+        onSubmit: (event: any) => {
+            query: string;
+        };
+        className: string;
+        'data-testid': string;
+    };
+    setQuery: React.Dispatch<React.SetStateAction<string>>;
+    cioClient: import("@constructor-io/constructorio-client-javascript") | undefined;
+    autocompleteClassName: string;
+}>;
+export default function CioAutocompleteProvider(props: CioAutocompleteProps): JSX.Element;

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

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { CioAutocompleteProps } from '../../../types';
+type SearchInputProps = {
+    children?: (args: Partial<Omit<CioAutocompleteProps, 'children'>>) => ReactElement;
+};
+export default function SearchInput(props: SearchInputProps): JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { Item } from '../../../types';
+export interface SectionItemProps {
+    item: Item;
+    index: number;
+    sectionIdentifier: string;
+    children?: ReactNode;
+    key?: string;
+}
+export default function SectionItem(props: SectionItemProps): JSX.Element;

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

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import { SectionConfiguration } from '../../../types';
+export type RenderSectionItemsList = (renderResultsArguments: {
+    section: SectionConfiguration;
+}) => ReactElement;
+type SectionItemsListProps = {
+    section: SectionConfiguration;
+    children?: RenderSectionItemsList;
+    key?: string;
+};
+export default function SectionItemsList(props: SectionItemsListProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/lib/types/constants.d.ts

@@ -0,0 +1,23 @@
+export declare const apiKey = "key_Gep3oQOu5IMcNh9A";
+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, 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 handles state management & data fetching, but leaves rendering logic up to you\n- To use this hook, an `apiKey` or `cioJsClient` are required, all other values are optional.\n- Pass different options to the `useCioAutocomplete` hook to configure behavior.\n- The following stories shows how different options affect the hook's behavior\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  getLabelProps: () => ({...})), // optional: prop getter for jsx label element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element serving as menu container\n  getItemProps: () => ({...})), // prop getter for jsx element serving as each result\n  isOpen: boolean,\n\n  // available for advanced hooks integration use cases\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\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";
+export declare const sectionsDescription = "- by default, typing a query will fetch data for search suggestions and Products\n- to override this, pass a 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- if provided, 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";
+export declare const apiKeyDescription = "Pass an `apiKey` to request results from constructor's servers";
+export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from constructor's servers\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)";
+export declare const placeholderDescription = "Pass a `placeholder` to override the default input field placeholder text shown to users before they start typing their query";
+export declare const searchSuggestionsDescription = "Override default `sections` to only suggest search terms";
+export declare const productsDescription = "Override default `sections` to only suggested products";
+export declare const contentDescription = "Override default `sections` to only suggest content";
+export declare const numResultsDescription = "Override default `numResults` to only suggest 2 products per query";
+export declare const sectionOrderDescription = "Override default `numResults` to suggest products, then terms";
+export declare const recommendationsDescription = "Use constructor's recommendations service, with `\"type\": \"recommendations\"`";
+export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
+export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
+export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";
+export declare const onSubmitDescription = "Pass an `onSubmit` callback function to execute some code after a user submits the search form.\n\n  Your callback function will be invoked with a submit event containing useful metadata about the submit event:\n  - if the user submits the text input:\n    - the `query` field will provide the value of that input field\n  - if the user selects a suggested item from the dropdown list:\n    - the `originalQuery` field will provide the value of the input field that generated the selected item\n    - an `item` object with information about the suggestion that the user selected";
+export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
+export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
+export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
+export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n  padding: 5px 5px 0;\n}\n```\n";

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

@@ -0,0 +1,29 @@
+import { CioAutocompleteProps, SectionConfiguration } from '../types';
+export declare const defaultSections: SectionConfiguration[];
+export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
+declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
+    query: string;
+    sections: SectionConfiguration[];
+    isOpen: boolean;
+    getMenuProps: () => any;
+    getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
+    openMenu: () => void;
+    closeMenu: () => void;
+    getItemProps: ({ item, index, sectionIdentifier }: {
+        item: any;
+        index?: number | undefined;
+        sectionIdentifier?: string | undefined;
+    }) => any;
+    getInputProps: () => any;
+    getFormProps: () => {
+        onSubmit: (event: any) => {
+            query: string;
+        };
+        className: string;
+        'data-testid': string;
+    };
+    setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    cioClient: import("@constructor-io/constructorio-client-javascript") | undefined;
+    autocompleteClassName: string;
+};
+export default useCioAutocomplete;

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

@@ -0,0 +1,15 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+export type CioClientConfig = {
+    apiKey?: string;
+    cioJsClient?: ConstructorIOClient;
+};
+export type TrackSearchSubmit = (term: string, parameters: {
+    original_query: string;
+}) => true | Error;
+export type TrackAutocompleteSelect = (term: string, parameters: {
+    original_query: string;
+    section: string;
+}) => true | Error;
+type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | undefined;
+declare const useCioClient: UseCioClient;
+export default useCioClient;

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

@@ -0,0 +1,2 @@
+declare const useDebounce: (value: string, delay?: number) => string;
+export default useDebounce;

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

@@ -0,0 +1,4 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { AutocompleteResultSections, SectionConfiguration } from '../types';
+declare const useDebouncedFetchSection: (query: string, cioClient?: ConstructorIOClient, autocompleteSections?: SectionConfiguration[]) => AutocompleteResultSections;
+export default useDebouncedFetchSection;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { UseComboboxReturnValue } from 'downshift';
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { Item, OnSubmit } from '../types';
+type UseDownShiftOptions = {
+    setQuery: React.Dispatch<React.SetStateAction<string>>;
+    items: Item[];
+    onSubmit?: OnSubmit;
+    previousQuery?: string;
+    cioClient?: ConstructorIOClient;
+    onChange?: (string: any) => void;
+};
+export type DownShift = UseComboboxReturnValue<Item>;
+type UseDownShift = (options: UseDownShiftOptions) => DownShift;
+declare const useDownShift: UseDownShift;
+export default useDownShift;

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

@@ -0,0 +1,4 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { AutocompleteResultSections, RecommendationsSectionConfiguration } from '../types';
+declare const useFetchRecommendationPod: (cioClient: ConstructorIOClient | undefined, recommendationPods: RecommendationsSectionConfiguration[]) => AutocompleteResultSections;
+export default useFetchRecommendationPod;

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

@@ -0,0 +1,2 @@
+declare const usePrevious: (value: string) => string | undefined;
+export default usePrevious;

package/lib/types/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AutocompleteResults } from './components/Autocomplete/AutocompleteResults/AutocompleteResults';
+export { default as CioAutocomplete } from './components/Autocomplete/CioAutocomplete/CioAutocomplete';
+export { default as SearchInput } from './components/Autocomplete/SearchInput/SearchInput';
+export { default as SectionItem } from './components/Autocomplete/SectionItem/SectionItem';
+export { default as SectionItemsList } from './components/Autocomplete/SectionItemsList/SectionItemsList';
+export { default as useCioAutocomplete } from './hooks/useCioAutocomplete';

package/lib/types/stories/Autocomplete/argTypes.d.ts

@@ -0,0 +1,62 @@
+export declare const argTypes: {
+    placeholder: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    apiKey: {
+        type: {
+            name: string;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    onSubmit: {
+        type: {
+            name: string;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: null;
+    };
+    onFocus: {
+        type: {
+            name: string;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: null;
+    };
+    openOnFocus: {
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+};

package/lib/types/typeGuards.d.ts

@@ -0,0 +1,2 @@
+import { Item, Product } from './types';
+export declare function isProduct(item: Item): item is Product;

package/lib/types/types.d.ts

@@ -0,0 +1,131 @@
+import { GetItemPropsOptions } from 'downshift';
+import { FormEvent, ReactNode } from 'react';
+import { CioClientConfig } from './hooks/useCioClient';
+export type CioAutocompleteProps = CioClientConfig & {
+    openOnFocus?: boolean;
+    onSubmit?: OnSubmit;
+    onFocus?: () => void;
+    onChange?: () => void;
+    placeholder?: string;
+    children?: ReactNode;
+    sections?: SectionConfiguration[];
+    zeroStateSections?: SectionConfiguration[];
+    autocompleteClassName?: string;
+};
+export type FormSubmitEvent = FormEvent<HTMLFormElement>;
+type AutocompleteSubmitEvent = {
+    item: Item;
+    originalQuery: string;
+} | {
+    query: string;
+};
+export type OnSubmit = (event: AutocompleteSubmitEvent) => unknown;
+export type DownshiftGetItemPropsOptions = GetItemPropsOptions<Item>;
+export type DownshiftGetItemProps = (options: GetItemPropsOptions<Item>) => object;
+export type ItemPropsOptions = DownshiftGetItemPropsOptions & {
+    sectionName: string;
+    indexOffset?: number;
+};
+export type GetItemProps = (options: ItemPropsOptions) => object;
+export interface ItemBase extends Record<string, any> {
+    id?: string;
+    url?: string;
+    value?: string;
+    section: string;
+    data?: Record<string, any>;
+}
+export type Item = Product | SearchSuggestion | ItemBase;
+export type SectionOrder = string[];
+export type GetAutocompleteResultsOptions = {
+    [sectionIdentifier: string]: {
+        numResults: number;
+    };
+};
+/** CIO API Response Data */
+export type AutocompleteResultSections = {
+    [key: string]: Item[] | undefined;
+};
+type BaseSectionConfiguration = {
+    identifier: string;
+    displayName?: string;
+    numResults?: number;
+};
+interface AutocompleteSectionConfiguration extends BaseSectionConfiguration {
+    type?: 'autocomplete';
+    data?: Item[];
+}
+export interface RecommendationsSectionConfiguration extends BaseSectionConfiguration {
+    type: 'recommendations';
+    data?: Item[];
+    itemIds?: string[];
+    section?: string;
+    term?: string;
+}
+interface CustomSectionConfiguration extends BaseSectionConfiguration {
+    type: 'custom';
+    data: Item[];
+}
+export type SectionConfiguration = AutocompleteSectionConfiguration | RecommendationsSectionConfiguration | CustomSectionConfiguration;
+export type Product = {
+    data: {
+        facets: {
+            name: string;
+            values: string[];
+        }[];
+        group_ids: string[];
+        id: string;
+        image_url: string;
+        price: number;
+        swatchColor: string;
+        url: string;
+        variation_id: string;
+    };
+    is_slotted: boolean;
+    labels: Record<string, unknown>;
+    matched_terms: string[];
+    value: string;
+    section: 'Products';
+};
+export type SearchSuggestion = {
+    data: {
+        id: string;
+        url?: string;
+    };
+    id: string;
+    is_slotted: boolean;
+    labels: Record<string, unknown>;
+    matched_terms: string[];
+    value: string;
+    section: 'Search Suggestions';
+};
+export type RecommendationPodResponse = {
+    pod: {
+        id: string;
+        display_name: string;
+    };
+    results: Product[];
+    total_num_results: number;
+};
+export interface RecommendationsApiResponse {
+    request: {
+        feature_variants?: {
+            auto_generated_refined_query_rules: string;
+            filter_items: string;
+            manual_searchandizing: string;
+            personalization: string;
+            query_items: string;
+        };
+        features?: {
+            auto_generated_refined_query_rules: boolean;
+            filter_items: boolean;
+            manual_searchandizing: boolean;
+            personalization: boolean;
+            query_items: boolean;
+        };
+        num_results: number;
+        pod_id: string;
+    };
+    result_id: string;
+    response: RecommendationPodResponse;
+}
+export {};

package/lib/types/utils.d.ts

@@ -0,0 +1,24 @@
+import { SectionConfiguration } from './types';
+export type GetIndexOffset = (args: {
+    activeSections: SectionConfiguration[];
+    sectionIdentifier: string;
+}) => number;
+export declare const getIndexOffset: GetIndexOffset;
+type CamelToStartCase = (camelCaseString: string) => string;
+export declare const camelToStartCase: CamelToStartCase;
+export declare function isTrackingRequestSent(trackingRequestUrl: any): any;
+export declare function clearConstructorRequests(): void;
+export declare function sleep(ms: any): Promise<unknown>;
+export declare const getStoryParams: (storyCode: any, templateCode: any, importCode: any) => {
+    docs: {
+        source: {
+            code: string;
+            language: string;
+            format: boolean;
+            type: string;
+        };
+    };
+};
+export declare const stringify: (obj: any) => string;
+export declare const disableStoryActions: (story: any) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -50,12 +50,10 @@
     "@storybook/addon-essentials": "^7.0.0-beta.15",
     "@storybook/addon-interactions": "^7.0.0-beta.15",
     "@storybook/addon-links": "^7.0.0-beta.15",
-    "@storybook/addons": "^7.0.0-beta.15",
     "@storybook/jest": "^0.0.11-next.0",
     "@storybook/react-webpack5": "7.0.0-beta.15",
     "@storybook/test-runner": "^0.10.0-next.4",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.0.0-beta.15",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.38.0",