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

package/lib/cjs/components/Autocomplete/Autocomplete.css

@@ -0,0 +1,110 @@
+/* Autosuggest Container */
+.cio-autocomplete {
+  position: relative;
+  height: 2rem;
+  padding: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Autosuggest Form */
+.cio-autocomplete .cio-form {
+  position: relative;
+  height: 100%;
+  width: 24rem;
+}
+
+.cio-autocomplete .cio-input {
+  width: 100%;
+  height: 100%;
+  border: 1px solid gray;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 1rem;
+}
+
+.cio-autocomplete .cio-submit-btn,
+.cio-autocomplete .cio-clear-btn {
+  position: absolute;
+  top: 1px;
+  bottom: -1px;
+  right: -21px;
+  cursor: pointer;
+}
+
+.cio-autocomplete button:disabled {
+  cursor: not-allowed;
+}
+
+.cio-autocomplete .cio-submit-btn {
+  right: -21px;
+}
+
+.cio-autocomplete .cio-clear-btn {
+  right: 10px;
+}
+
+.cio-autocomplete .cio-icon {
+  display: flex;
+  justify-content: center;
+}
+
+/* Autosuggest Results */
+.cio-autocomplete .cio-results {
+  position: absolute;
+  background-color: white;
+  gap: 20px;
+  padding-left: 0px;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  z-index: 1000;
+  margin-top: 5px;
+}
+
+.cio-autocomplete .cio-sectionName {
+  margin: 15px 0;
+  font-size: 1rem;
+}
+
+.cio-autocomplete .cio-section-items {
+  padding: 0;
+}
+
+.cio-autocomplete .cio-item-SearchSuggestions {
+  flex-direction: column;
+  min-width: 160px;
+}
+
+.cio-autocomplete .cio-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  list-style: none;
+  padding: 5px;
+  border-bottom: 3px solid transparent;
+}
+
+.cio-autocomplete .cio-item[aria-selected='true'] {
+  background-color: hsl(0, 0%, 90%);
+  border-radius: 4px;
+}
+
+.cio-autocomplete .Products .cio-item {
+  display: inline-flex;
+  align-items: center;
+  width: 25%;
+  height: 140px;
+  padding: 5px 0;
+}
+
+.cio-autocomplete .cio-item p {
+  margin: 0;
+  overflow: hidden;
+}
+
+.cio-autocomplete .cio-item img {
+  width: 100%;
+  max-width: 100px;
+  max-height: 100px;
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+const SectionItemsList_1 = require("../SectionItemsList/SectionItemsList");
+const DefaultRenderResults = ({ sections }) => sections === null || sections === void 0 ? void 0 : sections.map((section) => (react_1.default.createElement(SectionItemsList_1.default, { section: section, key: section.identifier })));
+function AutocompleteResults(props) {
+    const { children = DefaultRenderResults } = props;
+    const { sections, isOpen, getMenuProps, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    const hasResults = sections && sections.some((section) => { var _a; return (_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length; });
+    let content;
+    if (isOpen && hasResults) {
+        content = typeof children === 'function' ? children({ sections, getItemProps }) : children;
+    }
+    else {
+        content = null;
+    }
+    const menuProps = Object.assign({}, getMenuProps());
+    return react_1.default.createElement("ul", Object.assign({}, menuProps), content);
+}
+exports.default = AutocompleteResults;
+//# sourceMappingURL=AutocompleteResults.js.map

package/lib/cjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteResults.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/AutocompleteResults/AutocompleteResults.tsx"],"names":[],"mappings":";;AAAA,iCAAqD;AAErD,wEAAoE;AACpE,2EAAoE;AAWpE,MAAM,oBAAoB,GAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3D,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,CAAC,OAA6B,EAAE,EAAE,CAAC,CAC/C,8BAAC,0BAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,UAAU,GAAI,CAChE,CAAC,CAAC;AAEL,SAAwB,mBAAmB,CAAC,KAA+B;IACzE,MAAM,EAAE,QAAQ,GAAG,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAE5F,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,MAAM,CAAA,EAAA,CAAC,CAAC;IAEjF,IAAI,OAAO,CAAC;IACZ,IAAI,MAAM,IAAI,UAAU,EAAE;QACxB,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC5F;SAAM;QACL,OAAO,GAAG,IAAI,CAAC;KAChB;IAED,MAAM,SAAS,qBACV,YAAY,EAAE,CAClB,CAAC;IAEF,OAAO,sDAAQ,SAAS,GAAG,OAAO,CAAM,CAAC;AAC3C,CAAC;AAlBD,sCAkBC"}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+const AutocompleteResults_1 = require("../AutocompleteResults/AutocompleteResults");
+const SearchInput_1 = require("../SearchInput/SearchInput");
+function CioAutocomplete(props) {
+    const { children } = props;
+    if (children) {
+        return react_1.default.createElement(CioAutocompleteProvider_1.default, Object.assign({}, props), children);
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(CioAutocompleteProvider_1.default, Object.assign({}, props),
+            react_1.default.createElement(SearchInput_1.default, null),
+            react_1.default.createElement(AutocompleteResults_1.default, null))));
+}
+exports.default = CioAutocomplete;
+//# sourceMappingURL=CioAutocomplete.js.map

package/lib/cjs/components/Autocomplete/CioAutocomplete/CioAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CioAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/CioAutocomplete/CioAutocomplete.tsx"],"names":[],"mappings":";;AAAA,iCAA0B;AAC1B,wEAAiE;AACjE,oFAA6E;AAC7E,4DAAqD;AAGrD,SAAwB,eAAe,CAAC,KAA2B;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAO,8BAAC,iCAAuB,oBAAK,KAAK,GAAG,QAAQ,CAA2B,CAAC;KACjF;IAED,OAAO,CACL;QACE,8BAAC,iCAAuB,oBAAK,KAAK;YAChC,8BAAC,qBAAW,OAAG;YACf,8BAAC,6BAAmB,OAAG,CACC,CACtB,CACP,CAAC;AACJ,CAAC;AAfD,kCAeC"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CioAutocompleteContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useCioAutocomplete_1 = require("../../hooks/useCioAutocomplete");
+exports.CioAutocompleteContext = (0, react_1.createContext)({});
+function CioAutocompleteProvider(props) {
+    const { children } = props, restProps = tslib_1.__rest(props, ["children"]);
+    const cioAutocomplete = (0, useCioAutocomplete_1.default)(restProps);
+    return (react_1.default.createElement(exports.CioAutocompleteContext.Provider, { value: cioAutocomplete },
+        react_1.default.createElement("div", { className: cioAutocomplete.autocompleteClassName }, children)));
+}
+exports.default = CioAutocompleteProvider;
+//# sourceMappingURL=CioAutocompleteProvider.js.map

package/lib/cjs/components/Autocomplete/CioAutocompleteProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CioAutocompleteProvider.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/CioAutocompleteProvider.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6C;AAC7C,uEAAgE;AAGnD,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EACjD,EAA2C,CAC5C,CAAC;AAEF,SAAwB,uBAAuB,CAAC,KAA2B;IACzE,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,kBAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IACzC,MAAM,eAAe,GAAG,IAAA,4BAAkB,EAAC,SAAS,CAAC,CAAC;IAEtD,OAAO,CACL,8BAAC,8BAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACrD,uCAAK,SAAS,EAAE,eAAe,CAAC,qBAAqB,IAAG,QAAQ,CAAO,CACvC,CACnC,CAAC;AACJ,CAAC;AATD,0CASC"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQuery }) {
+    const inputProps = getInputProps();
+    return (react_1.default.createElement("form", Object.assign({}, getFormProps()),
+        react_1.default.createElement("label", Object.assign({}, getLabelProps(), { htmlFor: 'cio-input' }),
+            react_1.default.createElement("input", Object.assign({ id: 'cio-input' }, inputProps))),
+        react_1.default.createElement("button", { className: 'cio-clear-btn', "data-testid": 'cio-clear-btn', hidden: !inputProps.value, onClick: () => {
+                setQuery('');
+                if (inputProps.id) {
+                    setTimeout(() => { var _a; return (_a = document.getElementById(inputProps.id)) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+                }
+            }, type: 'button', "aria-label": 'Clear search field text' },
+            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, 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' }))))));
+}
+function SearchInput(props) {
+    const { children = DefaultRenderInput } = props;
+    const { getFormProps, getInputProps, getLabelProps, setQuery } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    return children({ getFormProps, getInputProps, getLabelProps, setQuery });
+}
+exports.default = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SearchInput/SearchInput.tsx"],"names":[],"mappings":";;AAAA,iCAAwD;AAExD,wEAAoE;AAMpE,SAAS,kBAAkB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE;IAClF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,CACL,wDAAU,YAAY,EAAE;QACtB,yDAAW,aAAa,EAAE,IAAE,OAAO,EAAC,WAAW;YAC7C,uDAAO,EAAE,EAAC,WAAW,IAAK,UAAU,EAAI,CAClC;QACR,0CACE,SAAS,EAAC,eAAe,iBACb,eAAe,EAC3B,MAAM,EAAE,CAAC,UAAU,CAAC,KAAK,EACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,IAAI,UAAU,CAAC,EAAE,EAAE;oBACjB,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,GAAG,CAAC,CAAC;iBACxE;YACH,CAAC,EACD,IAAI,EAAC,QAAQ,gBACF,yBAAyB;YACpC,uCAAK,SAAS,EAAC,UAAU;gBACvB,uCACE,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B;oBAClC,wCAAM,CAAC,EAAC,4HAA4H,GAAG,CACnI,CACF,CACC;QACT,0CACE,SAAS,EAAC,gBAAgB,iBACd,gBAAgB,EAC5B,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,QAAQ,gBACF,eAAe;YAC1B,uCAAK,SAAS,EAAC,UAAU;gBACvB,uCACE,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B;oBAClC,wCAAM,CAAC,EAAC,2VAA2V,GAAG,CAClW,CACF,CACC,CACJ,CACR,CAAC;AACJ,CAAC;AAED,SAAwB,WAAW,CAAC,KAAuB;IACzD,MAAM,EAAE,QAAQ,GAAG,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,GAC5D,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAErC,OAAO,QAAQ,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC5E,CAAC;AAND,8BAMC"}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+const typeGuards_1 = require("../../../typeGuards");
+function SectionItem(props) {
+    var _a;
+    const { item, index, sectionIdentifier, children } = props;
+    const { getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
+    let defaultChildren;
+    if ((0, typeGuards_1.isProduct)(item)) {
+        defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("img", { "data-testid": 'cio-img', src: (_a = item.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: item.value }),
+            react_1.default.createElement("p", { "data-testid": 'cio-text' }, item.value)));
+    }
+    else {
+        defaultChildren = item.value;
+    }
+    return (react_1.default.createElement("li", Object.assign({}, getItemProps({ item, index, sectionIdentifier })), children || defaultChildren));
+}
+exports.default = SectionItem;
+//# sourceMappingURL=SectionItem.js.map

package/lib/cjs/components/Autocomplete/SectionItem/SectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItem.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SectionItem/SectionItem.tsx"],"names":[],"mappings":";;AAAA,iCAAqD;AACrD,wEAAoE;AAEpE,oDAAgD;AAUhD,SAAwB,WAAW,CAAC,KAAuB;;IACzD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAE5D,IAAI,eAAe,CAAC;IACpB,IAAI,IAAA,sBAAS,EAAC,IAAI,CAAC,EAAE;QACnB,eAAe,GAAG,CAChB;YACE,sDAAiB,SAAS,EAAC,GAAG,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzE,oDAAe,UAAU,IAAE,IAAI,CAAC,KAAK,CAAK,CACzC,CACJ,CAAC;KACH;SAAM;QACL,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;KAC9B;IAED,OAAO,CACL,sDAAQ,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,GAAG,QAAQ,IAAI,eAAe,CAAM,CAC7F,CAAC;AACJ,CAAC;AAnBD,8BAmBC"}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const SectionItem_1 = require("../SectionItem/SectionItem");
+const utils_1 = require("../../../utils");
+// eslint-disable-next-line func-names
+const DefaultRenderSectionItemsList = function ({ section }) {
+    var _a;
+    const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
+    return (react_1.default.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
+        react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionName)),
+        react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement(SectionItem_1.default, { item: item, index: index, sectionIdentifier: section === null || section === void 0 ? void 0 : section.identifier, key: `${section === null || section === void 0 ? void 0 : section.identifier}_${(_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id}` }));
+        }))));
+};
+function SectionItemsList(props) {
+    const { section, children = DefaultRenderSectionItemsList } = props;
+    return children({ section });
+}
+exports.default = SectionItemsList;
+//# sourceMappingURL=SectionItemsList.js.map

package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemsList.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx"],"names":[],"mappings":";;AAAA,iCAA4C;AAE5C,4DAAqD;AACrD,0CAAkD;AAYlD,sCAAsC;AACtC,MAAM,6BAA6B,GAA2B,UAAU,EAAE,OAAO,EAAE;;IACjF,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAA,CAAC;IAEhE,OAAO,CACL,sCAAI,SAAS,EAAE,GAAG,WAAW,cAAc,EAAE,IAAI,EAAC,MAAM;QACtD,sCAAI,SAAS,EAAC,iBAAiB,yBAC5B,IAAA,wBAAgB,EAAC,WAAW,CAAC,CAC3B;QACL,sCAAI,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,IAC1C,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CACnC,8BAAC,qBAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EACtC,GAAG,EAAE,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,EAAE,EAAE,GAC/C,CACH,CAAA;SAAA,CAAC,CACC,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,SAAwB,gBAAgB,CAAC,KAA4B;IACnE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAG,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAEpE,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAC/B,CAAC;AAJD,mCAIC"}

package/lib/cjs/constants.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+// Autocomplete key index
+exports.apiKey = 'key_Gep3oQOu5IMcNh9A';
+/// //////////////////////////////
+// Storybook Folder Descriptions
+/// //////////////////////////////
+exports.componentDescription = `- import \`CioAutocomplete\` to render in your JSX.
+- This component handles state management, data fetching, and rendering logic.
+- To use this component, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
+- Use different props to configure the behavior of this component.
+- The following stories shows how different props affect the component's behavior
+
+> 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)
+`;
+exports.hookDescription = `- import \`useCioAutocomplete\` and call this custom hook in a functional component.
+- This hook handles state management & data fetching, but leaves rendering logic up to you
+- To use this hook, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
+- Pass different options to the \`useCioAutocomplete\` hook to configure behavior.
+- The following stories shows how different options affect the hook's behavior
+
+Calling the \`useCioAutocomplete\` hook returns an object with the following keys:
+
+\`\`\`jsx
+const {
+  // must be used for a hooks integrations
+  query: string, // current input field value
+  sections: [{...}], // array of sections data to render in menu list,
+  getFormProps: () => ({...})), // prop getter for jsx form element
+  getLabelProps: () => ({...})), // optional: prop getter for jsx label element
+  getInputProps: () => ({...})), // prop getter for jsx input element
+  getMenuProps: () => ({...})), // prop getter for jsx element serving as menu container
+  getItemProps: () => ({...})), // prop getter for jsx element serving as each result
+  isOpen: boolean,
+
+  // available for advanced hooks integration use cases
+  openMenu: () => void, // open menu
+  closeMenu: () => void, // close menu
+  setQuery: () => void, // update the current input field value
+  cioJsClient, // instance of constructorio-client-javascript
+ } = useCioAutocomplete(args);
+\`\`\`
+
+> 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)
+`;
+/// //////////////////////////////
+// Storybook Pages
+/// //////////////////////////////
+exports.sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
+- to override this, pass a an array of sections objects
+- the order of the objects in the \`sections\` array determines the order of the results
+- each section object must have an \`identifier\`
+- each section object can specify a \`type\`
+- each section object can override the default \`numResults\` of 8
+
+When no values are passed for the \`sections\` argument, the following defaults are used:
+
+\`\`\`jsx
+[
+  {
+    identifier: 'Search Suggestions',
+    type: 'autocomplete',
+    numResults: 8
+  },
+  {
+    identifier: 'Products',
+    type: 'autocomplete',
+    numResults: 8
+  }
+]
+\`\`\`
+`;
+exports.userEventsDescription = `- pass callback functions to respond to user events
+- if provided, the onFocus callback function will be called each time the user focuses on the text input field
+- if provided, the onChange callback function will be called each time the user changes the value in the text input field
+- if provided, the onSubmit callback function will be called each time the user submits the form
+- 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
+
+> ⚠️ NOTE ⚠️ 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.`;
+exports.zeroStateDescription = `- when the text input field has no text, we call this zero state
+- by default, the autocomplete shows nothing in the menu it's for zero state
+- to show zero state results, pass an array of section objects for \`zeroStateSections\`
+- when \`zeroStateSections\` has sections, the menu will open on user focus by default
+- 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
+- the order of the objects in the \`zeroStateSections\` array determines the order of the results
+- each section object must have an \`identifier\`
+- each section object can specify a \`type\`
+- each section object can override the default \`numResults\` of 8`;
+/// //////////////////////////////
+// Storybook Stories
+/// //////////////////////////////
+exports.apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
+exports.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
+
+> 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)`;
+exports.placeholderDescription = `Pass a \`placeholder\` to override the default input field placeholder text shown to users before they start typing their query`;
+exports.searchSuggestionsDescription = `Override default \`sections\` to only suggest search terms`;
+exports.productsDescription = `Override default \`sections\` to only suggested products`;
+exports.contentDescription = `Override default \`sections\` to only suggest content`;
+exports.numResultsDescription = `Override default \`numResults\` to only suggest 2 products per query`;
+exports.sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
+exports.recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
+exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
+exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
+exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
+exports.onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
+
+  Your callback function will be invoked with a submit event containing useful metadata about the submit event:
+  - if the user submits the text input:
+    - the \`query\` field will provide the value of that input field
+  - if the user selects a suggested item from the dropdown list:
+    - the \`originalQuery\` field will provide the value of the input field that generated the selected item
+    - an \`item\` object with information about the suggestion that the user selected`;
+exports.zeroStateSectionsDescription = `Use \`zeroStateSections\` to show suggestions after a user applies focus to the search input field and before they start typing a query`;
+exports.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`;
+exports.multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
+// from .storybook/custom-styles-story.css
+exports.customStylesDescription = `
+By default, importing react components or hooks from this library does not pull any css into your project.
+
+If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
+
+\`
+import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
+\`
+
+<i></i>
+
+- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
+- The path and syntax in the example above may change depending on your module bundling strategy
+- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
+- All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.
+- These starter styles are intended to be extended by layering in your own css rules
+- If you like, you can override the container's className like so:
+\`autocompleteClassName='custom-autocomplete-container'\`
+- If you like, you can pass additional className(s) of your choosing like so:
+\`autocompleteClassName='cio-autocomplete custom-autocomplete-container'\`
+
+
+\`\`\`css
+/* Custom Style Sheet */
+.cio-autocomplete.custom-autocomplete-styles form {
+  height: 44px;
+  width: 600px;
+  border-radius: 8px;
+  background-color: rgb(247, 247, 247);
+}
+
+.cio-autocomplete.custom-autocomplete-styles .cio-input {
+  font-weight: bold;
+}
+
+.cio-autocomplete.custom-autocomplete-styles .cio-form button {
+  width: 44px;
+}
+
+.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {
+  right: 24px;
+}
+
+.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
+  margin: 5px 3px;
+}
+
+.cio-autocomplete.custom-autocomplete-styles .cio-results {
+  width: 620px;
+  max-height: 334px;
+  overflow: hidden;
+  border-radius: 0px 0px 8px 8px;
+  color: rgb(51, 51, 51);
+}
+
+.cio-autocomplete.custom-autocomplete-styles .Products p {
+  padding: 5px 5px 0;
+}
+\`\`\`
+`;
+//# sourceMappingURL=constants.js.map

package/lib/cjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACZ,QAAA,MAAM,GAAG,sBAAsB,CAAC;AAE7C,kCAAkC;AAClC,gCAAgC;AAChC,kCAAkC;AAErB,QAAA,oBAAoB,GAAG;;;;;;;CAOnC,CAAC;AAEW,QAAA,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9B,CAAC;AAEF,kCAAkC;AAClC,kBAAkB;AAClB,kCAAkC;AAErB,QAAA,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlC,CAAC;AAEW,QAAA,qBAAqB,GAAG;;;;;;+bAM0Z,CAAC;AAEnb,QAAA,oBAAoB,GAAG;;;;;;;;mEAQ+B,CAAC;AAEpE,kCAAkC;AAClC,oBAAoB;AACpB,kCAAkC;AAErB,QAAA,iBAAiB,GAAG,kEAAkE,CAAC;AACvF,QAAA,sBAAsB,GAAG;;6LAEuJ,CAAC;AACjL,QAAA,sBAAsB,GAAG,iIAAiI,CAAC;AAC3J,QAAA,4BAA4B,GAAG,4DAA4D,CAAC;AAC5F,QAAA,mBAAmB,GAAG,0DAA0D,CAAC;AACjF,QAAA,kBAAkB,GAAG,uDAAuD,CAAC;AAC7E,QAAA,qBAAqB,GAAG,sEAAsE,CAAC;AAC/F,QAAA,uBAAuB,GAAG,iEAAiE,CAAC;AAC5F,QAAA,0BAA0B,GAAG,+EAA+E,CAAC;AAC7G,QAAA,wBAAwB,GAAG,+GAA+G,CAAC;AAC3I,QAAA,kBAAkB,GAAG,qHAAqH,CAAC;AAC3I,QAAA,mBAAmB,GAAG,0HAA0H,CAAC;AACjJ,QAAA,mBAAmB,GAAG;;;;;;;sFAOmD,CAAC;AAC1E,QAAA,4BAA4B,GAAG,yIAAyI,CAAC;AACzK,QAAA,sBAAsB,GAAG,mJAAmJ,CAAC;AAC7K,QAAA,2BAA2B,GAAG,uHAAuH,CAAC;AAEnK,0CAA0C;AAC7B,QAAA,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DtC,CAAC"}

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultSections = void 0;
+const react_1 = require("react");
+const useCioClient_1 = require("./useCioClient");
+const useDownShift_1 = require("./useDownShift");
+const useDebouncedFetchSections_1 = require("./useDebouncedFetchSections");
+const useFetchRecommendationPod_1 = require("./useFetchRecommendationPod");
+const usePrevious_1 = require("./usePrevious");
+const utils_1 = require("../utils");
+exports.defaultSections = [
+    {
+        identifier: 'Search Suggestions',
+        type: 'autocomplete',
+    },
+    {
+        identifier: 'Products',
+        type: 'autocomplete',
+    },
+];
+const useCioAutocomplete = (options) => {
+    const defaultPlaceholder = 'What can we help you find today?';
+    const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', } = options;
+    const [query, setQuery] = (0, react_1.useState)('');
+    const previousQuery = (0, usePrevious_1.default)(query);
+    const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
+    const zeroStateSectionsActive = !query.length && zeroStateSections;
+    let activeSections = zeroStateSectionsActive ? zeroStateSections : sections;
+    if (sections && !Array.isArray(sections)) {
+        // eslint-disable-next-line
+        console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
+        activeSections = [];
+    }
+    if (zeroStateSections && !Array.isArray(zeroStateSections)) {
+        // eslint-disable-next-line
+        console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
+        activeSections = [];
+    }
+    const autocompleteSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type);
+    const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
+    const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections);
+    const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
+    const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
+    const activeSectionsWithData = [];
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((config) => {
+        const { identifier, data: customData } = config;
+        const data = sectionResults[identifier] || customData;
+        if (data && data !== undefined) {
+            activeSectionsWithData.push(Object.assign(Object.assign({}, config), { data }));
+        }
+    });
+    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);
+        }
+    });
+    const downshift = (0, useDownShift_1.default)({ setQuery, onChange, items, onSubmit, cioClient, previousQuery });
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu } = downshift;
+    return {
+        query,
+        sections: activeSectionsWithData,
+        isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,
+        getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results' })),
+        getLabelProps,
+        openMenu,
+        closeMenu,
+        getItemProps: ({ item, index = 0, sectionIdentifier = 'Products' }) => {
+            const indexOffset = (0, utils_1.getIndexOffset)({
+                activeSections: activeSectionsWithData,
+                sectionIdentifier,
+            });
+            const sectionItemTestId = `cio-item-${sectionIdentifier.replace(' ', '')}`;
+            return Object.assign(Object.assign({}, downshift.getItemProps({ item, index: index + indexOffset })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
+        },
+        getInputProps: () => (Object.assign(Object.assign({}, downshift.getInputProps()), { value: query, onFocus: () => {
+                var _a;
+                if (options.onFocus) {
+                    options.onFocus();
+                }
+                if (zeroStateSectionsActive && openOnFocus !== false) {
+                    downshift.openMenu();
+                }
+                if (query === null || query === void 0 ? void 0 : query.length) {
+                    downshift.openMenu();
+                }
+                (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();
+            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder })),
+        getFormProps: () => ({
+            onSubmit: (event) => {
+                event.preventDefault();
+                if (onSubmit) {
+                    onSubmit({ query });
+                }
+                cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackSearchSubmit(query, { original_query: query });
+                return { query };
+            },
+            className: 'cio-form',
+            'data-testid': 'cio-form',
+        }),
+        setQuery,
+        cioClient,
+        autocompleteClassName,
+    };
+};
+exports.default = useCioAutocomplete;
+//# sourceMappingURL=useCioAutocomplete.js.map

package/lib/cjs/hooks/useCioAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCioAutocomplete.js","sourceRoot":"","sources":["../../../src/hooks/useCioAutocomplete.ts"],"names":[],"mappings":"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"}

package/lib/cjs/hooks/useCioClient.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const constructorio_client_javascript_1 = require("@constructor-io/constructorio-client-javascript");
+const useCioClient = ({ apiKey, cioJsClient }) => {
+    const [cioClient, setCioClient] = (0, react_1.useState)(cioJsClient);
+    (0, react_1.useEffect)(() => {
+        if (apiKey && !cioJsClient) {
+            const client = new constructorio_client_javascript_1.default({
+                apiKey,
+                sendTrackingEvents: true,
+            });
+            setCioClient(client);
+        }
+        else if (cioJsClient) {
+            setCioClient(cioJsClient);
+        }
+    }, [apiKey, cioJsClient]);
+    return cioClient;
+};
+exports.default = useCioClient;
+//# sourceMappingURL=useCioClient.js.map

package/lib/cjs/hooks/useCioClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCioClient.js","sourceRoot":"","sources":["../../../src/hooks/useCioClient.ts"],"names":[],"mappings":";;AAAA,iCAA4C;AAC5C,qGAAkF;AAuBlF,MAAM,YAAY,GAAiB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,CAAC,WAAW,EAAE;YAC1B,MAAM,MAAM,GAAG,IAAI,yCAAmB,CAAC;gBACrC,MAAM;gBACN,kBAAkB,EAAE,IAAI;aACzB,CAAC,CAAC;YAEH,YAAY,CAAC,MAAM,CAAC,CAAC;SACtB;aAAM,IAAI,WAAW,EAAE;YACtB,YAAY,CAAC,WAAW,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/lib/cjs/hooks/useDebounce.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// adapted from: https://usehooks.com/useDebounce/
+const useDebounce = (value, delay = 250) => {
+    // State and setters for debounced value
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        // Update debounced value after delay
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        // Cancel the timeout if value changes (also on delay change or unmount)
+        // This is how we prevent debounced value from updating if value is changed ...
+        // .. within the delay period. Timeout gets cleared and restarted.
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay] // Only re-call effect if value or delay changes
+    );
+    return debouncedValue;
+};
+exports.default = useDebounce;
+//# sourceMappingURL=useDebounce.js.map

package/lib/cjs/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.js","sourceRoot":"","sources":["../../../src/hooks/useDebounce.ts"],"names":[],"mappings":";;AAAA,iCAA4C;AAE5C,kDAAkD;AAClD,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,KAAK,GAAG,GAAG,EAAE,EAAE;IACjD,wCAAwC;IACxC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5D,IAAA,iBAAS,EACP,GAAG,EAAE;QACH,qCAAqC;QACrC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,wEAAwE;QACxE,+EAA+E;QAC/E,kEAAkE;QAClE,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,gDAAgD;KAChE,CAAC;IACF,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}