@wix/headless-stores 0.0.55 → 0.0.56

package/cjs/dist/react/ProductList.d.ts

@@ -2,6 +2,7 @@ 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
  */
@@ -114,3 +115,49 @@ 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 extends AsChildProps<{
+    displayedProducts: number;
+}> {
+}
+/**
+ * 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/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 { renderAsChild } from '../utils/renderAsChild.js';
 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,78 @@ 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);
+            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 }));
+        } }));
+});
+/**
+ * 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;
+    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 }));
+});

package/dist/react/ProductList.d.ts

@@ -2,6 +2,7 @@ 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
  */
@@ -114,3 +115,49 @@ 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 extends AsChildProps<{
+    displayedProducts: number;
+}> {
+}
+/**
+ * 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 { renderAsChild } from '../utils/renderAsChild.js';
 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,78 @@ 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);
+            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 }));
+        } }));
+});
+/**
+ * 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;
+    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 }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",