@wix/headless-stores 0.0.41 → 0.0.43

package/cjs/dist/react/ProductListFilters.js

@@ -1,76 +1,44 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createServicesMap } from "@wix/services-manager";
-import { useService, WixServices } from "@wix/services-manager-react";
-import { ProductsListFiltersService, ProductsListFiltersServiceDefinition, } from "../services/products-list-filters-service.js";
-/**
- * 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 function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListFiltersServiceDefinition, ProductsListFiltersService, props.productsListFiltersConfig), children: props.children }));
-}
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useService } from "@wix/services-manager-react";
+import { ProductsListSearchServiceDefinition, } from "../services/products-list-search-service.js";
 /**
  * Headless component for managing inventory status filters
  *
  * @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>
  *   );
  * }
  * ```
  */
 export function InventoryStatus(props) {
-    const service = useService(ProductsListFiltersServiceDefinition);
+    const service = useService(ProductsListSearchServiceDefinition);
     const availableInventoryStatuses = service.availableInventoryStatuses.get();
     const selectedInventoryStatuses = service.selectedInventoryStatuses.get();
     const toggleInventoryStatus = service.toggleInventoryStatus;
@@ -88,27 +56,32 @@ export function InventoryStatus(props) {
  * @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>
  *   );
  * }
  * ```
  */
 export function ResetTrigger(props) {
-    const service = useService(ProductsListFiltersServiceDefinition);
+    const service = useService(ProductsListSearchServiceDefinition);
     const resetFilters = service.reset;
     const isFiltered = service.isFiltered.get();
     return typeof props.children === "function"
@@ -121,41 +94,46 @@ export function ResetTrigger(props) {
  * @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 function PriceRange(props) {
-    const service = useService(ProductsListFiltersServiceDefinition);
+    const service = useService(ProductsListSearchServiceDefinition);
     const selectedMinPrice = service.selectedMinPrice.get();
-    const availableMinPrice = service.availableMinPrice.get();
     const selectedMaxPrice = service.selectedMaxPrice.get();
+    const availableMinPrice = service.availableMinPrice.get();
     const availableMaxPrice = service.availableMaxPrice.get();
     const setSelectedMinPrice = service.setSelectedMinPrice;
     const setSelectedMaxPrice = service.setSelectedMaxPrice;
@@ -170,6 +148,13 @@ export function PriceRange(props) {
         })
         : props.children;
 }
+export function CategoryFilter(props) {
+    const service = useService(ProductsListSearchServiceDefinition);
+    const selectedCategory = service.selectedCategory.get();
+    return typeof props.children === "function"
+        ? props.children({ selectedCategory })
+        : props.children;
+}
 /**
  * Headless component that renders content for each product option in the list.
  * Maps over all available product options and provides each option through a render prop.
@@ -179,33 +164,38 @@ export function PriceRange(props) {
  * @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>
  *   );
  * }
  * ```
  */
 export function ProductOptions(props) {
-    const service = useService(ProductsListFiltersServiceDefinition);
+    const service = useService(ProductsListSearchServiceDefinition);
     const availableOptions = service.availableProductOptions.get();
     const selectedProductOptions = service.selectedProductOptions.get();
     // Don't render if no options are available

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

@@ -1,35 +1,3 @@
-export interface RootProps {
-    children: React.ReactNode;
-}
-/**
- * Root component that provides the ProductListPagination service context to its children.
- * This component sets up the necessary services for managing products list pagination.
- *
- * @order 1
- * @component
- * @example
- * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
- *
- * function PaginationSection() {
- *   return (
- *     <ProductListPagination.Root>
- *       <ProductListPagination.NextPageTrigger>
- *         {({ nextPage, hasNextPage }) => (
- *           <button
- *             onClick={nextPage}
- *             disabled={!hasNextPage}
- *           >
- *             Next Page
- *           </button>
- *         )}
- *       </ProductListPagination.NextPageTrigger>
- *     </ProductListPagination.Root>
- *   );
- * }
- * ```
- */
-export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for PageSize headless component
  */
@@ -52,25 +20,30 @@ export interface PageSizeRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
  *
  * function PageSizeSelector() {
  *   return (
- *     <ProductListPagination.PageSize>
- *       {({ currentLimit, setLimit }) => (
- *         <div>
- *           <label>Items per page:</label>
- *           <select
- *             value={currentLimit}
- *             onChange={(e) => setLimit(Number(e.target.value))}
- *           >
- *             <option value={10}>10</option>
- *             <option value={20}>20</option>
- *             <option value={50}>50</option>
- *           </select>
- *         </div>
- *       )}
- *     </ProductListPagination.PageSize>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListPagination.PageSize>
+ *         {({ currentLimit, setLimit }) => (
+ *           <div>
+ *             <label>Items per page:</label>
+ *             <select
+ *               value={currentLimit}
+ *               onChange={(e) => setLimit(Number(e.target.value))}
+ *             >
+ *               <option value={10}>10</option>
+ *               <option value={20}>20</option>
+ *               <option value={50}>50</option>
+ *             </select>
+ *           </div>
+ *         )}
+ *       </ProductListPagination.PageSize>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -98,21 +71,26 @@ export interface NextPageTriggerRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
  *
  * function NextPageButton() {
  *   return (
- *     <ProductListPagination.NextPageTrigger>
- *       {({ nextPage, hasNextPage }) => (
- *         <button
- *           onClick={nextPage}
- *           disabled={!hasNextPage}
- *           className={hasNextPage ? 'enabled' : 'disabled'}
- *         >
- *           Next →
- *         </button>
- *       )}
- *     </ProductListPagination.NextPageTrigger>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListPagination.NextPageTrigger>
+ *         {({ nextPage, hasNextPage }) => (
+ *           <button
+ *             onClick={nextPage}
+ *             disabled={!hasNextPage}
+ *             className={hasNextPage ? 'enabled' : 'disabled'}
+ *           >
+ *             Next →
+ *           </button>
+ *         )}
+ *       </ProductListPagination.NextPageTrigger>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -140,21 +118,26 @@ export interface PreviousPageTriggerRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
  *
  * function PrevPageButton() {
  *   return (
- *     <ProductListPagination.PreviousPageTrigger>
- *       {({ prevPage, hasPrevPage }) => (
- *         <button
- *           onClick={prevPage}
- *           disabled={!hasPrevPage}
- *           className={hasPrevPage ? 'enabled' : 'disabled'}
- *         >
- *           ← Previous
- *         </button>
- *       )}
- *     </ProductListPagination.PreviousPageTrigger>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListPagination.PreviousPageTrigger>
+ *         {({ prevPage, hasPrevPage }) => (
+ *           <button
+ *             onClick={prevPage}
+ *             disabled={!hasPrevPage}
+ *             className={hasPrevPage ? 'enabled' : 'disabled'}
+ *           >
+ *             ← Previous
+ *           </button>
+ *         )}
+ *       </ProductListPagination.PreviousPageTrigger>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -182,21 +165,26 @@ export interface FirstPageTriggerRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
  *
  * function FirstPageButton() {
  *   return (
- *     <ProductListPagination.FirstPageTrigger>
- *       {({ navigateToFirstPage, hasPrevPage }) => (
- *         <button
- *           onClick={navigateToFirstPage}
- *           disabled={!hasPrevPage}
- *           title="Go to first page"
- *         >
- *           ⏮ First
- *         </button>
- *       )}
- *     </ProductListPagination.FirstPageTrigger>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListPagination.FirstPageTrigger>
+ *         {({ navigateToFirstPage, hasPrevPage }) => (
+ *           <button
+ *             onClick={navigateToFirstPage}
+ *             disabled={!hasPrevPage}
+ *             title="Go to first page"
+ *           >
+ *             ⏮ First
+ *           </button>
+ *         )}
+ *       </ProductListPagination.FirstPageTrigger>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -226,21 +214,26 @@ export interface LoadMoreTriggerRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductListPagination } from '@wix/stores/components';
+ * import { ProductList, ProductListPagination } from '@wix/stores/components';
  *
  * function LoadMoreButton() {
  *   return (
- *     <ProductListPagination.LoadMoreTrigger>
- *       {({ loadMore, hasMoreProducts, isLoading }) => (
- *         <button
- *           onClick={() => loadMore(10)}
- *           disabled={!hasMoreProducts || isLoading}
- *           className="load-more-btn"
- *         >
- *           {isLoading ? 'Loading...' : hasMoreProducts ? 'Load More' : 'No More Products'}
- *         </button>
- *       )}
- *     </ProductListPagination.LoadMoreTrigger>
+ *     <ProductList.Root
+ *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
+ *       productsListSearchConfig={{ customizations: [] }}
+ *     >
+ *       <ProductListPagination.LoadMoreTrigger>
+ *         {({ loadMore, hasMoreProducts, isLoading }) => (
+ *           <button
+ *             onClick={() => loadMore(10)}
+ *             disabled={!hasMoreProducts || isLoading}
+ *             className="load-more-btn"
+ *           >
+ *             {isLoading ? 'Loading...' : hasMoreProducts ? 'Load More' : 'No More Products'}
+ *           </button>
+ *         )}
+ *       </ProductListPagination.LoadMoreTrigger>
+ *     </ProductList.Root>
  *   );
  * }
  * ```