@wix/editor-react-components 1.2252.0 → 1.2253.0

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 type Props = {
     itemCount: number;
     hasMore: boolean;
-    onLoadMore: (() => void) | undefined;
+    onLoadMore: (() => Promise<void>) | undefined;
     itemsLoadedLabel?: string;
     endOfListLabel?: string;
     debounceMs?: number;

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 type Props = {
-    onLoadMore: () => void;
+    onLoadMore: () => Promise<void>;
     isLoading: boolean;
     label?: string;
 };

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

@@ -4,22 +4,35 @@ 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/constants20.js";
-import React__default, { useRef, useState, useEffect, forwardRef } from "react";
-const useItemsPerRow = (shouldMeasure) => {
-  const ref = useRef(null);
-  const [count, setCount] = useState(DEFAULT_ITEMS_PER_ROW);
+import React__default, { useState, useRef, useEffect, useCallback, forwardRef } from "react";
+const useAsyncLoadMore = (onLoadMore, itemsLength) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const itemsLengthAtLastLoad = useRef(null);
   useEffect(() => {
-    if (!shouldMeasure || !ref.current) {
-      return;
-    }
-    const value = Number(
-      getComputedStyle(ref.current).getPropertyValue(COLUMN_COUNT_CSS_VAR)
-    );
-    if (value > 0) {
-      setCount(value);
+    setHasMore(true);
+    itemsLengthAtLastLoad.current = null;
+  }, [onLoadMore]);
+  useEffect(() => {
+    if (itemsLengthAtLastLoad.current === null) return;
+    setHasMore(itemsLength > itemsLengthAtLastLoad.current);
+    itemsLengthAtLastLoad.current = null;
+  }, [itemsLength]);
+  const handleLoadMore = useCallback(async () => {
+    itemsLengthAtLastLoad.current = itemsLength;
+    setIsLoading(true);
+    try {
+      await (onLoadMore == null ? void 0 : onLoadMore());
+    } catch {
+    } finally {
+      setIsLoading(false);
+      if (itemsLengthAtLastLoad.current !== null) {
+        setHasMore(false);
+        itemsLengthAtLastLoad.current = null;
+      }
     }
-  }, [shouldMeasure]);
-  return [ref, count];
+  }, [onLoadMore, itemsLength]);
+  return { isLoading, handleLoadMore, hasMore };
 };
 const useLoadMoreObserver = ({
   enabled,
@@ -51,6 +64,22 @@ const useLoadMoreObserver = ({
   }, [enabled]);
   return sentinelRef;
 };
+const useItemsPerRow = (shouldMeasure) => {
+  const ref = useRef(null);
+  const [count, setCount] = useState(DEFAULT_ITEMS_PER_ROW);
+  useEffect(() => {
+    if (!shouldMeasure || !ref.current) {
+      return;
+    }
+    const value = Number(
+      getComputedStyle(ref.current).getPropertyValue(COLUMN_COUNT_CSS_VAR)
+    );
+    if (value > 0) {
+      setCount(value);
+    }
+  }, [shouldMeasure]);
+  return [ref, count];
+};
 function createStateClass(namespace, stateName, stateValue) {
   if (stateValue === false || stateValue === void 0 || stateValue === null || stateValue !== stateValue) {
     return "";
@@ -403,18 +432,19 @@ const Repeater = (props) => {
     a11y,
     renderItem = () => /* @__PURE__ */ jsx(Fragment, {}),
     items = DEFAULT_ITEMS,
-    isLoading = false,
-    hasMore = false,
     onLoadMore,
     emptyState
   } = props;
   const presetsWrapperProps = ((_a = props.wix) == null ? void 0 : _a.presetsWrapperProps) || {};
-  const loadMoreEnabled = !!onLoadMore;
+  const { isLoading, handleLoadMore, hasMore } = useAsyncLoadMore(
+    onLoadMore,
+    items.length
+  );
+  const [ulRef, itemsPerRow] = useItemsPerRow(!!onLoadMore);
   const sentinelRef = useLoadMoreObserver({
-    enabled: loadMoreEnabled && !isLoading && hasMore,
-    onLoadMore
+    enabled: !!onLoadMore && hasMore,
+    onLoadMore: onLoadMore ? handleLoadMore : void 0
   });
-  const [itemsContainerRef, itemsPerRow] = useItemsPerRow(isLoading);
   if (!items.length && emptyState) {
     return null;
   }
@@ -433,10 +463,10 @@ const Repeater = (props) => {
         /* @__PURE__ */ jsxs(
           "ul",
           {
-            ref: itemsContainerRef,
+            ref: ulRef,
             ...a11y && convertA11yKeysToHtmlFormat(a11y),
             role: "list",
-            "aria-busy": isLoading || void 0,
+            "aria-busy": isLoading,
             className: clsx(
               semanticClassNames.itemsContainer,
               styles.itemsContainer
@@ -468,8 +498,8 @@ const Repeater = (props) => {
             ]
           }
         ),
-        loadMoreEnabled && hasMore && onLoadMore && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(LoadMoreButton, { onLoadMore, isLoading }),
+        !!onLoadMore && hasMore && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(LoadMoreButton, { onLoadMore: handleLoadMore, isLoading }),
           /* @__PURE__ */ jsx(
             "div",
             {

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

@@ -0,0 +1,5 @@
+export declare const useAsyncLoadMore: (onLoadMore: (() => Promise<void>) | undefined, itemsLength: number) => {
+    isLoading: boolean;
+    handleLoadMore: () => Promise<void>;
+    hasMore: boolean;
+};

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

@@ -39,6 +39,8 @@ const manifest = {
           "emptyState",
           "direction",
           "renderItem",
+          "isLoading",
+          "hasMore",
           "isLoadingFunc",
           "hasMoreFunc",
           "onLoadMoreFunc",
@@ -88,7 +90,9 @@ const manifest = {
       onLoadMore: {
         displayName: DisplayNames.root.data.loadMore,
         dataType: DATA.DATA_TYPE.function,
-        [DATA.DATA_TYPE.function]: {}
+        [DATA.DATA_TYPE.function]: {
+          async: true
+        }
       },
       isLoadingFunc: {
         displayName: DisplayNames.root.data.isLoading,

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

@@ -10,9 +10,7 @@ export interface RepeaterProps {
     a11y?: A11y;
     renderItem?: (itemId: string, itemIndex: number) => React.JSX.Element;
     items?: Array<string>;
-    isLoading?: boolean;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
+    onLoadMore?: () => Promise<void>;
     emptyState?: EmptyState;
     wix?: {
         presetsWrapperProps?: Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2252.0",
+  "version": "1.2253.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "7d557f7e3d84c00f6c199cbe0d050b9565163aacaba151c295b34a4d"
+  "falconPackageHash": "eb421f36fe8a21d0bbb4d7e52203e00d5026eee1dabdc62bc3822650"
 }