@choice-ui/react 1.3.10

package/dist/cjs/components/multi-select/dist/index.cjs

@@ -0,0 +1,841 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index$2 = require("../../slot/dist/index.cjs");
+const index = require("../../menus/dist/index.cjs");
+const react = require("@floating-ui/react");
+const React = require("react");
+const usehooksTs = require("usehooks-ts");
+const index$1 = require("../../chip/dist/index.cjs");
+const iconsReact = require("@choiceform/icons-react");
+const require$$0 = require("react/jsx-runtime");
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const mergeRefs = require("../../../shared/utils/merge-refs/merge-refs.cjs");
+var multiSelectTriggerTv = tcx.tcv({
+  slots: {
+    root: ["bg-secondary-background relative flex w-full justify-between gap-1 rounded-lg border"],
+    content: ["flex min-w-0 flex-1 items-center"],
+    chips: ["flex min-w-0 flex-wrap items-center gap-1"],
+    placeholder: ["text-secondary-foreground pointer-events-none px-1 select-none"],
+    suffix: "flex items-center justify-center"
+  },
+  variants: {
+    size: {
+      default: {
+        root: "min-h-6 px-1 py-0.75",
+        content: "gap-1",
+        suffix: "size-4"
+      },
+      large: {
+        root: "min-h-8 px-1 py-0.75",
+        content: "gap-1",
+        suffix: "size-6"
+      }
+    },
+    disabled: {
+      true: {
+        root: "bg-default-background text-disabled-foreground border-default-boundary",
+        placeholder: "text-disabled-foreground",
+        suffix: "text-disabled-foreground"
+      }
+    },
+    open: {
+      true: {},
+      false: {}
+    },
+    hasValues: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      open: true,
+      disabled: false,
+      class: { root: "border-selected-boundary" }
+    },
+    {
+      open: false,
+      disabled: false,
+      class: { root: "hover:border-default-boundary border-transparent" }
+    }
+  ],
+  defaultVariants: {
+    size: "default",
+    open: false,
+    disabled: false,
+    hasValues: false
+  }
+});
+var MultiSelectTrigger = React.memo(
+  React.forwardRef((props, ref) => {
+    const {
+      children,
+      className,
+      disabled = false,
+      getDisplayValue,
+      maxChips = 32,
+      onRemove,
+      placeholder = "Select options",
+      readOnly = false,
+      renderChip,
+      size: size2 = "default",
+      suffixElement = /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronDownSmall, {}),
+      values = [],
+      open = false,
+      variant = "default",
+      valueDisabledMap = {},
+      ...rest
+    } = props;
+    const containerRef = React.useRef(null);
+    const style = multiSelectTriggerTv({
+      size: size2,
+      disabled,
+      hasValues: values.length > 0,
+      open
+    });
+    const displayValues = values.slice(0, maxChips);
+    const remainingCount = values.length - maxChips;
+    const hasValues = values.length > 0;
+    const handleContainerClick = React.useCallback(
+      (e) => {
+        var _a;
+        const target = e.target;
+        if (target.closest("[data-remove-button]") || target.closest('button[aria-label*="Remove"]')) {
+          return;
+        }
+        if (!disabled) {
+          (_a = containerRef.current) == null ? void 0 : _a.focus();
+        }
+      },
+      [disabled]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (readOnly) return;
+        if (e.key === "Backspace" && values.length > 0) {
+          const lastValue = values[values.length - 1];
+          if (lastValue) {
+            onRemove == null ? void 0 : onRemove(lastValue);
+          }
+        }
+      },
+      [values, onRemove, readOnly]
+    );
+    const renderChips = React.useMemo(() => {
+      if (!hasValues) return null;
+      return /* @__PURE__ */ require$$0.jsxs("div", { className: style.chips(), children: [
+        displayValues.map((value, index2) => {
+          const chipDisabled = !!valueDisabledMap[value] || disabled;
+          const handleRemove = !chipDisabled && !readOnly && onRemove ? (e) => {
+            e.stopPropagation();
+            onRemove(value);
+          } : void 0;
+          const displayValue = getDisplayValue ? getDisplayValue(value) : value;
+          const chipSize = size2 === "large" ? "medium" : "default";
+          if (renderChip) {
+            return /* @__PURE__ */ require$$0.jsx("div", { children: renderChip({
+              value,
+              index: index2,
+              displayValue,
+              onRemove: handleRemove,
+              disabled: chipDisabled
+            }) }, `${value}-${index2}`);
+          }
+          return /* @__PURE__ */ require$$0.jsx(
+            index$1.Chip,
+            {
+              size: chipSize,
+              variant,
+              disabled: chipDisabled,
+              onRemove: handleRemove,
+              className: "bg-default-background shadow-xxs border-none dark:bg-gray-900",
+              children: displayValue
+            },
+            `${value}-${index2}`
+          );
+        }),
+        remainingCount > 0 && /* @__PURE__ */ require$$0.jsxs(
+          index$1.Chip,
+          {
+            size: size2 === "large" ? "medium" : "default",
+            variant: "rest",
+            disabled,
+            className: "text-secondary-foreground",
+            children: [
+              "+",
+              remainingCount
+            ]
+          }
+        )
+      ] });
+    }, [
+      hasValues,
+      displayValues,
+      remainingCount,
+      size2,
+      disabled,
+      readOnly,
+      onRemove,
+      getDisplayValue,
+      style,
+      renderChip,
+      variant,
+      valueDisabledMap
+    ]);
+    const renderPlaceholder = React.useMemo(() => {
+      if (hasValues) return null;
+      return /* @__PURE__ */ require$$0.jsx("span", { className: style.placeholder(), children: placeholder });
+    }, [hasValues, placeholder, style]);
+    return /* @__PURE__ */ require$$0.jsxs(
+      "div",
+      {
+        ref: mergeRefs.mergeRefs(ref, containerRef),
+        className: tcx.tcx(style.root(), className),
+        tabIndex: disabled ? -1 : 0,
+        onClick: handleContainerClick,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": false,
+        ...rest,
+        children: [
+          /* @__PURE__ */ require$$0.jsxs(
+            "div",
+            {
+              className: style.content(),
+              onClick: (e) => {
+                const target = e.target;
+                if (target.closest("[data-remove-button]") || target.closest('button[aria-label*="Remove"]')) {
+                  e.stopPropagation();
+                }
+              },
+              children: [
+                renderChips,
+                renderPlaceholder
+              ]
+            }
+          ),
+          suffixElement && /* @__PURE__ */ require$$0.jsx("span", { className: style.suffix(), children: suffixElement })
+        ]
+      }
+    );
+  })
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+function useMultiSelectState({ controlledOpen, onOpenChange }) {
+  const [open, setOpen] = React.useState(false);
+  const [touch, setTouch] = React.useState(false);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const [validationMessage, setValidationMessage] = React.useState(null);
+  React.useEffect(() => {
+    if (validationMessage) {
+      const timeout = setTimeout(() => {
+        setValidationMessage(null);
+      }, 3e3);
+      return () => clearTimeout(timeout);
+    }
+  }, [validationMessage]);
+  const isControlledOpen = controlledOpen !== void 0 ? controlledOpen : open;
+  return {
+    open,
+    setOpen,
+    touch,
+    setTouch,
+    scrollTop,
+    setScrollTop,
+    activeIndex,
+    setActiveIndex,
+    validationMessage,
+    setValidationMessage,
+    isControlledOpen
+  };
+}
+function useMultiSelectSelection({
+  values,
+  onChange,
+  selectableOptions,
+  maxSelection,
+  minSelection,
+  closeOnSelect,
+  i18n,
+  setValidationMessage,
+  handleOpenChange
+}) {
+  const handleSelect = usehooksTs.useEventCallback((index2) => {
+    var _a, _b, _c, _d;
+    const selectedOption = selectableOptions[index2];
+    if (!selectedOption) return;
+    const resultValue = selectedOption.value ?? "";
+    const isSelected = values.includes(resultValue);
+    const exclusiveIndex = (_b = (_a = selectedOption.element) == null ? void 0 : _a.props) == null ? void 0 : _b.exclusiveIndex;
+    let newValues;
+    if (isSelected) {
+      if (minSelection && values.length <= minSelection) {
+        setValidationMessage(
+          ((_c = i18n == null ? void 0 : i18n.minSelectionMessage) == null ? void 0 : _c.call(i18n, minSelection)) || `Select at least ${minSelection} options`
+        );
+        return;
+      }
+      newValues = values.filter((v) => v !== resultValue);
+    } else {
+      if (maxSelection && values.length >= maxSelection) {
+        setValidationMessage(
+          ((_d = i18n == null ? void 0 : i18n.maxSelectionMessage) == null ? void 0 : _d.call(i18n, maxSelection)) || `Select up to ${maxSelection} options`
+        );
+        return;
+      }
+      if (exclusiveIndex === -1) {
+        newValues = [resultValue];
+      } else if (exclusiveIndex && exclusiveIndex > 0) {
+        const filteredValues = values.filter((value) => {
+          var _a2, _b2;
+          const option = selectableOptions.find((opt) => opt.value === value);
+          const valueExclusiveIndex = (_b2 = (_a2 = option == null ? void 0 : option.element) == null ? void 0 : _a2.props) == null ? void 0 : _b2.exclusiveIndex;
+          return valueExclusiveIndex === exclusiveIndex || valueExclusiveIndex === void 0;
+        });
+        newValues = [...filteredValues, resultValue];
+      } else {
+        const hasGlobalExclusive = values.some((value) => {
+          var _a2, _b2;
+          const option = selectableOptions.find((opt) => opt.value === value);
+          return ((_b2 = (_a2 = option == null ? void 0 : option.element) == null ? void 0 : _a2.props) == null ? void 0 : _b2.exclusiveIndex) === -1;
+        });
+        if (hasGlobalExclusive) {
+          newValues = [resultValue];
+        } else {
+          const filteredValues = values.filter((value) => {
+            var _a2, _b2;
+            const option = selectableOptions.find((opt) => opt.value === value);
+            const valueExclusiveIndex = (_b2 = (_a2 = option == null ? void 0 : option.element) == null ? void 0 : _a2.props) == null ? void 0 : _b2.exclusiveIndex;
+            return valueExclusiveIndex === void 0;
+          });
+          newValues = [...filteredValues, resultValue];
+        }
+      }
+    }
+    onChange == null ? void 0 : onChange(newValues);
+    setValidationMessage(null);
+    if (closeOnSelect) {
+      handleOpenChange(false);
+    }
+  });
+  const handleRemove = usehooksTs.useEventCallback((valueToRemove) => {
+    const newValues = values.filter((v) => v !== valueToRemove);
+    onChange == null ? void 0 : onChange(newValues);
+  });
+  return {
+    handleSelect,
+    handleRemove
+  };
+}
+function extractItemElements(children) {
+  if (!children) return [];
+  const childrenArray = React.Children.toArray(children);
+  const extractItems = (children2) => {
+    const result = [];
+    children2.forEach((child) => {
+      if (!React.isValidElement(child)) return;
+      if (child.type === index.MenuContextItem || child.type === index.MenuDivider || child.type === index.MenuContextLabel) {
+        result.push(child);
+      } else if (child.type === React.Fragment && child.props.children) {
+        const fragmentChildren = React.Children.toArray(child.props.children);
+        result.push(...extractItems(fragmentChildren));
+      }
+    });
+    return result;
+  };
+  return extractItems(childrenArray);
+}
+function processOptions(itemElements) {
+  if (itemElements.length === 0) return [];
+  return itemElements.map((child, index$12) => {
+    if (!React.isValidElement(child)) return { divider: true };
+    if (child.type === index.MenuDivider) {
+      return { divider: true };
+    }
+    if (child.type === index.MenuContextLabel) {
+      return { label: true, children: child.props.children };
+    }
+    const {
+      value: itemValue,
+      children: itemChildren,
+      disabled: itemDisabled
+    } = child.props;
+    return {
+      value: itemValue,
+      disabled: itemDisabled,
+      _originalIndex: index$12,
+      element: child,
+      children: itemChildren
+    };
+  });
+}
+function filterSelectableOptions(options) {
+  return options.filter((option) => !option.divider && !option.label);
+}
+var PORTAL_ROOT_ID = "floating-menu-root";
+var MultiSelectComponent = React.memo(
+  React.forwardRef(function MultiSelectComponent2(props, ref) {
+    const {
+      className,
+      closeOnSelect = false,
+      getDisplayValue,
+      i18n,
+      matchTriggerWidth = false,
+      maxChips,
+      maxSelection,
+      minSelection,
+      placeholder,
+      renderChip,
+      showValidationMessage = true,
+      values = [],
+      onChange,
+      open: controlledOpen,
+      onOpenChange,
+      disabled = false,
+      portalId = PORTAL_ROOT_ID,
+      placement = "bottom-start",
+      readOnly = false,
+      children,
+      size: sizeProp = "default",
+      chipVariant = "default",
+      focusManagerProps = {
+        returnFocus: false,
+        modal: true
+      },
+      root,
+      variant = "default"
+    } = props;
+    const [itemElements, triggerElement, contentElement] = React.useMemo(() => {
+      if (!children) return [[], null, null];
+      const childrenArray = React.Children.toArray(children);
+      const trigger = childrenArray.find(
+        (child) => React.isValidElement(child) && child.type === MultiSelectTrigger
+      );
+      const content = childrenArray.find(
+        (child) => React.isValidElement(child) && child.type === index.MenuContextContent
+      );
+      if (!content) {
+        return [[], trigger, null];
+      }
+      const contentChildren = React.Children.toArray(content.props.children);
+      const items = extractItemElements(contentChildren);
+      return [items, trigger, content];
+    }, [children]);
+    const options = React.useMemo(() => processOptions(itemElements), [itemElements]);
+    const selectableOptions = React.useMemo(() => filterSelectableOptions(options), [options]);
+    const {
+      scrollRef,
+      elementsRef: listRef,
+      labelsRef: listContentRef,
+      selectTimeoutRef
+    } = index.useMenuBaseRefs();
+    const allowSelectRef = React.useRef(false);
+    const {
+      setOpen,
+      touch,
+      setTouch,
+      scrollTop,
+      setScrollTop,
+      activeIndex,
+      setActiveIndex,
+      validationMessage,
+      setValidationMessage,
+      isControlledOpen
+    } = useMultiSelectState({ controlledOpen, onOpenChange });
+    const baseId = React.useId();
+    const menuId = `menu-${baseId}`;
+    const nodeId = react.useFloatingNodeId();
+    const tree = react.useFloatingTree();
+    const parentId = react.useFloatingParentNodeId();
+    const handleOpenChange = usehooksTs.useEventCallback((newOpen) => {
+      if (disabled && newOpen) {
+        return;
+      }
+      if (controlledOpen === void 0) {
+        setOpen(newOpen);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    });
+    const middleware = React.useMemo(
+      () => [
+        react.offset(8),
+        react.flip(),
+        react.shift(),
+        react.size({
+          padding: 4,
+          apply(args) {
+            var _a;
+            const { elements, availableHeight, rects } = args;
+            const contentHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || elements.floating.scrollHeight;
+            const maxHeight = Math.min(contentHeight, availableHeight);
+            Object.assign(elements.floating.style, {
+              maxHeight: `${maxHeight}px`,
+              display: "flex",
+              flexDirection: "column"
+            });
+            if (scrollRef.current) {
+              scrollRef.current.style.height = "100%";
+              scrollRef.current.style.maxHeight = "100%";
+            }
+            if (matchTriggerWidth) {
+              elements.floating.style.width = `${rects.reference.width}px`;
+            }
+          }
+        })
+      ],
+      [matchTriggerWidth, scrollRef]
+    );
+    const { refs, floatingStyles, context, isPositioned } = react.useFloating({
+      nodeId,
+      open: isControlledOpen,
+      onOpenChange: handleOpenChange,
+      placement,
+      middleware,
+      whileElementsMounted: react.autoUpdate
+    });
+    const click = react.useClick(context, {
+      event: "click",
+      stickIfOpen: false
+    });
+    const dismiss = react.useDismiss(context, {
+      bubbles: true,
+      escapeKey: true
+    });
+    const role = react.useRole(context, { role: "listbox" });
+    const listNavigation = react.useListNavigation(context, {
+      listRef,
+      activeIndex,
+      onNavigate: setActiveIndex
+    });
+    const typeahead = react.useTypeahead(context, {
+      listRef: listContentRef,
+      activeIndex,
+      onMatch: setActiveIndex
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([
+      click,
+      dismiss,
+      role,
+      listNavigation,
+      typeahead
+    ]);
+    React.useEffect(() => {
+      if (isControlledOpen) {
+        selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = true;
+        }, 300);
+        return () => {
+          if (selectTimeoutRef.current) {
+            clearTimeout(selectTimeoutRef.current);
+          }
+        };
+      } else {
+        allowSelectRef.current = false;
+      }
+    }, [isControlledOpen, selectTimeoutRef]);
+    const { handleArrowScroll, handleArrowHide, scrollProps } = index.useMenuScroll({
+      scrollRef,
+      selectTimeoutRef,
+      scrollTop,
+      setScrollTop,
+      touch,
+      isSelect: false,
+      // 使用 dropdown 的滚动逻辑
+      fallback: false
+    });
+    const { handleSelect: baseHandleSelect, handleRemove: baseHandleRemove } = useMultiSelectSelection({
+      values,
+      onChange,
+      selectableOptions,
+      maxSelection,
+      minSelection,
+      closeOnSelect,
+      i18n,
+      setValidationMessage,
+      handleOpenChange
+    });
+    const handleSelect = usehooksTs.useEventCallback((index2) => {
+      if (readOnly) return;
+      if (allowSelectRef.current) {
+        baseHandleSelect(index2);
+      }
+    });
+    const handleRemove = usehooksTs.useEventCallback((value) => {
+      if (readOnly) return;
+      baseHandleRemove(value);
+    });
+    React.useEffect(() => {
+      if (!tree) return;
+      const handleTreeClick = () => {
+        if (closeOnSelect) {
+          handleOpenChange(false);
+        }
+      };
+      const handleSubMenuOpen = (event) => {
+        if (event.nodeId !== nodeId && event.parentId === parentId) {
+          handleOpenChange(false);
+        }
+      };
+      tree.events.on("click", handleTreeClick);
+      tree.events.on("menuopen", handleSubMenuOpen);
+      return () => {
+        tree.events.off("click", handleTreeClick);
+        tree.events.off("menuopen", handleSubMenuOpen);
+      };
+    }, [tree, nodeId, parentId, handleOpenChange, closeOnSelect]);
+    React.useEffect(() => {
+      if (isControlledOpen && tree) {
+        tree.events.emit("menuopen", { parentId, nodeId });
+      }
+    }, [tree, isControlledOpen, nodeId, parentId]);
+    index.useMenuScrollHeight({
+      isControlledOpen,
+      isPositioned,
+      scrollRef
+    });
+    const [hasFocusInside, setHasFocusInside] = React.useState(false);
+    const menuContextValue = React.useMemo(
+      () => ({
+        activeIndex,
+        setActiveIndex,
+        getItemProps,
+        setHasFocusInside,
+        isOpen: isControlledOpen,
+        selection: true,
+        readOnly,
+        variant,
+        close: () => handleOpenChange(false)
+      }),
+      [
+        activeIndex,
+        setActiveIndex,
+        getItemProps,
+        isControlledOpen,
+        readOnly,
+        handleOpenChange,
+        variant
+      ]
+    );
+    const registerItem = usehooksTs.useEventCallback((index2, node) => {
+      listRef.current[index2] = node;
+      const option = selectableOptions[index2];
+      listContentRef.current[index2] = option ? option.value || null : null;
+    });
+    const menuItems = React.useMemo(() => {
+      let selectableIndex = 0;
+      return options.map((option, index$12) => {
+        var _a;
+        if (option.divider) {
+          return /* @__PURE__ */ require$$0.jsx(index.MenuDivider, {}, `divider-${index$12}`);
+        }
+        if (option.label) {
+          return /* @__PURE__ */ require$$0.jsx(index.MenuContextLabel, { children: option.children }, `label-${index$12}`);
+        }
+        const currentSelectableIndex = selectableIndex;
+        selectableIndex++;
+        const isSelected = values.includes(option.value || "");
+        const isDisabled = !!option.disabled;
+        const childProps = (_a = option.element) == null ? void 0 : _a.props;
+        const customActive = childProps == null ? void 0 : childProps.onClick;
+        const eventHandlers = {
+          onTouchStart: () => {
+            if (customActive) return;
+            allowSelectRef.current = true;
+          },
+          onKeyDown: (e) => {
+            if (customActive) return;
+            allowSelectRef.current = true;
+          },
+          onClick: (e) => {
+            var _a2;
+            if (customActive) {
+              (_a2 = childProps.onClick) == null ? void 0 : _a2.call(childProps, e);
+            } else {
+              handleSelect(currentSelectableIndex);
+            }
+          }
+        };
+        return /* @__PURE__ */ require$$0.jsx(
+          index.MenuContextItem,
+          {
+            value: option.value || "",
+            ref: (node) => registerItem(currentSelectableIndex, node),
+            selected: isSelected,
+            disabled: isDisabled,
+            size: sizeProp,
+            customActive: customActive ? true : void 0,
+            ...eventHandlers,
+            children: option.children
+          },
+          option.value || `item-${index$12}`
+        );
+      });
+    }, [options, values, sizeProp, handleSelect, registerItem]);
+    const valueDisabledMap = React.useMemo(() => {
+      const map = {};
+      values.forEach((v) => {
+        const found = options.find((opt) => opt.value === v);
+        map[v] = !!(found == null ? void 0 : found.disabled);
+      });
+      return map;
+    }, [values, options]);
+    const enhancedTriggerElement = React.useMemo(() => {
+      if (!triggerElement) return null;
+      return React.cloneElement(triggerElement, {
+        ...triggerElement.props,
+        values,
+        onRemove: handleRemove,
+        size: sizeProp,
+        disabled,
+        readOnly,
+        open: isControlledOpen,
+        getDisplayValue,
+        maxChips,
+        placeholder,
+        renderChip,
+        variant: chipVariant,
+        valueDisabledMap
+      });
+    }, [
+      triggerElement,
+      values,
+      handleRemove,
+      sizeProp,
+      disabled,
+      readOnly,
+      isControlledOpen,
+      getDisplayValue,
+      maxChips,
+      placeholder,
+      renderChip,
+      chipVariant,
+      valueDisabledMap
+    ]);
+    if (!triggerElement || !contentElement) {
+      console.error(
+        "MultiSelect requires both MultiSelect.Trigger and MultiSelect.Content components as children"
+      );
+      return null;
+    }
+    return /* @__PURE__ */ require$$0.jsxs(react.FloatingNode, { id: nodeId, children: [
+      /* @__PURE__ */ require$$0.jsx(
+        index$2.Slot,
+        {
+          ref: refs.setReference,
+          ...getReferenceProps({
+            disabled,
+            onTouchStart() {
+              setTouch(true);
+            },
+            onPointerMove({ pointerType }) {
+              if (pointerType !== "touch") {
+                setTouch(false);
+              }
+            }
+          }),
+          children: enhancedTriggerElement
+        }
+      ),
+      /* @__PURE__ */ require$$0.jsx(
+        react.FloatingPortal,
+        {
+          id: portalId,
+          root,
+          children: isControlledOpen && /* @__PURE__ */ require$$0.jsx(
+            react.FloatingOverlay,
+            {
+              lockScroll: !touch,
+              className: tcx.tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
+              children: /* @__PURE__ */ require$$0.jsx(
+                react.FloatingFocusManager,
+                {
+                  context,
+                  ...focusManagerProps,
+                  children: /* @__PURE__ */ require$$0.jsx(
+                    "div",
+                    {
+                      style: {
+                        opacity: isPositioned ? 1 : 0
+                      },
+                      children: /* @__PURE__ */ require$$0.jsxs(
+                        "div",
+                        {
+                          id: menuId,
+                          ref: refs.setFloating,
+                          style: floatingStyles,
+                          className,
+                          ...getFloatingProps({
+                            onContextMenu(e) {
+                              e.preventDefault();
+                            }
+                          }),
+                          children: [
+                            /* @__PURE__ */ require$$0.jsx(index.MenuContext.Provider, { value: menuContextValue, children: React.cloneElement(contentElement, {
+                              ref: scrollRef,
+                              matchTriggerWidth,
+                              variant,
+                              ...scrollProps,
+                              children: /* @__PURE__ */ require$$0.jsx(
+                                react.FloatingList,
+                                {
+                                  elementsRef: listRef,
+                                  labelsRef: listContentRef,
+                                  children: menuItems
+                                }
+                              )
+                            }) }),
+                            ["up", "down"].map((dir) => /* @__PURE__ */ require$$0.jsx(
+                              index.MenuScrollArrow,
+                              {
+                                dir,
+                                scrollTop,
+                                scrollRef,
+                                innerOffset: 0,
+                                isPositioned,
+                                onScroll: handleArrowScroll,
+                                onHide: handleArrowHide
+                              },
+                              dir
+                            )),
+                            showValidationMessage && validationMessage && /* @__PURE__ */ require$$0.jsx("div", { className: "text-secondary-foreground px-3 py-2", children: validationMessage })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  })
+);
+var BaseMultiSelect = React.memo(function MultiSelect(props) {
+  const { children, ...rest } = props;
+  const parentId = react.useFloatingParentNodeId();
+  if (parentId === null) {
+    return /* @__PURE__ */ require$$0.jsx(react.FloatingTree, { children: /* @__PURE__ */ require$$0.jsx(MultiSelectComponent, { ...rest, children }) });
+  }
+  return /* @__PURE__ */ require$$0.jsx(MultiSelectComponent, { ...props, children });
+});
+var MultiSelect2 = Object.assign(BaseMultiSelect, {
+  Item: index.MenuContextItem,
+  Trigger: MultiSelectTrigger,
+  Divider: index.MenuDivider,
+  Label: index.MenuContextLabel,
+  Content: index.MenuContextContent,
+  Value: index.MenuValue
+});
+MultiSelect2.displayName = "MultiSelect";
+exports.MultiSelect = MultiSelect2;
+exports.MultiSelectTrigger = MultiSelectTrigger;
+exports.extractItemElements = extractItemElements;
+exports.filterSelectableOptions = filterSelectableOptions;
+exports.processOptions = processOptions;
+exports.useMultiSelectSelection = useMultiSelectSelection;
+exports.useMultiSelectState = useMultiSelectState;