@wix/headless-stores 0.0.57 → 0.0.58

package/dist/react/core/ProductListFilters.js

@@ -1,54 +1,71 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { 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 { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function InventoryStatusFilter() {
- *   return (
- *     <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(ProductsListSearchServiceDefinition);
-    const availableInventoryStatuses = service.availableInventoryStatuses.get();
-    const selectedInventoryStatuses = service.selectedInventoryStatuses.get();
-    const toggleInventoryStatus = service.toggleInventoryStatus;
-    return typeof props.children === 'function'
-        ? props.children({
-            availableInventoryStatuses,
-            selectedInventoryStatuses,
-            toggleInventoryStatus,
-        })
-        : props.children;
+import { ProductsListServiceDefinition, InventoryStatusType, CategoriesListServiceDefinition, } from '../../services/index.js';
+import { useMemo } from 'react';
+import { Filter as FilterPrimitive, } from '@wix/headless-components/react';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+// Conversion utilities for platform compatibility
+function getInventoryStatusLabel(status) {
+    switch (status) {
+        case InventoryStatusType.IN_STOCK:
+            return 'In Stock';
+        case InventoryStatusType.OUT_OF_STOCK:
+            return 'Out of Stock';
+        case InventoryStatusType.PARTIALLY_OUT_OF_STOCK:
+            return 'Limited Stock';
+        default:
+            return String(status);
+    }
+}
+function buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice) {
+    // Build consolidated filter options using search field names
+    const filterOptions = [
+        // Price range - use a logical key that maps to both min/max fields
+        {
+            key: 'priceRange',
+            label: 'Price Range',
+            type: 'range',
+            displayType: 'range',
+            validValues: [availableMinPrice, availableMaxPrice],
+            valueFormatter: (value) => `$${value}`,
+            fieldName: [
+                'actualPriceRange.minValue.amount',
+                'actualPriceRange.maxValue.amount',
+            ],
+        },
+        // Product options (colors, sizes, etc.) - individual filters for each option type
+        ...availableOptions.map((option) => ({
+            key: option.id,
+            label: String(option.name),
+            type: 'multi',
+            displayType: option.optionRenderType === 'SWATCH_CHOICES'
+                ? 'color'
+                : 'text',
+            fieldName: 'options.choicesSettings.choices.choiceId',
+            fieldType: 'array',
+            validValues: option.choices.map((choice) => choice.id),
+            valueFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                const name = choice?.name || String(value);
+                return option.optionRenderType === 'SWATCH_CHOICES'
+                    ? name.toLowerCase()
+                    : name;
+            },
+        })),
+        // Inventory status - use actual search field name
+        {
+            key: 'inventory.availabilityStatus',
+            label: 'Availability',
+            type: 'multi',
+            displayType: 'text',
+            fieldName: 'inventory.availabilityStatus',
+            fieldType: 'singular',
+            validValues: availableInventoryStatuses,
+            valueFormatter: (value) => getInventoryStatusLabel(value),
+        },
+    ];
+    return { filterOptions };
 }
 /**
  * Headless component for resetting all filters
@@ -81,136 +98,85 @@ export function InventoryStatus(props) {
  * ```
  */
 export function ResetTrigger(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const resetFilters = service.reset;
-    const isFiltered = service.isFiltered.get();
+    const service = useService(ProductsListServiceDefinition);
+    const resetFilters = service.resetFilter;
+    const isFiltered = service.isFiltered().get();
     return typeof props.children === 'function'
         ? props.children({ resetFilters, isFiltered })
         : props.children;
 }
-/**
- * Headless component for managing price range filters (combined min/max)
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function PriceRangeFilter() {
- *   return (
- *     <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>
- *         )}
- *       </ProductListFilters.PriceRange>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export function PriceRange(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const selectedMinPrice = service.selectedMinPrice.get();
-    const selectedMaxPrice = service.selectedMaxPrice.get();
-    const availableMinPrice = service.availableMinPrice.get();
-    const availableMaxPrice = service.availableMaxPrice.get();
-    const setSelectedMinPrice = service.setSelectedMinPrice;
-    const setSelectedMaxPrice = service.setSelectedMaxPrice;
-    return typeof props.children === 'function'
-        ? props.children({
-            availableMinPrice,
-            selectedMinPrice,
-            selectedMaxPrice,
-            availableMaxPrice,
-            setSelectedMinPrice,
-            setSelectedMaxPrice,
-        })
-        : props.children;
-}
 export function CategoryFilter(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const selectedCategory = service.selectedCategory.get();
-    const setSelectedCategory = service.setSelectedCategory;
+    const categoriesService = useService(CategoriesListServiceDefinition);
+    const productListService = useService(ProductsListServiceDefinition);
+    const categories = categoriesService.categories.get();
+    const setSelectedCategory = (category) => {
+        const currentFilter = productListService.searchOptions.get().filter || {};
+        if (!category) {
+            delete currentFilter['allCategoriesInfo.categories'];
+            productListService.setFilter(currentFilter);
+            return;
+        }
+        productListService.setFilter({
+            ...currentFilter,
+            'allCategoriesInfo.categories': {
+                $matchItems: [{ id: { $in: [category._id] } }],
+            },
+        });
+    };
+    const selectedCategoryId = productListService.searchOptions.get().filter['allCategoriesInfo.categories']?.$matchItems?.[0]?.id
+        ?.$in?.[0];
+    const selectedCategory = categories?.find((c) => c._id === selectedCategoryId) || null;
     return typeof props.children === 'function'
         ? props.children({ selectedCategory, setSelectedCategory })
         : 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.
- * Only renders when options are available (not loading, no error, and has options).
- * This follows the same collection pattern as ProductList.ItemContent and CategoryList.ItemContent.
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function ProductOptionsFilter() {
- *   return (
- *     <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>
- *   );
- * }
- * ```
+ * Internal component that provides filter data for the Filter component.
+ * Consolidates data from both search and list services.
  */
-export function ProductOptions(props) {
-    const service = useService(ProductsListSearchServiceDefinition);
-    const availableOptions = service.availableProductOptions.get();
-    const selectedProductOptions = service.selectedProductOptions.get();
-    // Don't render if no options are available
-    if (availableOptions.length === 0) {
-        return null;
-    }
-    // Map over options and create render prop for each
-    return (_jsx(_Fragment, { children: availableOptions.map((option) => {
-            const selectedChoices = selectedProductOptions[option.id] || [];
-            const toggleChoice = (choiceId) => {
-                service.toggleProductOption(option.id, choiceId);
-            };
-            return typeof props.children === 'function'
-                ? props.children({ option, selectedChoices, toggleChoice })
-                : props.children;
-        }) }));
+function AllFilters(props) {
+    const listService = useService(ProductsListServiceDefinition);
+    // Get current filter state
+    const currentSearchOptions = listService.searchOptions.get();
+    const currentFilter = currentSearchOptions.filter;
+    // Get available filter data
+    const availableOptions = listService.availableProductOptions.get();
+    const availableInventoryStatuses = listService.availableInventoryStatuses.get();
+    const availableMinPrice = listService.minPrice.get();
+    const availableMaxPrice = listService.maxPrice.get();
+    // Get filter state
+    const resetFilters = listService.resetFilter;
+    const isFiltered = listService.isFiltered().get();
+    // Build filter options and handlers
+    const searchFilterData = useMemo(() => {
+        const { filterOptions } = buildSearchFilterData(availableOptions, availableInventoryStatuses, availableMinPrice, availableMaxPrice);
+        const updateFilter = (newFilter) => {
+            listService.setFilter(newFilter);
+        };
+        return {
+            filterValue: currentFilter,
+            filterOptions,
+            updateFilter,
+            clearFilters: resetFilters,
+            hasFilters: isFiltered,
+        };
+    }, [
+        availableOptions,
+        availableInventoryStatuses,
+        availableMinPrice,
+        availableMaxPrice,
+        currentFilter,
+        resetFilters,
+        isFiltered,
+        listService,
+    ]);
+    return typeof props.children === 'function'
+        ? props.children({ searchFilter: searchFilterData })
+        : props.children;
 }
+export const Filter = React.forwardRef(({ children, className, asChild }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(AllFilters, { children: ({ searchFilter }) => {
+            return (_jsx(FilterPrimitive.Root, { value: searchFilter.filterValue, onChange: searchFilter.updateFilter, filterOptions: searchFilter.filterOptions, children: _jsx(Comp, { className: className, ref: ref, children: children }) }));
+        } }));
+});

package/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
  */