@wix/headless-stores 0.0.36 → 0.0.38

package/dist/react/ProductListPagination.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createServicesMap } from "@wix/services-manager";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductsListPaginationService, ProductsListPaginationServiceDefinition, } from "../services/products-list-pagination-service.js";
+import { ProductsListServiceDefinition } from "../services/products-list-service.js";
+/**
+ * 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 function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListPaginationServiceDefinition, ProductsListPaginationService), children: props.children }));
+}
+/**
+ * Headless component for managing page size (items per page)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { 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>
+ *   );
+ * }
+ * ```
+ */
+export function PageSize(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    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 { 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>
+ *   );
+ * }
+ * ```
+ */
+export function NextPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    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 { 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>
+ *   );
+ * }
+ * ```
+ */
+export function PreviousPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    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 { ProductListPagination } from '@wix/stores/components';
+ *
+ * function FirstPageButton() {
+ *   return (
+ *     <ProductListPagination.FirstPageTrigger>
+ *       {({ goToFirstPage, hasPrevPage }) => (
+ *         <button
+ *           onClick={goToFirstPage}
+ *           disabled={!hasPrevPage}
+ *           title="Go to first page"
+ *         >
+ *           ⏮ First
+ *         </button>
+ *       )}
+ *     </ProductListPagination.FirstPageTrigger>
+ *   );
+ * }
+ * ```
+ */
+export function FirstPageTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const goToFirstPage = service.goToFirstPage;
+    const hasPrevPage = service.hasPrevPage.get();
+    return typeof props.children === "function"
+        ? props.children({ goToFirstPage, hasPrevPage })
+        : props.children;
+}
+/**
+ * Headless component for loading more products (infinite scroll pattern)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { 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>
+ *   );
+ * }
+ * ```
+ */
+export function LoadMoreTrigger(props) {
+    const service = useService(ProductsListPaginationServiceDefinition);
+    const productsListService = useService(ProductsListServiceDefinition);
+    const loadMore = service.loadMore;
+    const hasMoreProducts = service.hasNextPage.get();
+    const isLoading = productsListService.isLoading.get();
+    return typeof props.children === "function"
+        ? props.children({ loadMore, hasMoreProducts, isLoading })
+        : props.children;
+}

package/dist/react/ProductListSort.d.ts

@@ -0,0 +1,87 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { SortType } from "../services/products-list-sort-service.js";
+/**
+ * Root component that provides the ProductListSort service context to its children.
+ * This component sets up the necessary services for managing products list sorting.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListSort } from '@wix/stores/components';
+ *
+ * function SortSection() {
+ *   return (
+ *     <ProductListSort.Root>
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *           <select
+ *             value={selectedSortOption}
+ *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *           >
+ *             {sortOptions.map(option => (
+ *               <option key={option.value} value={option.value}>
+ *                 {option.label}
+ *               </option>
+ *             ))}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *     </ProductListSort.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for Options headless component
+ */
+export interface OptionsProps {
+    /** Content to display (can be a render function receiving sort controls or ReactNode) */
+    children: ((props: OptionsRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Render props for Options component
+ */
+export interface OptionsRenderProps {
+    /** Currently selected sort option value */
+    selectedSortOption: string;
+    /** Function to update the selected sort option */
+    setSelectedSortOption: (sort: string) => void;
+    /** Available sort options */
+    sortOptions: SortType[];
+}
+/**
+ * Headless component for managing product list sorting options
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListSort } from '@wix/stores/components';
+ *
+ * function ProductSortDropdown() {
+ *   return (
+ *     <ProductListSort.Options>
+ *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         <div className="sort-container">
+ *           <label htmlFor="sort-select">Sort by:</label>
+ *           <select
+ *             id="sort-select"
+ *             value={selectedSortOption}
+ *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             className="sort-dropdown"
+ *           >
+ *             {sortOptions.map(option => (
+ *               <option key={option.value} value={option.value}>
+ *                 {option.label}
+ *               </option>
+ *             ))}
+ *           </select>
+ *         </div>
+ *       )}
+ *     </ProductListSort.Options>
+ *   );
+ * }
+ * ```
+ */
+export declare function Options(props: OptionsProps): ReactNode;

package/dist/react/ProductListSort.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createServicesMap } from "@wix/services-manager";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { ProductsListSortService, ProductsListSortServiceDefinition, } from "../services/products-list-sort-service.js";
+/**
+ * Root component that provides the ProductListSort service context to its children.
+ * This component sets up the necessary services for managing products list sorting.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListSort } from '@wix/stores/components';
+ *
+ * function SortSection() {
+ *   return (
+ *     <ProductListSort.Root>
+ *       <ProductListSort.Options>
+ *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *           <select
+ *             value={selectedSortOption}
+ *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *           >
+ *             {sortOptions.map(option => (
+ *               <option key={option.value} value={option.value}>
+ *                 {option.label}
+ *               </option>
+ *             ))}
+ *           </select>
+ *         )}
+ *       </ProductListSort.Options>
+ *     </ProductListSort.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ProductsListSortServiceDefinition, ProductsListSortService, {}), children: props.children }));
+}
+/**
+ * Headless component for managing product list sorting options
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductListSort } from '@wix/stores/components';
+ *
+ * function ProductSortDropdown() {
+ *   return (
+ *     <ProductListSort.Options>
+ *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         <div className="sort-container">
+ *           <label htmlFor="sort-select">Sort by:</label>
+ *           <select
+ *             id="sort-select"
+ *             value={selectedSortOption}
+ *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             className="sort-dropdown"
+ *           >
+ *             {sortOptions.map(option => (
+ *               <option key={option.value} value={option.value}>
+ *                 {option.label}
+ *               </option>
+ *             ))}
+ *           </select>
+ *         </div>
+ *       )}
+ *     </ProductListSort.Options>
+ *   );
+ * }
+ * ```
+ */
+export function Options(props) {
+    const service = useService(ProductsListSortServiceDefinition);
+    const selectedSortOption = service.selectedSortOption.get();
+    const sortOptions = service.sortOptions;
+    const setSelectedSortOption = service.setSelectedSortOption;
+    return typeof props.children === "function"
+        ? props.children({
+            selectedSortOption,
+            setSelectedSortOption,
+            sortOptions,
+        })
+        : props.children;
+}

package/dist/react/ProductModifiers.d.ts

@@ -140,7 +140,7 @@ export interface ModifiersRenderProps {
  * }
  * ```
  */
-export declare const Modifiers: (props: ModifiersProps) => import("react").ReactNode;
+export declare function Modifiers(props: ModifiersProps): import("react").ReactNode;
 /**
  * Props for Modifier headless component
  */
@@ -219,7 +219,7 @@ export interface ModifierRenderProps {
  * }
  * ```
  */
-export declare const Modifier: (props: ModifierProps) => import("react").ReactNode;
+export declare function Modifier(props: ModifierProps): import("react").ReactNode;
 /**
  * Props for ModifierChoice headless component
  */
@@ -280,7 +280,7 @@ export interface ChoiceRenderProps {
  * }
  * ```
  */
-export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+export declare function Choice(props: ChoiceProps): import("react").ReactNode;
 /**
  * Props for ModifierFreeText headless component
  */
@@ -346,7 +346,7 @@ export interface FreeTextRenderProps {
  * }
  * ```
  */
-export declare const FreeText: (props: FreeTextProps) => import("react").ReactNode;
+export declare function FreeText(props: FreeTextProps): import("react").ReactNode;
 /**
  * Props for ModifierToggleFreeText headless component
  */
@@ -411,4 +411,4 @@ export interface ToggleFreeTextRenderProps {
  * }
  * ```
  */
-export declare const ToggleFreeText: (props: ToggleFreeTextProps) => import("react").ReactNode;
+export declare function ToggleFreeText(props: ToggleFreeTextProps): import("react").ReactNode;

package/dist/react/ProductModifiers.js

@@ -137,7 +137,7 @@ function useModifiersService() {
  * }
  * ```
  */
-export const Modifiers = (props) => {
+export function Modifiers(props) {
     const modifiersService = useModifiersService();
     if (!modifiersService) {
         return props.children({
@@ -157,7 +157,7 @@ export const Modifiers = (props) => {
         selectedModifiers,
         areAllRequiredModifiersFilled,
     });
-};
+}
 /**
  * Headless component for a specific product modifier
  *
@@ -204,7 +204,7 @@ export const Modifiers = (props) => {
  * }
  * ```
  */
-export const Modifier = (props) => {
+export function Modifier(props) {
     const modifiersService = useModifiersService();
     const { modifier } = props;
     const name = modifier.name || "";
@@ -228,7 +228,7 @@ export const Modifier = (props) => {
         maxChars,
         placeholder,
     });
-};
+}
 /**
  * Headless component for individual modifier choice selection
  *
@@ -259,7 +259,7 @@ export const Modifier = (props) => {
  * }
  * ```
  */
-export const Choice = (props) => {
+export function Choice(props) {
     const modifiersService = useModifiersService();
     const { modifier, choice } = props;
     const modifierName = modifier.name || "";
@@ -285,7 +285,7 @@ export const Choice = (props) => {
         choiceValue,
         colorCode,
     });
-};
+}
 /**
  * Headless component for free text modifier input
  *
@@ -321,7 +321,7 @@ export const Choice = (props) => {
  * }
  * ```
  */
-export const FreeText = (props) => {
+export function FreeText(props) {
     const modifiersService = useModifiersService();
     const { modifier } = props;
     const modifierName = modifier.name || "";
@@ -348,7 +348,7 @@ export const FreeText = (props) => {
         isOverLimit,
         modifierName,
     });
-};
+}
 /**
  * Headless component for toggling free text modifier input
  * Used for optional free text modifiers where a checkbox shows/hides the input
@@ -391,7 +391,7 @@ export const FreeText = (props) => {
  * }
  * ```
  */
-export const ToggleFreeText = (props) => {
+export function ToggleFreeText(props) {
     const modifiersService = useModifiersService();
     const { modifier } = props;
     const modifierName = modifier.name || "";
@@ -410,4 +410,4 @@ export const ToggleFreeText = (props) => {
         mandatory,
         modifierName,
     });
-};
+}

package/dist/react/ProductVariantSelector.d.ts

@@ -92,7 +92,7 @@ export interface OptionsRenderProps {
  * }
  * ```
  */
-export declare const Options: (props: OptionsProps) => import("react").ReactNode;
+export declare function Options(props: OptionsProps): import("react").ReactNode;
 /**
  * Props for Option headless component
  */
@@ -148,7 +148,7 @@ export interface OptionRenderProps {
  * }
  * ```
  */
-export declare const Option: (props: OptionProps) => import("react").ReactNode;
+export declare function Option(props: OptionProps): import("react").ReactNode;
 /**
  * Props for Choice headless component
  */
@@ -209,7 +209,7 @@ export interface ChoiceRenderProps {
  * }
  * ```
  */
-export declare const Choice: (props: ChoiceProps) => import("react").ReactNode;
+export declare function Choice(props: ChoiceProps): import("react").ReactNode;
 /**
  * Props for Stock headless component
  */
@@ -271,7 +271,7 @@ export interface StockRenderProps {
  * }
  * ```
  */
-export declare const Stock: (props: StockProps) => import("react").ReactNode;
+export declare function Stock(props: StockProps): import("react").ReactNode;
 /**
  * Props for Reset headless component
  */
@@ -311,4 +311,4 @@ export interface ResetRenderProps {
  * }
  * ```
  */
-export declare const Reset: (props: ResetProps) => import("react").ReactNode;
+export declare function Reset(props: ResetProps): import("react").ReactNode;

package/dist/react/ProductVariantSelector.js

@@ -76,7 +76,7 @@ export function Root(props) {
  * }
  * ```
  */
-export const Options = (props) => {
+export function Options(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const options = variantService.productOptions.get();
@@ -85,7 +85,7 @@ export const Options = (props) => {
         hasOptions: options.length > 0,
         selectedChoices,
     });
-};
+}
 /**
  * Headless component for choices within a specific product option
  *
@@ -117,7 +117,7 @@ export const Options = (props) => {
  * }
  * ```
  */
-export const Option = (props) => {
+export function Option(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option } = props;
@@ -131,7 +131,7 @@ export const Option = (props) => {
         selectedValue,
         hasChoices: choices.length > 0,
     });
-};
+}
 /**
  * Headless component for individual choice selection
  *
@@ -158,7 +158,7 @@ export const Option = (props) => {
  * }
  * ```
  */
-export const Choice = (props) => {
+export function Choice(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const { option, choice } = props;
@@ -190,7 +190,8 @@ export const Choice = (props) => {
         optionName,
         choiceValue,
     });
-};
+}
+;
 /**
  * Headless component for product stock status
  *
@@ -222,7 +223,7 @@ export const Choice = (props) => {
  * }
  * ```
  */
-export const Stock = (props) => {
+export function Stock(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const inStock = variantService.isInStock.get();
     const isPreOrderEnabled = variantService.isPreOrderEnabled.get();
@@ -251,7 +252,8 @@ export const Stock = (props) => {
         incrementQuantity,
         decrementQuantity,
     });
-};
+}
+;
 /**
  * Headless component for resetting variant selections
  *
@@ -275,7 +277,7 @@ export const Stock = (props) => {
  * }
  * ```
  */
-export const Reset = (props) => {
+export function Reset(props) {
     const variantService = useService(SelectedVariantServiceDefinition);
     const selectedChoices = variantService.selectedChoices.get();
     const hasSelections = Object.keys(selectedChoices).length > 0;
@@ -286,4 +288,5 @@ export const Reset = (props) => {
         onReset,
         hasSelections,
     });
-};
+}
+;