@wix/headless-stores 0.0.55 → 0.0.57

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

@@ -114,3 +114,55 @@ export interface ProductRepeaterProps {
  * ```
  */
 export declare const ProductRepeater: React.ForwardRefExoticComponent<ProductRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList LoadMoreTrigger component
+ */
+export interface LoadMoreTriggerProps {
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * 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 declare const LoadMoreTrigger: React.ForwardRefExoticComponent<LoadMoreTriggerProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Totals Displayed component
+ */
+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.
+ *
+ * @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 declare const TotalsDisplayed: React.ForwardRefExoticComponent<TotalsDisplayedProps & React.RefAttributes<HTMLElement>>;

package/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,8 +62,9 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-ecom": "^0.0.14",
-    "@wix/headless-media": "^0.0.10",
+    "@wix/headless-ecom": "workspace:*",
+    "@wix/headless-media": "workspace:*",
+    "@wix/headless-utils": "workspace:*",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"