@choice-ui/react 1.3.11 → 1.4.0

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

@@ -1,856 +0,0 @@
-"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 multiSelectTv = tcx.tcv({
-  slots: {
-    validationMessage: "bg-menu-background absolute top-[calc(100%+4px)] right-0 left-0 rounded-xl px-3 py-2 text-white"
-  },
-  variants: {
-    variant: {
-      default: {
-        validationMessage: "bg-menu-background text-white"
-      },
-      light: {
-        validationMessage: "bg-white text-gray-900"
-      },
-      reset: {}
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-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 tv = multiSelectTv();
-    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: tv.validationMessage({ variant }), 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;