@wix/headless-stores 0.0.57 → 0.0.58

package/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/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/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/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';

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

@@ -1,4 +1,3 @@
-import type { Signal } from '@wix/services-definitions/core-services/signals';
 import { productsV3, customizationsV3 } from '@wix/stores';
 import { type Category } from './category-service.js';
 import { SortType } from './../enums/sort-enums.js';
@@ -13,23 +12,6 @@ export declare const InventoryStatusType: typeof productsV3.InventoryAvailabilit
  * Re-exports the Wix inventory availability status enum type.
  */
 export type InventoryStatusType = productsV3.InventoryAvailabilityStatus;
-/**
- * Interface representing a product option (like Size, Color, etc.).
- */
-export interface ProductOption {
-    id: string;
-    name: string;
-    choices: ProductChoice[];
-    optionRenderType?: string;
-}
-/**
- * Interface representing a choice within a product option.
- */
-export interface ProductChoice {
-    id: string;
-    name: string;
-    colorCode?: string;
-}
 /**
  * Initial search state that can be loaded from URL parameters.
  */
@@ -51,7 +33,6 @@ export type InitialSearchState = {
  * Configuration interface for the Products List Search service.
  */
 export type ProductsListSearchServiceConfig = {
-    customizations: customizationsV3.Customization[];
     initialSearchState?: InitialSearchState;
 };
 /**
@@ -59,79 +40,9 @@ export type ProductsListSearchServiceConfig = {
  * This consolidates sort, pagination, and filtering functionality.
  */
 export declare const ProductsListSearchServiceDefinition: string & {
-    __api: {
-        selectedSortOption: Signal<string>;
-        sortOptions: SortType[];
-        setSelectedSortOption: (sort: string) => void;
-        currentLimit: Signal<number>;
-        currentCursor: Signal<string | null>;
-        hasNextPage: {
-            get: () => boolean;
-        };
-        hasPrevPage: {
-            get: () => boolean;
-        };
-        setLimit: (limit: number) => void;
-        nextPage: () => void;
-        prevPage: () => void;
-        navigateToFirstPage: () => void;
-        loadMore: (count: number) => void;
-        selectedMinPrice: Signal<number>;
-        selectedMaxPrice: Signal<number>;
-        availableMinPrice: Signal<number>;
-        availableMaxPrice: Signal<number>;
-        availableInventoryStatuses: Signal<InventoryStatusType[]>;
-        selectedInventoryStatuses: Signal<InventoryStatusType[]>;
-        availableProductOptions: Signal<ProductOption[]>;
-        selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<Category | null>;
-        setSelectedMinPrice: (minPrice: number) => void;
-        setSelectedMaxPrice: (maxPrice: number) => void;
-        toggleInventoryStatus: (status: InventoryStatusType) => void;
-        toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: Category | null) => void;
-        isFiltered: {
-            get: () => boolean;
-        };
-        reset: () => void;
-    };
+    __api: {};
     __config: {};
     isServiceDefinition?: boolean;
-} & {
-    selectedSortOption: Signal<string>;
-    sortOptions: SortType[];
-    setSelectedSortOption: (sort: string) => void;
-    currentLimit: Signal<number>;
-    currentCursor: Signal<string | null>;
-    hasNextPage: {
-        get: () => boolean;
-    };
-    hasPrevPage: {
-        get: () => boolean;
-    };
-    setLimit: (limit: number) => void;
-    nextPage: () => void;
-    prevPage: () => void;
-    navigateToFirstPage: () => void;
-    loadMore: (count: number) => void;
-    selectedMinPrice: Signal<number>;
-    selectedMaxPrice: Signal<number>;
-    availableMinPrice: Signal<number>;
-    availableMaxPrice: Signal<number>;
-    availableInventoryStatuses: Signal<InventoryStatusType[]>;
-    selectedInventoryStatuses: Signal<InventoryStatusType[]>;
-    availableProductOptions: Signal<ProductOption[]>;
-    selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<Category | null>;
-    setSelectedMinPrice: (minPrice: number) => void;
-    setSelectedMaxPrice: (maxPrice: number) => void;
-    toggleInventoryStatus: (status: InventoryStatusType) => void;
-    toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: Category | null) => void;
-    isFiltered: {
-        get: () => boolean;
-    };
-    reset: () => void;
 };
 /**
  * Convert URL sort format to SortType enum
@@ -164,7 +75,7 @@ export declare function convertUrlSortToSortType(urlSort: string): SortType | nu
  * const filterState = initialSearchState.productOptions; // { colorId: ['red-id', 'blue-id'] }
  * ```
  */
-export declare function parseUrlToSearchOptions(url: string, categoriesList: Category[], defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
+export declare function parseUrlToSearchOptions(url: string, categoriesList: Category[], customizations: customizationsV3.Customization[], defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
     searchOptions: productsV3.V3ProductSearch;
     initialSearchState: InitialSearchState;
 }>;
@@ -211,77 +122,7 @@ export declare function loadProductsListSearchServiceConfig(input: string | {
  * Implementation of the Products List Search service
  */
 export declare const ProductsListSearchService: import("@wix/services-definitions").ServiceFactory<string & {
-    __api: {
-        selectedSortOption: Signal<string>;
-        sortOptions: SortType[];
-        setSelectedSortOption: (sort: string) => void;
-        currentLimit: Signal<number>;
-        currentCursor: Signal<string | null>;
-        hasNextPage: {
-            get: () => boolean;
-        };
-        hasPrevPage: {
-            get: () => boolean;
-        };
-        setLimit: (limit: number) => void;
-        nextPage: () => void;
-        prevPage: () => void;
-        navigateToFirstPage: () => void;
-        loadMore: (count: number) => void;
-        selectedMinPrice: Signal<number>;
-        selectedMaxPrice: Signal<number>;
-        availableMinPrice: Signal<number>;
-        availableMaxPrice: Signal<number>;
-        availableInventoryStatuses: Signal<InventoryStatusType[]>;
-        selectedInventoryStatuses: Signal<InventoryStatusType[]>;
-        availableProductOptions: Signal<ProductOption[]>;
-        selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<Category | null>;
-        setSelectedMinPrice: (minPrice: number) => void;
-        setSelectedMaxPrice: (maxPrice: number) => void;
-        toggleInventoryStatus: (status: InventoryStatusType) => void;
-        toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: Category | null) => void;
-        isFiltered: {
-            get: () => boolean;
-        };
-        reset: () => void;
-    };
+    __api: {};
     __config: {};
     isServiceDefinition?: boolean;
-} & {
-    selectedSortOption: Signal<string>;
-    sortOptions: SortType[];
-    setSelectedSortOption: (sort: string) => void;
-    currentLimit: Signal<number>;
-    currentCursor: Signal<string | null>;
-    hasNextPage: {
-        get: () => boolean;
-    };
-    hasPrevPage: {
-        get: () => boolean;
-    };
-    setLimit: (limit: number) => void;
-    nextPage: () => void;
-    prevPage: () => void;
-    navigateToFirstPage: () => void;
-    loadMore: (count: number) => void;
-    selectedMinPrice: Signal<number>;
-    selectedMaxPrice: Signal<number>;
-    availableMinPrice: Signal<number>;
-    availableMaxPrice: Signal<number>;
-    availableInventoryStatuses: Signal<InventoryStatusType[]>;
-    selectedInventoryStatuses: Signal<InventoryStatusType[]>;
-    availableProductOptions: Signal<ProductOption[]>;
-    selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<Category | null>;
-    setSelectedMinPrice: (minPrice: number) => void;
-    setSelectedMaxPrice: (maxPrice: number) => void;
-    toggleInventoryStatus: (status: InventoryStatusType) => void;
-    toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: Category | null) => void;
-    isFiltered: {
-        get: () => boolean;
-    };
-    reset: () => void;
 }, ProductsListSearchServiceConfig>;