shad-m 1.0.0

package/dist/common/interactive/select-with-api.js

@@ -0,0 +1,767 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var InfiniteScroll = require('react-infinite-scroll-component');
+var spinner = require('../../components/spinner');
+var helpers = require('../../lib/helpers');
+var select = require('./select');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var InfiniteScroll__default = /*#__PURE__*/_interopDefault(InfiniteScroll);
+
+function SelectWithApiSearch({
+  // API-specific props
+  multiple,
+  searchApi,
+  searchPlaceholder,
+  debounceMs = 300,
+  trackingSearchName = "",
+  trackingSearchData = {},
+  pageSize = 20,
+  enableInfiniteScroll = false,
+  // SelectTrigger props
+  isError,
+  errorText,
+  helpText,
+  errorTextClassName,
+  helpTextClassName,
+  asChild,
+  icon,
+  hasRemoveIcon = false,
+  className,
+  size,
+  placeholder,
+  inputClassName,
+  buttonIconClassName,
+  classButton,
+  classLabel,
+  addonBefore,
+  addonAfter,
+  // Additional content
+  additionalContent,
+  // Value renderer
+  valueRenderer,
+  isRequired,
+  // SelectProps (spread the rest)
+  ...selectProps
+}) {
+  const [allOptions, setAllOptions] = React__default.default.useState([]);
+  const [isLoading, setIsLoading] = React__default.default.useState(false);
+  const [isSearching, setIsSearching] = React__default.default.useState(false);
+  const [hasMore, setHasMore] = React__default.default.useState(true);
+  const [currentPage, setCurrentPage] = React__default.default.useState(1);
+  const [currentQuery, setCurrentQuery] = React__default.default.useState("");
+  const [isLoadingMore, setIsLoadingMore] = React__default.default.useState(false);
+  const [shouldResetSearch, setShouldResetSearch] = React__default.default.useState(false);
+  const [hasInitiallyLoaded, setHasInitiallyLoaded] = React__default.default.useState(false);
+  const isPaginatedApi = (api) => {
+    return enableInfiniteScroll && typeof api === "function" && api.length >= 2;
+  };
+  const loadData = React__default.default.useCallback(
+    async (query, page = 1, resetData = false) => {
+      try {
+        if (page === 1) {
+          setIsSearching(true);
+        } else {
+          setIsLoadingMore(true);
+        }
+        if (isPaginatedApi(searchApi)) {
+          const paginatedResult = await searchApi(query, page, pageSize);
+          if (resetData || page === 1) {
+            setAllOptions(paginatedResult.data);
+          } else {
+            setAllOptions((prev) => [...prev, ...paginatedResult.data]);
+          }
+          setHasMore(paginatedResult.hasMore);
+          setCurrentPage(page);
+          setCurrentQuery(query);
+        } else {
+          const simpleResult = await searchApi(query);
+          setAllOptions(simpleResult);
+          setHasMore(false);
+          setCurrentPage(1);
+          setCurrentQuery(query);
+        }
+      } catch (error) {
+        console.error("Failed to load data:", error);
+        if (resetData || page === 1) {
+          setAllOptions([]);
+        }
+        setHasMore(false);
+      } finally {
+        setIsSearching(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [searchApi, pageSize, enableInfiniteScroll]
+  );
+  React__default.default.useEffect(() => {
+    if (!hasInitiallyLoaded) {
+      setIsLoading(true);
+      setHasInitiallyLoaded(true);
+      loadData("", 1, true).finally(() => setIsLoading(false));
+    }
+  }, [hasInitiallyLoaded]);
+  const debouncedSearch = React__default.default.useMemo(() => {
+    return helpers.debounce((query) => {
+      setCurrentPage(1);
+      setHasMore(true);
+      loadData(query, 1, true);
+    }, debounceMs);
+  }, [loadData, debounceMs]);
+  const loadMore = React__default.default.useCallback(() => {
+    if (!isLoadingMore && hasMore && isPaginatedApi(searchApi)) {
+      logInfiniteScrollAction("Single Options - Loading more data", {
+        totalItems: allOptions.length
+      });
+      setTimeout(() => {
+        loadData(currentQuery, currentPage + 1, false);
+      }, 100);
+    }
+  }, [loadData, currentQuery, currentPage, isLoadingMore, hasMore, allOptions.length, searchApi]);
+  const originalOnClearValue = selectProps.onClearValue;
+  const handleClearValue = React__default.default.useCallback(() => {
+    originalOnClearValue?.();
+  }, [originalOnClearValue]);
+  const originalOnOpenChange = selectProps.onOpenChange;
+  const handleOpenChange = React__default.default.useCallback(
+    (open) => {
+      if (!open) {
+        setShouldResetSearch(true);
+        setTimeout(() => {
+          setCurrentQuery("");
+          setCurrentPage(1);
+          setHasMore(true);
+          loadData("", 1, true);
+          setShouldResetSearch(false);
+        }, 150);
+      }
+      originalOnOpenChange?.(open);
+    },
+    [
+      loadData,
+      originalOnOpenChange,
+      setShouldResetSearch,
+      setCurrentQuery,
+      setCurrentPage,
+      setHasMore
+    ]
+  );
+  const originalOnApply = selectProps.onApply;
+  const handleApply = React__default.default.useCallback(
+    (value) => {
+      if (multiple) {
+        setShouldResetSearch(true);
+        setCurrentQuery("");
+        loadData("", 1, true);
+        setTimeout(() => setShouldResetSearch(false), 100);
+      }
+      originalOnApply?.(value);
+    },
+    [loadData, originalOnApply, multiple]
+  );
+  if (enableInfiniteScroll && isPaginatedApi(searchApi)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        ...selectProps,
+        onClearValue: handleClearValue,
+        onOpenChange: handleOpenChange,
+        onApply: handleApply,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            select.SelectTrigger,
+            {
+              isError,
+              errorText,
+              helpText,
+              errorTextClassName,
+              helpTextClassName,
+              asChild,
+              icon,
+              hasRemoveIcon,
+              className,
+              size,
+              placeholder,
+              inputClassName,
+              buttonIconClassName,
+              classButton,
+              classLabel,
+              addonBefore,
+              addonAfter,
+              isRequired,
+              children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: valueRenderer })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            SelectContentAutoLayoutInfinite,
+            {
+              options: allOptions,
+              isLoading: isLoading || isSearching,
+              hasSearch: true,
+              searchPlaceholder: searchPlaceholder || "T\xECm ki\u1EBFm...",
+              multiple,
+              trackingSearchName,
+              trackingSearchData,
+              onSearchChange: debouncedSearch,
+              hasMore,
+              isLoadingMore,
+              onLoadMore: loadMore,
+              currentQuery,
+              resetSearchKeyword: shouldResetSearch,
+              additionalContent
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    select.Select,
+    {
+      ...selectProps,
+      onClearValue: handleClearValue,
+      onOpenChange: handleOpenChange,
+      onApply: handleApply,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          select.SelectTrigger,
+          {
+            isError,
+            errorText,
+            helpText,
+            errorTextClassName,
+            helpTextClassName,
+            asChild,
+            icon,
+            hasRemoveIcon,
+            className,
+            size,
+            placeholder,
+            inputClassName,
+            buttonIconClassName,
+            classButton,
+            classLabel,
+            addonBefore,
+            addonAfter,
+            isRequired,
+            children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: valueRenderer })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectContentAutoLayoutInfinite,
+          {
+            options: allOptions,
+            isLoading: isLoading || isSearching,
+            hasSearch: true,
+            searchPlaceholder: searchPlaceholder || "T\xECm ki\u1EBFm...",
+            multiple,
+            trackingSearchName,
+            trackingSearchData,
+            onSearchChange: debouncedSearch,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            currentQuery,
+            resetSearchKeyword: shouldResetSearch,
+            additionalContent
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function SelectWithApiSearchGroup({
+  // API-specific props
+  multiple,
+  searchApi,
+  searchPlaceholder,
+  debounceMs = 300,
+  trackingSearchName,
+  trackingSearchData,
+  pageSize = 20,
+  enableInfiniteScroll = false,
+  // SelectTrigger props
+  isError,
+  errorText,
+  helpText,
+  errorTextClassName,
+  helpTextClassName,
+  asChild,
+  icon,
+  hasRemoveIcon = false,
+  className,
+  size,
+  inputClassName,
+  buttonIconClassName,
+  classButton,
+  classLabel,
+  addonBefore,
+  addonAfter,
+  // Additional content
+  additionalContent,
+  // Value renderer
+  valueRenderer,
+  isRequired,
+  // SelectProps (spread the rest)
+  ...selectProps
+}) {
+  const [allGroups, setAllGroups] = React__default.default.useState([]);
+  const [isLoading, setIsLoading] = React__default.default.useState(false);
+  const [isSearching, setIsSearching] = React__default.default.useState(false);
+  const [hasMore, setHasMore] = React__default.default.useState(true);
+  const [currentPage, setCurrentPage] = React__default.default.useState(1);
+  const [currentQuery, setCurrentQuery] = React__default.default.useState("");
+  const [isLoadingMore, setIsLoadingMore] = React__default.default.useState(false);
+  const [shouldResetSearch, setShouldResetSearch] = React__default.default.useState(false);
+  const [hasInitiallyLoaded, setHasInitiallyLoaded] = React__default.default.useState(false);
+  const isPaginatedApi = (api) => {
+    return enableInfiniteScroll && typeof api === "function" && api.length >= 2;
+  };
+  const loadData = React__default.default.useCallback(
+    async (query, page = 1, resetData = false) => {
+      try {
+        if (page === 1) {
+          setIsSearching(true);
+        } else {
+          setIsLoadingMore(true);
+        }
+        if (isPaginatedApi(searchApi)) {
+          const paginatedResult = await searchApi(query, page, pageSize);
+          if (resetData || page === 1) {
+            setAllGroups(paginatedResult.data);
+          } else {
+            setAllGroups((prev) => [...prev, ...paginatedResult.data]);
+          }
+          setHasMore(paginatedResult.hasMore);
+          setCurrentPage(page);
+          setCurrentQuery(query);
+        } else {
+          const simpleResult = await searchApi(query);
+          setAllGroups(simpleResult);
+          setHasMore(false);
+          setCurrentPage(1);
+          setCurrentQuery(query);
+        }
+      } catch (error) {
+        console.error("Failed to load data:", error);
+        if (resetData || page === 1) {
+          setAllGroups([]);
+        }
+        setHasMore(false);
+      } finally {
+        setIsSearching(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [searchApi, pageSize, enableInfiniteScroll]
+  );
+  React__default.default.useEffect(() => {
+    if (!hasInitiallyLoaded) {
+      setIsLoading(true);
+      setHasInitiallyLoaded(true);
+      loadData("", 1, true).finally(() => setIsLoading(false));
+    }
+  }, [hasInitiallyLoaded]);
+  const debouncedGroupSearch = React__default.default.useMemo(() => {
+    return helpers.debounce((query) => {
+      setCurrentPage(1);
+      setHasMore(true);
+      loadData(query, 1, true);
+    }, debounceMs);
+  }, [loadData, debounceMs]);
+  const loadMore = React__default.default.useCallback(() => {
+    if (!isLoadingMore && hasMore && isPaginatedApi(searchApi)) {
+      logInfiniteScrollAction("Grouped Options - Loading more data", {
+        totalGroups: allGroups.length
+      });
+      setTimeout(() => {
+        loadData(currentQuery, currentPage + 1, false);
+      }, 100);
+    }
+  }, [loadData, currentQuery, currentPage, isLoadingMore, hasMore, allGroups.length, searchApi]);
+  const originalOnClearValue = selectProps.onClearValue;
+  const handleClearValue = React__default.default.useCallback(() => {
+    originalOnClearValue?.();
+  }, [originalOnClearValue]);
+  const originalOnOpenChange = selectProps.onOpenChange;
+  const handleOpenChange = React__default.default.useCallback(
+    (open) => {
+      if (!open) {
+        setShouldResetSearch(true);
+        setTimeout(() => {
+          setCurrentQuery("");
+          setCurrentPage(1);
+          setHasMore(true);
+          loadData("", 1, true);
+          setShouldResetSearch(false);
+        }, 150);
+      }
+      originalOnOpenChange?.(open);
+    },
+    [
+      loadData,
+      originalOnOpenChange,
+      setShouldResetSearch,
+      setCurrentQuery,
+      setCurrentPage,
+      setHasMore
+    ]
+  );
+  const originalOnApply = selectProps.onApply;
+  const handleApply = React__default.default.useCallback(
+    (value) => {
+      if (multiple) {
+        setShouldResetSearch(true);
+        setCurrentQuery("");
+        loadData("", 1, true);
+        setTimeout(() => setShouldResetSearch(false), 100);
+      }
+      originalOnApply?.(value);
+    },
+    [loadData, originalOnApply, multiple]
+  );
+  if (enableInfiniteScroll && isPaginatedApi(searchApi)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        ...selectProps,
+        onClearValue: handleClearValue,
+        onOpenChange: handleOpenChange,
+        onApply: handleApply,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            select.SelectTrigger,
+            {
+              isError,
+              errorText,
+              helpText,
+              errorTextClassName,
+              helpTextClassName,
+              asChild,
+              icon,
+              hasRemoveIcon,
+              className,
+              size,
+              inputClassName,
+              buttonIconClassName,
+              classButton,
+              classLabel,
+              addonBefore,
+              addonAfter,
+              isRequired,
+              children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: valueRenderer })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            SelectContentGroupAutoLayoutInfinite,
+            {
+              options: allGroups,
+              isLoading: isLoading || isSearching,
+              hasSearch: true,
+              searchPlaceholder: searchPlaceholder || "T\xECm ki\u1EBFm...",
+              multiple,
+              trackingSearchName: trackingSearchName || "group_search_infinite",
+              trackingSearchData,
+              onSearchChange: debouncedGroupSearch,
+              hasMore,
+              isLoadingMore,
+              onLoadMore: loadMore,
+              currentQuery,
+              resetSearchKeyword: shouldResetSearch,
+              additionalContent
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    select.Select,
+    {
+      ...selectProps,
+      onClearValue: handleClearValue,
+      onOpenChange: handleOpenChange,
+      onApply: handleApply,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          select.SelectTrigger,
+          {
+            isError,
+            errorText,
+            helpText,
+            errorTextClassName,
+            helpTextClassName,
+            asChild,
+            icon,
+            hasRemoveIcon,
+            className,
+            size,
+            inputClassName,
+            buttonIconClassName,
+            classButton,
+            classLabel,
+            addonBefore,
+            addonAfter,
+            isRequired,
+            children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectContentGroupAutoLayoutInfinite,
+          {
+            options: allGroups,
+            isLoading: isLoading || isSearching,
+            hasSearch: true,
+            searchPlaceholder: searchPlaceholder || "T\xECm ki\u1EBFm...",
+            multiple,
+            trackingSearchName: trackingSearchName || "group_search",
+            trackingSearchData,
+            onSearchChange: debouncedGroupSearch,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            currentQuery,
+            resetSearchKeyword: shouldResetSearch,
+            additionalContent
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function useApiSearch(searchApi, debounceMs = 300) {
+  const [data, setData] = React__default.default.useState([]);
+  const [isLoading, setIsLoading] = React__default.default.useState(false);
+  const [error, setError] = React__default.default.useState(null);
+  const debouncedSearch = React__default.default.useMemo(() => {
+    return helpers.debounce((query) => {
+      setIsLoading(true);
+      setError(null);
+      searchApi(query).then((result) => {
+        setData(result);
+      }).catch((err) => {
+        setError(err instanceof Error ? err : new Error("Search failed"));
+        setData([]);
+      }).finally(() => {
+        setIsLoading(false);
+      });
+    }, debounceMs);
+  }, [searchApi, debounceMs]);
+  React__default.default.useEffect(() => {
+    debouncedSearch("");
+  }, [debouncedSearch]);
+  return {
+    data,
+    isLoading,
+    error,
+    search: debouncedSearch
+  };
+}
+const logInfiniteScrollAction = (action, data) => {
+  if (typeof window !== "undefined" && window.location.pathname.includes("select-demo")) ;
+};
+const SelectContentAutoLayoutInfinite = React__default.default.forwardRef(
+  ({
+    hasSearch: hasSearchProp,
+    searchPlaceholder,
+    multiple,
+    options,
+    isLoading,
+    trackingSearchName,
+    trackingSearchData,
+    onSearchChange,
+    hasMore,
+    isLoadingMore,
+    onLoadMore,
+    currentQuery,
+    resetSearchKeyword,
+    ...props
+  }, ref) => {
+    const { setAvailableOptions } = select.useSelectContext();
+    const [searchKeyword, setSearchKeyword] = React__default.default.useState("");
+    React__default.default.useEffect(() => {
+      if (options && setAvailableOptions) {
+        setAvailableOptions(options);
+      }
+    }, [options, setAvailableOptions]);
+    React__default.default.useEffect(() => {
+      if (resetSearchKeyword) {
+        setSearchKeyword("");
+      }
+    }, [resetSearchKeyword]);
+    const onSearchInputChange = React__default.default.useCallback(
+      (e) => {
+        setSearchKeyword(e.target.value);
+        onSearchChange?.(e.target.value);
+      },
+      [onSearchChange]
+    );
+    const itemHeight = 48;
+    const maxVisibleItems = 5;
+    const minHeight = maxVisibleItems * itemHeight;
+    const actualItems = Math.min(options.length || 0, maxVisibleItems);
+    const dynamicHeight = actualItems > 0 ? actualItems * itemHeight : minHeight;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      select.SelectContent,
+      {
+        searchElm: hasSearchProp ? /* @__PURE__ */ jsxRuntime.jsx(
+          select.SelectSearch,
+          {
+            placeholder: searchPlaceholder,
+            value: searchKeyword,
+            onChange: onSearchInputChange
+          }
+        ) : null,
+        ref,
+        hasFooter: multiple && options.length > 0,
+        loading: isLoading,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: "infinite-scroll-single",
+            className: "custom-select-scroll",
+            style: { height: `${dynamicHeight}px`, overflow: "auto" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              InfiniteScroll__default.default,
+              {
+                dataLength: options.length,
+                next: onLoadMore,
+                hasMore,
+                loader: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", className: "text-primary" }) }),
+                scrollableTarget: "infinite-scroll-single",
+                scrollThreshold: 0.9,
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", className: "text-primary" }) }) : options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(select.SelectEmptyState, {}) : options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  select.SelectItem,
+                  {
+                    option,
+                    disabled: option?.disable,
+                    multiple,
+                    closeAfterClick: !multiple,
+                    children: option?.name || option.value
+                  },
+                  option.value
+                ))
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SelectContentAutoLayoutInfinite.displayName = "SelectContentAutoLayoutInfinite";
+const SelectContentGroupAutoLayoutInfinite = React__default.default.forwardRef(
+  ({
+    hasSearch: hasSearchProp,
+    searchPlaceholder,
+    multiple,
+    options: groups,
+    isLoading,
+    trackingSearchName,
+    trackingSearchData,
+    onSearchChange,
+    hasMore,
+    isLoadingMore,
+    onLoadMore,
+    currentQuery,
+    resetSearchKeyword,
+    ...props
+  }, ref) => {
+    const { setAvailableOptions } = select.useSelectContext();
+    const [searchKeyword, setSearchKeyword] = React__default.default.useState("");
+    const optionsPropFlat = React__default.default.useMemo(
+      () => (groups || []).map((item) => {
+        return item.options?.map((subItem) => ({
+          ...subItem,
+          groupName: item.name
+        }));
+      }).flat(),
+      [groups]
+    );
+    React__default.default.useEffect(() => {
+      if (optionsPropFlat && setAvailableOptions) {
+        setAvailableOptions(optionsPropFlat);
+      }
+    }, [optionsPropFlat, setAvailableOptions]);
+    React__default.default.useEffect(() => {
+      if (resetSearchKeyword) {
+        setSearchKeyword("");
+      }
+    }, [resetSearchKeyword]);
+    const onSearchInputChange = React__default.default.useCallback(
+      (e) => {
+        setSearchKeyword(e.target.value);
+        onSearchChange?.(e.target.value);
+      },
+      [onSearchChange]
+    );
+    const itemHeight = 48;
+    const groupHeaderHeight = 32;
+    const maxVisibleItems = 5;
+    const minHeight = maxVisibleItems * itemHeight;
+    const totalItems = groups.reduce((sum, group) => sum + group.options.length, 0);
+    const totalGroupHeaders = groups.length;
+    const totalHeight = totalItems * itemHeight + totalGroupHeaders * groupHeaderHeight;
+    const maxHeight = maxVisibleItems * itemHeight;
+    const dynamicHeight = totalItems > 0 ? Math.min(totalHeight, maxHeight) : minHeight;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      select.SelectContent,
+      {
+        searchElm: hasSearchProp ? /* @__PURE__ */ jsxRuntime.jsx(
+          select.SelectSearch,
+          {
+            placeholder: searchPlaceholder,
+            value: searchKeyword,
+            onChange: onSearchInputChange
+          }
+        ) : null,
+        ref,
+        hasFooter: multiple && groups.length > 0,
+        loading: isLoading,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: "infinite-scroll-grouped",
+            className: "custom-select-scroll",
+            style: { height: `${dynamicHeight}px`, overflow: "auto" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              InfiniteScroll__default.default,
+              {
+                dataLength: groups.length,
+                next: onLoadMore,
+                hasMore,
+                loader: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", className: "text-primary" }) }),
+                scrollableTarget: "infinite-scroll-grouped",
+                scrollThreshold: 0.9,
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", className: "text-primary" }) }) : groups.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(select.SelectEmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectGroup, { title: group.name, children: group.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  select.SelectItem,
+                  {
+                    option,
+                    disabled: option?.disable,
+                    multiple,
+                    closeAfterClick: !multiple,
+                    children: option?.name || option.value
+                  },
+                  option.value
+                )) }, group.name + "-" + groupIdx)) })
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SelectContentGroupAutoLayoutInfinite.displayName = "SelectContentGroupAutoLayoutInfinite";
+
+exports.SelectWithApiSearch = SelectWithApiSearch;
+exports.SelectWithApiSearchGroup = SelectWithApiSearchGroup;
+exports.useApiSearch = useApiSearch;
+//# sourceMappingURL=select-with-api.js.map
+//# sourceMappingURL=select-with-api.js.map