@constructor-io/constructorio-ui-autocomplete 1.20.2 → 1.20.3

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

@@ -29,8 +29,9 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     }
     if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length))
         return null;
+    // @deprecated `cio-sectionName` will be removed in the next major release
     return (react_1.default.createElement("li", Object.assign({}, getSectionProps(section)),
-        react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
+        react_1.default.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionTitle)),
         react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 function SectionItemsList(props) {

package/lib/cjs/constants.js

@@ -182,7 +182,7 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
   right: 24px;
 }
 
-.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
+.cio-autocomplete.custom-autocomplete-styles .cio-section-name {
   margin: 5px 3px;
 }
 

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -79,7 +79,9 @@ const useCioAutocomplete = (options) => {
         getItemProps: (item) => {
             const { index, sectionId } = (0, utils_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, getItemProps({ item, index })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
+            return Object.assign(Object.assign({}, getItemProps({ item, index })), { 
+                // @deprecated `sectionItemTestId` will be removed as a className in the next major version
+                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {
@@ -143,33 +145,46 @@ const useCioAutocomplete = (options) => {
             'data-testid': 'cio-form',
         }),
         getSectionProps: (section) => {
-            var _a;
-            const { type } = section;
-            let sectionTitle;
-            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            var _a, _b;
+            // @deprecated ClassNames derived from this fn will be removed in the next major version
+            const getDeprecatedClassNames = () => {
+                const { type } = section;
+                let sectionTitle;
+                const indexSectionName = type !== 'custom' && section.indexSectionName
+                    ? (0, utils_1.toKebabCase)(section.indexSectionName)
+                    : '';
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                }
+                return `${sectionTitle} ${indexSectionName}`;
+            };
+            // Always add the indexSectionName (defaults to Products) as a class to the section container for the styles
             // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
             // ... they should be styled accordingly
-            const indexSectionName = type !== 'custom' && section.indexSectionName ? (0, utils_1.toKebabCase)(section.indexSectionName) : '';
-            switch (type) {
-                case 'recommendations':
-                    sectionTitle = section.podId;
-                    break;
-                case 'autocomplete':
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-                case 'custom':
-                    sectionTitle = section.displayName;
-                    break;
-                default:
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-            }
+            const sectionListingType = (0, typeGuards_1.isCustomSection)(section)
+                ? 'custom'
+                : (0, utils_1.toKebabCase)(section.indexSectionName || ((_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section) || 'Products');
             const attributes = {
-                className: `${sectionTitle} cio-section  ${indexSectionName}`,
+                className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
-                'data-cnstrc-section': (_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section,
+                'data-cnstrc-section': (_b = section.data[0]) === null || _b === void 0 ? void 0 : _b.section,
             };
+            if ((0, typeGuards_1.isCustomSection)(section)) {
+                attributes['data-cnstrc-custom-section'] = true;
+                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+            }
             // Add data attributes for recommendations
             if ((0, typeGuards_1.isRecommendationsSection)(section)) {
                 attributes['data-cnstrc-recommendations'] = true;

package/lib/cjs/version.js

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

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

@@ -25,8 +25,9 @@ const DefaultRenderSectionItemsList = function ({ section }) {
     }
     if (!section?.data?.length)
         return null;
+    // @deprecated `cio-sectionName` will be removed in the next major release
     return (React.createElement("li", { ...getSectionProps(section) },
-        React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
+        React.createElement("h5", { className: 'cio-section-name cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionTitle)),
         React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };
 export default function SectionItemsList(props) {

package/lib/mjs/constants.js

@@ -178,7 +178,7 @@ import '@constructor-io/constructorio-ui-autocomplete/styles.css';
   right: 24px;
 }
 
-.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
+.cio-autocomplete.custom-autocomplete-styles .cio-section-name {
   margin: 5px 3px;
 }
 

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -7,7 +7,7 @@ import { getItemPosition, getItemsForActiveSections, getFeatures, trackRecommend
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
-import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
+import { isAutocompleteSection, isCustomSection, isRecommendationsSection } from '../typeGuards';
 export const defaultSections = [
     {
         indexSectionName: 'Search Suggestions',
@@ -81,6 +81,7 @@ const useCioAutocomplete = (options) => {
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
             return {
                 ...getItemProps({ item, index }),
+                // @deprecated `sectionItemTestId` will be removed as a className in the next major version
                 className: `cio-item ${sectionItemTestId}`,
                 'data-testid': sectionItemTestId,
             };
@@ -154,32 +155,45 @@ const useCioAutocomplete = (options) => {
             'data-testid': 'cio-form',
         }),
         getSectionProps: (section) => {
-            const { type } = section;
-            let sectionTitle;
-            // Add the indexSectionName as a class to the section container to make sure it gets the styles
+            // @deprecated ClassNames derived from this fn will be removed in the next major version
+            const getDeprecatedClassNames = () => {
+                const { type } = section;
+                let sectionTitle;
+                const indexSectionName = type !== 'custom' && section.indexSectionName
+                    ? toKebabCase(section.indexSectionName)
+                    : '';
+                switch (type) {
+                    case 'recommendations':
+                        sectionTitle = section.podId;
+                        break;
+                    case 'autocomplete':
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                    case 'custom':
+                        sectionTitle = section.displayName;
+                        break;
+                    default:
+                        sectionTitle = section.displayName || section.indexSectionName;
+                        break;
+                }
+                return `${sectionTitle} ${indexSectionName}`;
+            };
+            // Always add the indexSectionName (defaults to Products) as a class to the section container for the styles
             // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
             // ... they should be styled accordingly
-            const indexSectionName = type !== 'custom' && section.indexSectionName ? toKebabCase(section.indexSectionName) : '';
-            switch (type) {
-                case 'recommendations':
-                    sectionTitle = section.podId;
-                    break;
-                case 'autocomplete':
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-                case 'custom':
-                    sectionTitle = section.displayName;
-                    break;
-                default:
-                    sectionTitle = section.displayName || section.indexSectionName;
-                    break;
-            }
+            const sectionListingType = isCustomSection(section)
+                ? 'custom'
+                : toKebabCase(section.indexSectionName || section.data[0]?.section || 'Products');
             const attributes = {
-                className: `${sectionTitle} cio-section  ${indexSectionName}`,
+                className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
                 'data-cnstrc-section': section.data[0]?.section,
             };
+            if (isCustomSection(section)) {
+                attributes['data-cnstrc-custom-section'] = true;
+                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+            }
             // Add data attributes for recommendations
             if (isRecommendationsSection(section)) {
                 attributes['data-cnstrc-recommendations'] = true;

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.20.2';
+export default '1.20.3';

package/lib/styles.css

@@ -61,7 +61,9 @@
   margin-top: 5px;
 }
 
-.cio-autocomplete .cio-sectionName {
+/* @deprecated in favor of .cio-section-name */
+.cio-autocomplete .cio-sectionName,
+.cio-autocomplete .cio-section-name {
   margin: 15px 0;
   font-size: 1rem;
 }
@@ -70,7 +72,9 @@
   padding: 0;
 }
 
-.cio-autocomplete .cio-item.cio-item-SearchSuggestions {
+/* @deprecated in favor of .cio-section-search-suggestions */
+.cio-autocomplete .cio-item.cio-item-SearchSuggestions,
+.cio-autocomplete .cio-section-search-suggestions .cio-item {
   flex-direction: row;
   min-width: 160px;
   justify-content: space-between;
@@ -92,11 +96,15 @@
   border-radius: 4px;
 }
 
-.cio-autocomplete .products {
+/* @deprecated in favor of .cio-section-products */
+.cio-autocomplete .products,
+.cio-autocomplete .cio-section-products {
   padding: 0 5px;
 }
 
-.cio-autocomplete .products .cio-item {
+/* @deprecated in favor of .cio-section-products .cio-item */
+.cio-autocomplete .products .cio-item,
+.cio-autocomplete .cio-section-products .cio-item {
   display: inline-flex;
   align-items: center;
   width: 25%;
@@ -134,4 +142,4 @@
 .cio-autocomplete .cio-suggestion-count {
   font-size: 0.8rem;
   margin-left: 8px;
-}
+}

package/lib/types/constants.d.ts

@@ -25,7 +25,7 @@ export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) =>
 export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
 export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
 export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
-export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .products p {\n  padding: 5px 5px 0;\n}\n```\n";
+export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-section-name {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .products p {\n  padding: 5px 5px 0;\n}\n```\n";
 export declare const advancedParametersDescription = "The stories below show how optional fields within this `advancedParameters` object that can be used to fine-tune the autosuggest data returned from constructor's servers.";
 export declare const advancedParametersDefaultDescription = "Passing an `advancedParameters` object is optional. Passing an empty object for the `advancedParameters` field behaves the same as not passing an `advancedParameters` object at all.";
 export declare const termsWithGroupSuggestionsDescription = "Pass integers for the `numTermsWithGroupSuggestions` and `numGroupsSuggestedPerTerm` fields to add suggested group filters to search term suggestions. Not all suggested search terms will have group filters, so these integers are upper limits, used to specify the maximum number of terms with group filters and the maximum number of suggested group filters per term.\n\nTo see this in action:\n1. Type \"pan\" in the example below.\n  - Notice how the user is presented with a search term of \"all week flex pant\" as well as \"all week flex pant in Chinos\" and \"all week flex pant baby in Athleisure Pants & Joggers\"\n2. Navigate to the \"Terms With Group Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `numTermsWithGroupSuggestions` to `3` and `numGroupsSuggestedPerTerm` to `1`\n4. Next, type \"pan\" in the example autocomplete input field.\n  - Notice how the user is presented with three different search terms that have a maximum of one \"in {group}\" suggestion each";

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.20.2";
+declare const _default: "1.20.3";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",