@vritti/quantum-ui 0.2.10 → 0.3.0

package/dist/Select.js

@@ -0,0 +1,780 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { memo, forwardRef, useState, useMemo, useRef, useId, useCallback, useEffect } from 'react';
+import { F as Field, e as FieldLabel, b as FieldDescription, c as FieldError } from './field.js';
+import { c as cn } from './utils.js';
+import { b as PopoverContent, P as Popover, a as PopoverTrigger } from './popover.js';
+import { C as Checkbox } from './Checkbox2.js';
+import { k as Search, S as SingleSelect } from './SingleSelect.js';
+import { C as ChevronDown } from './index4.js';
+import { L as LoaderCircle } from './loader-circle.js';
+import { B as Badge } from './Badge2.js';
+import { X } from './x.js';
+import { useQuery, keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import { a as axios } from './axios.js';
+
+function MultiSelectRoot({ open, onOpenChange, disabled, children }) {
+  return /* @__PURE__ */ jsx(Popover, { "data-slot": "multi-select", open: disabled ? false : open, onOpenChange: disabled ? void 0 : onOpenChange, children });
+}
+const MultiSelectTrigger = forwardRef(
+  ({ className, children, disabled, open, listboxId, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "multi-select-trigger",
+        role: "combobox",
+        "aria-expanded": open ?? false,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        disabled,
+        className: cn(
+          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          "min-h-9",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) });
+  }
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+function MultiSelectContent({ className, children, align = "start", ...props }) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      "data-slot": "multi-select-content",
+      align,
+      className: cn("w-[var(--radix-popover-trigger-width)] p-0", className),
+      ...props,
+      children
+    }
+  );
+}
+function MultiSelectSearch({ value, onValueChange, placeholder = "Search...", className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "multi-select-search", className: cn("flex items-center gap-2 border-b px-3", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        "aria-label": "Search options",
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        placeholder,
+        className: "flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    )
+  ] });
+}
+function MultiSelectActions({ onSelectAll, onClear, disabled, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "multi-select-actions",
+      className: cn("flex items-center justify-between border-t px-3 py-1.5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "text-xs font-medium text-primary hover:text-primary/80 disabled:pointer-events-none disabled:opacity-50",
+            onClick: onSelectAll,
+            children: "Select All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "text-xs font-medium text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+            onClick: onClear,
+            children: "Clear"
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSelectList({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-list",
+      role: "listbox",
+      "aria-multiselectable": "true",
+      className: cn("max-h-60 overflow-y-auto p-1", className),
+      ...props,
+      children
+    }
+  );
+}
+const MultiSelectRow = memo(function MultiSelectRow2({
+  name,
+  checked,
+  onToggle,
+  disabled,
+  className
+}) {
+  function handleClick() {
+    if (!disabled) {
+      onToggle();
+    }
+  }
+  function handleKeyDown(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onToggle();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "multi-select-row",
+      role: "option",
+      "aria-selected": checked,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? void 0 : 0,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      "data-disabled": disabled ? "" : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            onCheckedChange: () => onToggle(),
+            disabled,
+            tabIndex: -1,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+      ]
+    }
+  );
+});
+function MultiSelectGroup({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "multi-select-group", role: "group", className: cn(className), ...props, children });
+}
+function MultiSelectGroupLabel({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-group-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props,
+      children
+    }
+  );
+}
+function MultiSelectEmpty({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-empty",
+      className: cn("flex items-center justify-center py-6 text-sm text-muted-foreground", className),
+      children: children ?? "No options found."
+    }
+  );
+}
+
+function useMultiSelect({
+  options,
+  groups,
+  value: controlledValue,
+  onChange,
+  onOptionsSelect,
+  defaultValue,
+  remoteSearch
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const selectedValues = isControlled ? controlledValue : internalValue;
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedValuesRef = useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const listboxId = useId();
+  const optionMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const option of options) {
+      map.set(option.value, option);
+    }
+    return map;
+  }, [options]);
+  const filteredOptions = useMemo(() => {
+    if (remoteSearch || !searchQuery) return options;
+    const lower = searchQuery.toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(lower));
+  }, [options, searchQuery, remoteSearch]);
+  const updateSelection = useCallback(
+    (nextValues) => {
+      if (!isControlled) {
+        setInternalValue(nextValues);
+      }
+      onChange?.(nextValues);
+    },
+    [isControlled, onChange]
+  );
+  const toggleOption = useCallback(
+    (optionValue) => {
+      const option = optionMap.get(optionValue);
+      if (option?.disabled) return;
+      const current = selectedValuesRef.current;
+      const nextValues = current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue];
+      const nextOptions = nextValues.map((v) => optionMap.get(v)).filter(Boolean);
+      onOptionsSelect?.(nextOptions);
+      updateSelection(nextValues);
+    },
+    [optionMap, updateSelection, onOptionsSelect]
+  );
+  const selectAll = useCallback(() => {
+    const enabledValues = options.filter((o) => !o.disabled).map((o) => o.value);
+    const currentDisabledValues = selectedValuesRef.current.filter((v) => optionMap.get(v)?.disabled);
+    const nextValues = [.../* @__PURE__ */ new Set([...currentDisabledValues, ...enabledValues])];
+    const nextOptions = nextValues.map((v) => optionMap.get(v)).filter(Boolean);
+    onOptionsSelect?.(nextOptions);
+    updateSelection(nextValues);
+  }, [options, optionMap, updateSelection, onOptionsSelect]);
+  const clearAll = useCallback(() => {
+    const currentDisabledValues = selectedValuesRef.current.filter((v) => optionMap.get(v)?.disabled);
+    const remainingOptions = currentDisabledValues.map((v) => optionMap.get(v)).filter(Boolean);
+    onOptionsSelect?.(remainingOptions);
+    updateSelection(currentDisabledValues);
+  }, [optionMap, updateSelection, onOptionsSelect]);
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+    }
+  }, [open]);
+  const selectedOptions = useMemo(
+    () => selectedValues.map((v) => optionMap.get(v)).filter(Boolean),
+    [selectedValues, optionMap]
+  );
+  const grouped = useMemo(() => {
+    if (!groups || groups.length === 0) return null;
+    const buckets = /* @__PURE__ */ new Map();
+    for (const g of groups) {
+      buckets.set(g.id, []);
+    }
+    const ungrouped = [];
+    for (const option of filteredOptions) {
+      const bucket = option.groupId != null ? buckets.get(option.groupId) : void 0;
+      if (bucket) {
+        bucket.push(option);
+      } else {
+        ungrouped.push(option);
+      }
+    }
+    const entries = [];
+    for (const g of groups) {
+      const bucket = buckets.get(g.id);
+      if (!bucket || bucket.length === 0) continue;
+      entries.push({ name: g.name, options: bucket });
+    }
+    return { ungrouped, entries };
+  }, [filteredOptions, groups]);
+  return {
+    selectedValues,
+    selectedSet,
+    selectedOptions,
+    open,
+    setOpen,
+    searchQuery,
+    setSearchQuery,
+    listboxId,
+    filteredOptions,
+    grouped,
+    toggleOption,
+    selectAll,
+    clearAll
+  };
+}
+
+const MultiSelect = forwardRef(
+  ({
+    label,
+    description,
+    error,
+    placeholder = "Select options",
+    options,
+    groups,
+    value: controlledValue,
+    onChange,
+    onOptionsSelect,
+    onBlur,
+    name,
+    disabled = false,
+    required,
+    className,
+    id,
+    defaultValue,
+    maxDisplayedItems = 3,
+    searchable = false,
+    searchPlaceholder = "Search...",
+    asyncState,
+    onOpenChange
+  }, ref) => {
+    const state = useMultiSelect({
+      options: options ?? [],
+      groups,
+      value: controlledValue,
+      onChange,
+      onOptionsSelect,
+      defaultValue,
+      remoteSearch: !!asyncState
+    });
+    function handleOpenChange(o) {
+      state.setOpen(o);
+      onOpenChange?.(o);
+      if (!o) asyncState?.setSearchQuery("");
+    }
+    const searchValue = asyncState ? asyncState.searchQuery : state.searchQuery;
+    const setSearchValue = asyncState ? asyncState.setSearchQuery : state.setSearchQuery;
+    const showSearch = !!asyncState || searchable;
+    function renderRow(option) {
+      return /* @__PURE__ */ jsx(
+        MultiSelectRow,
+        {
+          name: option.label,
+          checked: state.selectedSet.has(option.value),
+          onToggle: () => {
+            state.toggleOption(option.value);
+          },
+          disabled: option.disabled
+        },
+        String(option.value)
+      );
+    }
+    function renderOptions() {
+      if (asyncState?.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] });
+      }
+      if (state.filteredOptions.length === 0) {
+        return /* @__PURE__ */ jsx(MultiSelectEmpty, {});
+      }
+      if (!state.grouped) {
+        return state.filteredOptions.map(renderRow);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.grouped.ungrouped.map(renderRow),
+        state.grouped.entries.map((entry) => /* @__PURE__ */ jsxs(MultiSelectGroup, { children: [
+          /* @__PURE__ */ jsx(MultiSelectGroupLabel, { children: entry.name }),
+          entry.options.map(renderRow)
+        ] }, entry.name))
+      ] });
+    }
+    function renderTriggerContent() {
+      if (state.selectedOptions.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder });
+      }
+      if (state.selectedOptions.length > maxDisplayedItems) {
+        return /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+          state.selectedOptions.length,
+          " items selected"
+        ] });
+      }
+      return /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-1", children: state.selectedOptions.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 pr-1", children: [
+        option.label,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${option.label}`,
+            className: "rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: (e) => {
+              e.stopPropagation();
+              state.toggleOption(option.value);
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-3 text-muted-foreground hover:text-foreground" })
+          }
+        )
+      ] }, String(option.value))) });
+    }
+    return /* @__PURE__ */ jsxs(Field, { children: [
+      label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(MultiSelectRoot, { open: state.open, onOpenChange: handleOpenChange, disabled, children: [
+        /* @__PURE__ */ jsx(
+          MultiSelectTrigger,
+          {
+            ref,
+            id,
+            open: state.open,
+            listboxId: state.listboxId,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            disabled,
+            onBlur,
+            className,
+            children: /* @__PURE__ */ jsx("span", { className: "flex flex-1 flex-wrap items-center gap-1 overflow-hidden", children: renderTriggerContent() })
+          }
+        ),
+        /* @__PURE__ */ jsxs(MultiSelectContent, { children: [
+          showSearch && /* @__PURE__ */ jsx(MultiSelectSearch, { value: searchValue, onValueChange: setSearchValue, placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(MultiSelectList, { id: state.listboxId, children: [
+            renderOptions(),
+            asyncState?.hasMore && /* @__PURE__ */ jsx("div", { ref: asyncState.sentinelRef, className: "h-1" }),
+            asyncState?.loadingMore && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-2", children: [
+              /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading more..." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(MultiSelectActions, { onSelectAll: state.selectAll, onClear: state.clearAll, disabled })
+        ] })
+      ] }),
+      name && state.selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(v) }, String(v))),
+      description && !error && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+      error && /* @__PURE__ */ jsx(FieldError, { children: error })
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+// src/observe.ts
+var observerMap = /* @__PURE__ */ new Map();
+var RootIds = /* @__PURE__ */ new WeakMap();
+var rootId = 0;
+var unsupportedValue;
+function getRootId(root) {
+  if (!root) return "0";
+  if (RootIds.has(root)) return RootIds.get(root);
+  rootId += 1;
+  RootIds.set(root, rootId.toString());
+  return RootIds.get(root);
+}
+function optionsToId(options) {
+  return Object.keys(options).sort().filter(
+    (key) => options[key] !== void 0
+  ).map((key) => {
+    return `${key}_${key === "root" ? getRootId(options.root) : options[key]}`;
+  }).toString();
+}
+function createObserver(options) {
+  const id = optionsToId(options);
+  let instance = observerMap.get(id);
+  if (!instance) {
+    const elements = /* @__PURE__ */ new Map();
+    let thresholds;
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        var _a2;
+        const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+        if (options.trackVisibility && typeof entry.isVisible === "undefined") {
+          entry.isVisible = inView;
+        }
+        [...(_a2 = elements.get(entry.target)) != null ? _a2 : []].forEach((callback) => {
+          callback(inView, entry);
+        });
+      });
+    }, options);
+    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);
+    instance = {
+      id,
+      observer,
+      elements
+    };
+    observerMap.set(id, instance);
+  }
+  return instance;
+}
+function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
+  if (typeof window.IntersectionObserver === "undefined" && fallbackInView !== void 0) {
+    const bounds = element.getBoundingClientRect();
+    callback(fallbackInView, {
+      isIntersecting: fallbackInView,
+      target: element,
+      intersectionRatio: typeof options.threshold === "number" ? options.threshold : 0,
+      time: 0,
+      boundingClientRect: bounds,
+      intersectionRect: bounds,
+      rootBounds: bounds
+    });
+    return () => {
+    };
+  }
+  const { id, observer, elements } = createObserver(options);
+  const callbacks = elements.get(element) || [];
+  if (!elements.has(element)) {
+    elements.set(element, callbacks);
+  }
+  callbacks.push(callback);
+  observer.observe(element);
+  return function unobserve() {
+    callbacks.splice(callbacks.indexOf(callback), 1);
+    if (callbacks.length === 0) {
+      elements.delete(element);
+      observer.unobserve(element);
+    }
+    if (elements.size === 0) {
+      observer.disconnect();
+      observerMap.delete(id);
+    }
+  };
+}
+function useInView({
+  threshold,
+  delay,
+  trackVisibility,
+  rootMargin,
+  root,
+  triggerOnce,
+  skip,
+  initialInView,
+  fallbackInView,
+  onChange
+} = {}) {
+  var _a2;
+  const [ref, setRef] = React.useState(null);
+  const callback = React.useRef(onChange);
+  const lastInViewRef = React.useRef(initialInView);
+  const [state, setState] = React.useState({
+    inView: !!initialInView,
+    entry: void 0
+  });
+  callback.current = onChange;
+  React.useEffect(
+    () => {
+      if (lastInViewRef.current === void 0) {
+        lastInViewRef.current = initialInView;
+      }
+      if (skip || !ref) return;
+      let unobserve;
+      unobserve = observe(
+        ref,
+        (inView, entry) => {
+          const previousInView = lastInViewRef.current;
+          lastInViewRef.current = inView;
+          if (previousInView === void 0 && !inView) {
+            return;
+          }
+          setState({
+            inView,
+            entry
+          });
+          if (callback.current) callback.current(inView, entry);
+          if (entry.isIntersecting && triggerOnce && unobserve) {
+            unobserve();
+            unobserve = void 0;
+          }
+        },
+        {
+          root,
+          rootMargin,
+          threshold,
+          // @ts-expect-error
+          trackVisibility,
+          delay
+        },
+        fallbackInView
+      );
+      return () => {
+        if (unobserve) {
+          unobserve();
+        }
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(threshold) ? threshold.toString() : threshold,
+      ref,
+      root,
+      rootMargin,
+      triggerOnce,
+      skip,
+      trackVisibility,
+      fallbackInView,
+      delay
+    ]
+  );
+  const entryTarget = (_a2 = state.entry) == null ? void 0 : _a2.target;
+  const previousEntryTarget = React.useRef(void 0);
+  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
+    previousEntryTarget.current = entryTarget;
+    setState({
+      inView: !!initialInView,
+      entry: void 0
+    });
+    lastInViewRef.current = initialInView;
+  }
+  const result = [setRef, state.inView, state.entry];
+  result.ref = result[0];
+  result.inView = result[1];
+  result.entry = result[2];
+  return result;
+}
+
+const NOOP_REF = () => {
+};
+function stableStringify(obj) {
+  if (!obj) return "";
+  return JSON.stringify(obj, Object.keys(obj).sort());
+}
+function useSelect({
+  options: staticOptions,
+  groups: staticGroups,
+  optionsEndpoint,
+  searchDebounceMs = 300,
+  limit = 20,
+  fieldKeys,
+  params,
+  selectedValues,
+  enabled
+}) {
+  const isAsync = !!optionsEndpoint;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const debounceRef = useRef(null);
+  useEffect(() => {
+    if (!isAsync) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, searchDebounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [searchQuery, searchDebounceMs, isAsync]);
+  const serializedValues = useMemo(
+    () => selectedValues && selectedValues.length > 0 ? selectedValues.filter((v) => typeof v !== "boolean").join(",") : void 0,
+    [selectedValues]
+  );
+  const { data: resolvedSelected } = useQuery({
+    queryKey: [
+      "select-resolve",
+      optionsEndpoint,
+      stableStringify(fieldKeys),
+      stableStringify(params),
+      JSON.stringify(selectedValues)
+    ],
+    queryFn: () => axios.get(optionsEndpoint ?? "", {
+      params: { values: serializedValues, ...fieldKeys, ...params },
+      showSuccessToast: false,
+      showErrorToast: false
+    }).then((r) => r.data),
+    enabled: isAsync && (selectedValues?.length ?? 0) > 0,
+    staleTime: 5 * 6e4,
+    placeholderData: keepPreviousData
+  });
+  const { data, isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: ["select-search", optionsEndpoint, debouncedSearch, stableStringify(fieldKeys), stableStringify(params)],
+    queryFn: ({ pageParam = 0 }) => axios.get(optionsEndpoint ?? "", {
+      params: {
+        search: debouncedSearch || void 0,
+        limit,
+        offset: pageParam,
+        excludeIds: serializedValues,
+        ...fieldKeys,
+        ...params
+      },
+      showSuccessToast: false,
+      showErrorToast: false
+    }).then((r) => r.data),
+    getNextPageParam: (lastPage, _allPages, lastPageParam) => lastPage.hasMore ? lastPageParam + limit : void 0,
+    initialPageParam: 0,
+    enabled: isAsync && enabled !== false,
+    placeholderData: keepPreviousData
+  });
+  const fetchedOptions = useMemo(() => {
+    const searchResults = data?.pages.flatMap((p) => p.options) ?? [];
+    const selected = resolvedSelected?.options ?? [];
+    if (selected.length === 0) return searchResults;
+    const selectedIdSet = new Set(selected.map((o) => o.value));
+    const dedupedSearch = searchResults.filter((o) => !selectedIdSet.has(o.value));
+    return [...selected, ...dedupedSearch];
+  }, [resolvedSelected, data]);
+  const fetchedGroups = data?.pages[0]?.groups ?? staticGroups ?? [];
+  const { ref: sentinelRef, inView } = useInView();
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  if (!isAsync) {
+    return {
+      options: staticOptions ?? [],
+      groups: staticGroups ?? [],
+      loading: false,
+      loadingMore: false,
+      hasMore: false,
+      searchQuery,
+      setSearchQuery,
+      sentinelRef: NOOP_REF
+    };
+  }
+  return {
+    options: fetchedOptions,
+    groups: fetchedGroups,
+    loading: isFetching && !isFetchingNextPage,
+    loadingMore: isFetchingNextPage,
+    hasMore: hasNextPage ?? false,
+    searchQuery,
+    setSearchQuery,
+    sentinelRef
+  };
+}
+
+const Select = forwardRef((props, ref) => {
+  const { multiple, optionsEndpoint, searchDebounceMs, limit, fieldKeys, params, ...rest } = props;
+  const [openedForParams, setOpenedForParams] = useState(null);
+  const currentParamsKey = stableStringify(params);
+  const enabled = openedForParams === currentParamsKey;
+  const selectData = useSelect({
+    options: rest.options,
+    groups: rest.groups,
+    optionsEndpoint,
+    searchDebounceMs,
+    limit,
+    fieldKeys,
+    params,
+    selectedValues: rest.value != null ? Array.isArray(rest.value) ? rest.value : [rest.value] : void 0,
+    enabled
+  });
+  const isAsync = !!optionsEndpoint;
+  const asyncState = isAsync ? {
+    loading: selectData.loading,
+    loadingMore: selectData.loadingMore,
+    hasMore: selectData.hasMore,
+    searchQuery: selectData.searchQuery,
+    setSearchQuery: selectData.setSearchQuery,
+    sentinelRef: selectData.sentinelRef
+  } : void 0;
+  const childProps = {
+    ...rest,
+    options: selectData.options,
+    groups: selectData.groups,
+    asyncState
+  };
+  const handleOpenChange = (o) => {
+    if (o && openedForParams !== currentParamsKey) setOpenedForParams(currentParamsKey);
+  };
+  if (multiple) {
+    return /* @__PURE__ */ jsx(MultiSelect, { ref, ...childProps, onOpenChange: handleOpenChange });
+  }
+  return /* @__PURE__ */ jsx(SingleSelect, { ref, ...childProps, onOpenChange: handleOpenChange });
+});
+Select.displayName = "Select";
+
+export { MultiSelect as M, Select as S, MultiSelectActions as a, MultiSelectContent as b, MultiSelectEmpty as c, MultiSelectGroup as d, MultiSelectGroupLabel as e, MultiSelectList as f, MultiSelectRoot as g, MultiSelectRow as h, MultiSelectSearch as i, MultiSelectTrigger as j, useMultiSelect as k, useSelect as u };
+//# sourceMappingURL=Select.js.map