@wix/headless-stores 0.0.56 → 0.0.58

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

@@ -1,195 +1,3 @@
-/**
- * Props for PageSize headless component
- */
-export interface PageSizeProps {
-    /** Content to display (can be a render function receiving page size controls or ReactNode) */
-    children: ((props: PageSizeRenderProps) => React.ReactNode) | React.ReactNode;
-}
-/**
- * Render props for PageSize component
- */
-export interface PageSizeRenderProps {
-    /** Current page size (items per page) */
-    currentLimit: number;
-    /** Function to update the page size */
-    setLimit: (limit: number) => void;
-}
-/**
- * Headless component for managing page size (items per page)
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function PageSizeSelector() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export declare function PageSize(props: PageSizeProps): import("react").ReactNode;
-/**
- * Props for NextPageTrigger headless component
- */
-export interface NextPageTriggerProps {
-    /** Content to display (can be a render function receiving next page controls or ReactNode) */
-    children: ((props: NextPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
-}
-/**
- * Render props for NextPageTrigger component
- */
-export interface NextPageTriggerRenderProps {
-    /** Function to navigate to the next page */
-    nextPage: () => void;
-    /** Whether there is a next page available */
-    hasNextPage: boolean;
-}
-/**
- * Headless component for navigating to the next page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function NextPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export declare function NextPageTrigger(props: NextPageTriggerProps): import("react").ReactNode;
-/**
- * Props for PreviousPageTrigger headless component
- */
-export interface PreviousPageTriggerProps {
-    /** Content to display (can be a render function receiving previous page controls or ReactNode) */
-    children: ((props: PreviousPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
-}
-/**
- * Render props for PreviousPageTrigger component
- */
-export interface PreviousPageTriggerRenderProps {
-    /** Function to navigate to the previous page */
-    prevPage: () => void;
-    /** Whether there is a previous page available */
-    hasPrevPage: boolean;
-}
-/**
- * Headless component for navigating to the previous page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function PrevPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): import("react").ReactNode;
-/**
- * Props for FirstPageTrigger headless component
- */
-export interface FirstPageTriggerProps {
-    /** Content to display (can be a render function receiving first page controls or ReactNode) */
-    children: ((props: FirstPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
-}
-/**
- * Render props for FirstPageTrigger component
- */
-export interface FirstPageTriggerRenderProps {
-    /** Function to navigate to the first page */
-    navigateToFirstPage: () => void;
-    /** Whether there is a previous page (indicating not on first page) */
-    hasPrevPage: boolean;
-}
-/**
- * Headless component for navigating to the first page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function FirstPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export declare function FirstPageTrigger(props: FirstPageTriggerProps): import("react").ReactNode;
 /**
  * Props for LoadMoreTrigger headless component
  */

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

@@ -1,162 +1,5 @@
 import { useService } from '@wix/services-manager-react';
-import { ProductsListSearchServiceDefinition } from '../../services/products-list-search-service.js';
 import { ProductsListServiceDefinition } from '../../services/products-list-service.js';
-/**
- * Headless component for managing page size (items per page)
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function PageSizeSelector() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export function PageSize(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const currentLimit = service.currentLimit.get();
-    const setLimit = service.setLimit;
-    return typeof props.children === 'function'
-        ? props.children({ currentLimit, setLimit })
-        : props.children;
-}
-/**
- * Headless component for navigating to the next page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function NextPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export function NextPageTrigger(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const nextPage = service.nextPage;
-    const hasNextPage = service.hasNextPage.get();
-    return typeof props.children === 'function'
-        ? props.children({ nextPage, hasNextPage })
-        : props.children;
-}
-/**
- * Headless component for navigating to the previous page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function PrevPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export function PreviousPageTrigger(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const prevPage = service.prevPage;
-    const hasPrevPage = service.hasPrevPage.get();
-    return typeof props.children === 'function'
-        ? props.children({ prevPage, hasPrevPage })
-        : props.children;
-}
-/**
- * Headless component for navigating to the first page
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListPagination } from '@wix/stores/components';
- *
- * function FirstPageButton() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
- */
-export function FirstPageTrigger(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const navigateToFirstPage = service.navigateToFirstPage;
-    const hasPrevPage = service.hasPrevPage.get();
-    return typeof props.children === 'function'
-        ? props.children({ navigateToFirstPage, hasPrevPage })
-        : props.children;
-}
 /**
  * Headless component for loading more products (infinite scroll pattern)
  *
@@ -188,10 +31,9 @@ export function FirstPageTrigger(props) {
  * ```
  */
 export function LoadMoreTrigger(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
     const productsListService = useService(ProductsListServiceDefinition);
-    const loadMore = service.loadMore;
-    const hasMoreProducts = service.hasNextPage.get();
+    const loadMore = productsListService.loadMore;
+    const hasMoreProducts = productsListService.hasMoreProducts.get();
     const isLoading = productsListService.isLoading.get();
     return typeof props.children === 'function'
         ? props.children({ loadMore, hasMoreProducts, isLoading })

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

@@ -1,58 +1,10 @@
-import { SortType } from '../../enums/sort-enums.js';
-/**
- * Props for Options headless component
- */
-export interface OptionsProps {
-    /** Content to display (can be a render function receiving sort controls or ReactNode) */
-    children: ((props: OptionsRenderProps) => React.ReactNode) | React.ReactNode;
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { productsV3 } from '@wix/stores';
+export interface ProductListSortProps {
+    children: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
 }
-/**
- * Render props for Options component
- */
-export interface OptionsRenderProps {
-    /** Currently selected sort option value */
-    selectedSortOption: string;
-    /** Function to update the selected sort option */
-    updateSortOption: (sort: string) => void;
-    /** Available sort options */
-    sortOptions: SortType[];
-}
-/**
- * Headless component for managing product list sorting options
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListSort } from '@wix/stores/components';
- *
- * function ProductSortDropdown() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListSort.Options>
- *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
- *           <div className="sort-container">
- *             <label htmlFor="sort-select">Sort by:</label>
- *             <select
- *               id="sort-select"
- *               value={selectedSortOption}
- *               onChange={(e) => updateSortOption(e.target.value)}
- *               className="sort-dropdown"
- *             >
- *               {sortOptions.map(option => (
- *                 <option key={option} value={option}>
- *                   {option}
- *                 </option>
- *               ))}
- *             </select>
- *           </div>
- *         )}
- *       </ProductListSort.Options>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function Options(props: OptionsProps): import("react").ReactNode;
+export declare const ProductListSort: (props: ProductListSortProps) => import("react").ReactNode;

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

@@ -1,53 +1,33 @@
 import { useService } from '@wix/services-manager-react';
-import { ProductsListSearchServiceDefinition } from '../../services/products-list-search-service.js';
-/**
- * Headless component for managing product list sorting options
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListSort } from '@wix/stores/components';
- *
- * function ProductSortDropdown() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListSort.Options>
- *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
- *           <div className="sort-container">
- *             <label htmlFor="sort-select">Sort by:</label>
- *             <select
- *               id="sort-select"
- *               value={selectedSortOption}
- *               onChange={(e) => updateSortOption(e.target.value)}
- *               className="sort-dropdown"
- *             >
- *               {sortOptions.map(option => (
- *                 <option key={option} value={option}>
- *                   {option}
- *                 </option>
- *               ))}
- *             </select>
- *           </div>
- *         )}
- *       </ProductListSort.Options>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export function Options(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const selectedSortOption = service.selectedSortOption.get();
-    const sortOptions = service.sortOptions;
-    const updateSortOption = service.setSelectedSortOption;
-    return typeof props.children === 'function'
-        ? props.children({
-            selectedSortOption,
-            updateSortOption,
-            sortOptions,
-        })
-        : props.children;
-}
+import { ProductsListServiceDefinition } from '../../services/products-list-service.js';
+export const ProductListSort = (props) => {
+    const productListService = useService(ProductsListServiceDefinition);
+    const currentSort = productListService.searchOptions.get().sort;
+    // Define sort options - primitive handles all conversion logic
+    const sortOptions = [
+        { fieldName: 'name', order: 'ASC', label: 'Name (A-Z)' },
+        { fieldName: 'name', order: 'DESC', label: 'Name (Z-A)' },
+        {
+            fieldName: 'actualPriceRange.minValue.amount',
+            order: 'ASC',
+            label: 'Price: Low to High',
+        },
+        {
+            fieldName: 'actualPriceRange.minValue.amount',
+            order: 'DESC',
+            label: 'Price: High to Low',
+        },
+        {
+            fieldName: 'name',
+            order: 'DESC',
+            label: 'Latest Arrivals',
+        },
+    ];
+    return props.children({
+        currentSort,
+        sortOptions,
+        setSort: (sort) => {
+            productListService.setSort(sort);
+        },
+    });
+};

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

@@ -3,7 +3,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
 import { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
 import { createServicesMap } from '@wix/services-manager';
-import { Checkout } from '@wix/headless-ecom/react';
+import { CheckoutCore } from '@wix/headless-ecom/react';
 import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -254,7 +254,7 @@ export function Actions(props) {
         error,
     };
     if (checkoutService) {
-        return (_jsx(Checkout.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
+        return (_jsx(CheckoutCore.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
                 ...commonProps,
                 isLoading: isLoading || checkoutLoading,
                 error: error || checkoutError,

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

@@ -3,5 +3,5 @@ export { CategoriesListService, CategoriesListServiceDefinition, loadCategoriesL
 export { ProductModifiersService, ProductModifiersServiceDefinition, } from './product-modifiers-service.js';
 export { ProductService, ProductServiceDefinition, loadProductServiceConfig, } from './product-service.js';
 export { SelectedVariantService, SelectedVariantServiceDefinition, } from './selected-variant-service.js';
-export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, ProductsListServiceConfig, } from './products-list-service.js';
-export { ProductOption, InventoryStatusType, SortType, ProductChoice, ProductsListSearchService, ProductsListSearchServiceDefinition, ProductsListSearchServiceConfig, loadProductsListSearchServiceConfig, parseUrlToSearchOptions, convertUrlSortToSortType, } from './products-list-search-service.js';
+export { ProductListService, ProductsListServiceDefinition, loadProductsListServiceConfig, ProductsListServiceConfig, ProductOption, ProductChoice, } from './products-list-service.js';
+export { InventoryStatusType, SortType, ProductsListSearchService, ProductsListSearchServiceDefinition, ProductsListSearchServiceConfig, loadProductsListSearchServiceConfig, parseUrlToSearchOptions, convertUrlSortToSortType, } from './products-list-search-service.js';