@constructor-io/constructorio-ui-autocomplete 1.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Constructor.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# Constructor.io Autocomplete UI Library
+
+## Introduction
+
+This UI Library provides React components that manage fetching and rendering logic for [Constructor.io's autosuggest services](https://constructor.io/products/autosuggest/).
+
+[Our storybook docs](https://constructor-io.github.io/constructorio-ui-autocomplete) are the best place to explore the behavior and configuration options for this UI Library.
+
+![Autosuggest](assets/autosuggest-ui.gif)
+
+## How to use this UI Library
+
+There are two main methods for consuming this UI Library in a React project:
+
+### Component based
+
+The `CioAutocomplete` component handles state management, data fetching, and rendering logic.
+
+```jsx
+import { CioAutocomplete } from 'constructorio-ui-autocomplete';
+
+function YourComponent() {
+  return (
+    <div>
+      <CioAutocomplete apiKey="key_Gep3oQOu5IMcNh9A" />
+    </div>
+  );
+```
+
+### Hook based
+
+The `useCioAutocomplete` hook handles state management and data fetching, but leaves rendering logic up to you.
+
+```jsx
+import { useCioAutocomplete } from 'constructorio-ui-autocomplete';
+
+function YourComponent() {
+  const {
+    isOpen,
+    sections,
+    getFormProps,
+    getLabelProps,
+    getInputProps,
+    getMenuProps,
+    getItemProps,
+    autocompleteClassName
+  } = useCioAutocomplete(args);
+
+  return (
+    <div className={autocompleteClassName}>
+      <form {...getFormProps()}>
+        <label {...getLabelProps()} hidden>
+          Search
+        </label>
+        <input {...getInputProps()} />
+      </form>
+      <div {...getMenuProps()}>
+        {isOpen && (
+          <>
+            {sections?.map((section) => (
+              <div key={section.identifier} className={section.identifier}>
+                <div className='cio-section'>
+                  <div className='cio-sectionName'>
+                    {section?.displayName || section.identifier}
+                  </div>
+                  <div className='cio-items'>
+                    {section?.data?.map((item, index) => (
+                      <div
+                        {...getItemProps({
+                          item,
+                          index,
+                          sectionIdentifier: section.identifier
+                        })}
+                        key={item?.data?.id}>
+                        <div>
+                          {isProduct(item) && (
+                            <img
+                              width='100%'
+                              src={item.data?.image_url}
+                              alt=''
+                              data-testid='cio-img'
+                            />
+                          )}
+                          <p>{item.value}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+## Custom Styling
+
+### Library defaults
+
+This library provides some default styles. These default styles can be used as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the `.cio-autocomplete` css selector.
+
+ - If you would like to remove all default styling, simply pass an empty string or your own custom autocomplete container className as the value for the `autocompleteClassName` option
+ - If you would like to layer your own custom styles on top of the library default styles, you can do so by passing additional className(s) of your choosing `autocompleteClassName='cio-autocomplete custom-autocomplete-container'`
+
+## Local Development
+
+### Development scripts
+
+```bash
+npm ci                  # install dependencies for local dev
+npm run dev             # start a local dev server for Storybook
+npm run lint            # run linter
+```
+
+### Maintain Library
+
+```bash
+npm run compile           # generate lib folder for publishing to npm
+npm run build-storybook   # generate storybook static bundle for deploy with GH Pages
+```
+
+## Supporting Docs
+
+- [Storybook 7 Introduction](https://storybook.js.org/docs/7.0/react/get-started/introduction)
+- [Typescript Docs](https://www.typescriptlang.org/docs/)

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,163 @@
+"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 = `
+This library provides some default styles. These default styles can be used as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the \`.cio-autocomplete\` css selector.
+
+ - If you would like to remove all default styling, simply pass an empty string or your own custom autocomplete container className as the value for the \`autocompleteClassName\` prop
+ - If you would like to layer your own custom styles on top of the library default styles, you can do so by passing additional className(s) of your choosing \`autocompleteClassName='cio-autocomplete custom-autocomplete-container'\`
+
+
+\`\`\`css
+.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CtC,CAAC"}