@wix/headless-stores 0.0.55 → 0.0.57

package/cjs/dist/react/ProductList.js

@@ -3,12 +3,16 @@ import { useService } from '@wix/services-manager-react';
 import React from 'react';
 import { ProductsListServiceDefinition } from '../services/products-list-service.js';
 import * as CoreProductList from './core/ProductList.js';
+import * as CoreProductListPagination from './core/ProductListPagination.js';
 import * as Product from './Product.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
     TestIds["productListProducts"] = "product-list-products";
     TestIds["productListItem"] = "product-list-item";
+    TestIds["productListLoadMore"] = "product-list-load-more";
+    TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ProductList service context for rendering product lists.
@@ -154,3 +158,49 @@ export const ProductRepeater = React.forwardRef((props, _ref) => {
         return null;
     return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
 });
+/**
+ * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.LoadMoreTrigger asChild>
+ *   <button>Load More</button>
+ * </ProductList.LoadMoreTrigger>
+ * ```
+ */
+export const LoadMoreTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductListPagination.LoadMoreTrigger, { children: ({ loadMore, hasMoreProducts, isLoading }) => {
+            // Don't render if no more products to load
+            if (!hasMoreProducts)
+                return null;
+            const handleClick = () => loadMore(10);
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleClick, disabled: isLoading, "data-testid": TestIds.productListLoadMore, customElement: children, children: _jsx("button", { children: children }) }));
+        } }));
+});
+/**
+ * Displays the number of products currently displayed.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.TotalsDisplayed />
+ * // or with asChild
+ * <ProductList.TotalsDisplayed asChild>
+ *   <strong />
+ * </ProductList.TotalsDisplayed>
+ * // or with render function
+ * <ProductList.TotalsDisplayed asChild>
+ *   {({ displayedProducts }, ref) => <strong ref={ref}>{displayedProducts}</strong>}
+ * </ProductList.TotalsDisplayed>
+ * ```
+ */
+export const TotalsDisplayed = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const displayedProducts = products.length;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, children: _jsx("span", { children: displayedProducts }) }));
+});

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

@@ -3,7 +3,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { SelectedVariantServiceDefinition, SelectedVariantService, } from '../../services/selected-variant-service.js';
 import { ProductModifiersServiceDefinition } from '../../services/product-modifiers-service.js';
 import { createServicesMap } from '@wix/services-manager';
-import { Checkout } from '@wix/headless-ecom/react';
+import { CheckoutCore } from '@wix/headless-ecom/react';
 import { CheckoutServiceDefinition, CurrentCartServiceDefinition, } from '@wix/headless-ecom/services';
 /**
  * Root component that provides the SelectedVariant service context to its children.
@@ -254,7 +254,7 @@ export function Actions(props) {
         error,
     };
     if (checkoutService) {
-        return (_jsx(Checkout.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
+        return (_jsx(CheckoutCore.Trigger, { children: ({ createCheckout, isLoading: checkoutLoading, error: checkoutError, }) => props.children({
                 ...commonProps,
                 isLoading: isLoading || checkoutLoading,
                 error: error || checkoutError,

package/cjs/dist/utils/renderChildren.d.ts

@@ -9,6 +9,7 @@ export interface RenderChildrenParams<THTMLElement = HTMLElement, TProps = any>
     props: TProps;
     /** Ref to forward to the rendered element */
     ref: React.Ref<THTMLElement>;
+    content?: string | null;
 }
 /**
  * Utility function to handle children rendering.
@@ -38,4 +39,4 @@ export interface RenderChildrenParams<THTMLElement = HTMLElement, TProps = any>
  * });
  * ```
  */
-export declare function renderChildren<THTMLElement = HTMLElement, TProps = any>({ children, props, ref, }: RenderChildrenParams<THTMLElement, TProps>): React.ReactNode | null;
+export declare function renderChildren<THTMLElement = HTMLElement, TProps = any>({ children, props, ref, content, }: RenderChildrenParams<THTMLElement, TProps>): React.ReactNode | null;

package/cjs/dist/utils/renderChildren.js

@@ -27,13 +27,16 @@ import React from 'react';
  * });
  * ```
  */
-export function renderChildren({ children, props, ref, }) {
+export function renderChildren({ children, props, ref, content, }) {
     // Early return if no children provided
     if (!children)
         return null;
     // Handle React element pattern
     if (React.isValidElement(children)) {
-        return children;
+        return React.cloneElement(children, {
+            ref,
+            ...(content ? { children: content } : {}),
+        });
     }
     // Handle render function pattern
     if (typeof children === 'function') {

package/dist/react/Category.d.ts

@@ -25,6 +25,7 @@ export interface CategoryTriggerProps {
         category: Category;
         isSelected: boolean;
         onSelect: () => void;
+        setIsSelected: (isSelected: boolean) => void;
     }>;
     /** Callback when category is selected */
     onSelect?: (category: Category) => void;

package/dist/react/Category.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import * as CoreCategory from './core/Category.js';
 import { CategoryServiceDefinition, } from '../services/category-service.js';
 import { useService } from '@wix/services-manager-react';
-import { renderChildren } from '../utils/renderChildren.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["categoryItem"] = "category-item";
@@ -76,19 +75,18 @@ export const Trigger = React.forwardRef((props, ref) => {
     const categoryService = useService(CategoryServiceDefinition);
     const category = categoryService.category.get();
     const isSelected = categoryService.isSelected.get();
+    const setIsSelected = (isSelected) => categoryService.isSelected.set(isSelected);
     const handleSelect = () => {
         if (onSelect) {
             onSelect(category);
         }
     };
-    const Comp = asChild && children ? Slot : 'button';
-    return (_jsx(Comp, { ref: ref, className: className, onClick: handleSelect, "data-testid": TestIds.categoryTrigger, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
-            ? renderChildren({
-                children,
-                props: { category, isSelected, onSelect: handleSelect },
-                ref,
-            })
-            : category.name }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleSelect, "data-testid": TestIds.categoryTrigger, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: {
+            category,
+            isSelected,
+            onSelect: handleSelect,
+            setIsSelected,
+        }, content: category.name, children: _jsx("button", { children: category.name }) }));
 });
 /**
  * Displays the category name or label.
@@ -121,10 +119,7 @@ export const Label = React.forwardRef((props, ref) => {
     const category = categoryService.category.get();
     const isSelected = categoryService.isSelected.get();
     return (_jsx(CoreCategory.Name, { children: ({ name }) => {
-            const Comp = asChild && children ? Slot : 'span';
-            return (_jsx(Comp, { ref: ref, className: className, "data-testid": TestIds.categoryLabel, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
-                    ? renderChildren({ children, props: { name, category }, ref })
-                    : name }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.categoryLabel, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { name, category }, content: name, children: _jsx("span", { children: name }) }));
         } }));
 });
 /**
@@ -158,10 +153,7 @@ export const ID = React.forwardRef((props, ref) => {
     const category = categoryService.category.get();
     const isSelected = categoryService.isSelected.get();
     const id = category._id || '';
-    const Comp = asChild && children ? Slot : 'span';
-    return (_jsx(Comp, { ref: ref, className: className || 'sr-only', "data-testid": TestIds.categoryId, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
-            ? renderChildren({ children, props: { id, category }, ref })
-            : id }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryId, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { id, category }, content: id, children: _jsx("span", { children: id }) }));
 });
 /**
  * Provides access to the full category data for advanced use cases.
@@ -190,8 +182,5 @@ export const Raw = React.forwardRef((props, ref) => {
     const categoryService = useService(CategoryServiceDefinition);
     const category = categoryService.category.get();
     const isSelected = categoryService.isSelected.get();
-    const Comp = asChild && children ? Slot : 'span';
-    return (_jsx(Comp, { ref: ref, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', children: asChild && children
-            ? renderChildren({ children, props: { category, isSelected }, ref })
-            : JSON.stringify(category) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className || 'sr-only', "data-testid": TestIds.categoryRaw, "data-selected": isSelected ? 'true' : 'false', customElement: children, customElementProps: { category, isSelected }, children: _jsx("span", { children: JSON.stringify(category) }) }));
 });

package/dist/react/CategoryList.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import * as CoreCategoryList from './core/CategoryList.js';
 import * as Category from './Category.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["categoryListRoot"] = "category-list";
@@ -56,8 +56,7 @@ export function Root(props) {
  */
 export const Loading = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    const Comp = asChild && children ? Slot : 'h1';
-    return (_jsx(CoreCategoryList.Loading, { children: _jsx(Comp, { className: className, ref: ref, children: "Loading..." }) }));
+    return (_jsx(CoreCategoryList.Loading, { children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, children: _jsx("h1", { children: "Loading..." }) }) }));
 });
 /**
  * Repeats for each category in the list, providing individual category context.

package/dist/react/Product.d.ts

@@ -1,6 +1,5 @@
 import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
 import React from 'react';
-import { type AsChildProps } from '../utils/index.js';
 import { AsContent } from './types.js';
 /**
  * Context for sharing variant options state between components
@@ -56,9 +55,15 @@ export declare function Root(props: ProductRootProps): React.ReactNode;
 /**
  * Props for Product 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?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        name: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the product name with customizable rendering following the documented API.
@@ -88,9 +93,15 @@ export declare const Name: React.ForwardRefExoticComponent<NameProps & React.Ref
 /**
  * Props for Product Description component
  */
-export interface DescriptionProps extends AsChildProps<{
-    description: string;
-}> {
+export interface DescriptionProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        description: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
     /** Format of the description content */
     as?: `${AsContent}`;
 }
@@ -121,10 +132,16 @@ export declare const Description: React.ForwardRefExoticComponent<DescriptionPro
 /**
  * Props for Product Price component
  */
-export interface PriceProps extends AsChildProps<{
-    price: string;
-    formattedPrice: string;
-}> {
+export interface PriceProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        price: string;
+        formattedPrice: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the current product price with customizable rendering following the documented API.
@@ -154,10 +171,16 @@ export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.R
 /**
  * Props for Product CompareAtPrice component
  */
-export interface CompareAtPriceProps extends AsChildProps<{
-    price: string;
-    formattedPrice: string;
-}> {
+export interface CompareAtPriceProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        price: string;
+        formattedPrice: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the compare-at (original) price when on sale with customizable rendering following the documented API.
@@ -192,9 +215,15 @@ export declare const CompareAtPrice: React.ForwardRefExoticComponent<CompareAtPr
  * Props for Slug component
  * @interface SlugProps
  */
-export interface SlugProps extends AsChildProps<{
-    slug: string;
-}> {
+export interface SlugProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        slug: string;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Product Slug component that displays the product's slug
@@ -222,9 +251,15 @@ export declare const Slug: React.ForwardRefExoticComponent<SlugProps & React.Ref
 /**
  * Props for Product Raw component
  */
-export interface RawProps extends AsChildProps<{
-    product: V3Product;
-}> {
+export interface RawProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        product: V3Product;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Provides access to the raw product data for advanced use cases.
@@ -249,9 +284,13 @@ export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAt
 /**
  * Props for Product Variants container
  */
-export interface VariantsProps extends AsChildProps<{
-    hasOptions: boolean;
-}> {
+export interface VariantsProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Container for product variant selection system.
@@ -331,7 +370,7 @@ export interface VariantOptionsProps {
  * </Product.VariantOptions>
  * ```
  */
-export declare const VariantOptions: React.ForwardRefExoticComponent<VariantOptionsProps & React.RefAttributes<HTMLElement>>;
+export declare const VariantOptions: React.ForwardRefExoticComponent<VariantOptionsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Props for Product VariantOptionRepeater component
  */
@@ -347,9 +386,13 @@ export declare const VariantOptionRepeater: React.ForwardRefExoticComponent<Vari
 /**
  * Props for Product Modifiers container
  */
-export interface ModifiersProps extends AsChildProps<{
-    hasModifiers: boolean;
-}> {
+export interface ModifiersProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children: React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Container for product modifier system.
@@ -432,7 +475,7 @@ export interface ModifierOptionsProps {
  * </Product.ModifierOptions>
  * ```
  */
-export declare const ModifierOptions: React.ForwardRefExoticComponent<ModifierOptionsProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifierOptions: React.ForwardRefExoticComponent<ModifierOptionsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Props for Product ModifierOptionRepeater component
  */
@@ -485,7 +528,7 @@ export interface ProductMediaGalleryProps {
  * </Product.MediaGallery>
  * ```
  */
-export declare const ProductMediaGallery: React.ForwardRefExoticComponent<ProductMediaGalleryProps & React.RefAttributes<HTMLElement>>;
+export declare const ProductMediaGallery: React.ForwardRefExoticComponent<ProductMediaGalleryProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Alias for ProductMediaGallery to match the documented API
  */