@wix/headless-stores 0.0.88 → 0.0.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/dist/react/ProductList.d.ts +1 -1
  2. package/cjs/dist/react/ProductList.js +12 -47
  3. package/dist/react/ProductList.d.ts +1 -1
  4. package/dist/react/ProductList.js +12 -47
  5. package/package.json +4 -4
package/cjs/dist/react/ProductList.d.ts CHANGED
@@ -164,7 +164,7 @@ export interface TotalsDisplayedProps {
164
164
  asChild?: boolean;
165
165
  /** Custom render function when using asChild */
166
166
  children?: AsChildChildren<{
167
- displayedProducts: number;
167
+ displayedItems: number;
168
168
  }>;
169
169
  /** CSS classes to apply to the default element */
170
170
  className?: string;
package/cjs/dist/react/ProductList.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Sort as SortPrimitive } from '@wix/headless-components/react';
2
+ import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
3
3
  import { useService } from '@wix/services-manager-react';
4
4
  import React from 'react';
5
5
  import { ProductsListServiceDefinition } from '../services/products-list-service.js';
6
6
  import * as CoreProductList from './core/ProductList.js';
7
- import * as CoreProductListPagination from './core/ProductListPagination.js';
8
7
  import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
9
8
  import * as CoreProductListFilters from './core/ProductListFilters.js';
10
9
  import * as Product from './Product.js';
@@ -67,19 +66,11 @@ export const Root = React.forwardRef((props, ref) => {
67
66
  const RootContent = React.forwardRef((props, ref) => {
68
67
  const { children, className } = props;
69
68
  const productsListService = useService(ProductsListServiceDefinition);
70
- const contextProducts = productsListService.products.get();
71
- const pagingMetadata = productsListService.pagingMetadata.get();
72
- const displayedProducts = contextProducts.length;
73
- const totalProducts = pagingMetadata.count || contextProducts.length;
74
- const isFiltered = false; // TODO: Implement filtering detection
75
- const attributes = {
76
- 'data-testid': TestIds.productListRoot,
77
- 'data-total-products': totalProducts,
78
- 'data-displayed-products': displayedProducts,
79
- 'data-filtered': isFiltered,
80
- className,
81
- };
82
- return (_jsx("div", { ...attributes, ref: ref, children: children }));
69
+ const items = productsListService.products.get().map((product) => ({
70
+ ...product,
71
+ id: product._id,
72
+ }));
73
+ return (_jsx(GenericList.Root, { items: items, onLoadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-testid": TestIds.productListRoot, children: children }));
83
74
  });
84
75
  /**
85
76
  * Raw component that provides direct access to product list data.
@@ -126,21 +117,8 @@ export const Raw = React.forwardRef((props, _ref) => {
126
117
  * ```
127
118
  */
128
119
  export const Products = React.forwardRef((props, ref) => {
129
- const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
130
- const productsListService = useService(ProductsListServiceDefinition);
131
- const products = productsListService.products.get();
132
- const hasProducts = products.length > 0;
133
- if (!hasProducts) {
134
- return emptyState || null;
135
- }
136
- const attributes = {
137
- 'data-testid': TestIds.productListProducts,
138
- 'data-empty': !hasProducts,
139
- 'data-infinite-scroll': infiniteScroll,
140
- 'data-page-size': pageSize,
141
- className,
142
- };
143
- return (_jsx("div", { ...attributes, ref: ref, children: children }));
120
+ const { children, ...otherProps } = props;
121
+ return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.productListProducts, ...otherProps, children: children }));
144
122
  });
145
123
  /**
146
124
  * Repeater component that renders Product.Root for each product.
@@ -181,18 +159,8 @@ export const ProductRepeater = React.forwardRef((props, _ref) => {
181
159
  * ```
182
160
  */
183
161
  export const LoadMoreTrigger = React.forwardRef((props, ref) => {
184
- const { asChild, children, className, label = 'Load More', loadingState = 'Loading...', } = props;
185
- return (_jsx(CoreProductListPagination.LoadMoreTrigger, { children: ({ loadMore, hasMoreProducts, isLoading }) => {
186
- // Don't render if no more products to load
187
- if (!hasMoreProducts)
188
- return null;
189
- const handleClick = () => loadMore(10);
190
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleClick, disabled: isLoading, "data-testid": TestIds.productListLoadMore, customElement: children, customElementProps: {
191
- loadMore,
192
- hasMoreProducts,
193
- isLoading,
194
- }, children: _jsx("button", { children: isLoading ? loadingState : label }) }));
195
- } }));
162
+ const { children = _jsx("button", {}), ...otherProps } = props;
163
+ return (_jsx(GenericList.Actions.LoadMore, { ref: ref, "data-testid": TestIds.productListLoadMore, ...otherProps, children: children }));
196
164
  });
197
165
  /**
198
166
  * Displays the number of products currently displayed.
@@ -212,11 +180,8 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
212
180
  * ```
213
181
  */
214
182
  export const TotalsDisplayed = React.forwardRef((props, ref) => {
215
- const { asChild, children, className, ...otherProps } = props;
216
- const productsListService = useService(ProductsListServiceDefinition);
217
- const products = productsListService.products.get();
218
- const displayedProducts = products.length;
219
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, ...otherProps, children: _jsx("span", { children: displayedProducts }) }));
183
+ const { children = _jsx("span", {}), ...otherProps } = props;
184
+ return (_jsx(GenericList.Totals, { ref: ref, "data-testid": TestIds.productListTotalsDisplayed, ...otherProps, children: children }));
220
185
  });
221
186
  /**
222
187
  * Sort component for product lists that provides sorting functionality.
package/dist/react/ProductList.d.ts CHANGED
@@ -164,7 +164,7 @@ export interface TotalsDisplayedProps {
164
164
  asChild?: boolean;
165
165
  /** Custom render function when using asChild */
166
166
  children?: AsChildChildren<{
167
- displayedProducts: number;
167
+ displayedItems: number;
168
168
  }>;
169
169
  /** CSS classes to apply to the default element */
170
170
  className?: string;
package/dist/react/ProductList.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Sort as SortPrimitive } from '@wix/headless-components/react';
2
+ import { Sort as SortPrimitive, GenericList, } from '@wix/headless-components/react';
3
3
  import { useService } from '@wix/services-manager-react';
4
4
  import React from 'react';
5
5
  import { ProductsListServiceDefinition } from '../services/products-list-service.js';
6
6
  import * as CoreProductList from './core/ProductList.js';
7
- import * as CoreProductListPagination from './core/ProductListPagination.js';
8
7
  import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
9
8
  import * as CoreProductListFilters from './core/ProductListFilters.js';
10
9
  import * as Product from './Product.js';
@@ -67,19 +66,11 @@ export const Root = React.forwardRef((props, ref) => {
67
66
  const RootContent = React.forwardRef((props, ref) => {
68
67
  const { children, className } = props;
69
68
  const productsListService = useService(ProductsListServiceDefinition);
70
- const contextProducts = productsListService.products.get();
71
- const pagingMetadata = productsListService.pagingMetadata.get();
72
- const displayedProducts = contextProducts.length;
73
- const totalProducts = pagingMetadata.count || contextProducts.length;
74
- const isFiltered = false; // TODO: Implement filtering detection
75
- const attributes = {
76
- 'data-testid': TestIds.productListRoot,
77
- 'data-total-products': totalProducts,
78
- 'data-displayed-products': displayedProducts,
79
- 'data-filtered': isFiltered,
80
- className,
81
- };
82
- return (_jsx("div", { ...attributes, ref: ref, children: children }));
69
+ const items = productsListService.products.get().map((product) => ({
70
+ ...product,
71
+ id: product._id,
72
+ }));
73
+ return (_jsx(GenericList.Root, { items: items, onLoadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-testid": TestIds.productListRoot, children: children }));
83
74
  });
84
75
  /**
85
76
  * Raw component that provides direct access to product list data.
@@ -126,21 +117,8 @@ export const Raw = React.forwardRef((props, _ref) => {
126
117
  * ```
127
118
  */
128
119
  export const Products = React.forwardRef((props, ref) => {
129
- const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
130
- const productsListService = useService(ProductsListServiceDefinition);
131
- const products = productsListService.products.get();
132
- const hasProducts = products.length > 0;
133
- if (!hasProducts) {
134
- return emptyState || null;
135
- }
136
- const attributes = {
137
- 'data-testid': TestIds.productListProducts,
138
- 'data-empty': !hasProducts,
139
- 'data-infinite-scroll': infiniteScroll,
140
- 'data-page-size': pageSize,
141
- className,
142
- };
143
- return (_jsx("div", { ...attributes, ref: ref, children: children }));
120
+ const { children, ...otherProps } = props;
121
+ return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.productListProducts, ...otherProps, children: children }));
144
122
  });
145
123
  /**
146
124
  * Repeater component that renders Product.Root for each product.
@@ -181,18 +159,8 @@ export const ProductRepeater = React.forwardRef((props, _ref) => {
181
159
  * ```
182
160
  */
183
161
  export const LoadMoreTrigger = React.forwardRef((props, ref) => {
184
- const { asChild, children, className, label = 'Load More', loadingState = 'Loading...', } = props;
185
- return (_jsx(CoreProductListPagination.LoadMoreTrigger, { children: ({ loadMore, hasMoreProducts, isLoading }) => {
186
- // Don't render if no more products to load
187
- if (!hasMoreProducts)
188
- return null;
189
- const handleClick = () => loadMore(10);
190
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleClick, disabled: isLoading, "data-testid": TestIds.productListLoadMore, customElement: children, customElementProps: {
191
- loadMore,
192
- hasMoreProducts,
193
- isLoading,
194
- }, children: _jsx("button", { children: isLoading ? loadingState : label }) }));
195
- } }));
162
+ const { children = _jsx("button", {}), ...otherProps } = props;
163
+ return (_jsx(GenericList.Actions.LoadMore, { ref: ref, "data-testid": TestIds.productListLoadMore, ...otherProps, children: children }));
196
164
  });
197
165
  /**
198
166
  * Displays the number of products currently displayed.
@@ -212,11 +180,8 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
212
180
  * ```
213
181
  */
214
182
  export const TotalsDisplayed = React.forwardRef((props, ref) => {
215
- const { asChild, children, className, ...otherProps } = props;
216
- const productsListService = useService(ProductsListServiceDefinition);
217
- const products = productsListService.products.get();
218
- const displayedProducts = products.length;
219
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, ...otherProps, children: _jsx("span", { children: displayedProducts }) }));
183
+ const { children = _jsx("span", {}), ...otherProps } = props;
184
+ return (_jsx(GenericList.Totals, { ref: ref, "data-testid": TestIds.productListTotalsDisplayed, ...otherProps, children: children }));
220
185
  });
221
186
  /**
222
187
  * Sort component for product lists that provides sorting functionality.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/headless-stores",
3
- "version": "0.0.88",
3
+ "version": "0.0.90",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,14 +62,14 @@
62
62
  "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
63
63
  "@wix/ecom": "^1.0.1278",
64
64
  "@wix/essentials": "^0.1.24",
65
- "@wix/headless-ecom": "0.0.29",
66
- "@wix/headless-media": "0.0.12",
65
+ "@wix/headless-ecom": "0.0.30",
66
+ "@wix/headless-media": "0.0.13",
67
67
  "@wix/headless-utils": "0.0.3",
68
68
  "@wix/redirects": "^1.0.83",
69
69
  "@wix/services-definitions": "^0.1.4",
70
70
  "@wix/services-manager-react": "^0.1.26"
71
71
  },
72
72
  "peerDependencies": {
73
- "@wix/headless-components": "0.0.12"
73
+ "@wix/headless-components": "0.0.13"
74
74
  }
75
75
  }