@wix/headless-stores 0.0.41 → 0.0.42

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

@@ -1,5 +1,6 @@
 import { type ProductsListServiceConfig } from "../services/products-list-service.js";
 import { productsV3 } from "@wix/stores";
+import { ProductsListSearchServiceConfig } from "../services/products-list-search-service.js";
 /**
  * Props for Root headless component
  */
@@ -8,16 +9,19 @@ export interface RootProps {
     children: React.ReactNode;
     /** Configuration for the ProductList service */
     productsListConfig: ProductsListServiceConfig;
+    /** Configuration for the ProductListSearch service */
+    productsListSearchConfig?: ProductsListSearchServiceConfig;
 }
 /**
- * Root component that provides the ProductList service context to its children.
- * This component sets up the necessary services for managing products list state.
+ * Root component that provides both ProductList and ProductListSearch service contexts to its children.
+ * This component sets up the necessary services for managing products list state, including search,
+ * filtering, sorting, and pagination functionality.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { ProductList } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters, ProductListSort, ProductListPagination } from '@wix/stores/components';
  *
  * function ProductListPage() {
  *   return (
@@ -28,7 +32,25 @@ export interface RootProps {
  *         pagingMetadata: { count: 10, hasNext: true },
  *         aggregations: {}
  *       }}
+ *       productsListSearchConfig={{
+ *         customizations: [],
+ *         initialSearchState: { sort: 'name_asc', limit: 20 }
+ *       }}
  *     >
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
+ *           <select value={selectedSortOption} onChange={(e) => updateSortOption(e.target.value)}>
+ *             {sortOptions.map(option => <option key={option} value={option}>{option}</option>)}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *
+ *       <ProductListFilters.PriceRange>
+ *         {({ selectedMinPrice, setSelectedMinPrice }) => (
+ *           <input value={selectedMinPrice} onChange={(e) => setSelectedMinPrice(Number(e.target.value))} />
+ *         )}
+ *       </ProductListFilters.PriceRange>
+ *
  *       <ProductList.ItemContent>
  *         {({ product }) => (
  *           <div key={product._id}>
@@ -37,6 +59,12 @@ export interface RootProps {
  *           </div>
  *         )}
  *       </ProductList.ItemContent>
+ *
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button onClick={nextPage} disabled={!hasNextPage}>Next</button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
  *     </ProductList.Root>
  *   );
  * }

package/cjs/dist/react/ProductList.js

@@ -2,16 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from "@wix/services-manager-react";
 import { createServicesMap } from "@wix/services-manager";
 import { ProductListService, ProductsListServiceDefinition, } from "../services/products-list-service.js";
-import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/services";
+import { ProductService, ProductServiceDefinition, } from "../services/product-service.js";
+import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from "../services/products-list-search-service.js";
 /**
- * Root component that provides the ProductList service context to its children.
- * This component sets up the necessary services for managing products list state.
+ * Root component that provides both ProductList and ProductListSearch service contexts to its children.
+ * This component sets up the necessary services for managing products list state, including search,
+ * filtering, sorting, and pagination functionality.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { ProductList } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters, ProductListSort, ProductListPagination } from '@wix/stores/components';
  *
  * function ProductListPage() {
  *   return (
@@ -22,7 +24,25 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  *         pagingMetadata: { count: 10, hasNext: true },
  *         aggregations: {}
  *       }}
+ *       productsListSearchConfig={{
+ *         customizations: [],
+ *         initialSearchState: { sort: 'name_asc', limit: 20 }
+ *       }}
  *     >
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
+ *           <select value={selectedSortOption} onChange={(e) => updateSortOption(e.target.value)}>
+ *             {sortOptions.map(option => <option key={option} value={option}>{option}</option>)}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *
+ *       <ProductListFilters.PriceRange>
+ *         {({ selectedMinPrice, setSelectedMinPrice }) => (
+ *           <input value={selectedMinPrice} onChange={(e) => setSelectedMinPrice(Number(e.target.value))} />
+ *         )}
+ *       </ProductListFilters.PriceRange>
+ *
  *       <ProductList.ItemContent>
  *         {({ product }) => (
  *           <div key={product._id}>
@@ -31,13 +51,21 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  *           </div>
  *         )}
  *       </ProductList.ItemContent>
+ *
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button onClick={nextPage} disabled={!hasNextPage}>Next</button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
  *     </ProductList.Root>
  *   );
  * }
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListServiceDefinition, ProductListService, props.productsListConfig), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(ProductsListServiceDefinition, ProductListService, props.productsListConfig)
+            .addService(ProductsListSearchServiceDefinition, ProductsListSearchService, props.productsListSearchConfig), children: props.children }));
 }
 /**
  * Component that renders content when the products list is empty.

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

@@ -1,45 +1,5 @@
 import type { ReactNode } from "react";
-import { InventoryStatusType, type ProductOption, ProductsListFiltersServiceConfig } from "../services/products-list-filters-service.js";
-export interface RootProps {
-    /** Child components that will have access to the ProductListFilters service */
-    children: React.ReactNode;
-    /** Configuration for the ProductListFilters service */
-    productsListFiltersConfig: ProductsListFiltersServiceConfig;
-}
-/**
- * Root component that provides the ProductListFilters service context to its children.
- * This component sets up the necessary services for managing products list filters.
- *
- * @order 1
- * @component
- * @example
- * ```tsx
- * import { ProductListFilters } from '@wix/stores/components';
- *
- * function FiltersSection() {
- *   return (
- *     <ProductListFilters.Root
- *       productsListFiltersConfig={{
- *         minPrice: 0,
- *         maxPrice: 1000
- *       }}
- *     >
- *       <ProductListFilters.MinPrice>
- *         {({ minPrice, setSelectedMinPrice }) => (
- *           <input
- *             type="number"
- *             value={minPrice}
- *             onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
- *             placeholder="Min price"
- *           />
- *         )}
- *       </ProductListFilters.MinPrice>
- *     </ProductListFilters.Root>
- *   );
- * }
- * ```
- */
-export declare function Root(props: RootProps): React.ReactNode;
+import { type ProductOption, InventoryStatusType } from "../services/products-list-search-service.js";
 /**
  * Props for InventoryStatus headless component
  */
@@ -64,27 +24,32 @@ export interface InventoryStatusRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListFilters } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters } from '@wix/stores/components';
  *
  * function InventoryStatusFilter() {
  *   return (
- *     <ProductListFilters.InventoryStatus>
- *       {({ availableInventoryStatuses, selectedInventoryStatuses, toggleInventoryStatus }) => (
- *         <div>
- *           <h4>Inventory Status:</h4>
- *           {availableInventoryStatuses.map(status => (
- *             <label key={status}>
- *               <input
- *                 type="checkbox"
- *                 checked={selectedInventoryStatuses.includes(status)}
- *                 onChange={() => toggleInventoryStatus(status)}
- *               />
- *               {status}
- *             </label>
- *           ))}
- *         </div>
- *       )}
- *     </ProductListFilters.InventoryStatus>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListFilters.InventoryStatus>
+ *         {({ availableInventoryStatuses, selectedInventoryStatuses, toggleInventoryStatus }) => (
+ *           <div>
+ *             <h4>Inventory Status:</h4>
+ *             {availableInventoryStatuses.map(status => (
+ *               <label key={status}>
+ *                 <input
+ *                   type="checkbox"
+ *                   checked={selectedInventoryStatuses.includes(status)}
+ *                   onChange={() => toggleInventoryStatus(status)}
+ *                 />
+ *                 {status}
+ *               </label>
+ *             ))}
+ *           </div>
+ *         )}
+ *       </ProductListFilters.InventoryStatus>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -112,21 +77,26 @@ export interface ResetTriggerRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListFilters } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters } from '@wix/stores/components';
  *
  * function ResetFiltersButton() {
  *   return (
- *     <ProductListFilters.ResetTrigger>
- *       {({ resetFilters, isFiltered }) => (
- *         <button
- *           onClick={resetFilters}
- *           disabled={!isFiltered}
- *           className={isFiltered ? 'active' : 'disabled'}
- *         >
- *           {isFiltered ? 'Clear Filters' : 'No Filters Applied'}
- *         </button>
- *       )}
- *     </ProductListFilters.ResetTrigger>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListFilters.ResetTrigger>
+ *         {({ resetFilters, isFiltered }) => (
+ *           <button
+ *             onClick={resetFilters}
+ *             disabled={!isFiltered}
+ *             className={isFiltered ? 'active' : 'disabled'}
+ *           >
+ *             {isFiltered ? 'Clear Filters' : 'No Filters Applied'}
+ *           </button>
+ *         )}
+ *       </ProductListFilters.ResetTrigger>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -162,32 +132,37 @@ export interface PriceRangeRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListFilters } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters } from '@wix/stores/components';
  *
  * function PriceRangeFilter() {
  *   return (
- *     <ProductListFilters.PriceRange>
- *       {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
- *         <div className="price-range">
- *           <h4>Price Range:</h4>
- *           <div className="price-inputs">
- *             <input
- *               type="number"
- *               value={minPrice}
- *               onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
- *               placeholder="Min"
- *             />
- *             <span>to</span>
- *             <input
- *               type="number"
- *               value={maxPrice}
- *               onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
- *               placeholder="Max"
- *             />
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListFilters.PriceRange>
+ *         {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
+ *           <div className="price-range">
+ *             <h4>Price Range:</h4>
+ *             <div className="price-inputs">
+ *               <input
+ *                 type="number"
+ *                 value={minPrice}
+ *                 onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
+ *                 placeholder="Min"
+ *               />
+ *               <span>to</span>
+ *               <input
+ *                 type="number"
+ *                 value={maxPrice}
+ *                 onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
+ *                 placeholder="Max"
+ *               />
+ *             </div>
  *           </div>
- *         </div>
- *       )}
- *     </ProductListFilters.PriceRange>
+ *         )}
+ *       </ProductListFilters.PriceRange>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -220,27 +195,32 @@ export interface ProductOptionRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListFilters } from '@wix/stores/components';
+ * import { ProductList, ProductListFilters } from '@wix/stores/components';
  *
  * function ProductOptionsFilter() {
  *   return (
- *     <ProductListFilters.ProductOptions>
- *       {({ option, selectedChoices, toggleChoice }) => (
- *         <div key={option.id}>
- *           <h4>{option.name}</h4>
- *           {option.choices.map(choice => (
- *             <label key={choice.id}>
- *               <input
- *                 type="checkbox"
- *                 checked={selectedChoices.includes(choice.id)}
- *                 onChange={() => toggleChoice(choice.id)}
- *               />
- *               {choice.name}
- *             </label>
- *           ))}
- *         </div>
- *       )}
- *     </ProductListFilters.ProductOptions>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListFilters.ProductOptions>
+ *         {({ option, selectedChoices, toggleChoice }) => (
+ *           <div key={option.id}>
+ *             <h4>{option.name}</h4>
+ *             {option.choices.map(choice => (
+ *               <label key={choice.id}>
+ *                 <input
+ *                   type="checkbox"
+ *                   checked={selectedChoices.includes(choice.id)}
+ *                   onChange={() => toggleChoice(choice.id)}
+ *                 />
+ *                 {choice.name}
+ *               </label>
+ *             ))}
+ *           </div>
+ *         )}
+ *       </ProductListFilters.ProductOptions>
+ *     </ProductList.Root>
  *   );
  * }
  * ```