@constructor-io/constructorio-ui-autocomplete 1.25.3 → 1.25.5

package/lib/cjs/components/Autocomplete/SearchInput/SearchInput.js

@@ -17,7 +17,15 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, "data-cnstrc-search-submit-btn": true, type: 'submit', "aria-label": 'Submit Search' },
+        react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', "data-cnstrc-search-submit-btn": true, onClick: (e) => {
+                var _a;
+                if (!inputProps.value) {
+                    e.preventDefault();
+                    if (inputProps.id) {
+                        (_a = document.getElementById(inputProps.id)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+            }, type: 'submit', "aria-label": 'Submit Search' },
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -60,12 +60,26 @@ const useCioAutocomplete = (options) => {
         openMenu,
         closeMenu,
         getItemProps: (item) => {
-            var _a;
+            var _a, _b;
             const { index, sectionId } = (0, helpers_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
+            // Products always have links, Search Suggestions with getSearchResultsUrl have links
+            const hasLink = ((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) || (item.section === 'Search Suggestions' && getSearchResultsUrl) || false;
+            const nonInteractiveItemsProps = {
+                tabIndex: 0,
+                onKeyDown: (event) => {
+                    const { code, key } = event;
+                    const isEnter = code === 'Enter' || key === 'Enter';
+                    if (isEnter) {
+                        event.preventDefault();
+                        // Trigger default click behavior
+                        getItemPropsDownShift({ item, index }).onClick(event);
+                    }
+                },
+            };
+            return Object.assign(Object.assign(Object.assign({}, 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': (_a = item.data) === null || _a === void 0 ? void 0 : _a.id });
+                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': (_b = item.data) === null || _b === void 0 ? void 0 : _b.id }), (hasLink ? {} : nonInteractiveItemsProps));
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.25.3';
+exports.default = '1.25.5';

package/lib/mjs/components/Autocomplete/SearchInput/SearchInput.js

@@ -14,7 +14,14 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             React.createElement("div", { className: 'cio-icon' },
                 React.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, "data-cnstrc-search-submit-btn": true, type: 'submit', "aria-label": 'Submit Search' },
+        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', "data-cnstrc-search-submit-btn": true, onClick: (e) => {
+                if (!inputProps.value) {
+                    e.preventDefault();
+                    if (inputProps.id) {
+                        document.getElementById(inputProps.id)?.focus();
+                    }
+                }
+            }, type: 'submit', "aria-label": 'Submit Search' },
             React.createElement("div", { className: 'cio-icon' },
                 React.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -66,6 +66,20 @@ const useCioAutocomplete = (options) => {
         getItemProps: (item) => {
             const { index, sectionId } = getItemPosition({ item, items });
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
+            // Products always have links, Search Suggestions with getSearchResultsUrl have links
+            const hasLink = item.data?.url || (item.section === 'Search Suggestions' && getSearchResultsUrl) || false;
+            const nonInteractiveItemsProps = {
+                tabIndex: 0,
+                onKeyDown: (event) => {
+                    const { code, key } = event;
+                    const isEnter = code === 'Enter' || key === 'Enter';
+                    if (isEnter) {
+                        event.preventDefault();
+                        // Trigger default click behavior
+                        getItemPropsDownShift({ item, index }).onClick(event);
+                    }
+                },
+            };
             return {
                 ...getItemPropsDownShift({ item, index }),
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
@@ -75,6 +89,7 @@ const useCioAutocomplete = (options) => {
                 'data-cnstrc-item-group': item.groupId,
                 'data-cnstrc-item-name': item.value,
                 'data-cnstrc-item-id': item.data?.id,
+                ...(hasLink ? {} : nonInteractiveItemsProps),
             };
         },
         getInputProps: () => ({

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.25.3';
+export default '1.25.5';

package/lib/styles.css

@@ -31,9 +31,6 @@
   cursor: pointer;
 }
 
-.cio-autocomplete button:disabled {
-  cursor: not-allowed;
-}
 
 .cio-autocomplete .cio-submit-btn {
   right: -21px;

package/lib/types/types.d.ts

@@ -4,8 +4,17 @@ import ConstructorIOClient from '@constructor-io/constructorio-client-javascript
 import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType, ConstructorClientOptions, RecommendationsParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type { IAutocompleteParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
 export type CioClientConfig = {
+    /**
+     * Your Constructor API key. Either `apiKey` or `cioJsClient` are required
+     */
     apiKey?: string;
+    /**
+     * Optional custom constructor instance. Either `apiKey` or `cioJsClient` are required
+     */
     cioJsClient?: ConstructorIOClient;
+    /**
+     * Pass a `cioJsClientOptions` object to customize the client's configurations w/o creating a new instance of `ConstructorIOClient`. You can learn more about the possible values [Here](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html)
+     */
     cioJsClientOptions?: ConstructorClientOptions;
 };
 export interface AdvancedParametersBase {
@@ -24,17 +33,58 @@ type OptionalItemsComboboxProps<Item> = Partial<UseComboboxProps<Item>> & {
 };
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<Item> & {
+    /**
+     * Set to `false` to show suggestions only after a user clears their query,
+     * but not when they initially select the input
+     */
     openOnFocus?: boolean;
+    /**
+     * Transforms a `SearchSuggestion` into the desired URL string to be used when rendering anchor tags
+     * i.e. <a href=getSearchResultsUrl([selected_search_suggestion])>[Search Suggestion]</a>
+     */
     getSearchResultsUrl?: (item: SearchSuggestion) => string;
+    /**
+     * Callback function that runs when the user submits a search.
+     * Usually used to trigger a redirect
+     */
     onSubmit: OnSubmit;
+    /**
+     * Callback function that runs when the user focuses on the input
+     */
     onFocus?: () => void;
+    /**
+     * Callback function that runs when the user modifies input
+     */
     onChange?: (input: string) => void;
+    /**
+     * Search input placeholder
+     */
     placeholder?: string;
+    /**
+     * Children to be rendered according to the RenderProps pattern
+     */
     children?: ReactNode;
+    /**
+     * Configure the sections rendered, based on the user's input. This can be either Constructor-powered sections,
+     * or your own custom sections. Defaults to Products and Search Suggestion sections powered by Constructor
+     */
     sections?: UserDefinedSection[];
+    /**
+     * Configure either Constructor-powered sections or power your own custom sections,
+     * to be rendered for [Autocomplete Zero-State](link-tbd)
+     */
     zeroStateSections?: UserDefinedSection[];
+    /**
+     * Configure the parent container's class. Defaults to `cio-autocomplete`
+     */
     autocompleteClassName?: string;
+    /**
+     * See Advanced Parameters
+     */
     advancedParameters?: AdvancedParameters;
+    /**
+     * Search input default value
+     */
     defaultInput?: string;
 };
 /**

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.25.3";
+declare const _default: "1.25.5";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.25.3",
+  "version": "1.25.5",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,9 +36,11 @@
     "test-storybook": "test-storybook",
     "test-storybook:watch": "test-storybook --watch",
     "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
-    "build-storybook": "storybook build -o 'docs'",
+    "build-storybook": "storybook build --docs -o 'docs'",
+    "storybook-docs-dev": "storybook dev --docs -p 6007",
     "serve-built-storybook": "npx http-server docs",
-    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build"
+    "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build",
+    "doctoc-readme": "doctoc README.md --title '## 📌 Table of Contents'"
   },
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -84,6 +86,7 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
+    "doctoc": "^2.2.1",
     "eslint": "^8.23.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",