@wix/headless-stores 0.0.72 → 0.0.74

package/cjs/dist/react/ProductList.d.ts

@@ -1,7 +1,10 @@
 import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
+import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
+export { Filter, CategoryFilter } from './core/ProductListFilters.js';
 /**
  * Props for the ProductList root component following the documented API
  */
@@ -165,3 +168,99 @@ export interface TotalsDisplayedProps {
  * ```
  */
 export declare const TotalsDisplayed: React.ForwardRefExoticComponent<TotalsDisplayedProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for the ProductList Sort component
+ */
+export interface SortProps {
+    /**
+     * Render function that provides sort state and controls when using asChild pattern.
+     * Only called when asChild is true and children is provided.
+     *
+     * @param props.currentSort - Current sort configuration from Wix Stores API
+     * @param props.sortOptions - Available sort options with field names, order, and labels
+     * @param props.setSort - Function to update the sort configuration
+     *
+     * @example
+     * ```tsx
+     * <ProductList.Sort asChild>
+     *   {({ currentSort, sortOptions, setSort }) => (
+     *     <CustomSortSelect
+     *       value={currentSort}
+     *       options={sortOptions}
+     *       onChange={setSort}
+     *     />
+     *   )}
+     * </ProductList.Sort>
+     * ```
+     */
+    children?: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+    /**
+     * CSS classes to apply to the sort component.
+     * Only used when asChild is false (default rendering).
+     */
+    className?: string;
+    /**
+     * Render mode for the default sort component.
+     * - 'select': Renders as HTML select dropdown
+     * - 'list': Renders as clickable list of options
+     *
+     * @default 'select'
+     */
+    as?: 'select' | 'list';
+    /**
+     * When true, the component uses the asChild pattern and delegates
+     * rendering to the children render function. When false (default),
+     * renders the built-in Sort.Root component.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * Sort component for product lists that provides sorting functionality.
+ *
+ * This component integrates with the ProductList service to provide predefined sort options
+ * including name (A-Z, Z-A) and price (low to high, high to low). It supports both
+ * controlled rendering via the asChild pattern and default UI rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default select dropdown
+ * <ProductList.Sort />
+ *
+ * // As list of clickable options
+ * <ProductList.Sort as="list" />
+ *
+ * // With custom styling
+ * <ProductList.Sort
+ *   as="select"
+ *   className="custom-sort-select"
+ * />
+ *
+ * // Custom implementation using asChild pattern
+ * <ProductList.Sort asChild>
+ *   {({ currentSort, sortOptions, setSort }) => (
+ *     <div className="custom-sort-container">
+ *       {sortOptions.map((option) => (
+ *         <button
+ *           key={`${option.fieldName}-${option.order}`}
+ *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
+ *           className={isCurrentSort(option) ? 'active' : ''}
+ *         >
+ *           {option.label}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </ProductList.Sort>
+ * ```
+ *
+ * @see {@link ProductListSortPrimitive} for the underlying sort logic
+ * @see {@link SortPrimitive.Root} for the primitive sort component
+ */
+export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ProductList.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
 import { useService } from '@wix/services-manager-react';
 import React from 'react';
 import { ProductsListServiceDefinition } from '../services/products-list-service.js';
 import * as CoreProductList from './core/ProductList.js';
 import * as CoreProductListPagination from './core/ProductListPagination.js';
+import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+export { Filter, CategoryFilter } from './core/ProductListFilters.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -13,6 +16,7 @@ var TestIds;
     TestIds["productListItem"] = "product-list-item";
     TestIds["productListLoadMore"] = "product-list-load-more";
     TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
+    TestIds["productListSort"] = "product-list-sort";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -205,3 +209,56 @@ export const TotalsDisplayed = React.forwardRef((props, ref) => {
     const displayedProducts = products.length;
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, children: _jsx("span", { children: displayedProducts }) }));
 });
+/**
+ * Sort component for product lists that provides sorting functionality.
+ *
+ * This component integrates with the ProductList service to provide predefined sort options
+ * including name (A-Z, Z-A) and price (low to high, high to low). It supports both
+ * controlled rendering via the asChild pattern and default UI rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default select dropdown
+ * <ProductList.Sort />
+ *
+ * // As list of clickable options
+ * <ProductList.Sort as="list" />
+ *
+ * // With custom styling
+ * <ProductList.Sort
+ *   as="select"
+ *   className="custom-sort-select"
+ * />
+ *
+ * // Custom implementation using asChild pattern
+ * <ProductList.Sort asChild>
+ *   {({ currentSort, sortOptions, setSort }) => (
+ *     <div className="custom-sort-container">
+ *       {sortOptions.map((option) => (
+ *         <button
+ *           key={`${option.fieldName}-${option.order}`}
+ *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
+ *           className={isCurrentSort(option) ? 'active' : ''}
+ *         >
+ *           {option.label}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </ProductList.Sort>
+ * ```
+ *
+ * @see {@link ProductListSortPrimitive} for the underlying sort logic
+ * @see {@link SortPrimitive.Root} for the primitive sort component
+ */
+export const Sort = React.forwardRef(({ children, className, as, asChild }, ref) => {
+    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
+            if (asChild && children) {
+                return children({ currentSort, sortOptions, setSort });
+            }
+            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
+                    setSort(value);
+                }, sortOptions: sortOptions, as: as, className: className, "data-testid": TestIds.productListSort }));
+        } }));
+});

package/cjs/dist/react/core/ProductListFilters.d.ts

@@ -57,10 +57,82 @@ export interface CategoryFilterProps {
     children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
 }
 export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
-interface FilterProps {
+/**
+ * Props for the ProductList Filter component
+ */
+export interface FilterProps {
+    /**
+     * Child components that will have access to filter functionality.
+     * Typically contains Filter primitive components like FilterOptions,
+     * FilterOptionRepeater, etc.
+     */
     children: ReactNode;
+    /**
+     * When true, the component will not render its own div wrapper but will
+     * delegate rendering to its child component. Useful for custom containers.
+     *
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * CSS classes to apply to the filter container.
+     * Only used when asChild is false (default).
+     */
     className?: string;
 }
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ *
+ * This component acts as a provider that integrates with the ProductList service to offer
+ * predefined filter options including:
+ * - **Price Range**: Min/max price filtering with currency formatting
+ * - **Product Options**: Dynamic filters for colors, sizes, and other product variants
+ * - **Inventory Status**: Filter by availability (In Stock, Out of Stock, Limited Stock)
+ *
+ * The component automatically extracts available filter options from the current product set
+ * and provides them to child Filter primitive components for rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with styled filter components
+ * <ProductList.Filter>
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter>
+ *
+ * // With reset functionality
+ * <ProductList.Filter className="filters-container">
+ *   <Filter.Action.Clear label="Clear All" />
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ * ```
+ *
+ * @see {@link AllFilters} for the underlying filter data logic
+ * @see {@link FilterPrimitive.Root} for the primitive filter component
+ * @see {@link ResetTrigger} for filter reset functionality
+ */
 export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/cjs/dist/react/core/ProductListFilters.js

@@ -178,9 +178,65 @@ function AllFilters(props) {
         ? props.children({ searchFilter: searchFilterData })
         : props.children;
 }
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ *
+ * This component acts as a provider that integrates with the ProductList service to offer
+ * predefined filter options including:
+ * - **Price Range**: Min/max price filtering with currency formatting
+ * - **Product Options**: Dynamic filters for colors, sizes, and other product variants
+ * - **Inventory Status**: Filter by availability (In Stock, Out of Stock, Limited Stock)
+ *
+ * The component automatically extracts available filter options from the current product set
+ * and provides them to child Filter primitive components for rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with styled filter components
+ * <ProductList.Filter>
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter>
+ *
+ * // With reset functionality
+ * <ProductList.Filter className="filters-container">
+ *   <Filter.Action.Clear label="Clear All" />
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ * ```
+ *
+ * @see {@link AllFilters} for the underlying filter data logic
+ * @see {@link FilterPrimitive.Root} for the primitive filter component
+ * @see {@link ResetTrigger} for filter reset functionality
+ */
 export const Filter = React.forwardRef(({ children, className, asChild }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (_jsx(AllFilters, { children: ({ searchFilter }) => {
             return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
         } }));
 });
+Filter.displayName = 'ProductList.Filter';

package/cjs/dist/react/index.d.ts

@@ -3,9 +3,7 @@ export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
 export * as ProductListCore from './core/ProductList.js';
-export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';

package/cjs/dist/react/index.js

@@ -3,9 +3,7 @@ export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
 export * as ProductListCore from './core/ProductList.js';
-export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';

package/dist/react/ProductList.d.ts

@@ -1,7 +1,10 @@
 import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
+import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
+export { Filter, CategoryFilter } from './core/ProductListFilters.js';
 /**
  * Props for the ProductList root component following the documented API
  */
@@ -165,3 +168,99 @@ export interface TotalsDisplayedProps {
  * ```
  */
 export declare const TotalsDisplayed: React.ForwardRefExoticComponent<TotalsDisplayedProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for the ProductList Sort component
+ */
+export interface SortProps {
+    /**
+     * Render function that provides sort state and controls when using asChild pattern.
+     * Only called when asChild is true and children is provided.
+     *
+     * @param props.currentSort - Current sort configuration from Wix Stores API
+     * @param props.sortOptions - Available sort options with field names, order, and labels
+     * @param props.setSort - Function to update the sort configuration
+     *
+     * @example
+     * ```tsx
+     * <ProductList.Sort asChild>
+     *   {({ currentSort, sortOptions, setSort }) => (
+     *     <CustomSortSelect
+     *       value={currentSort}
+     *       options={sortOptions}
+     *       onChange={setSort}
+     *     />
+     *   )}
+     * </ProductList.Sort>
+     * ```
+     */
+    children?: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+    /**
+     * CSS classes to apply to the sort component.
+     * Only used when asChild is false (default rendering).
+     */
+    className?: string;
+    /**
+     * Render mode for the default sort component.
+     * - 'select': Renders as HTML select dropdown
+     * - 'list': Renders as clickable list of options
+     *
+     * @default 'select'
+     */
+    as?: 'select' | 'list';
+    /**
+     * When true, the component uses the asChild pattern and delegates
+     * rendering to the children render function. When false (default),
+     * renders the built-in Sort.Root component.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * Sort component for product lists that provides sorting functionality.
+ *
+ * This component integrates with the ProductList service to provide predefined sort options
+ * including name (A-Z, Z-A) and price (low to high, high to low). It supports both
+ * controlled rendering via the asChild pattern and default UI rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default select dropdown
+ * <ProductList.Sort />
+ *
+ * // As list of clickable options
+ * <ProductList.Sort as="list" />
+ *
+ * // With custom styling
+ * <ProductList.Sort
+ *   as="select"
+ *   className="custom-sort-select"
+ * />
+ *
+ * // Custom implementation using asChild pattern
+ * <ProductList.Sort asChild>
+ *   {({ currentSort, sortOptions, setSort }) => (
+ *     <div className="custom-sort-container">
+ *       {sortOptions.map((option) => (
+ *         <button
+ *           key={`${option.fieldName}-${option.order}`}
+ *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
+ *           className={isCurrentSort(option) ? 'active' : ''}
+ *         >
+ *           {option.label}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </ProductList.Sort>
+ * ```
+ *
+ * @see {@link ProductListSortPrimitive} for the underlying sort logic
+ * @see {@link SortPrimitive.Root} for the primitive sort component
+ */
+export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductList.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
 import { useService } from '@wix/services-manager-react';
 import React from 'react';
 import { ProductsListServiceDefinition } from '../services/products-list-service.js';
 import * as CoreProductList from './core/ProductList.js';
 import * as CoreProductListPagination from './core/ProductListPagination.js';
+import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+export { Filter, CategoryFilter } from './core/ProductListFilters.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -13,6 +16,7 @@ var TestIds;
     TestIds["productListItem"] = "product-list-item";
     TestIds["productListLoadMore"] = "product-list-load-more";
     TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
+    TestIds["productListSort"] = "product-list-sort";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -205,3 +209,56 @@ export const TotalsDisplayed = React.forwardRef((props, ref) => {
     const displayedProducts = products.length;
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, children: _jsx("span", { children: displayedProducts }) }));
 });
+/**
+ * Sort component for product lists that provides sorting functionality.
+ *
+ * This component integrates with the ProductList service to provide predefined sort options
+ * including name (A-Z, Z-A) and price (low to high, high to low). It supports both
+ * controlled rendering via the asChild pattern and default UI rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default select dropdown
+ * <ProductList.Sort />
+ *
+ * // As list of clickable options
+ * <ProductList.Sort as="list" />
+ *
+ * // With custom styling
+ * <ProductList.Sort
+ *   as="select"
+ *   className="custom-sort-select"
+ * />
+ *
+ * // Custom implementation using asChild pattern
+ * <ProductList.Sort asChild>
+ *   {({ currentSort, sortOptions, setSort }) => (
+ *     <div className="custom-sort-container">
+ *       {sortOptions.map((option) => (
+ *         <button
+ *           key={`${option.fieldName}-${option.order}`}
+ *           onClick={() => setSort([{ fieldName: option.fieldName, order: option.order }])}
+ *           className={isCurrentSort(option) ? 'active' : ''}
+ *         >
+ *           {option.label}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </ProductList.Sort>
+ * ```
+ *
+ * @see {@link ProductListSortPrimitive} for the underlying sort logic
+ * @see {@link SortPrimitive.Root} for the primitive sort component
+ */
+export const Sort = React.forwardRef(({ children, className, as, asChild }, ref) => {
+    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
+            if (asChild && children) {
+                return children({ currentSort, sortOptions, setSort });
+            }
+            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
+                    setSort(value);
+                }, sortOptions: sortOptions, as: as, className: className, "data-testid": TestIds.productListSort }));
+        } }));
+});

package/dist/react/core/ProductListFilters.d.ts

@@ -57,10 +57,82 @@ export interface CategoryFilterProps {
     children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
 }
 export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
-interface FilterProps {
+/**
+ * Props for the ProductList Filter component
+ */
+export interface FilterProps {
+    /**
+     * Child components that will have access to filter functionality.
+     * Typically contains Filter primitive components like FilterOptions,
+     * FilterOptionRepeater, etc.
+     */
     children: ReactNode;
+    /**
+     * When true, the component will not render its own div wrapper but will
+     * delegate rendering to its child component. Useful for custom containers.
+     *
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * CSS classes to apply to the filter container.
+     * Only used when asChild is false (default).
+     */
     className?: string;
 }
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ *
+ * This component acts as a provider that integrates with the ProductList service to offer
+ * predefined filter options including:
+ * - **Price Range**: Min/max price filtering with currency formatting
+ * - **Product Options**: Dynamic filters for colors, sizes, and other product variants
+ * - **Inventory Status**: Filter by availability (In Stock, Out of Stock, Limited Stock)
+ *
+ * The component automatically extracts available filter options from the current product set
+ * and provides them to child Filter primitive components for rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with styled filter components
+ * <ProductList.Filter>
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter>
+ *
+ * // With reset functionality
+ * <ProductList.Filter className="filters-container">
+ *   <Filter.Action.Clear label="Clear All" />
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ * ```
+ *
+ * @see {@link AllFilters} for the underlying filter data logic
+ * @see {@link FilterPrimitive.Root} for the primitive filter component
+ * @see {@link ResetTrigger} for filter reset functionality
+ */
 export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/react/core/ProductListFilters.js

@@ -178,9 +178,65 @@ function AllFilters(props) {
         ? props.children({ searchFilter: searchFilterData })
         : props.children;
 }
+/**
+ * Filter component that provides comprehensive filtering functionality for product lists.
+ *
+ * This component acts as a provider that integrates with the ProductList service to offer
+ * predefined filter options including:
+ * - **Price Range**: Min/max price filtering with currency formatting
+ * - **Product Options**: Dynamic filters for colors, sizes, and other product variants
+ * - **Inventory Status**: Filter by availability (In Stock, Out of Stock, Limited Stock)
+ *
+ * The component automatically extracts available filter options from the current product set
+ * and provides them to child Filter primitive components for rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with styled filter components
+ * <ProductList.Filter>
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ *
+ * // With custom container using asChild
+ * <ProductList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.MultiFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ProductList.Filter>
+ *
+ * // With reset functionality
+ * <ProductList.Filter className="filters-container">
+ *   <Filter.Action.Clear label="Clear All" />
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.MultiFilter />
+ *       <Filter.FilterOption.RangeFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ * </ProductList.Filter>
+ * ```
+ *
+ * @see {@link AllFilters} for the underlying filter data logic
+ * @see {@link FilterPrimitive.Root} for the primitive filter component
+ * @see {@link ResetTrigger} for filter reset functionality
+ */
 export const Filter = React.forwardRef(({ children, className, asChild }, ref) => {
     const Comp = asChild ? Slot : 'div';
     return (_jsx(AllFilters, { children: ({ searchFilter }) => {
             return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
         } }));
 });
+Filter.displayName = 'ProductList.Filter';

package/dist/react/index.d.ts

@@ -3,9 +3,7 @@ export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
 export * as ProductListCore from './core/ProductList.js';
-export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';

package/dist/react/index.js

@@ -3,9 +3,7 @@ export * as CategoryCore from './core/Category.js';
 export * as ProductCore from './core/Product.js';
 export * as ProductModifiers from './core/ProductModifiers.js';
 export * as ProductListCore from './core/ProductList.js';
-export * as ProductListFilters from './core/ProductListFilters.js';
 export * as ProductListPagination from './core/ProductListPagination.js';
-export * as ProductListSort from './core/ProductListSort.js';
 export * as ProductVariantSelector from './core/ProductVariantSelector.js';
 export * as SelectedVariant from './core/SelectedVariant.js';
 export * as Product from './Product.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,8 +62,8 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-components": "0.0.7",
-    "@wix/headless-ecom": "0.0.21",
+    "@wix/headless-components": "0.0.9",
+    "@wix/headless-ecom": "0.0.23",
     "@wix/headless-media": "0.0.11",
     "@wix/headless-utils": "0.0.3",
     "@wix/redirects": "^1.0.83",

package/cjs/dist/react/ProductListSort.d.ts

@@ -1,14 +0,0 @@
-import { Sort as SortPrimitive } from '@wix/headless-components/react';
-import { productsV3 } from '@wix/stores';
-import React from 'react';
-export interface ProductListSortProps {
-    children?: (props: {
-        currentSort: productsV3.V3ProductSearch['sort'];
-        sortOptions: SortPrimitive.SortOption[];
-        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
-    }) => React.ReactNode;
-    className?: string;
-    as?: 'select' | 'list';
-    asChild?: boolean;
-}
-export declare const ProductListSort: React.ForwardRefExoticComponent<ProductListSortProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ProductListSort.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Sort as SortPrimitive } from '@wix/headless-components/react';
-import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
-import React from 'react';
-export const ProductListSort = React.forwardRef(({ children, className, as, asChild }, ref) => {
-    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
-            if (asChild && children) {
-                return children({ currentSort, sortOptions, setSort });
-            }
-            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
-                    setSort(value);
-                }, sortOptions: sortOptions, as: as, className: className }));
-        } }));
-});

package/cjs/dist/react/core/BuyNow.d.ts

@@ -1,56 +0,0 @@
-/**
- * Props passed to the render function of the BuyNow component
- */
-export interface BuyNowRenderProps {
-    /** Whether the buy now operation is currently loading */
-    isLoading: boolean;
-    /** The name of the product being purchased */
-    productName: string;
-    /** Function to redirect the user to the checkout page */
-    redirectToCheckout: () => void;
-    /** The error message if the buy now operation fails */
-    error: string | null;
-    /** The price of the product being purchased */
-    price: string;
-    /** The currency of the product being purchased */
-    currency: string;
-    /** Whether the product is in stock */
-    inStock: boolean;
-    /** Whether the product is available for pre-order */
-    preOrderAvailable: boolean;
-}
-/**
- * Props for the BuyNow component
- */
-export interface BuyNowProps {
-    /** Render function that receives buy now state and actions */
-    children: (props: BuyNowRenderProps) => React.ReactNode;
-}
-/**
- * A headless component that provides buy now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "buy now" flow, allowing consumers
- * to render their own UI while accessing the underlying buy now functionality.
- * @example
- * ```tsx
- * <BuyNow>
- *   {({ isLoading, productName, redirectToCheckout, error, price, currency, inStock, preOrderAvailable }) => (
- *     <div>
- *       <h2>{productName}</h2>
- *       <p>{price} {currency}</p>
- *       {error && <div className="error">{error}</div>}
- *       {inStock && <div>In stock</div>}
- *       {preOrderAvailable && <div>Pre-order available</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Buy Now'}
- *       </button>
- *     </div>
- *   )}
- * </BuyNow>
- * ```
- * @component
- */
-export declare function BuyNow(props: BuyNowProps): React.ReactNode;

package/cjs/dist/react/core/BuyNow.js

@@ -1,42 +0,0 @@
-import { useService } from '@wix/services-manager-react';
-import { BuyNowServiceDefinition } from '../../services/buy-now-service.js';
-/**
- * A headless component that provides buy now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "buy now" flow, allowing consumers
- * to render their own UI while accessing the underlying buy now functionality.
- * @example
- * ```tsx
- * <BuyNow>
- *   {({ isLoading, productName, redirectToCheckout, error, price, currency, inStock, preOrderAvailable }) => (
- *     <div>
- *       <h2>{productName}</h2>
- *       <p>{price} {currency}</p>
- *       {error && <div className="error">{error}</div>}
- *       {inStock && <div>In stock</div>}
- *       {preOrderAvailable && <div>Pre-order available</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Buy Now'}
- *       </button>
- *     </div>
- *   )}
- * </BuyNow>
- * ```
- * @component
- */
-export function BuyNow(props) {
-    const { redirectToCheckout, loadingSignal, productName, errorSignal, price, currency, inStockSignal, preOrderAvailableSignal, } = useService(BuyNowServiceDefinition);
-    return props.children({
-        isLoading: loadingSignal.get(),
-        error: errorSignal.get(),
-        productName: productName,
-        redirectToCheckout,
-        price,
-        currency,
-        inStock: inStockSignal.get(),
-        preOrderAvailable: preOrderAvailableSignal.get(),
-    });
-}

package/cjs/dist/react/core/PayNow.d.ts

@@ -1,42 +0,0 @@
-/**
- * Props passed to the render function of the PayNow component
- */
-export interface PayNowRenderProps {
-    /** Whether the buy now operation is currently loading */
-    isLoading: boolean;
-    /** Function to redirect the user to the checkout page */
-    redirectToCheckout: () => void;
-    /** The error message if the buy now operation fails */
-    error: string | null;
-}
-/**
- * Props for the PayNow component
- */
-export interface PayNowProps {
-    /** Render function that receives buy now state and actions */
-    children: (props: PayNowRenderProps) => React.ReactNode;
-}
-/**
- * A headless component that provides pay now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "pay now" flow, allowing consumers
- * to render their own UI while accessing the underlying payment functionality.
- * @example
- * ```tsx
- * <PayNow>
- *   {({ isLoading, redirectToCheckout, error }) => (
- *     <div>
- *       {error && <div className="error">{error}</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Pay Now'}
- *       </button>
- *     </div>
- *   )}
- * </PayNow>
- * ```
- * @component
- */
-export declare function PayNow(props: PayNowProps): React.ReactNode;

package/cjs/dist/react/core/PayNow.js

@@ -1,33 +0,0 @@
-import { useService } from '@wix/services-manager-react';
-import { PayNowServiceDefinition } from '../../services/pay-now-service.js';
-/**
- * A headless component that provides pay now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "pay now" flow, allowing consumers
- * to render their own UI while accessing the underlying payment functionality.
- * @example
- * ```tsx
- * <PayNow>
- *   {({ isLoading, redirectToCheckout, error }) => (
- *     <div>
- *       {error && <div className="error">{error}</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Pay Now'}
- *       </button>
- *     </div>
- *   )}
- * </PayNow>
- * ```
- * @component
- */
-export function PayNow(props) {
-    const { redirectToCheckout, loadingSignal, errorSignal } = useService(PayNowServiceDefinition);
-    return props.children({
-        isLoading: loadingSignal.get(),
-        error: errorSignal.get(),
-        redirectToCheckout,
-    });
-}

package/dist/react/ProductListSort.d.ts

@@ -1,14 +0,0 @@
-import { Sort as SortPrimitive } from '@wix/headless-components/react';
-import { productsV3 } from '@wix/stores';
-import React from 'react';
-export interface ProductListSortProps {
-    children?: (props: {
-        currentSort: productsV3.V3ProductSearch['sort'];
-        sortOptions: SortPrimitive.SortOption[];
-        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
-    }) => React.ReactNode;
-    className?: string;
-    as?: 'select' | 'list';
-    asChild?: boolean;
-}
-export declare const ProductListSort: React.ForwardRefExoticComponent<ProductListSortProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductListSort.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Sort as SortPrimitive } from '@wix/headless-components/react';
-import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
-import React from 'react';
-export const ProductListSort = React.forwardRef(({ children, className, as, asChild }, ref) => {
-    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
-            if (asChild && children) {
-                return children({ currentSort, sortOptions, setSort });
-            }
-            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
-                    setSort(value);
-                }, sortOptions: sortOptions, as: as, className: className }));
-        } }));
-});

package/dist/react/core/BuyNow.d.ts

@@ -1,56 +0,0 @@
-/**
- * Props passed to the render function of the BuyNow component
- */
-export interface BuyNowRenderProps {
-    /** Whether the buy now operation is currently loading */
-    isLoading: boolean;
-    /** The name of the product being purchased */
-    productName: string;
-    /** Function to redirect the user to the checkout page */
-    redirectToCheckout: () => void;
-    /** The error message if the buy now operation fails */
-    error: string | null;
-    /** The price of the product being purchased */
-    price: string;
-    /** The currency of the product being purchased */
-    currency: string;
-    /** Whether the product is in stock */
-    inStock: boolean;
-    /** Whether the product is available for pre-order */
-    preOrderAvailable: boolean;
-}
-/**
- * Props for the BuyNow component
- */
-export interface BuyNowProps {
-    /** Render function that receives buy now state and actions */
-    children: (props: BuyNowRenderProps) => React.ReactNode;
-}
-/**
- * A headless component that provides buy now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "buy now" flow, allowing consumers
- * to render their own UI while accessing the underlying buy now functionality.
- * @example
- * ```tsx
- * <BuyNow>
- *   {({ isLoading, productName, redirectToCheckout, error, price, currency, inStock, preOrderAvailable }) => (
- *     <div>
- *       <h2>{productName}</h2>
- *       <p>{price} {currency}</p>
- *       {error && <div className="error">{error}</div>}
- *       {inStock && <div>In stock</div>}
- *       {preOrderAvailable && <div>Pre-order available</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Buy Now'}
- *       </button>
- *     </div>
- *   )}
- * </BuyNow>
- * ```
- * @component
- */
-export declare function BuyNow(props: BuyNowProps): React.ReactNode;

package/dist/react/core/BuyNow.js

@@ -1,42 +0,0 @@
-import { useService } from '@wix/services-manager-react';
-import { BuyNowServiceDefinition } from '../../services/buy-now-service.js';
-/**
- * A headless component that provides buy now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "buy now" flow, allowing consumers
- * to render their own UI while accessing the underlying buy now functionality.
- * @example
- * ```tsx
- * <BuyNow>
- *   {({ isLoading, productName, redirectToCheckout, error, price, currency, inStock, preOrderAvailable }) => (
- *     <div>
- *       <h2>{productName}</h2>
- *       <p>{price} {currency}</p>
- *       {error && <div className="error">{error}</div>}
- *       {inStock && <div>In stock</div>}
- *       {preOrderAvailable && <div>Pre-order available</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Buy Now'}
- *       </button>
- *     </div>
- *   )}
- * </BuyNow>
- * ```
- * @component
- */
-export function BuyNow(props) {
-    const { redirectToCheckout, loadingSignal, productName, errorSignal, price, currency, inStockSignal, preOrderAvailableSignal, } = useService(BuyNowServiceDefinition);
-    return props.children({
-        isLoading: loadingSignal.get(),
-        error: errorSignal.get(),
-        productName: productName,
-        redirectToCheckout,
-        price,
-        currency,
-        inStock: inStockSignal.get(),
-        preOrderAvailable: preOrderAvailableSignal.get(),
-    });
-}

package/dist/react/core/PayNow.d.ts

@@ -1,42 +0,0 @@
-/**
- * Props passed to the render function of the PayNow component
- */
-export interface PayNowRenderProps {
-    /** Whether the buy now operation is currently loading */
-    isLoading: boolean;
-    /** Function to redirect the user to the checkout page */
-    redirectToCheckout: () => void;
-    /** The error message if the buy now operation fails */
-    error: string | null;
-}
-/**
- * Props for the PayNow component
- */
-export interface PayNowProps {
-    /** Render function that receives buy now state and actions */
-    children: (props: PayNowRenderProps) => React.ReactNode;
-}
-/**
- * A headless component that provides pay now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "pay now" flow, allowing consumers
- * to render their own UI while accessing the underlying payment functionality.
- * @example
- * ```tsx
- * <PayNow>
- *   {({ isLoading, redirectToCheckout, error }) => (
- *     <div>
- *       {error && <div className="error">{error}</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Pay Now'}
- *       </button>
- *     </div>
- *   )}
- * </PayNow>
- * ```
- * @component
- */
-export declare function PayNow(props: PayNowProps): React.ReactNode;

package/dist/react/core/PayNow.js

@@ -1,33 +0,0 @@
-import { useService } from '@wix/services-manager-react';
-import { PayNowServiceDefinition } from '../../services/pay-now-service.js';
-/**
- * A headless component that provides pay now functionality using the render props pattern.
- *
- * This component manages the state and actions for a "pay now" flow, allowing consumers
- * to render their own UI while accessing the underlying payment functionality.
- * @example
- * ```tsx
- * <PayNow>
- *   {({ isLoading, redirectToCheckout, error }) => (
- *     <div>
- *       {error && <div className="error">{error}</div>}
- *       <button
- *         onClick={redirectToCheckout}
- *         disabled={isLoading}
- *       >
- *         {isLoading ? 'Processing...' : 'Pay Now'}
- *       </button>
- *     </div>
- *   )}
- * </PayNow>
- * ```
- * @component
- */
-export function PayNow(props) {
-    const { redirectToCheckout, loadingSignal, errorSignal } = useService(PayNowServiceDefinition);
-    return props.children({
-        isLoading: loadingSignal.get(),
-        error: errorSignal.get(),
-        redirectToCheckout,
-    });
-}