@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/multiple-selector.js

@@ -0,0 +1,821 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect
+} from "react";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { LoaderCircle, X } from "lucide-react";
+import { Badge } from "../ui/badge.js";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList
+} from "../ui/command.js";
+import { cn } from "../../lib/utils.js";
+import useDebounce from "../../hooks/use-debounce.js";
+import { cva } from "class-variance-authority";
+import { Root, Anchor, Content } from "@radix-ui/react-popper";
+import { useTranslation } from "react-i18next";
+function transToGroupOption(options, groupBy) {
+  if (options.length === 0) {
+    return /* @__PURE__ */ new Map();
+  }
+  if (!groupBy) {
+    return /* @__PURE__ */ new Map([["", options]]);
+  }
+  const groupOption = /* @__PURE__ */ new Map();
+  options.forEach((option) => {
+    const key = option[groupBy] || "";
+    if (!groupOption.has(key)) {
+      groupOption.set(key, []);
+    }
+    groupOption.get(key).push(option);
+  });
+  return groupOption;
+}
+function removePickedOption(groupOption, picked) {
+  const cloneOption = /* @__PURE__ */ new Map();
+  for (const [key, value] of groupOption.entries()) {
+    cloneOption.set(
+      key,
+      value.filter((val) => !picked.find((p) => p.value === val.value))
+    );
+  }
+  return cloneOption;
+}
+function isOptionsExist(groupOption, targetOption) {
+  for (const value of groupOption.values()) {
+    if (value.some((option) => targetOption.find((p) => p.value === option.value))) {
+      return true;
+    }
+  }
+  return false;
+}
+function isSameGroupOption(a, b) {
+  return JSON.stringify([...a.entries()]) === JSON.stringify([...b.entries()]);
+}
+const RENDER_WINDOW_SIZE = 200;
+const CommandEmpty = forwardRef(({ className, ...props }, forwardedRef) => {
+  const render = useCommandState((state) => state.filtered.count === 0);
+  if (!render) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      className: cn("py-6 text-center text-sm", className),
+      "cmdk-empty": "",
+      role: "presentation",
+      ...props
+    }
+  );
+});
+CommandEmpty.displayName = "CommandEmpty";
+const DefaultEmptyIndicator = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("p", { className: "text-center leading-10 text-muted-foreground", children: t("common:empty.noData", { defaultValue: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u" }) });
+};
+const MultipleSelector = forwardRef(
+  ({
+    value,
+    onChange,
+    placeholder,
+    defaultOptions: arrayDefaultOptions = [],
+    options: arrayOptions,
+    delay,
+    onSearch,
+    onSearchSync,
+    loadingIndicator,
+    emptyIndicator,
+    maxSelected = Number.MAX_SAFE_INTEGER,
+    onMaxSelected,
+    hidePlaceholderWhenSelected = true,
+    disabled,
+    groupBy,
+    className,
+    badgeClassName,
+    selectFirstItem = true,
+    creatable = false,
+    triggerSearchOnFocus = false,
+    preloadOnMount = false,
+    reloadTrigger,
+    commandProps,
+    inputProps,
+    hideClearAllButton = false,
+    onBlur = () => {
+    },
+    buildOption = (option) => option,
+    size,
+    isChange = true,
+    maxDisplayCount = Number.MAX_SAFE_INTEGER,
+    onLoadMore,
+    hasMore = false,
+    isLoadingMore = false,
+    loadMoreText = "\u0110ang t\u1EA3i th\xEAm...",
+    // Mặc định dropdown tự gọi onLoadMore để lấp đầy vùng hiển thị (tránh mở
+    // dropdown mà không tràn nên không có gì để cuộn tới sentinel). Caller nào
+    // muốn CHỈ tải thêm khi người dùng thật sự cuộn (vd nhắc thành viên nhóm Zalo —
+    // tải hết cả nhóm ngay khi mở dropdown là thừa, tốn API) thì truyền `true`.
+    disableAutoFillLoadMore = false,
+    // Managed pagination: bật bằng `paginated` + `onSearch`. Khi bật, component
+    // tự đếm page / tích luỹ option / tính hasMore / quản state loading — caller
+    // KHÔNG cần tự giữ state (options, page, hasMore, isLoadingMore, onLoadMore).
+    paginated = false,
+    pageSize = 20,
+    // Caret input cùng dòng với chip — default `true` cho UX gọn, tránh
+    // thừa 1 dòng trống bên dưới chip. Caller nào cần wrap xuống dòng
+    // riêng truyền `inlineInput={false}` để revert.
+    inlineInput = true,
+    renderBadgeLabel,
+    getBadgeStyle,
+    autoHeight = false,
+    ...props
+  }, ref) => {
+    const textVariants = cva("", {
+      variants: {
+        size: {
+          small: "text-xs",
+          default: "text-sm"
+        }
+      },
+      defaultVariants: {
+        size: "default"
+      }
+    });
+    const inputRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [onScrollbar, setOnScrollbar] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const dropdownRef = useRef(null);
+    const [selected, setSelected] = useState(value || []);
+    const [options, setOptions] = useState(
+      transToGroupOption(arrayDefaultOptions, groupBy)
+    );
+    const [inputValue, setInputValue] = useState("");
+    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);
+    const hasSearchedRef = useRef(false);
+    const isFirstReloadRef = useRef(true);
+    const isPaginated = !!paginated && typeof onSearch === "function";
+    const pageRef = useRef(1);
+    const searchTermRef = useRef("");
+    const accumulatedRef = useRef([]);
+    const [managedHasMore, setManagedHasMore] = useState(false);
+    const [managedLoadingMore, setManagedLoadingMore] = useState(false);
+    const runPaginatedSearch = useCallback(
+      async (term, nextPage) => {
+        const offset = (nextPage - 1) * pageSize;
+        const res = await onSearch(term, {
+          page: nextPage,
+          pageSize,
+          limit: pageSize,
+          offset
+        });
+        const raw = Array.isArray(res) ? res : res?.items || [];
+        const items = raw.map(buildOption);
+        const more = Array.isArray(res) ? raw.length === pageSize : !!res?.hasMore;
+        return { items, more };
+      },
+      [onSearch, pageSize, buildOption]
+    );
+    const handleManagedLoadMore = useCallback(async () => {
+      if (managedLoadingMore || !managedHasMore) return;
+      setManagedLoadingMore(true);
+      try {
+        const nextPage = pageRef.current + 1;
+        const { items, more } = await runPaginatedSearch(
+          searchTermRef.current,
+          nextPage
+        );
+        pageRef.current = nextPage;
+        accumulatedRef.current = [...accumulatedRef.current, ...items];
+        setOptions(transToGroupOption(accumulatedRef.current, groupBy));
+        setManagedHasMore(more);
+      } finally {
+        setManagedLoadingMore(false);
+      }
+    }, [managedHasMore, managedLoadingMore, runPaginatedSearch, groupBy]);
+    const effectiveOnLoadMore = isPaginated ? handleManagedLoadMore : onLoadMore;
+    const effectiveHasMore = isPaginated ? managedHasMore : hasMore;
+    const effectiveIsLoadingMore = isPaginated ? managedLoadingMore : isLoadingMore;
+    useImperativeHandle(
+      ref,
+      () => ({
+        selectedValue: [...selected],
+        input: inputRef.current,
+        focus: () => inputRef?.current?.focus(),
+        reset: () => setSelected([])
+      }),
+      [selected]
+    );
+    useLayoutEffect(() => {
+      const cmdkLabels = document.querySelectorAll("label[cmdk-label]");
+      cmdkLabels.forEach((label) => {
+        label.remove();
+      });
+    }, []);
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setOpen(false);
+        inputRef.current.blur();
+      }
+    };
+    const handleUnselect = useCallback(
+      (option) => {
+        if (!isChange) {
+          return;
+        }
+        const newOptions = selected.filter((s) => s.value !== option.value);
+        setSelected(newOptions);
+        onChange?.(newOptions);
+      },
+      [isChange, onChange, selected]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        const input = inputRef.current;
+        if (input) {
+          if (e.key === "Delete" || e.key === "Backspace") {
+            if (input.value === "" && selected.length > 0) {
+              const lastSelectOption = selected[selected.length - 1];
+              if (!lastSelectOption.fixed) {
+                handleUnselect(selected[selected.length - 1]);
+              }
+            }
+          }
+          if (e.key === "Escape") {
+            input.blur();
+          }
+        }
+      },
+      [handleUnselect, selected]
+    );
+    useEffect(() => {
+      if (open) {
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("touchend", handleClickOutside);
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("touchend", handleClickOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("touchend", handleClickOutside);
+      };
+    }, [open]);
+    useEffect(() => {
+      if (value) {
+        setSelected(value);
+      } else {
+        setSelected([]);
+      }
+    }, [value]);
+    useEffect(() => {
+      if (!onSearch || !preloadOnMount) return;
+      const loadInitial = async () => {
+        setIsLoading(true);
+        const res = await onSearch("");
+        setOptions(transToGroupOption(res?.map(buildOption) || [], groupBy));
+        setIsLoading(false);
+      };
+      void loadInitial();
+    }, []);
+    useEffect(() => {
+      if (reloadTrigger === void 0) return;
+      if (isFirstReloadRef.current) {
+        isFirstReloadRef.current = false;
+        return;
+      }
+      if (!onSearch || !preloadOnMount) return;
+      hasSearchedRef.current = false;
+      setInputValue("");
+      const reload = async () => {
+        setIsLoading(true);
+        const res = await onSearch("");
+        setOptions(transToGroupOption(res?.map(buildOption) || [], groupBy));
+        setIsLoading(false);
+      };
+      void reload();
+    }, [reloadTrigger]);
+    useEffect(() => {
+      if (!arrayOptions || onSearch && !onLoadMore) {
+        return;
+      }
+      const newOption = transToGroupOption(arrayOptions || [], groupBy);
+      if (!isSameGroupOption(newOption, options)) {
+        setOptions(newOption);
+      }
+    }, [
+      arrayDefaultOptions,
+      arrayOptions,
+      groupBy,
+      onSearch,
+      onLoadMore,
+      options
+    ]);
+    useEffect(() => {
+      const doSearchSync = () => {
+        const res = onSearchSync?.(debouncedSearchTerm);
+        setOptions(transToGroupOption(res?.map(buildOption) || [], groupBy));
+      };
+      const exec = async () => {
+        if (!onSearchSync || !open) return;
+        if (triggerSearchOnFocus) {
+          doSearchSync();
+        }
+        if (debouncedSearchTerm) {
+          doSearchSync();
+        }
+      };
+      void exec();
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+    useEffect(() => {
+      const doSearch = async () => {
+        setIsLoading(true);
+        if (isPaginated) {
+          pageRef.current = 1;
+          searchTermRef.current = debouncedSearchTerm;
+          const { items, more } = await runPaginatedSearch(
+            debouncedSearchTerm,
+            1
+          );
+          accumulatedRef.current = items;
+          setOptions(transToGroupOption(items, groupBy));
+          setManagedHasMore(more);
+        } else {
+          const res = await onSearch?.(debouncedSearchTerm);
+          setOptions(transToGroupOption(res?.map(buildOption) || [], groupBy));
+        }
+        setIsLoading(false);
+      };
+      const exec = async () => {
+        if (!onSearch || !open) return;
+        if (preloadOnMount) {
+          if (debouncedSearchTerm) {
+            hasSearchedRef.current = true;
+            await doSearch();
+          } else if (hasSearchedRef.current) {
+            hasSearchedRef.current = false;
+            await doSearch();
+          } else {
+            const hasOptions = Array.from(options.values()).some(
+              (arr) => arr.length > 0
+            );
+            if (!hasOptions) {
+              await doSearch();
+            }
+          }
+          return;
+        }
+        if (triggerSearchOnFocus) {
+          await doSearch();
+        }
+        if (debouncedSearchTerm) {
+          await doSearch();
+        }
+      };
+      void exec();
+    }, [
+      debouncedSearchTerm,
+      groupBy,
+      open,
+      triggerSearchOnFocus,
+      preloadOnMount
+    ]);
+    const CreatableItem = () => {
+      if (!creatable) return void 0;
+      if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) || selected.find((s) => s.value === inputValue)) {
+        return void 0;
+      }
+      const Item = /* @__PURE__ */ jsx(
+        CommandItem,
+        {
+          value: inputValue,
+          className: cn("cursor-pointer", className),
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onSelect: (value2) => {
+            if (!isChange) {
+              return;
+            }
+            if (selected.length >= maxSelected) {
+              onMaxSelected?.(selected.length);
+              return;
+            }
+            setInputValue("");
+            const newOptions = [...selected, { value: value2, label: value2 }];
+            setSelected(newOptions);
+            onChange?.(newOptions);
+          },
+          children: props?.renderCreatableLabel?.(inputValue) || `Create "${inputValue}"`
+        }
+      );
+      if (!onSearch && inputValue.length > 0) {
+        return Item;
+      }
+      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+        return Item;
+      }
+      return void 0;
+    };
+    const EmptyItem = useCallback(() => {
+      const indicator = emptyIndicator || /* @__PURE__ */ jsx(DefaultEmptyIndicator, {});
+      if (onSearch && !creatable && options.size === 0) {
+        return /* @__PURE__ */ jsx(CommandItem, { value: "-", disabled: true, children: indicator });
+      }
+      return /* @__PURE__ */ jsx(CommandEmpty, { children: indicator });
+    }, [creatable, emptyIndicator, onSearch, options]);
+    const selectables = useMemo(
+      () => removePickedOption(options, selected),
+      [options, selected]
+    );
+    const nonEmptySelectableEntries = useMemo(
+      () => Array.from(selectables.entries()).filter(
+        ([, items]) => items.length > 0
+      ),
+      [selectables]
+    );
+    const effectiveShouldFilter = commandProps?.shouldFilter !== void 0 ? commandProps.shouldFilter : !onSearch;
+    const totalSelectableCount = useMemo(
+      () => nonEmptySelectableEntries.reduce(
+        (sum, [, items]) => sum + items.length,
+        0
+      ),
+      [nonEmptySelectableEntries]
+    );
+    const shouldWindow = !effectiveShouldFilter && totalSelectableCount > RENDER_WINDOW_SIZE;
+    const [renderLimit, setRenderLimit] = useState(RENDER_WINDOW_SIZE);
+    const localRevealObserverRef = useRef(null);
+    useEffect(() => {
+      setRenderLimit(RENDER_WINDOW_SIZE);
+    }, [debouncedSearchTerm, open]);
+    const windowedSelectableEntries = useMemo(() => {
+      if (!shouldWindow) return nonEmptySelectableEntries;
+      let remaining = renderLimit;
+      const result = [];
+      for (const [key, items] of nonEmptySelectableEntries) {
+        if (remaining <= 0) break;
+        const slice = items.slice(0, remaining);
+        remaining -= slice.length;
+        result.push([key, slice]);
+      }
+      return result;
+    }, [shouldWindow, nonEmptySelectableEntries, renderLimit]);
+    const localRevealSentinelRef = useCallback((node) => {
+      if (localRevealObserverRef.current) {
+        localRevealObserverRef.current.disconnect();
+        localRevealObserverRef.current = null;
+      }
+      if (!node) return;
+      localRevealObserverRef.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          setRenderLimit((prev) => prev + RENDER_WINDOW_SIZE);
+        }
+      });
+      localRevealObserverRef.current.observe(node);
+    }, []);
+    const observerRef = useRef(null);
+    const commandListRef = useRef(null);
+    const hasMoreRef = useRef(effectiveHasMore);
+    const isLoadingMoreRef = useRef(effectiveIsLoadingMore);
+    const hasOverflowedRef = useRef(false);
+    useEffect(() => {
+      hasMoreRef.current = effectiveHasMore;
+    }, [effectiveHasMore]);
+    useEffect(() => {
+      isLoadingMoreRef.current = effectiveIsLoadingMore;
+    }, [effectiveIsLoadingMore]);
+    useEffect(() => {
+      if (!open) hasOverflowedRef.current = false;
+    }, [open]);
+    useEffect(() => {
+      if (disableAutoFillLoadMore || !open || !effectiveOnLoadMore || !effectiveHasMore || effectiveIsLoadingMore)
+        return;
+      if (hasOverflowedRef.current) return;
+      const element = commandListRef.current;
+      if (!element) return;
+      if (element.scrollHeight > element.clientHeight) {
+        hasOverflowedRef.current = true;
+        return;
+      }
+      if (element.scrollHeight === element.clientHeight && nonEmptySelectableEntries.length > 0) {
+        effectiveOnLoadMore();
+      }
+    }, [
+      disableAutoFillLoadMore,
+      open,
+      options,
+      effectiveHasMore,
+      effectiveIsLoadingMore,
+      effectiveOnLoadMore,
+      nonEmptySelectableEntries
+    ]);
+    const sentinelRef = useCallback(
+      (node) => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+        if (!node || !effectiveOnLoadMore) return;
+        let wasNotIntersecting = false;
+        observerRef.current = new IntersectionObserver((entries) => {
+          const entry = entries[0];
+          if (!entry.isIntersecting) {
+            wasNotIntersecting = true;
+            return;
+          }
+          if (!wasNotIntersecting) return;
+          if (hasMoreRef.current && !isLoadingMoreRef.current) {
+            effectiveOnLoadMore();
+          }
+        });
+        observerRef.current.observe(node);
+      },
+      [effectiveOnLoadMore]
+    );
+    const commandFilter = useCallback(() => {
+      if (commandProps?.filter) {
+        return commandProps.filter;
+      }
+      if (creatable) {
+        return (value2, search) => {
+          return value2.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        };
+      }
+      return void 0;
+    }, [creatable, commandProps?.filter]);
+    const displayCount = typeof maxDisplayCount === "number" && maxDisplayCount > 0 ? maxDisplayCount : Number.MAX_SAFE_INTEGER;
+    const displayedSelected = selected.slice(0, displayCount);
+    const remainingCount = selected.length > displayCount ? selected.length - displayCount : 0;
+    return /* @__PURE__ */ jsx(
+      Command,
+      {
+        ref: dropdownRef,
+        ...commandProps,
+        onKeyDown: (e) => {
+          handleKeyDown(e);
+          commandProps?.onKeyDown?.(e);
+        },
+        className: cn(
+          "h-auto overflow-visible bg-transparent",
+          commandProps?.className
+        ),
+        shouldFilter: effectiveShouldFilter,
+        filter: commandFilter(),
+        onBlur,
+        children: /* @__PURE__ */ jsxs(Root, { children: [
+          /* @__PURE__ */ jsx(Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                autoHeight ? "flex min-h-9 items-start rounded-md border border-input bg-card px-2 py-2 text-sm shadow-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring" : "flex max-h-32 min-h-9 items-start overflow-y-auto rounded-md border border-input bg-card px-2 text-sm shadow-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring",
+                {
+                  "py-3": !inlineInput && selected.length >= 1,
+                  "cursor-text": !disabled && selected.length !== 0,
+                  "bg-muted !py-0": disabled
+                },
+                className
+              ),
+              onClick: () => {
+                if (disabled || !isChange) return;
+                inputRef?.current?.focus();
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative my-auto flex w-full flex-wrap items-center gap-2",
+                    className
+                  ),
+                  children: [
+                    displayedSelected.map((option) => {
+                      return /* @__PURE__ */ jsxs(
+                        Badge,
+                        {
+                          variant: "chip",
+                          className: cn(
+                            "z-1 max-w-[220px] data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground",
+                            textVariants({ size }),
+                            badgeClassName
+                          ),
+                          style: getBadgeStyle ? getBadgeStyle(option) : void 0,
+                          "data-fixed": option.fixed,
+                          "data-disabled": disabled || void 0,
+                          children: [
+                            renderBadgeLabel ? renderBadgeLabel(option) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: cn(
+                                  "ml-1 shrink-0 rounded-full outline-none ring-offset-background focus:ring-1 focus:ring-ring",
+                                  (disabled || option.fixed) && "hidden"
+                                ),
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter") {
+                                    handleUnselect(option);
+                                  }
+                                },
+                                onMouseDown: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                },
+                                onClick: () => handleUnselect(option),
+                                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+                              }
+                            )
+                          ]
+                        },
+                        option.key || option.value
+                      );
+                    }),
+                    remainingCount > 0 && /* @__PURE__ */ jsxs(
+                      Badge,
+                      {
+                        variant: "chip",
+                        className: cn(
+                          "z-1",
+                          textVariants({ size }),
+                          badgeClassName
+                        ),
+                        children: [
+                          "+",
+                          remainingCount
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CommandPrimitive.Input,
+                      {
+                        ...inputProps,
+                        ref: inputRef,
+                        size: 1,
+                        value: inputValue,
+                        disabled,
+                        onValueChange: (value2) => {
+                          setInputValue(value2);
+                          inputProps?.onValueChange?.(value2);
+                        },
+                        onBlur: (event) => {
+                          if (!onScrollbar) {
+                            setOpen(false);
+                          }
+                          inputProps?.onBlur?.(event);
+                        },
+                        onFocus: (event) => {
+                          setOpen(true);
+                          inputProps?.onFocus?.(event);
+                        },
+                        placeholder: hidePlaceholderWhenSelected && selected.length !== 0 ? "" : placeholder,
+                        className: cn(
+                          "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+                          {
+                            "w-full": hidePlaceholderWhenSelected,
+                            "px-3 py-[0.35rem]": selected.length === 0,
+                            "mt-1 basis-full": !inlineInput && selected.length !== 0
+                          },
+                          textVariants({ size }),
+                          inputProps?.className
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setSelected(selected.filter((s) => s.fixed));
+                          onChange?.(selected.filter((s) => s.fixed));
+                        },
+                        className: cn(
+                          "absolute right-0 top-[6px] h-[14px] w-[14px] p-0",
+                          (hideClearAllButton || disabled || selected.length < 1 || selected.filter((s) => s.fixed).length === selected.length) && "hidden"
+                        ),
+                        children: /* @__PURE__ */ jsx(X, { size: size == "small" ? 12 : 14 })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }),
+          open && /* @__PURE__ */ jsx(
+            Content,
+            {
+              side: "bottom",
+              align: "start",
+              sideOffset: 5,
+              className: "z-[60] w-[var(--radix-popper-anchor-width)]",
+              children: /* @__PURE__ */ jsx(
+                CommandList,
+                {
+                  ref: commandListRef,
+                  className: cn(
+                    "z-[60] w-full bg-popover text-popover-foreground shadow-md outline-none animate-in",
+                    open && options.length > 0 && "rounded-md border"
+                  ),
+                  onMouseLeave: () => {
+                    setOnScrollbar(false);
+                  },
+                  onMouseEnter: () => {
+                    setOnScrollbar(true);
+                  },
+                  onMouseUp: () => {
+                    inputRef?.current?.focus();
+                  },
+                  children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: loadingIndicator }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    inputValue.length > 0 && EmptyItem(),
+                    CreatableItem(),
+                    !selectFirstItem && /* @__PURE__ */ jsx(CommandItem, { value: "-", className: "hidden" }),
+                    windowedSelectableEntries.map(([key, dropdowns]) => {
+                      const heading = props.renderGroupHeading?.(key) || key;
+                      return /* @__PURE__ */ jsx(
+                        CommandGroup,
+                        {
+                          heading,
+                          className: "h-full overflow-auto",
+                          children: /* @__PURE__ */ jsx(Fragment, { children: dropdowns.map((option) => {
+                            const itemKey = option.key || option.value;
+                            return /* @__PURE__ */ jsx(
+                              CommandItem,
+                              {
+                                value: option.value,
+                                disabled: option.disable,
+                                keywords: [option.label],
+                                onMouseDown: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                },
+                                onSelect: () => {
+                                  if (!isChange) {
+                                    return;
+                                  }
+                                  if (selected.length >= maxSelected) {
+                                    onMaxSelected?.(selected.length);
+                                    return;
+                                  }
+                                  setInputValue("");
+                                  const newOptions = [...selected, option];
+                                  setSelected(newOptions);
+                                  onChange?.(newOptions);
+                                },
+                                className: cn(
+                                  "cursor-pointer",
+                                  textVariants({ size }),
+                                  option.disable && "cursor-default text-muted-foreground"
+                                ),
+                                children: props?.renderOptionLabel ? props.renderOptionLabel(option) : option.label
+                              },
+                              itemKey
+                            );
+                          }) })
+                        },
+                        key
+                      );
+                    }),
+                    shouldWindow && renderLimit < totalSelectableCount && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: localRevealSentinelRef,
+                        "aria-hidden": true,
+                        className: "h-px"
+                      }
+                    ),
+                    effectiveIsLoadingMore && /* @__PURE__ */ jsxs(
+                      CommandItem,
+                      {
+                        disabled: true,
+                        value: "__load_more__",
+                        className: cn(
+                          "justify-center text-muted-foreground",
+                          textVariants({ size })
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
+                          loadMoreText
+                        ]
+                      }
+                    ),
+                    effectiveOnLoadMore && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px" })
+                  ] })
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+MultipleSelector.displayName = "MultipleSelector";
+var multiple_selector_default = MultipleSelector;
+export {
+  multiple_selector_default as default
+};