@constructor-io/constructorio-ui-autocomplete 1.7.0 → 1.7.2

package/lib/types/constants.d.ts

@@ -1,5 +1,5 @@
 import { AutocompleteSubmitEvent } from './types';
-export declare const apiKey = "key_Gep3oQOu5IMcNh9A";
+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 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";

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

@@ -1,9 +1,9 @@
-import { CioAutocompleteProps, Item, Section, UserDefinedSection } from '../types';
+import { CioAutocompleteProps, UserDefinedSection } from '../types';
 export declare const defaultSections: UserDefinedSection[];
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
-    sections: Section[];
+    sections: import("../types").Section[];
     isOpen: boolean;
     getMenuProps: () => any;
     getLabelProps: (options?: import("downshift").UseComboboxGetLabelPropsOptions | undefined) => any;
@@ -21,6 +21,6 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     cioClient: import("@constructor-io/constructorio-client-javascript/lib/types/types").Nullable<import("@constructor-io/constructorio-client-javascript")>;
     autocompleteClassName: string;
-    selectedItem: Item;
+    selectedItem: import("../types").Item;
 };
 export default useCioAutocomplete;

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

@@ -0,0 +1,2 @@
+declare const useConsoleErrors: (sections: any, zeroStateSections: any) => void;
+export default useConsoleErrors;

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

@@ -9,7 +9,6 @@ type UseDownShiftOptions = {
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
-    onChange?: (string: any) => void;
 };
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;

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

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

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

@@ -0,0 +1,8 @@
+import ConstructorIO from '@constructor-io/constructorio-client-javascript';
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types/types';
+import { AdvancedParameters, 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[];
+    zeroStateActiveSections: false | UserDefinedSection[] | undefined;
+};

package/lib/types/types.d.ts

@@ -13,7 +13,7 @@ export type CioAutocompleteProps = CioClientConfig & {
     openOnFocus?: boolean;
     onSubmit: OnSubmit;
     onFocus?: () => void;
-    onChange?: () => void;
+    onChange?: (string: any) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];

package/lib/types/utils.d.ts

@@ -1,5 +1,5 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { OnSubmit, Item } from './types';
+import { OnSubmit, Item, Section, UserDefinedSection, AutocompleteResultSections } from './types';
 export type GetItemPosition = (args: {
     item: Item;
     items: Item[];
@@ -23,12 +23,14 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
         };
     };
 };
-export declare const defaultOnSubmitCode = "\"onSubmit\": (submitEvent) => console.dir(submitEvent)";
-export declare const defaultArgumentsCode: (apiKey: string) => string;
+export declare const functionStrings: {
+    onSubmit: string;
+};
 export declare const stringifyWithDefaults: (obj: {
     apiKey: string;
     onSubmit: OnSubmit;
-}) => any;
+}) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
+export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: AutocompleteResultSections) => Section[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -23,6 +23,7 @@
   "scripts": {
     "lint": "eslint src --ext js,ts,jsx,tsx",
     "check-types": "npx tsc --noEmit",
+    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause'",
     "copy-styles": "cp src/styles.css lib/styles.css",
     "prepare": "husky install",
     "dev": "storybook dev -p 6006",
@@ -82,6 +83,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.1",
+    "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.15.2",