@wix/headless-stores 0.0.90 → 0.0.91

package/cjs/dist/data-component-tags.d.ts

@@ -0,0 +1,6 @@
+export declare enum DataComponentTags {
+    categoryRoot = "stores.category-root",
+    productListRoot = "stores.product-list-root",
+    optionRoot = "stores.option-root",
+    choiceRoot = "stores.choice-root"
+}

package/cjs/dist/data-component-tags.js

@@ -0,0 +1,7 @@
+export var DataComponentTags;
+(function (DataComponentTags) {
+    DataComponentTags["categoryRoot"] = "stores.category-root";
+    DataComponentTags["productListRoot"] = "stores.product-list-root";
+    DataComponentTags["optionRoot"] = "stores.option-root";
+    DataComponentTags["choiceRoot"] = "stores.choice-root";
+})(DataComponentTags || (DataComponentTags = {}));

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

@@ -98,14 +98,14 @@ export interface CategoryFilterProps {
  * ```tsx
  * import { Category } from '@wix/headless-stores/react';
  *
- * <Category.Root categoryServiceConfig={{ category }}>
- *   <Category.Trigger />
- *   <Category.Label />
- *   <Category.ID />
+ * <Category.Root category={category}>
+ *     <Category.Trigger />
+ *     <Category.Label />
+ *     <Category.ID />
  * </Category.Root>
  * ```
  */
-export declare function Root(props: CategoryRootProps): React.ReactNode;
+export declare const Root: React.ForwardRefExoticComponent<CategoryRootProps & React.RefAttributes<HTMLElement>>;
 /**
  * Interactive element for selecting or triggering category actions.
  * Provides category data and selection state to custom render functions.

package/cjs/dist/react/Category.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreProductListFilters from './core/ProductListFilters.js';
+import { DataComponentTags } from '../data-component-tags.js';
 const CategoryContext = React.createContext(null);
 function useCategoryContext() {
     const context = React.useContext(CategoryContext);
@@ -12,6 +13,7 @@ function useCategoryContext() {
 }
 var TestIds;
 (function (TestIds) {
+    TestIds["categoryRoot"] = "category-root";
     TestIds["categoryItem"] = "category-item";
     TestIds["categoryTrigger"] = "category-trigger";
     TestIds["categoryLabel"] = "category-label";
@@ -30,14 +32,14 @@ var TestIds;
  * ```tsx
  * import { Category } from '@wix/headless-stores/react';
  *
- * <Category.Root categoryServiceConfig={{ category }}>
- *   <Category.Trigger />
- *   <Category.Label />
- *   <Category.ID />
+ * <Category.Root category={category}>
+ *     <Category.Trigger />
+ *     <Category.Label />
+ *     <Category.ID />
  * </Category.Root>
  * ```
  */
-export function Root(props) {
+export const Root = React.forwardRef((props, ref) => {
     const { category, children } = props;
     return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
             // Determine if this category is selected by comparing with selectedCategory
@@ -48,9 +50,9 @@ export function Root(props) {
                 selectedCategory,
                 setSelectedCategory,
             };
-            return (_jsx(CategoryContext.Provider, { value: contextValue, children: children }));
+            return (_jsx(CategoryContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, "data-component-tag": DataComponentTags.categoryRoot, "data-testid": TestIds.categoryRoot, children: children }) }));
         } }));
-}
+});
 /**
  * Interactive element for selecting or triggering category actions.
  * Provides category data and selection state to custom render functions.

package/cjs/dist/react/Choice.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -43,6 +44,7 @@ export const Root = React.forwardRef((props, ref) => {
     }
     const { choice } = choiceContext;
     const attributes = {
+        'data-component-tag': DataComponentTags.choiceRoot,
         'data-testid': TestIds.choiceRoot,
         'data-type': choice?.type,
     };

package/cjs/dist/react/Option.js

@@ -4,6 +4,7 @@ import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -113,7 +114,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-component-tag": DataComponentTags.optionRoot, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);

package/cjs/dist/react/ProductList.js

@@ -8,6 +8,7 @@ import { ProductListSort as ProductListSortPrimitive } from './core/ProductListS
 import * as CoreProductListFilters from './core/ProductListFilters.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -70,7 +71,7 @@ const RootContent = React.forwardRef((props, ref) => {
         ...product,
         id: product._id,
     }));
-    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 }));
+    return (_jsx(GenericList.Root, { items: items, onLoadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
 });
 /**
  * Raw component that provides direct access to product list data.

package/dist/data-component-tags.d.ts

@@ -0,0 +1,6 @@
+export declare enum DataComponentTags {
+    categoryRoot = "stores.category-root",
+    productListRoot = "stores.product-list-root",
+    optionRoot = "stores.option-root",
+    choiceRoot = "stores.choice-root"
+}

package/dist/data-component-tags.js

@@ -0,0 +1,7 @@
+export var DataComponentTags;
+(function (DataComponentTags) {
+    DataComponentTags["categoryRoot"] = "stores.category-root";
+    DataComponentTags["productListRoot"] = "stores.product-list-root";
+    DataComponentTags["optionRoot"] = "stores.option-root";
+    DataComponentTags["choiceRoot"] = "stores.choice-root";
+})(DataComponentTags || (DataComponentTags = {}));

package/dist/react/Category.d.ts

@@ -98,14 +98,14 @@ export interface CategoryFilterProps {
  * ```tsx
  * import { Category } from '@wix/headless-stores/react';
  *
- * <Category.Root categoryServiceConfig={{ category }}>
- *   <Category.Trigger />
- *   <Category.Label />
- *   <Category.ID />
+ * <Category.Root category={category}>
+ *     <Category.Trigger />
+ *     <Category.Label />
+ *     <Category.ID />
  * </Category.Root>
  * ```
  */
-export declare function Root(props: CategoryRootProps): React.ReactNode;
+export declare const Root: React.ForwardRefExoticComponent<CategoryRootProps & React.RefAttributes<HTMLElement>>;
 /**
  * Interactive element for selecting or triggering category actions.
  * Provides category data and selection state to custom render functions.

package/dist/react/Category.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreProductListFilters from './core/ProductListFilters.js';
+import { DataComponentTags } from '../data-component-tags.js';
 const CategoryContext = React.createContext(null);
 function useCategoryContext() {
     const context = React.useContext(CategoryContext);
@@ -12,6 +13,7 @@ function useCategoryContext() {
 }
 var TestIds;
 (function (TestIds) {
+    TestIds["categoryRoot"] = "category-root";
     TestIds["categoryItem"] = "category-item";
     TestIds["categoryTrigger"] = "category-trigger";
     TestIds["categoryLabel"] = "category-label";
@@ -30,14 +32,14 @@ var TestIds;
  * ```tsx
  * import { Category } from '@wix/headless-stores/react';
  *
- * <Category.Root categoryServiceConfig={{ category }}>
- *   <Category.Trigger />
- *   <Category.Label />
- *   <Category.ID />
+ * <Category.Root category={category}>
+ *     <Category.Trigger />
+ *     <Category.Label />
+ *     <Category.ID />
  * </Category.Root>
  * ```
  */
-export function Root(props) {
+export const Root = React.forwardRef((props, ref) => {
     const { category, children } = props;
     return (_jsx(CoreProductListFilters.CategoryFilter, { children: ({ selectedCategory, setSelectedCategory }) => {
             // Determine if this category is selected by comparing with selectedCategory
@@ -48,9 +50,9 @@ export function Root(props) {
                 selectedCategory,
                 setSelectedCategory,
             };
-            return (_jsx(CategoryContext.Provider, { value: contextValue, children: children }));
+            return (_jsx(CategoryContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, "data-component-tag": DataComponentTags.categoryRoot, "data-testid": TestIds.categoryRoot, children: children }) }));
         } }));
-}
+});
 /**
  * Interactive element for selecting or triggering category actions.
  * Provides category data and selection state to custom render functions.

package/dist/react/Choice.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { FreeText as FreeTextPrimitive } from './core/ProductModifiers.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["choiceRoot"] = "choice-root";
@@ -43,6 +44,7 @@ export const Root = React.forwardRef((props, ref) => {
     }
     const { choice } = choiceContext;
     const attributes = {
+        'data-component-tag': DataComponentTags.choiceRoot,
         'data-testid': TestIds.choiceRoot,
         'data-type': choice?.type,
     };

package/dist/react/Option.js

@@ -4,6 +4,7 @@ import * as Choice from './Choice.js';
 import * as ProductModifiersPrimitive from './core/ProductModifiers.js';
 import * as ProductVariantSelectorPrimitive from './core/ProductVariantSelector.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["optionRoot"] = "option-root";
@@ -113,7 +114,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-component-tag": DataComponentTags.optionRoot, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);

package/dist/react/ProductList.js

@@ -8,6 +8,7 @@ import { ProductListSort as ProductListSortPrimitive } from './core/ProductListS
 import * as CoreProductListFilters from './core/ProductListFilters.js';
 import * as Product from './Product.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { DataComponentTags } from '../data-component-tags.js';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -70,7 +71,7 @@ const RootContent = React.forwardRef((props, ref) => {
         ...product,
         id: product._id,
     }));
-    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 }));
+    return (_jsx(GenericList.Root, { items: items, onLoadMore: () => productsListService.loadMore(10), hasMore: productsListService.hasMoreProducts.get(), isLoading: productsListService.isLoading.get(), className: className, ref: ref, "data-component-tag": DataComponentTags.productListRoot, "data-testid": TestIds.productListRoot, children: children }));
 });
 /**
  * Raw component that provides direct access to product list data.

package/package.json

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