@wix/headless-stores 0.0.56 → 0.0.57

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

package/dist/react/Product.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
 import * as ProductVariantSelector from './core/ProductVariantSelector.js';
@@ -99,21 +99,7 @@ export function Root(props) {
 export const Name = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     return (_jsx(CoreProduct.Name, { children: ({ name }) => {
-            const attributes = {
-                'data-testid': TestIds.productName,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { name },
-                    ref,
-                    content: name,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { className: className, ...attributes, children: name }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
         } }));
 });
 /**
@@ -142,9 +128,6 @@ export const Name = React.forwardRef((props, ref) => {
 export const Description = React.forwardRef((props, ref) => {
     const { asChild, children, className, as = AsContent.Plain } = props;
     return (_jsx(CoreProduct.Description, { children: ({ description: richDescription, plainDescription }) => {
-            const attributes = {
-                'data-testid': TestIds.productDescription,
-            };
             // Determine which description to use based on the 'as' prop
             let description;
             switch (as) {
@@ -162,22 +145,13 @@ export const Description = React.forwardRef((props, ref) => {
                         : '';
                     break;
             }
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { description },
-                    ref,
-                    content: description,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            // Default rendering based on format
-            if (as === AsContent.Html) {
-                return (_jsx("div", { className: className, ...attributes, dangerouslySetInnerHTML: { __html: description } }));
+            // Handle default rendering based on format
+            if (!asChild || !children) {
+                if (as === AsContent.Html) {
+                    return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.productDescription, dangerouslySetInnerHTML: { __html: description } }));
+                }
             }
-            return (_jsx("div", { className: className, ...attributes, children: description }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productDescription, customElement: children, customElementProps: { description }, content: description, children: _jsx("div", { children: description }) }));
         } }));
 });
 /**
@@ -207,26 +181,10 @@ export const Description = React.forwardRef((props, ref) => {
 export const Price = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
-            const attributes = {
-                'data-testid': TestIds.productPrice,
-                'data-discounted': compareAtPrice !== null,
-            };
-            const priceData = {
-                price,
-                formattedPrice: price,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: priceData,
-                    ref,
-                    content: price,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("span", { className: className, ...attributes, ref: ref, children: price }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
+                    price,
+                    formattedPrice: price,
+                }, content: price, children: _jsx("span", { children: price }) }));
         } }));
 });
 /**
@@ -261,30 +219,14 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     const testId = TestIds.productCompareAtPrice;
     return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
-            const attributes = {
-                'data-testid': testId,
-                'data-discounted': compareAtPrice !== null,
-            };
             // Don't render anything if there's no compare-at price
             if (!compareAtPrice) {
                 return null;
             }
-            const priceData = {
-                price: compareAtPrice,
-                formattedPrice: compareAtPrice,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: priceData,
-                    ref,
-                    content: compareAtPrice,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("span", { className: className, ...attributes, ref: ref, children: compareAtPrice }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
+                    price: compareAtPrice,
+                    formattedPrice: compareAtPrice,
+                }, content: compareAtPrice, children: _jsx("span", { children: compareAtPrice }) }));
         } }));
 });
 /**
@@ -310,25 +252,10 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
  * ```
  */
 export const Slug = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     const testId = TestIds.productSlug;
     return (_jsx(CoreProduct.Slug, { children: ({ slug }) => {
-            const attributes = {
-                'data-testid': testId,
-            };
-            const slugData = { slug };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: slugData,
-                    ref,
-                    content: slug,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("span", { ...attributes, ref: ref, children: slug }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, customElement: children, customElementProps: { slug }, content: slug, children: _jsx("span", { children: slug }) }));
         } }));
 });
 /**
@@ -351,24 +278,13 @@ export const Slug = React.forwardRef((props, ref) => {
  * ```
  */
 export const Raw = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     return (_jsx(CoreProduct.Content, { children: ({ product }) => {
-            const attributes = {
-                'data-testid': TestIds.productRaw,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { product },
-                    ref,
-                    content: null,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
             // Raw component should not render anything by default when not using asChild
-            return null;
+            if (!asChild || !children) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
 /**
@@ -414,7 +330,7 @@ export const Raw = React.forwardRef((props, ref) => {
  * ```
  */
 export const Variants = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     return (_jsx(ProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
             if (!hasOptions)
                 return null;
@@ -422,24 +338,7 @@ export const Variants = React.forwardRef((props, ref) => {
                 hasOptions,
                 options,
             };
-            const attributes = {
-                'data-testid': TestIds.productVariants,
-            };
-            const content = (_jsx(VariantsContext.Provider, { value: contextValue, children: typeof children === 'function'
-                    ? null
-                    : children }));
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { hasOptions },
-                    ref,
-                    content,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -542,7 +441,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
  * ```
  */
 export const Modifiers = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     return (_jsx(ProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
             if (!hasModifiers)
                 return null;
@@ -550,24 +449,7 @@ export const Modifiers = React.forwardRef((props, ref) => {
                 hasModifiers,
                 modifiers,
             };
-            const attributes = {
-                'data-testid': TestIds.productModifiers,
-            };
-            const content = (_jsx(ModifiersContext.Provider, { value: contextValue, children: typeof children === 'function'
-                    ? null
-                    : children }));
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { hasModifiers },
-                    ref,
-                    content,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**

package/dist/react/ProductList.d.ts

@@ -2,7 +2,6 @@ import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
 import React from 'react';
 import type { ProductsListSearchServiceConfig } from '../services/products-list-search-service.js';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
-import { type AsChildProps } from '../utils/renderAsChild.js';
 /**
  * Props for the ProductList root component following the documented API
  */
@@ -139,9 +138,15 @@ export declare const LoadMoreTrigger: React.ForwardRefExoticComponent<LoadMoreTr
 /**
  * Props for ProductList Totals Displayed component
  */
-export interface TotalsDisplayedProps extends AsChildProps<{
-    displayedProducts: number;
-}> {
+export interface TotalsDisplayedProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        displayedProducts: number;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the number of products currently displayed.

package/dist/react/ProductList.js

@@ -5,7 +5,7 @@ import { ProductsListServiceDefinition } from '../services/products-list-service
 import * as CoreProductList from './core/ProductList.js';
 import * as CoreProductListPagination from './core/ProductListPagination.js';
 import * as Product from './Product.js';
-import { renderAsChild } from '../utils/renderAsChild.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -177,20 +177,7 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
             if (!hasMoreProducts)
                 return null;
             const handleClick = () => loadMore(10);
-            const attributes = {
-                'data-testid': TestIds.productListLoadMore,
-                className,
-                onClick: handleClick,
-                disabled: isLoading,
-            };
-            if (asChild && React.isValidElement(children)) {
-                return React.cloneElement(children, {
-                    ...attributes,
-                    onClick: handleClick,
-                    ref,
-                });
-            }
-            return (_jsx("button", { ...attributes, ref: ref, children: children }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleClick, disabled: isLoading, "data-testid": TestIds.productListLoadMore, customElement: children, children: _jsx("button", { children: children }) }));
         } }));
 });
 /**
@@ -215,21 +202,5 @@ export const TotalsDisplayed = React.forwardRef((props, ref) => {
     const productsListService = useService(ProductsListServiceDefinition);
     const products = productsListService.products.get();
     const displayedProducts = products.length;
-    const attributes = {
-        'data-testid': TestIds.productListTotalsDisplayed,
-        'data-displayed': displayedProducts,
-        className,
-    };
-    if (asChild) {
-        const rendered = renderAsChild({
-            children,
-            props: { displayedProducts },
-            ref,
-            content: displayedProducts.toString(),
-            attributes,
-        });
-        if (rendered)
-            return rendered;
-    }
-    return (_jsx("span", { ...attributes, ref: ref, children: displayedProducts }));
+    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 }) }));
 });