@sledge-app/react-instant-search 2.0.11 → 2.0.13

package/dist/sledge-react-instant-search.js

@@ -1106,7 +1106,7 @@ const Pagination = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", "data-pagination-type": type, children: renderPaginationLayout() });
 };
 const RadioGroup$1 = "";
-const rowRenderer$1 = ({ virtualized, item, id, labelStyle }) => {
+const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
   const { index, key = "" } = virtualized || {};
   const { label, value } = item;
   const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -1120,7 +1120,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
     VirtualizedList,
     {
       rowCount: items == null ? void 0 : items.length,
-      rowRenderer: ({ index, key }) => rowRenderer$1({
+      rowRenderer: ({ index, key }) => rowRenderer({
         virtualized: {
           index,
           key
@@ -1134,7 +1134,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
       parentRef
     }
   ) : items.map(
-    (item, index) => rowRenderer$1({
+    (item, index) => rowRenderer({
       virtualized: {
         index
       },
@@ -1177,25 +1177,32 @@ const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick }
   );
 };
 const Select$1 = "";
-const rowRenderer = ({ virtualized, item, labelStyle }) => {
-  const { index, key = "" } = virtualized || {};
-  const { label, value } = item;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
-};
-const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, labelStyle = {}, onValueChange, useVirtualized = false }) => {
+const Select = ({ name, placeholder, required, defaultValue, items, labelStyle = {}, onValueChange, useLoadMore = false, loadMoreText = "Load More" }) => {
+  var _a;
+  const maxItemPerPage = 30;
+  const defaultVisibleItemsLoadMore = (items == null ? void 0 : items.length) ? items.slice(0, maxItemPerPage) : [];
   const [isLoading, setIsLoading] = React__default.useState(true);
-  const [items, setItems] = React__default.useState([]);
-  const selectViewportRef = React__default.useRef(null);
-  const scrollToPosition = (direction) => {
-    const directionMultiplier = direction === "up" ? -1 : 1;
-    if (selectViewportRef.current) {
-      const currentPosition = selectViewportRef.current.scrollTop;
-      const scrollAmount = 500 * directionMultiplier;
-      selectViewportRef.current.scrollTo({
-        top: currentPosition + scrollAmount
-      });
-    }
+  const [visibleItems, setVisibleItems] = React__default.useState((items == null ? void 0 : items.length) ? useLoadMore ? defaultVisibleItemsLoadMore : items : []);
+  const [page, setPage] = React__default.useState(1);
+  const handleLoadMore = () => {
+    var _a2;
+    const nextItems = (_a2 = items == null ? void 0 : items.slice) == null ? void 0 : _a2.call(items, 0, (page + 1) * maxItemPerPage);
+    setVisibleItems(nextItems);
+    setPage(page + 1);
+    setTimeout(() => {
+      var _a3, _b, _c, _d;
+      const selectRootElement = document.querySelector(".sledge__select-root");
+      if (selectRootElement) {
+        const currentHeight = (_b = (_a3 = window == null ? void 0 : window.getComputedStyle) == null ? void 0 : _a3.call(window, selectRootElement)) == null ? void 0 : _b.height;
+        const currentMaxHeight = (_d = (_c = window == null ? void 0 : window.getComputedStyle) == null ? void 0 : _c.call(window, selectRootElement)) == null ? void 0 : _d.maxHeight;
+        if (currentHeight)
+          selectRootElement.style.height = currentHeight;
+        if (currentMaxHeight)
+          selectRootElement.style.height = currentMaxHeight;
+      }
+    }, 0);
   };
+  const hasMore = visibleItems.length < items.length;
   React__default.useEffect(() => {
     setIsLoading(true);
     setTimeout(() => {
@@ -1212,22 +1219,19 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
         selectRootElement.classList.toggle("sledge__select-root");
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", "data-use-virtualized": useVirtualized, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", "data-use-load-more": useLoadMore, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $cc7e05a45900e73f$export$be92b6f5f03c0fe9,
     {
       name,
       required,
       onValueChange,
-      onOpenChange: (open) => {
-        handleClassNameRoot(open);
-        setItems(open ? itemsProp : []);
-      },
+      onOpenChange: (open) => handleClassNameRoot(open),
       ...defaultValue ? {
         defaultValue
       } : {},
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "sledge__select-trigger", style: labelStyle, children: [
-          useVirtualized && defaultValue ? /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { children: defaultValue }) : /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
+          useLoadMore && defaultValue ? /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: defaultValue }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
           /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "sledge__select-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "path",
             {
@@ -1238,15 +1242,18 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { className: "sledge__select-portal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "sledge__select-content", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            $cc7e05a45900e73f$export$2f60d3ec9ad468f2,
-            {
-              className: "sledge__select-scroll-button",
-              ...useVirtualized ? {
-                onClick: () => scrollToPosition("up")
-              } : {},
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { className: "sledge__select-portal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          $cc7e05a45900e73f$export$7c6e2c02157bb7d2,
+          {
+            className: "sledge__select-content",
+            onCloseAutoFocus: () => {
+              if (!useLoadMore)
+                return;
+              setVisibleItems(defaultVisibleItemsLoadMore);
+              setPage(1);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$2f60d3ec9ad468f2, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "path",
                 {
                   d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
@@ -1254,37 +1261,20 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
                   fillRule: "evenodd",
                   clipRule: "evenodd"
                 }
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", ref: selectViewportRef, children: useVirtualized ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            VirtualizedList,
-            {
-              rowCount: items == null ? void 0 : items.length,
-              rowRenderer: ({ index, key }) => rowRenderer({
-                virtualized: {
-                  index,
-                  key
-                },
-                item: items == null ? void 0 : items[index],
-                labelStyle
-              }),
-              parentRef: selectViewportRef
-            }
-          ) : items.map(
-            (item, index) => {
-              const { label, value } = item;
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            $cc7e05a45900e73f$export$bf1aedc3039c8d63,
-            {
-              className: "sledge__select-scroll-button",
-              ...useVirtualized ? {
-                onClick: () => scrollToPosition("down")
-              } : {},
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", children: useLoadMore ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                (_a = visibleItems == null ? void 0 : visibleItems.map) == null ? void 0 : _a.call(visibleItems, (item, index) => {
+                  const { label, value } = item;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
+                }),
+                hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-load-more", onClick: handleLoadMore, children: loadMoreText })
+              ] }) : items.map(
+                (item, index) => {
+                  const { label, value } = item;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$bf1aedc3039c8d63, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "path",
                 {
                   d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
@@ -1292,10 +1282,10 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
                   fillRule: "evenodd",
                   clipRule: "evenodd"
                 }
-              ) })
-            }
-          )
-        ] }) })
+              ) }) })
+            ]
+          }
+        ) })
       ]
     }
   ) }) });
@@ -7838,7 +7828,8 @@ const Facet = (props) => {
         }),
         defaultValue: clickedFacets && ((_e = clickedFacets[value]) == null ? void 0 : _e.length) ? clickedFacets[value][0] : "",
         labelStyle: filter_option_style,
-        useVirtualized: true
+        loadMoreText: button_load_more || "Load More",
+        useLoadMore: true
       }
     ) });
   } else if (display.toLowerCase() === "swatch" && (currentItems == null ? void 0 : currentItems.length)) {