@wix/headless-stores 0.0.41 → 0.0.43

package/cjs/dist/services/products-list-service.d.ts

@@ -1,5 +1,6 @@
 import { type Signal } from "@wix/services-definitions/core-services/signals";
 import { productsV3 } from "@wix/stores";
+export declare const DEFAULT_QUERY_LIMIT = 100;
 /**
  * Configuration interface for the Products List service.
  * Contains the initial products data, search options, and metadata.
@@ -10,7 +11,7 @@ export type ProductsListServiceConfig = {
     /** Array of product objects to initialize the service with */
     products: productsV3.V3Product[];
     /** Search options used to fetch the products */
-    searchOptions: Parameters<typeof productsV3.searchProducts>[0];
+    searchOptions: productsV3.V3ProductSearch;
     /** Pagination metadata from the search response */
     pagingMetadata: productsV3.CommonCursorPagingMetadata;
     /** Aggregation data containing filters, facets, and counts */
@@ -21,7 +22,7 @@ export type ProductsListServiceConfig = {
  * This function is designed to be used during Server-Side Rendering (SSR) to preload
  * a list of products based on search criteria.
  *
- * @param {Parameters<typeof productsV3.searchProducts>[0]} searchOptions - The search options for querying products
+ * @param {productsV3.V3ProductSearch} searchOptions - The search options for querying products
  * @returns {Promise<ProductsListServiceConfig>} Promise that resolves to the products list configuration
  *
  * @example
@@ -99,7 +100,7 @@ export type ProductsListServiceConfig = {
  * }
  * ```
  */
-export declare function loadProductsListServiceConfig(searchOptions: Parameters<typeof productsV3.searchProducts>[0]): Promise<ProductsListServiceConfig>;
+export declare function loadProductsListServiceConfig(searchOptions: productsV3.V3ProductSearch): Promise<ProductsListServiceConfig>;
 /**
  * Service definition for the Products List service.
  * This defines the reactive API contract for managing a list of products with search, pagination, and filtering capabilities.
@@ -115,13 +116,17 @@ export declare const ProductsListServiceDefinition: string & {
         /** Reactive signal containing pagination metadata */
         pagingMetadata: Signal<productsV3.CommonCursorPagingMetadata>;
         /** Reactive signal containing current search options */
-        searchOptions: Signal<Parameters<typeof productsV3.searchProducts>[0]>;
+        searchOptions: Signal<productsV3.V3ProductSearch>;
         /** Reactive signal indicating if products are currently being loaded */
         isLoading: Signal<boolean>;
         /** Reactive signal containing any error message, or null if no error */
         error: Signal<string | null>;
         /** Function to update search options and trigger a new search */
-        setSearchOptions: (searchOptions: Parameters<typeof productsV3.searchProducts>[0]) => void;
+        setSearchOptions: (searchOptions: productsV3.V3ProductSearch) => void;
+        /** Function to update only the sort part of search options */
+        setSort: (sort: productsV3.V3ProductSearch["sort"]) => void;
+        /** Function to update only the filter part of search options */
+        setFilter: (filter: productsV3.V3ProductSearch["filter"]) => void;
     };
     __config: ProductsListServiceConfig;
     isServiceDefinition?: boolean;
@@ -133,13 +138,17 @@ export declare const ProductsListServiceDefinition: string & {
     /** Reactive signal containing pagination metadata */
     pagingMetadata: Signal<productsV3.CommonCursorPagingMetadata>;
     /** Reactive signal containing current search options */
-    searchOptions: Signal<Parameters<typeof productsV3.searchProducts>[0]>;
+    searchOptions: Signal<productsV3.V3ProductSearch>;
     /** Reactive signal indicating if products are currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     error: Signal<string | null>;
     /** Function to update search options and trigger a new search */
-    setSearchOptions: (searchOptions: Parameters<typeof productsV3.searchProducts>[0]) => void;
+    setSearchOptions: (searchOptions: productsV3.V3ProductSearch) => void;
+    /** Function to update only the sort part of search options */
+    setSort: (sort: productsV3.V3ProductSearch["sort"]) => void;
+    /** Function to update only the filter part of search options */
+    setFilter: (filter: productsV3.V3ProductSearch["filter"]) => void;
 };
 /**
  * Implementation of the Products List service that manages reactive products data.
@@ -204,13 +213,17 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
         /** Reactive signal containing pagination metadata */
         pagingMetadata: Signal<productsV3.CommonCursorPagingMetadata>;
         /** Reactive signal containing current search options */
-        searchOptions: Signal<Parameters<typeof productsV3.searchProducts>[0]>;
+        searchOptions: Signal<productsV3.V3ProductSearch>;
         /** Reactive signal indicating if products are currently being loaded */
         isLoading: Signal<boolean>;
         /** Reactive signal containing any error message, or null if no error */
         error: Signal<string | null>;
         /** Function to update search options and trigger a new search */
-        setSearchOptions: (searchOptions: Parameters<typeof productsV3.searchProducts>[0]) => void;
+        setSearchOptions: (searchOptions: productsV3.V3ProductSearch) => void;
+        /** Function to update only the sort part of search options */
+        setSort: (sort: productsV3.V3ProductSearch["sort"]) => void;
+        /** Function to update only the filter part of search options */
+        setFilter: (filter: productsV3.V3ProductSearch["filter"]) => void;
     };
     __config: ProductsListServiceConfig;
     isServiceDefinition?: boolean;
@@ -222,11 +235,15 @@ export declare const ProductListService: import("@wix/services-definitions").Ser
     /** Reactive signal containing pagination metadata */
     pagingMetadata: Signal<productsV3.CommonCursorPagingMetadata>;
     /** Reactive signal containing current search options */
-    searchOptions: Signal<Parameters<typeof productsV3.searchProducts>[0]>;
+    searchOptions: Signal<productsV3.V3ProductSearch>;
     /** Reactive signal indicating if products are currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     error: Signal<string | null>;
     /** Function to update search options and trigger a new search */
-    setSearchOptions: (searchOptions: Parameters<typeof productsV3.searchProducts>[0]) => void;
+    setSearchOptions: (searchOptions: productsV3.V3ProductSearch) => void;
+    /** Function to update only the sort part of search options */
+    setSort: (sort: productsV3.V3ProductSearch["sort"]) => void;
+    /** Function to update only the filter part of search options */
+    setFilter: (filter: productsV3.V3ProductSearch["filter"]) => void;
 }, ProductsListServiceConfig>;

package/cjs/dist/services/products-list-service.js

@@ -1,12 +1,13 @@
 import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition, } from "@wix/services-definitions/core-services/signals";
 import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
+export const DEFAULT_QUERY_LIMIT = 100;
 /**
  * Loads products list service configuration from the Wix Stores API for SSR initialization.
  * This function is designed to be used during Server-Side Rendering (SSR) to preload
  * a list of products based on search criteria.
  *
- * @param {Parameters<typeof productsV3.searchProducts>[0]} searchOptions - The search options for querying products
+ * @param {productsV3.V3ProductSearch} searchOptions - The search options for querying products
  * @returns {Promise<ProductsListServiceConfig>} Promise that resolves to the products list configuration
  *
  * @example
@@ -85,12 +86,17 @@ import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
  * ```
  */
 export async function loadProductsListServiceConfig(searchOptions) {
-    const result = await fetchProducts(searchOptions);
+    const searchWithoutFilter = { ...searchOptions, filter: {} };
+    const [resultWithoutFilter, resultWithFilter] = await Promise.all([
+        fetchProducts(searchWithoutFilter),
+        fetchProducts(searchOptions),
+    ]);
+    const products = resultWithFilter?.products ?? resultWithoutFilter?.products ?? [];
     return {
-        products: result.products ?? [],
+        products,
         searchOptions,
-        pagingMetadata: result.pagingMetadata,
-        aggregations: result.aggregationData,
+        pagingMetadata: resultWithFilter.pagingMetadata,
+        aggregations: resultWithoutFilter.aggregationData ?? {},
     };
 }
 /**
@@ -136,7 +142,7 @@ const fetchMissingVariants = async (products) => {
         const res = await readOnlyVariantsV3
             .queryVariants({})
             .in("productData.productId", productIds)
-            .limit(100)
+            .limit(DEFAULT_QUERY_LIMIT)
             .find();
         items.push(...res.items);
         let nextRes = res;
@@ -284,6 +290,20 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         pagingMetadata: pagingMetadataSignal,
         aggregations: aggregationsSignal,
         setSearchOptions: (searchOptions) => searchOptionsSignal.set(searchOptions),
+        setSort: (sort) => {
+            const currentOptions = searchOptionsSignal.peek();
+            searchOptionsSignal.set({
+                ...currentOptions,
+                sort,
+            });
+        },
+        setFilter: (filter) => {
+            const currentOptions = searchOptionsSignal.peek();
+            searchOptionsSignal.set({
+                ...currentOptions,
+                filter,
+            });
+        },
         isLoading: isLoadingSignal,
         error: errorSignal,
     };

package/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/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/dist/react/ProductListFilters.d.ts

@@ -1,45 +1,6 @@
 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";
+import { Category } from "@wix/auto_sdk_categories_categories";
 /**
  * Props for InventoryStatus headless component
  */
@@ -64,27 +25,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 +78,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,37 +133,50 @@ 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>
  *   );
  * }
  * ```
  */
 export declare function PriceRange(props: PriceRangeProps): ReactNode;
+export interface CategoryFilterRenderProps {
+    selectedCategory: Category | null;
+}
+export interface CategoryFilterProps {
+    /** Content to display (can be a render function receiving category data or ReactNode) */
+    children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
+}
+export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
 /**
  * Props for ProductOptions headless component
  */
@@ -220,27 +204,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>
  *   );
  * }
  * ```