@wix/editor-react-components 1.2569.0 → 1.2571.0

package/dist/site/components/Repeater/component.js

@@ -349,6 +349,8 @@ const skeletonMedia = "skeletonMedia__E2zSh";
 const skeletonTitle = "skeletonTitle__k-L4a";
 const skeletonLine = "skeletonLine__ReOb6";
 const sentinel = "sentinel__niAmU";
+const emptyState = "emptyState__cCB1M";
+const emptyStateContent = "emptyStateContent__hVHdj";
 const loadMoreTrigger = "loadMoreTrigger__IllQ8";
 const liveAnnouncer = "liveAnnouncer__ZOBRL";
 const styles = {
@@ -363,6 +365,8 @@ const styles = {
   skeletonTitle,
   skeletonLine,
   sentinel,
+  emptyState,
+  emptyStateContent,
   loadMoreTrigger,
   liveAnnouncer
 };
@@ -466,6 +470,24 @@ const getItemKey = (item2, index) => {
   }
   return (item2 == null ? void 0 : item2._id) ?? (item2 == null ? void 0 : item2.id) ?? index;
 };
+const RepeaterEmptyState = ({ content }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "group",
+    "data-testid": TestIds.emptyState,
+    className: clsx(semanticClassNames.emptyState, styles.emptyState),
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          semanticClassNames.emptyStateContent,
+          styles.emptyStateContent
+        ),
+        children: content
+      }
+    )
+  }
+);
 const Repeater = (props) => {
   var _a;
   const {
@@ -477,12 +499,13 @@ const Repeater = (props) => {
     items = DEFAULT_ITEMS,
     isLoading: isLoadingProp,
     onLoadMore,
-    emptyState
+    emptyStateContent: emptyStateContent2,
+    isEmpty: isEmptyProp
   } = props;
+  const showEmptyState = isEmptyProp === true || items.length === 0;
   const presetsWrapperProps = ((_a = props.wix) == null ? void 0 : _a.presetsWrapperProps) || {};
-  const showsEmptyState = items.length === 0 && !!emptyState;
   const [sentinelRef, isIntersecting] = useLoadMoreObserver(
-    !!onLoadMore && !showsEmptyState
+    !!onLoadMore && !showEmptyState
   );
   const { isLoading, load, hasReachedEnd } = useAsyncLoadMore(
     onLoadMore,
@@ -491,10 +514,7 @@ const Repeater = (props) => {
     isLoadingProp
   );
   const [ulRef, itemsPerRow] = useItemsPerRow(!!onLoadMore);
-  if (!items.length && emptyState) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
@@ -505,7 +525,7 @@ const Repeater = (props) => {
         directionStyles.fallbackDirection,
         className
       ),
-      children: [
+      children: showEmptyState ? /* @__PURE__ */ jsx(RepeaterEmptyState, { content: emptyStateContent2 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "ul",
           {
@@ -570,7 +590,7 @@ const Repeater = (props) => {
             onLoadMore
           }
         )
-      ]
+      ] })
     }
   ) });
 };

package/dist/site/components/Repeater/constants.d.ts

@@ -2,16 +2,27 @@ export declare const semanticClassNames: {
     readonly root: "repeater";
     readonly itemsContainer: "repeater-items-container";
     readonly item: "repeater-item";
+    readonly emptyState: "repeater-empty-state";
+    readonly emptyStateContent: "repeater-empty-state-content";
+};
+export declare const FunctionalStateKeys: {
+    readonly empty: "empty";
 };
 export declare const TestIds: {
     readonly skeleton: "repeater-skeleton";
     readonly sentinel: "repeater-sentinel";
     readonly emptyState: "repeater-empty-state";
-    readonly emptyStateTitle: "repeater-empty-state-title";
-    readonly emptyStateDescription: "repeater-empty-state-description";
+    readonly emptyStateBanner: "repeater-empty-state-banner";
     readonly loadMoreButton: "repeater-load-more-button";
     readonly liveAnnouncer: "repeater-live-announcer";
 };
+export declare const EMPTY_STATE_NAMESPACE = "repeater";
+export declare const translationsKeys: {
+    readonly editorEmptyStateMessage: "repeater_editor_empty_state_message";
+};
+export declare const defaultTranslations: {
+    readonly editorEmptyStateMessage: "No items found in your list";
+};
 export declare const DEFAULT_ITEMS_PER_ROW = 4;
 export declare const COLUMN_COUNT_CSS_VAR = "--column-count";
 export declare const LOADING_ITEM_COUNT_CSS_VAR = "--loading-item-count";
@@ -61,10 +72,20 @@ export declare const DisplayNames: {
             readonly emptyState_description: "Description";
             readonly isLoading: "Loading State";
             readonly loadMore: "Load More";
+            readonly emptyStateContent: "Empty State";
         };
         readonly customActions: {
             readonly presets: "Layout";
         };
+        readonly states: {
+            readonly empty: "No Items";
+        };
+        readonly elements: {
+            readonly emptyState: "Empty State";
+        };
+        readonly cssProperties: {
+            readonly emptyStateBackground: "Background";
+        };
         readonly presets: {
             readonly cards: "Cards";
             readonly cards_off: "Cards Off";

package/dist/site/components/Repeater/css.css

@@ -127,11 +127,19 @@
   }
 }
 .emptyState__cCB1M {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
+  box-sizing: border-box;
+}
+
+.emptyStateBanner__W741Z {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+  text-align: center;
+}
+
+.emptyStateContent__hVHdj {
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .loadMoreTrigger__IllQ8 {

package/dist/site/components/Repeater/manifest.js

@@ -1,6 +1,6 @@
-import { I as INTERACTIONS, L as LAYOUT, a as ACTIONS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, c as ContainerType, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
+import { I as INTERACTIONS, L as LAYOUT, a as ACTIONS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, c as ContainerType, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { p as presets, a as DisplayNames, D as DEFAULT_ITEMS_PER_ROW, s as semanticClassNames } from "../chunks/constants23.js";
+import { p as presets, a as DisplayNames, D as DEFAULT_ITEMS_PER_ROW, F as FunctionalStateKeys, s as semanticClassNames } from "../chunks/constants23.js";
 import { F as FunctionRole } from "../chunks/types.impl.js";
 const manifest = {
   id: "3f08612b-67ee-4b00-9340-9323e660aa60",
@@ -108,6 +108,51 @@ const manifest = {
             }
           }
         }
+      },
+      emptyStateContent: {
+        dataType: DATA.DATA_TYPE.container,
+        displayName: DisplayNames.root.data.emptyStateContent,
+        [DATA.DATA_TYPE.container]: {
+          selector: getSelector(semanticClassNames.emptyStateContent),
+          containerType: ContainerType.simple,
+          simple: {
+            behaviors: {
+              selectable: true
+            },
+            layout: {
+              containerResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+              resizeDirection: LAYOUT.RESIZE_DIRECTION.vertical,
+              height: 240
+            }
+          }
+        }
+      }
+    },
+    states: {
+      empty: {
+        displayName: DisplayNames.root.states.empty,
+        props: { isEmpty: true }
+      }
+    },
+    elements: {
+      emptyState: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.emptyState,
+          selector: getSelector(semanticClassNames.emptyState),
+          behaviors: {
+            selectable: true
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.empty,
+            elementPath: ".root"
+          },
+          cssProperties: {
+            backgroundColor: {
+              displayName: DisplayNames.root.cssProperties.emptyStateBackground
+            }
+          }
+        }
       }
     },
     cssProperties: {
@@ -539,7 +584,17 @@ const manifest = {
       componentUrl: "./site/components/Repeater/component.tsx"
     },
     editor: {
-      componentUrl: "./site/components/Repeater/component.preview.tsx"
+      componentUrl: "./site/components/Repeater/component.preview.tsx",
+      serviceDependencies: [
+        "@wix/viewer-service-environment",
+        "@wix/viewer-service-translations"
+      ],
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
+      }
     }
   },
   moduleConfiguration: {

package/dist/site/components/Repeater/types.d.ts

@@ -1,8 +1,4 @@
 import { A11y, Direction } from '@wix/editor-react-types';
-export interface EmptyState {
-    title?: string;
-    description?: string;
-}
 export type RepeaterItem = string | {
     _id?: string;
     id?: string;
@@ -17,7 +13,8 @@ export interface RepeaterProps {
     items?: Array<RepeaterItem>;
     isLoading?: boolean;
     onLoadMore?: () => Promise<void>;
-    emptyState?: EmptyState;
+    isEmpty?: boolean;
+    emptyStateContent?: React.ReactNode;
     wix?: {
         presetsWrapperProps?: Record<string, any>;
     };

package/dist/site/components/chunks/constants23.js

@@ -1,11 +1,17 @@
 const semanticClassNames = {
   root: "repeater",
   itemsContainer: "repeater-items-container",
-  item: "repeater-item"
+  item: "repeater-item",
+  emptyState: "repeater-empty-state",
+  emptyStateContent: "repeater-empty-state-content"
+};
+const FunctionalStateKeys = {
+  empty: "empty"
 };
 const TestIds = {
   skeleton: "repeater-skeleton",
   sentinel: "repeater-sentinel",
+  emptyState: "repeater-empty-state",
   loadMoreButton: "repeater-load-more-button",
   liveAnnouncer: "repeater-live-announcer"
 };
@@ -29,11 +35,21 @@ const DisplayNames = {
       emptyState_title: "Title",
       emptyState_description: "Description",
       isLoading: "Loading State",
-      loadMore: "Load More"
+      loadMore: "Load More",
+      emptyStateContent: "Empty State"
     },
     customActions: {
       presets: "Layout"
     },
+    states: {
+      empty: "No Items"
+    },
+    elements: {
+      emptyState: "Empty State"
+    },
+    cssProperties: {
+      emptyStateBackground: "Background"
+    },
     presets: {
       cards: "Cards",
       cards_off: "Cards Off",
@@ -47,6 +63,7 @@ const DisplayNames = {
 export {
   COLUMN_COUNT_CSS_VAR as C,
   DEFAULT_ITEMS_PER_ROW as D,
+  FunctionalStateKeys as F,
   LOADING_ITEM_COUNT_CSS_VAR as L,
   TestIds as T,
   DisplayNames as a,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2569.0",
+  "version": "1.2571.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -84,7 +84,7 @@
     "@wix/site-service-business-logger": "^1.0.0",
     "@wix/site-service-configuration": "^1.0.1",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.243.0",
+    "@wix/site-ui": "1.244.0",
     "@wix/video": "^1.106.0",
     "@wix/viewer-service-consent-policy": "^1.0.101",
     "@wix/web-bi-logger": "^2.1.29",
@@ -116,7 +116,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wix/a11y-audit-tool-plugin": "^0.397.0",
     "@wix/astro": "^2.67.0",
-    "@wix/business-tools": "^1.0.229",
+    "@wix/business-tools": "^1.0.230",
     "@wix/cli": "^1.1.235",
     "@wix/cli-app": "^1.1.235",
     "@wix/component-protocol": "^1.248.0",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "36c1b3a8b20c30140b46eba68b0bd385411ad920c753914a47c42dc9"
+  "falconPackageHash": "f65de354941b0c120fa7f0e24363b96bfb36428b44cb90dfaa8d1afa"
 }