@wix/headless-stores 0.0.61 → 0.0.64

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

@@ -155,3 +155,36 @@ export function Slug(props) {
         slug,
     });
 }
+/**
+ * Headless component for product ribbon display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductRibbonDisplay() {
+ *   return (
+ *     <Product.Ribbon>
+ *       {({ ribbon, hasRibbon }) => (
+ *         hasRibbon ? (
+ *           <span className="ribbon-badge">
+ *             {ribbon}
+ *           </span>
+ *         ) : null
+ *       )}
+ *     </Product.Ribbon>
+ *   );
+ * }
+ * ```
+ */
+export function Ribbon(props) {
+    const service = useService(ProductServiceDefinition);
+    const product = service.product.get();
+    const ribbon = product.ribbon?.name || null;
+    const hasRibbon = !!ribbon;
+    return props.children({
+        ribbon,
+        hasRibbon,
+    });
+}

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

@@ -52,6 +52,10 @@ function buildSearchFilterData(availableOptions, availableInventoryStatuses, ava
                     ? name.toLowerCase()
                     : name;
             },
+            valueBgColorFormatter: (value) => {
+                const choice = option.choices.find((c) => c.id === value);
+                return choice?.colorCode || null;
+            },
         })),
         // Inventory status - use actual search field name
         {

package/cjs/dist/services/products-list-service.js

@@ -323,15 +323,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
             }
             try {
                 isLoadingSignal.set(true);
-                const affectiveSearchOptions = searchOptions.cursorPaging?.cursor
-                    ? {
-                        cursorPaging: {
-                            cursor: searchOptions.cursorPaging.cursor,
-                            limit: searchOptions.cursorPaging.limit,
-                        },
-                    }
-                    : searchOptions;
-                const result = await fetchProducts(affectiveSearchOptions);
+                const result = await fetchProducts(searchOptions);
                 productsSignal.set(result.products ?? []);
                 pagingMetadataSignal.set(result.pagingMetadata);
             }
@@ -344,6 +336,29 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         });
     }
     firstRun = false;
+    const loadMoreCursor = async (count) => {
+        const affectiveSearchOptions = {
+            cursorPaging: {
+                cursor: pagingMetadataSignal.get().cursors?.next,
+                limit: DEFAULT_QUERY_LIMIT || count,
+            },
+        };
+        try {
+            isLoadingSignal.set(true);
+            const result = await fetchProducts(affectiveSearchOptions);
+            productsSignal.set([
+                ...productsSignal.get(),
+                ...(result.products ?? []),
+            ]);
+            pagingMetadataSignal.set(result.pagingMetadata);
+        }
+        catch (error) {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
     return {
         products: productsSignal,
         searchOptions: searchOptionsSignal,
@@ -391,14 +406,7 @@ export const ProductListService = implementService.withConfig()(ProductsListServ
         isLoading: isLoadingSignal,
         error: errorSignal,
         loadMore: (count) => {
-            const currentOptions = searchOptionsSignal.peek();
-            searchOptionsSignal.set({
-                ...currentOptions,
-                cursorPaging: {
-                    cursor: pagingMetadataSignal.get().cursors?.next,
-                    limit: currentOptions.cursorPaging?.limit ?? 0 + count,
-                },
-            });
+            loadMoreCursor(count);
         },
         hasMoreProducts: signalsService.computed(() => pagingMetadataSignal.get().hasNext ?? false),
     };

package/dist/react/Choice.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 /**
  * Choice data interface
  */
@@ -67,10 +67,16 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
 /**
  * Props for Choice Text component
  */
-export interface TextProps extends AsChildProps<{
-    id: string;
-    value: string;
-}> {
+export interface TextProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        id: string;
+        value: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Text-based choice button.
@@ -105,11 +111,17 @@ export declare const Text: React.ForwardRefExoticComponent<TextProps & React.Ref
 /**
  * Props for Choice Color component
  */
-export interface ColorProps extends AsChildProps<{
-    colorCode: string;
-    name: string;
-    id: string;
-}> {
+export interface ColorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        colorCode: string;
+        name: string;
+        id: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Color swatch choice.
@@ -148,14 +160,20 @@ export declare const Color: React.ForwardRefExoticComponent<ColorProps & React.R
 /**
  * Props for Choice FreeText component
  */
-export interface FreeTextProps extends AsChildProps<{
-    minCharCount?: number;
-    maxCharCount?: number;
-    defaultAddedPrice?: string | null;
-    title?: string;
-    value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}>, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+export interface FreeTextProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        minCharCount?: number;
+        maxCharCount?: number;
+        defaultAddedPrice?: string | null;
+        title?: string;
+        value?: string;
+        onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Provides a free text input for variant selection.

package/dist/react/Choice.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -91,24 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    const attributes = {
-        'data-testid': TestIds.choiceText,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { id: choiceId, value },
-            ref,
-            content: value,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, children: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -157,28 +140,11 @@ export const Color = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const { colorCode, choiceId } = choice;
-    const attributes = {
-        'data-testid': TestIds.choiceColor,
-        'data-selected': isSelected ? 'true' : 'false',
-        disabled: !isInStock && !isPreOrderEnabled,
-        onClick: select,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: {
-                colorCode: colorCode || '',
-                name: value,
-                id: choiceId || '',
-            },
-            ref,
-            content: null,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("button", { className: className, ...attributes, ref: ref, style: { backgroundColor: colorCode }, title: value }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceColor, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: {
+            colorCode: colorCode || '',
+            name: value,
+            id: choiceId || '',
+        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -226,10 +192,6 @@ export const FreeText = React.forwardRef((props, ref) => {
     // Don't render if not visible (handled by ProductVariantSelector in Root)
     if (!isVisible)
         return null;
-    const attributes = {
-        'data-testid': TestIds.choiceFreetext,
-        'data-selected': isSelected ? 'true' : 'false',
-    };
     return (_jsx(FreeTextPrimitive, { modifier: choice, children: ({ value, setText, placeholder, maxChars }) => {
             const handleChange = (e) => {
                 setText(e.target.value);
@@ -237,23 +199,12 @@ export const FreeText = React.forwardRef((props, ref) => {
                     onValueChange(e.target.value);
                 }
             };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: {
-                        minCharCount: choice?.minCharCount,
-                        maxCharCount: choice?.maxCharCount,
-                        defaultAddedPrice: choice?.addedPrice || undefined,
-                        title: choice?.name || undefined,
-                        onChange: handleChange,
-                    },
-                    ref,
-                    content: null,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("textarea", { ref: ref, className: className, placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, ...attributes, onChange: handleChange }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceFreetext, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+                    minCharCount: choice?.minCharCount,
+                    maxCharCount: choice?.maxCharCount,
+                    defaultAddedPrice: choice?.addedPrice || undefined,
+                    title: choice?.name || undefined,
+                    onChange: handleChange,
+                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

package/dist/react/Option.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
     choices?: any[];
@@ -10,11 +10,17 @@ export interface Option {
 /**
  * Root props with asChild support
  */
-export interface RootProps extends AsChildProps<{
-    option: Option;
-    onValueChange?: (value: string) => void;
-    allowedTypes?: ('color' | 'text' | 'free-text')[];
-}> {
+export interface RootProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        option: Option;
+        onValueChange?: (value: string) => void;
+        allowedTypes?: ('color' | 'text' | 'free-text')[];
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
     option: Option;
     onValueChange?: (value: string) => void;
     allowedTypes?: ('color' | 'text' | 'free-text')[];
@@ -105,9 +111,15 @@ export declare const OptionContext: React.Context<any>;
 /**
  * Props for Option Name component
  */
-export interface NameProps extends AsChildProps<{
-    name: string;
-}> {
+export interface NameProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        name: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the option name.
@@ -136,9 +148,15 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Option MandatoryIndicator component
  */
-export interface MandatoryIndicatorProps extends AsChildProps<{
-    mandatory: boolean;
-}> {
+export interface MandatoryIndicatorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        mandatory: boolean;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/dist/react/Option.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
 import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,23 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    const attributes = {
-        'data-testid': TestIds.optionRoot,
-        'data-type': optionType,
-    };
-    const content = (_jsx(OptionContext.Provider, { value: contextValue, children: typeof children === 'function' ? null : children }));
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { option, onValueChange, allowedTypes },
-            ref,
-            content,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { ...attributes, ref: ref, children: content }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -162,21 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    const attributes = {
-        'data-testid': TestIds.optionName,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { name },
-            ref,
-            content: name,
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("div", { className: className, ...attributes, ref: ref, children: name }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.
@@ -205,21 +175,7 @@ export const MandatoryIndicator = React.forwardRef((props, ref) => {
     // Don't render anything if not mandatory
     if (!mandatory)
         return null;
-    const attributes = {
-        'data-testid': TestIds.optionMandatoryIndicator,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { mandatory },
-            ref,
-            content: '*',
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("span", { className: className, ...attributes, ref: ref, children: "*" }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionMandatoryIndicator, customElement: children, customElementProps: { mandatory }, content: '*', children: _jsx("span", { children: "*" }) }));
 });
 /**
  * Container for the list items with empty state support.

package/dist/react/Product.d.ts

@@ -282,6 +282,113 @@ export interface RawProps {
  * ```
  */
 export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Ribbon component
+ */
+export interface RibbonProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        ribbon: string | null;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+/**
+ * Displays the product ribbon with customizable rendering following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Ribbon className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 text-xs rounded" />
+ *
+ * // asChild with primitive
+ * <Product.Ribbon asChild>
+ *   <span className="ribbon-badge" />
+ * </Product.Ribbon>
+ *
+ * // asChild with react component
+ * <Product.Ribbon asChild>
+ *   {React.forwardRef(({ribbon, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="ribbon-badge">
+ *       {ribbon}
+ *     </div>
+ *   ))}
+ * </Product.Ribbon>
+ * ```
+ */
+export declare const Ribbon: React.ForwardRefExoticComponent<RibbonProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Stock component
+ */
+export interface StockProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        status: 'in-stock' | 'limited-stock' | 'out-of-stock';
+        label: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Custom labels for different stock states */
+    labels?: {
+        /** Label for in stock state */
+        inStock?: string;
+        /** Label for limited stock state (when quantity is low) */
+        limitedStock?: string;
+        /** Label for out of stock state */
+        outOfStock?: string;
+    };
+}
+/**
+ * Displays the product stock status with customizable rendering and labels following the documented API.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.Stock
+ *   className="stock-indicator"
+ *   labels={{
+ *     inStock: 'In Stock',
+ *     limitedStock: 'Limited Stock',
+ *     outOfStock: 'Out of Stock'
+ *   }}
+ * />
+ *
+ * // asChild with primitive
+ * <Product.Stock asChild>
+ *   <div className="stock-status" />
+ * </Product.Stock>
+ *
+ * // asChild with react component
+ * <Product.Stock
+ *   labels={{
+ *     inStock: 'Available',
+ *     limitedStock: 'Low Stock',
+ *     outOfStock: 'Sold Out'
+ *   }}
+ *   asChild
+ * >
+ *   {React.forwardRef(({status, label, ...props}, ref) => (
+ *     <div
+ *       ref={ref}
+ *       {...props}
+ *       className="flex items-center gap-1 data-[state='in-stock']:text-green-600 data-[state='limited-stock']:text-yellow-600 data-[state='out-of-stock']:text-red-600"
+ *     >
+ *       <div className="w-2 h-2 rounded-full data-[state='in-stock']:bg-green-500 data-[state='limited-stock']:bg-yellow-500 data-[state='out-of-stock']:bg-red-500" />
+ *       <span className="text-xs font-medium">
+ *         {label}
+ *       </span>
+ *     </div>
+ *   ))}
+ * </Product.Stock>
+ * ```
+ */
+export declare const Stock: React.ForwardRefExoticComponent<StockProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Product Variants container
  */