@wix/editor-react-components 1.2558.0 → 1.2560.0

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

@@ -3,7 +3,7 @@ import { c as clsx } from "../chunks/clsx.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { D as DEFAULT_ITEMS_PER_ROW, C as COLUMN_COUNT_CSS_VAR, T as TestIds, s as semanticClassNames } from "../chunks/constants23.js";
+import { D as DEFAULT_ITEMS_PER_ROW, L as LOADING_ITEM_COUNT_CSS_VAR, C as COLUMN_COUNT_CSS_VAR, T as TestIds, s as semanticClassNames } from "../chunks/constants23.js";
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from "react";
 const useAsyncLoadMore = (onLoadMore, itemsLength, isIntersecting, isLoadingProp) => {
   const [internalLoading, setInternalLoading] = useState(false);
@@ -61,8 +61,9 @@ const useItemsPerRow = (shouldMeasure) => {
     if (!shouldMeasure || !ref.current) {
       return;
     }
+    const style = getComputedStyle(ref.current);
     const value = Number(
-      getComputedStyle(ref.current).getPropertyValue(COLUMN_COUNT_CSS_VAR)
+      style.getPropertyValue(LOADING_ITEM_COUNT_CSS_VAR) || style.getPropertyValue(COLUMN_COUNT_CSS_VAR)
     );
     if (value > 0) {
       setCount(value);
@@ -539,29 +540,28 @@ const Repeater = (props) => {
                   children: /* @__PURE__ */ jsx(ItemSkeleton, {})
                 },
                 `skeleton-${i}`
-              ))
+              )),
+              !!onLoadMore && /* @__PURE__ */ jsx(
+                "li",
+                {
+                  ref: sentinelRef,
+                  role: "presentation",
+                  "aria-hidden": "true",
+                  className: styles.sentinel,
+                  "data-testid": TestIds.sentinel
+                }
+              )
             ]
           }
         ),
-        !!onLoadMore && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            LoadMoreButton,
-            {
-              onLoadMore: load,
-              isLoading,
-              disabled: isLoading || hasReachedEnd
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: sentinelRef,
-              "aria-hidden": "true",
-              className: styles.sentinel,
-              "data-testid": TestIds.sentinel
-            }
-          )
-        ] }),
+        !!onLoadMore && /* @__PURE__ */ jsx(
+          LoadMoreButton,
+          {
+            onLoadMore: load,
+            isLoading,
+            disabled: isLoading || hasReachedEnd
+          }
+        ),
         /* @__PURE__ */ jsx(
           LiveAnnouncer,
           {

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

@@ -14,6 +14,7 @@ export declare const TestIds: {
 };
 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";
 export declare const COLUMN_COUNT_RANGE: {
     readonly min: "1";
     readonly max: "12";

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

@@ -45,6 +45,7 @@
   row-gap: var(--row-gap, 0px);
   column-gap: var(--column-gap, 0px);
   justify-content: inherit;
+  position: relative;
 }
 
 .item__dXORc {
@@ -57,6 +58,8 @@
 .itemLoading__T6wK5 {
   background-color: transparent;
   container-type: inline-size;
+  min-width: var(--loading-item-min-width, auto);
+  min-height: var(--loading-item-min-height, 10px);
 }
 
 .skeleton__-ihsq {
@@ -105,9 +108,12 @@
 }
 
 .sentinel__niAmU {
-  height: 0;
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  width: 1px;
+  height: 1px;
   overflow: hidden;
-  width: 100%;
 }
 
 @container (width < 150px) {
@@ -179,6 +185,9 @@
   --column-gap: 0px;
   --overflow-content: visible;
   --skeleton-color: #e0dad7;
+  --loading-item-min-width: auto;
+  --loading-item-min-height: 10px;
+  --loading-item-count: var(--column-count);
   --column-min-width: var(--repeater-column-min-width-fallback);
   --row-min-height: var(--repeater-min-size-fallback);
   --grid-auto-flow-mode: auto-fit;

package/dist/site/components/Repeater/hooks/useLoadMoreObserver.d.ts

@@ -1 +1 @@
-export declare const useLoadMoreObserver: (enabled: boolean) => readonly [import('react').RefObject<HTMLDivElement>, boolean];
+export declare const useLoadMoreObserver: (enabled: boolean) => readonly [import('react').RefObject<HTMLLIElement>, boolean];

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

@@ -11,6 +11,7 @@ const TestIds = {
 };
 const DEFAULT_ITEMS_PER_ROW = 4;
 const COLUMN_COUNT_CSS_VAR = "--column-count";
+const LOADING_ITEM_COUNT_CSS_VAR = "--loading-item-count";
 const presets = {
   cards: "cards",
   cards_off: "cards_off",
@@ -46,6 +47,7 @@ const DisplayNames = {
 export {
   COLUMN_COUNT_CSS_VAR as C,
   DEFAULT_ITEMS_PER_ROW as D,
+  LOADING_ITEM_COUNT_CSS_VAR as L,
   TestIds as T,
   DisplayNames as a,
   presets as p,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2558.0",
+  "version": "1.2560.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "e94bace123d34f1b183027de42358d46d5a9236772e479d9d259096c"
+  "falconPackageHash": "59f8a46f9de52c00f8fbcd9b7119aacca191af8d7e94746bb86c41ff"
 }