@constructor-io/constructorio-ui-plp 1.6.1 → 1.6.3

package/lib/cjs/components/CioPlpGrid/CioPlpGrid.js

@@ -70,6 +70,7 @@ function CioPlpGrid(props) {
                         react_1.default.createElement(Sort_1.default, Object.assign({ sortOptions: sort.sortOptions, isOpen: false }, sortConfigs)))),
                 react_1.default.createElement("div", { className: 'cio-product-tiles-container' },
                     react_1.default.createElement(MobileModal_1.default, { isOpen: isFilterOpen, setIsOpen: setIsFilterOpen },
+                        isSearchPage && (react_1.default.createElement(Groups_1.default, Object.assign({ groups: data.response.groups }, groupsConfigs))),
                         react_1.default.createElement(Filters_1.default, { facets: filters.facets })), (_e = (_d = data.response) === null || _d === void 0 ? void 0 : _d.results) === null || _e === void 0 ? void 0 :
                     _e.map((item) => (react_1.default.createElement("div", { className: 'cio-product-tile', key: item.itemId },
                         react_1.default.createElement(ProductCard_1.default, { key: item.itemId, item: item }))))),

package/lib/cjs/components/Filters/index.css

@@ -16,6 +16,7 @@
   background: none;
   display: flex;
   flex-direction: row;
+  gap: 8px;
   width: 100%;
   justify-content: space-between;
   align-items: center;
@@ -25,6 +26,7 @@
   padding: 0 0 8px 0;
   border-bottom: 1px solid #e1e1e1;
   margin-bottom: 12px;
+  text-align: start;
 }
 
 .cio-see-all {

package/lib/cjs/components/Groups/Groups.js

@@ -6,13 +6,15 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const useGroups_1 = tslib_1.__importDefault(require("../../hooks/useGroups"));
 const FilterOptionListRow_1 = tslib_1.__importDefault(require("../Filters/FilterOptionListRow"));
 function Groups(props) {
-    const { isCollapsed: isCollapsedDefault = false, title = 'Categories', children, groups } = props;
+    const { isCollapsed: isCollapsedDefault = false, title = 'Categories', children, groups, hideGroups, } = props;
     const useGroupsReturn = (0, useGroups_1.default)(props);
     const { optionsToRender, breadcrumbs, initialNumOptions, selectedGroupId, onOptionSelect, goToGroupFilter, isShowAll, setIsShowAll, } = useGroupsReturn;
     const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(isCollapsedDefault);
     if (breadcrumbs.length === 0 && optionsToRender.length === 0)
         return null;
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children(useGroupsReturn)) : (react_1.default.createElement(react_1.default.Fragment, null,
+    if (hideGroups)
+        return null;
+    return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children(useGroupsReturn)) : (react_1.default.createElement("div", { className: 'cio-groups-container' },
         react_1.default.createElement("button", { className: 'cio-filter-header', type: 'button', onClick: () => setIsCollapsed(!isCollapsed) },
             title,
             react_1.default.createElement("i", { className: `cio-arrow ${isCollapsed ? 'cio-arrow-up' : 'cio-arrow-down'}` })),

package/lib/cjs/version.js

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

package/lib/mjs/components/CioPlpGrid/CioPlpGrid.js

@@ -66,6 +66,7 @@ export default function CioPlpGrid(props) {
                         React.createElement(Sort, { sortOptions: sort.sortOptions, isOpen: false, ...sortConfigs }))),
                 React.createElement("div", { className: 'cio-product-tiles-container' },
                     React.createElement(MobileModal, { isOpen: isFilterOpen, setIsOpen: setIsFilterOpen },
+                        isSearchPage && (React.createElement(Groups, { groups: data.response.groups, ...groupsConfigs })),
                         React.createElement(Filters, { facets: filters.facets })),
                     data.response?.results?.map((item) => (React.createElement("div", { className: 'cio-product-tile', key: item.itemId },
                         React.createElement(ProductCard, { key: item.itemId, item: item }))))),

package/lib/mjs/components/Filters/index.css

@@ -16,6 +16,7 @@
   background: none;
   display: flex;
   flex-direction: row;
+  gap: 8px;
   width: 100%;
   justify-content: space-between;
   align-items: center;
@@ -25,6 +26,7 @@
   padding: 0 0 8px 0;
   border-bottom: 1px solid #e1e1e1;
   margin-bottom: 12px;
+  text-align: start;
 }
 
 .cio-see-all {

package/lib/mjs/components/Groups/Groups.js

@@ -3,13 +3,15 @@ import classNames from 'classnames';
 import useGroups from '../../hooks/useGroups';
 import FilterOptionListRow from '../Filters/FilterOptionListRow';
 export default function Groups(props) {
-    const { isCollapsed: isCollapsedDefault = false, title = 'Categories', children, groups } = props;
+    const { isCollapsed: isCollapsedDefault = false, title = 'Categories', children, groups, hideGroups, } = props;
     const useGroupsReturn = useGroups(props);
     const { optionsToRender, breadcrumbs, initialNumOptions, selectedGroupId, onOptionSelect, goToGroupFilter, isShowAll, setIsShowAll, } = useGroupsReturn;
     const [isCollapsed, setIsCollapsed] = useState(isCollapsedDefault);
     if (breadcrumbs.length === 0 && optionsToRender.length === 0)
         return null;
-    return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children(useGroupsReturn)) : (React.createElement(React.Fragment, null,
+    if (hideGroups)
+        return null;
+    return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children(useGroupsReturn)) : (React.createElement("div", { className: 'cio-groups-container' },
         React.createElement("button", { className: 'cio-filter-header', type: 'button', onClick: () => setIsCollapsed(!isCollapsed) },
             title,
             React.createElement("i", { className: `cio-arrow ${isCollapsed ? 'cio-arrow-up' : 'cio-arrow-down'}` })),

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.6.1';
+export default '1.6.3';

package/lib/types/components/CioPlpGrid/CioPlpGrid.d.ts

@@ -23,7 +23,12 @@ export type CioPlpGridProps = {
      */
     filterConfigs?: Omit<UseFilterProps, 'facets'>;
     /**
-     * Used to set the `initialNumOptions` to limit the number of options shown initially.
+     * Configuration options for the Groups component.
+     * - `initialNumOptions`: Number of group options to show initially (default: 5).
+     *   Remaining options are hidden under "Show All" button.
+     * - `isCollapsed`: Whether the groups section starts collapsed (default: false).
+     * - `title`: Custom title for the groups section (default: "Categories").
+     * - `hideGroups`: Whether to hide the groups component entirely (default: false).
      */
     groupsConfigs?: Omit<GroupsProps, 'groups'>;
 };

package/lib/types/components/Groups/Groups.d.ts

@@ -1,9 +1,25 @@
 import React from 'react';
 import useGroups, { UseGroupProps } from '../../hooks/useGroups';
 import { IncludeRenderProps } from '../../types';
+/**
+ * Props for the Groups component
+ */
 export interface GroupsProps extends UseGroupProps {
+    /**
+     * Initial collapsed state of the groups filter panel
+     * @default false
+     */
     isCollapsed?: boolean;
+    /**
+     * Title displayed in the groups filter header
+     * @default Categories
+     */
     title?: string;
+    /**
+     * Whether to hide the entire groups component
+     * @default false
+     */
+    hideGroups?: boolean;
 }
 export type GroupsWithRenderProps = IncludeRenderProps<GroupsProps, ReturnType<typeof useGroups>>;
 export default function Groups(props: GroupsWithRenderProps): React.JSX.Element | null;

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

@@ -4,7 +4,7 @@ import { UseFilterProps } from './useFilter';
 import { UseSortProps } from './useSort';
 import { UsePaginationProps } from './usePagination';
 import { UseBrowseResultsProps } from './useBrowseResults';
-import { UseGroupProps } from './useGroups';
+import { GroupsProps } from '../components/Groups';
 export interface UseCioPlpHook extends PlpContextValue {
 }
 export type UseCioPlpProps = UseSearchResultsProps & UseBrowseResultsProps & {
@@ -21,9 +21,15 @@ export type UseCioPlpProps = UseSearchResultsProps & UseBrowseResultsProps & {
      */
     filterConfigs?: Omit<UseFilterProps, 'facets'>;
     /**
-     * Used to set the `initialNumOptions` to limit the number of options shown initially.
+     * Configuration options for the Groups component.
+     * - `initialNumOptions`: Number of group options to show initially (default: 5).
+     *   Remaining options are hidden under "Show All" button.
+     * - `isCollapsed`: Whether the groups section starts collapsed (default: false).
+     * - `title`: Custom title for the groups section (default: "Categories").
+     * - `hideGroups`: Whether to hide the groups component entirely (default: false).
+     * - `isHiddenGroupFn`: Function to determine if a group should be hidden (default: undefined).
      */
-    groupsConfigs?: Omit<UseGroupProps, 'groups'>;
+    groupsConfigs?: Omit<GroupsProps, 'groups'>;
 };
 export default function useCioPlp(props?: UseCioPlpProps): {
     isSearchPage: boolean;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.6.1";
+declare const _default: "1.6.3";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",