@wix/headless-stores 0.0.35 → 0.0.37

package/{dist/react/ProductsList.d.ts → cjs/dist/react/ProductList.d.ts}

@@ -1,24 +1,27 @@
 import { type ProductsListServiceConfig } from "../services/products-list-service.js";
 import { productsV3 } from "@wix/stores";
+/**
+ * Props for Root headless component
+ */
 export interface RootProps {
-    /** Child components that will have access to the ProductsList service */
+    /** Child components that will have access to the ProductList service */
     children: React.ReactNode;
-    /** Configuration for the ProductsList service */
+    /** Configuration for the ProductList service */
     productsListConfig: ProductsListServiceConfig;
 }
 /**
- * Root component that provides the ProductsList service context to its children.
+ * Root component that provides the ProductList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
- * function ProductsListPage() {
+ * function ProductListPage() {
  *   return (
- *     <ProductsList.Root
+ *     <ProductList.Root
  *       productsListConfig={{
  *         products: myProducts,
  *         searchOptions: { query: { search: 'searchTerm' } },
@@ -26,27 +29,30 @@ export interface RootProps {
  *         aggregations: {}
  *       }}
  *     >
- *       <ProductsList.Grid>
- *         {({ products, isLoading, error }) => (
- *           <div>
- *             {isLoading && <div>Loading products...</div>}
- *             {error && <div>Error: {error}</div>}
- *             {products.map(product => (
- *               <div key={product.id}>{product.name}</div>
- *             ))}
+ *       <ProductList.ItemContent>
+ *         {({ product }) => (
+ *           <div key={product._id}>
+ *             <h3>{product.name}</h3>
+ *             <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
  *           </div>
  *         )}
- *       </ProductsList.Grid>
- *     </ProductsList.Root>
+ *       </ProductList.ItemContent>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
  */
 export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for EmptyState headless component
+ */
 export interface EmptyStateProps {
     /** Content to display when products list is empty (can be a render function or ReactNode) */
-    children: (props: EmptyStateRenderProps) => React.ReactNode;
+    children: ((props: EmptyStateRenderProps) => React.ReactNode) | React.ReactNode;
 }
+/**
+ * Render props for EmptyState component
+ */
 export interface EmptyStateRenderProps {
 }
 /**
@@ -56,11 +62,11 @@ export interface EmptyStateRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function EmptyProductsMessage() {
  *   return (
- *     <ProductsList.EmptyState>
+ *     <ProductList.EmptyState>
  *       {() => (
  *         <div className="empty-state">
  *           <h3>No products found</h3>
@@ -68,16 +74,22 @@ export interface EmptyStateRenderProps {
  *           <button>Clear Filters</button>
  *         </div>
  *       )}
- *     </ProductsList.EmptyState>
+ *     </ProductList.EmptyState>
  *   );
  * }
  * ```
  */
 export declare function EmptyState(props: EmptyStateProps): React.ReactNode;
+/**
+ * Props for Loading headless component
+ */
 export interface LoadingProps {
     /** Content to display during loading (can be a render function or ReactNode) */
-    children: (props: LoadingRenderProps) => React.ReactNode;
+    children: ((props: LoadingRenderProps) => React.ReactNode) | React.ReactNode;
 }
+/**
+ * Render props for Loading component
+ */
 export interface LoadingRenderProps {
 }
 /**
@@ -87,29 +99,36 @@ export interface LoadingRenderProps {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsLoading() {
  *   return (
- *     <ProductsList.Loading>
+ *     <ProductList.Loading>
  *       {() => (
  *         <div className="loading-spinner">
  *           <div>Loading products...</div>
  *           <div className="spinner"></div>
  *         </div>
  *       )}
- *     </ProductsList.Loading>
+ *     </ProductList.Loading>
  *   );
  * }
  * ```
  */
 export declare function Loading(props: LoadingProps): React.ReactNode;
-export interface ErrorRenderProps {
-    error: string | null;
-}
+/**
+ * Props for Error headless component
+ */
 export interface ErrorProps {
     /** Content to display during error state (can be a render function or ReactNode) */
-    children: (props: ErrorRenderProps) => React.ReactNode;
+    children: ((props: ErrorRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for Error component
+ */
+export interface ErrorRenderProps {
+    /** Error message */
+    error: string | null;
 }
 /**
  * Component that renders content when there's an error loading products.
@@ -118,11 +137,11 @@ export interface ErrorProps {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsError() {
  *   return (
- *     <ProductsList.Error>
+ *     <ProductList.Error>
  *       {({ error }) => (
  *         <div className="error-state">
  *           <h3>Error loading products</h3>
@@ -132,18 +151,25 @@ export interface ErrorProps {
  *           </button>
  *         </div>
  *       )}
- *     </ProductsList.Error>
+ *     </ProductList.Error>
  *   );
  * }
  * ```
  */
 export declare function Error(props: ErrorProps): React.ReactNode;
-export interface ItemContentRenderProps {
-    product: productsV3.V3Product;
-}
+/**
+ * Props for ItemContent headless component
+ */
 export interface ItemContentProps {
     /** Content to display for each product (can be a render function receiving product data or ReactNode) */
-    children: (props: ItemContentRenderProps) => React.ReactNode;
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Render props for ItemContent component
+ */
+export interface ItemContentRenderProps {
+    /** Product data */
+    product: productsV3.V3Product;
 }
 /**
  * Component that renders content for each product in the list.
@@ -153,11 +179,11 @@ export interface ItemContentProps {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsGrid() {
  *   return (
- *     <ProductsList.ItemContent>
+ *     <ProductList.ItemContent>
  *       {({ product }) => (
  *         <div className="product-card">
  *           <img src={product.media?.main?.image} alt={product.name} />
@@ -166,9 +192,16 @@ export interface ItemContentProps {
  *           <button>View Details</button>
  *         </div>
  *       )}
- *     </ProductsList.ItemContent>
+ *     </ProductList.ItemContent>
  *   );
  * }
  * ```
  */
 export declare function ItemContent(props: ItemContentProps): React.ReactNode;
+export type ItemsProps = {
+    children: ((props: ItemsRenderProps) => React.ReactNode) | React.ReactNode;
+};
+export type ItemsRenderProps = {
+    products: productsV3.V3Product[];
+};
+export declare function Items(props: ItemsProps): import("react").ReactNode;

package/{dist/react/ProductsList.js → cjs/dist/react/ProductList.js}

@@ -4,18 +4,18 @@ import { createServicesMap } from "@wix/services-manager";
 import { ProductListService, ProductsListServiceDefinition, } from "../services/products-list-service.js";
 import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/services";
 /**
- * Root component that provides the ProductsList service context to its children.
+ * Root component that provides the ProductList service context to its children.
  * This component sets up the necessary services for managing products list state.
  *
  * @order 1
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
- * function ProductsListPage() {
+ * function ProductListPage() {
  *   return (
- *     <ProductsList.Root
+ *     <ProductList.Root
  *       productsListConfig={{
  *         products: myProducts,
  *         searchOptions: { query: { search: 'searchTerm' } },
@@ -23,18 +23,15 @@ import { ProductService, ProductServiceDefinition, } from "@wix/headless-stores/
  *         aggregations: {}
  *       }}
  *     >
- *       <ProductsList.Grid>
- *         {({ products, isLoading, error }) => (
- *           <div>
- *             {isLoading && <div>Loading products...</div>}
- *             {error && <div>Error: {error}</div>}
- *             {products.map(product => (
- *               <div key={product.id}>{product.name}</div>
- *             ))}
+ *       <ProductList.ItemContent>
+ *         {({ product }) => (
+ *           <div key={product._id}>
+ *             <h3>{product.name}</h3>
+ *             <p>{product.actualPriceRange?.minValue?.formattedAmount}</p>
  *           </div>
  *         )}
- *       </ProductsList.Grid>
- *     </ProductsList.Root>
+ *       </ProductList.ItemContent>
+ *     </ProductList.Root>
  *   );
  * }
  * ```
@@ -49,11 +46,11 @@ export function Root(props) {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function EmptyProductsMessage() {
  *   return (
- *     <ProductsList.EmptyState>
+ *     <ProductList.EmptyState>
  *       {() => (
  *         <div className="empty-state">
  *           <h3>No products found</h3>
@@ -61,7 +58,7 @@ export function Root(props) {
  *           <button>Clear Filters</button>
  *         </div>
  *       )}
- *     </ProductsList.EmptyState>
+ *     </ProductList.EmptyState>
  *   );
  * }
  * ```
@@ -85,18 +82,18 @@ export function EmptyState(props) {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsLoading() {
  *   return (
- *     <ProductsList.Loading>
+ *     <ProductList.Loading>
  *       {() => (
  *         <div className="loading-spinner">
  *           <div>Loading products...</div>
  *           <div className="spinner"></div>
  *         </div>
  *       )}
- *     </ProductsList.Loading>
+ *     </ProductList.Loading>
  *   );
  * }
  * ```
@@ -118,11 +115,11 @@ export function Loading(props) {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsError() {
  *   return (
- *     <ProductsList.Error>
+ *     <ProductList.Error>
  *       {({ error }) => (
  *         <div className="error-state">
  *           <h3>Error loading products</h3>
@@ -132,7 +129,7 @@ export function Loading(props) {
  *           </button>
  *         </div>
  *       )}
- *     </ProductsList.Error>
+ *     </ProductList.Error>
  *   );
  * }
  * ```
@@ -155,11 +152,11 @@ export function Error(props) {
  * @component
  * @example
  * ```tsx
- * import { ProductsList } from '@wix/stores/components';
+ * import { ProductList } from '@wix/stores/components';
  *
  * function ProductsGrid() {
  *   return (
- *     <ProductsList.ItemContent>
+ *     <ProductList.ItemContent>
  *       {({ product }) => (
  *         <div className="product-card">
  *           <img src={product.media?.main?.image} alt={product.name} />
@@ -168,7 +165,7 @@ export function Error(props) {
  *           <button>View Details</button>
  *         </div>
  *       )}
- *     </ProductsList.ItemContent>
+ *     </ProductList.ItemContent>
  *   );
  * }
  * ```
@@ -183,3 +180,10 @@ export function ItemContent(props) {
             ? props.children({ product })
             : props.children }, product._id)));
 }
+export function Items(props) {
+    const { products } = useService(ProductsListServiceDefinition);
+    const productsValue = products.get();
+    return typeof props.children === "function"
+        ? props.children({ products: productsValue })
+        : props.children;
+}

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

@@ -0,0 +1,244 @@
+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, setMinPrice }) => (
+ *           <input
+ *             type="number"
+ *             value={minPrice}
+ *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             placeholder="Min price"
+ *           />
+ *         )}
+ *       </ProductListFilters.MinPrice>
+ *     </ProductListFilters.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for InventoryStatus headless component
+ */
+export interface InventoryStatusProps {
+    /** Content to display (can be a render function receiving inventory status controls or ReactNode) */
+    children: ((props: InventoryStatusRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for InventoryStatus component
+ */
+export interface InventoryStatusRenderProps {
+    /** Available inventory status options */
+    availableInventoryStatuses: InventoryStatusType[];
+    /** Currently selected inventory statuses */
+    selectedInventoryStatuses: InventoryStatusType[];
+    /** Function to toggle an inventory status filter */
+    toggleInventoryStatus: (status: InventoryStatusType) => void;
+}
+/**
+ * Headless component for managing inventory status filters
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function InventoryStatus(props: InventoryStatusProps): ReactNode;
+/**
+ * Props for ResetTrigger headless component
+ */
+export interface ResetTriggerProps {
+    /** Content to display (can be a render function receiving reset controls or ReactNode) */
+    children: ((props: ResetTriggerRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for ResetTrigger component
+ */
+export interface ResetTriggerRenderProps {
+    /** Function to reset all filters */
+    resetFilters: () => void;
+    /** Whether any filters are currently applied */
+    isFiltered: boolean;
+}
+/**
+ * Headless component for resetting all filters
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function ResetTrigger(props: ResetTriggerProps): ReactNode;
+/**
+ * Props for PriceRange headless component
+ */
+export interface PriceRangeProps {
+    /** Content to display (can be a render function receiving price range controls or ReactNode) */
+    children: ((props: PriceRangeRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for PriceRange component
+ */
+export interface PriceRangeRenderProps {
+    /** Current minimum price filter value */
+    minPrice: number;
+    /** Current maximum price filter value */
+    maxPrice: number;
+    /** Function to update the minimum price filter */
+    setMinPrice: (minPrice: number) => void;
+    /** Function to update the maximum price filter */
+    setMaxPrice: (maxPrice: number) => void;
+}
+/**
+ * Headless component for managing price range filters (combined min/max)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListFilters } from '@wix/stores/components';
+ *
+ * function PriceRangeFilter() {
+ *   return (
+ *     <ProductListFilters.PriceRange>
+ *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *         <div className="price-range">
+ *           <h4>Price Range:</h4>
+ *           <div className="price-inputs">
+ *             <input
+ *               type="number"
+ *               value={minPrice}
+ *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               placeholder="Min"
+ *             />
+ *             <span>to</span>
+ *             <input
+ *               type="number"
+ *               value={maxPrice}
+ *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               placeholder="Max"
+ *             />
+ *           </div>
+ *         </div>
+ *       )}
+ *     </ProductListFilters.PriceRange>
+ *   );
+ * }
+ * ```
+ */
+export declare function PriceRange(props: PriceRangeProps): ReactNode;
+/**
+ * Props for ProductOptions headless component
+ */
+export interface ProductOptionsProps {
+    /** Content to display (can be a render function receiving product option data or ReactNode) */
+    children: ((props: ProductOptionRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for ProductOption component
+ */
+export interface ProductOptionRenderProps {
+    /** Product option data */
+    option: ProductOption;
+    /** Currently selected choice IDs for this option */
+    selectedChoices: string[];
+    /** Function to toggle a choice selection */
+    toggleChoice: (choiceId: string) => void;
+}
+/**
+ * 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 { 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function ProductOptions(props: ProductOptionsProps): import("react/jsx-runtime").JSX.Element | null;