@choice-ui/react 1.5.6 → 1.5.8

package/dist/components/calendar/src/time-calendar/time-calendar.js

@@ -1,11 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Check } from "@choiceform/icons-react";
-import { Menus } from "../../../menus/dist/index.js";
-import React__default, { memo, useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { Dropdown as Dropdown2 } from "../../../dropdown/dist/index.js";
+import { MenuTrigger } from "../../../menus/dist/index.js";
+import React__default, { memo, useState, useMemo, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { generateTimeOptions, normalizeTimeValue, timeStringToDate } from "../utils/time.js";
 import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
-const TimeCalendar = memo(function TimeCalendar2(props) {
+const TimeCalendarBase = memo(function TimeCalendar2(props) {
   const {
     value,
     defaultValue,
@@ -15,16 +16,21 @@ const TimeCalendar = memo(function TimeCalendar2(props) {
     className,
     children,
     readOnly = false,
+    open: controlledOpen,
+    onOpenChange,
+    closeOnSelect = true,
+    triggerRef,
+    triggerSelector,
     ...rest
   } = props;
-  const scrollRef = useRef(null);
-  const elementsRef = useRef([]);
-  const customElementRef = useRef(null);
-  const hasInitialScrolled = useRef(false);
-  const lastSelectedIndexRef = useRef(null);
-  const isInternalOperationRef = useRef(false);
-  const [activeIndex, setActiveIndex] = useState(null);
-  const [isScrolling, setIsScrolling] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleOpenChange = useEventCallback((newOpen) => {
+    if (controlledOpen === void 0) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  });
   const [innerValue, setValue] = useMergedValue({
     value,
     defaultValue,
@@ -40,7 +46,7 @@ const TimeCalendar = memo(function TimeCalendar2(props) {
   const formatTo12Hour = useCallback((timeStr) => {
     const [hour, minute] = timeStr.split(":").map(Number);
     const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-    const ampm = hour < 12 ? "AM" : "PM";
+    const ampm = hour < 12 ? "am" : "pm";
     return `${displayHour}:${minute.toString().padStart(2, "0")} ${ampm}`;
   }, []);
   const customTimeOption = useMemo(() => {
@@ -67,222 +73,73 @@ const TimeCalendar = memo(function TimeCalendar2(props) {
     },
     [timeFormat]
   );
-  const selectedIndex = useMemo(() => {
-    if (!normalizedTimeString) return null;
-    const index = timeOptions.findIndex((option) => option.value === normalizedTimeString);
-    return index === -1 ? -1 : index;
-  }, [normalizedTimeString, timeOptions]);
   const needsDivider = useMemo(() => {
     const is12Hour = timeFormat.toLowerCase().includes("a") || timeFormat === "12h";
     if (!is12Hour) return () => false;
     return (index) => {
-      return index > 0 && timeOptions[index].label.includes("PM") && timeOptions[index - 1].label.includes("AM");
+      return index > 0 && timeOptions[index].label.toLowerCase().includes("pm") && timeOptions[index - 1].label.toLowerCase().includes("am");
     };
   }, [timeFormat, timeOptions]);
   const createPrefixElement = useCallback((isSelected) => {
     return isSelected ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Fragment, {});
   }, []);
-  const scrollTimeoutRef = useRef(null);
-  const mousePositionRef = useRef(null);
-  const handleScroll = useEventCallback(() => {
-    if (!isScrolling) {
-      setIsScrolling(true);
-      setActiveIndex(null);
-    }
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-    scrollTimeoutRef.current = setTimeout(() => {
-      var _a;
-      setIsScrolling(false);
-      if (mousePositionRef.current) {
-        const elementUnderMouse = document.elementFromPoint(
-          mousePositionRef.current.x,
-          mousePositionRef.current.y
-        );
-        if (customElementRef.current && (customElementRef.current === elementUnderMouse || customElementRef.current.contains(elementUnderMouse))) {
-          setActiveIndex(-1);
-          return;
-        }
-        const elements = elementsRef.current;
-        for (let i = 0; i < elements.length; i++) {
-          if (elements[i] && (elements[i] === elementUnderMouse || ((_a = elements[i]) == null ? void 0 : _a.contains(elementUnderMouse)))) {
-            setActiveIndex(i);
-            break;
-          }
-        }
-      }
-    }, 200);
-  });
-  const handleMouseMove = useEventCallback((event) => {
-    mousePositionRef.current = { x: event.clientX, y: event.clientY };
-  });
-  useEffect(() => {
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    var _a;
-    if (selectedIndex === -1) {
-      const customElement = customElementRef.current;
-      if (!customElement || !scrollRef.current) {
-        return;
-      }
-      const previousSelectedIndex2 = lastSelectedIndexRef.current;
-      const isSelectedIndexChanged2 = previousSelectedIndex2 !== selectedIndex;
-      lastSelectedIndexRef.current = selectedIndex;
-      const shouldScroll2 = !hasInitialScrolled.current || // Initial scrolling
-      isSelectedIndexChanged2 && !isInternalOperationRef.current;
-      if (shouldScroll2) {
-        const isInitialScroll = !hasInitialScrolled.current;
-        if (isInitialScroll) {
-          scrollRef.current.scrollTo({
-            top: 0,
-            behavior: "auto"
-          });
-        } else {
-          customElement.scrollIntoView({
-            block: "nearest",
-            behavior: "smooth"
-          });
-        }
-        if (!hasInitialScrolled.current) {
-          hasInitialScrolled.current = true;
-        }
-      }
-      if (isInternalOperationRef.current) {
-        isInternalOperationRef.current = false;
-      }
-      return;
-    }
-    if (selectedIndex === null || !scrollRef.current || !elementsRef.current[selectedIndex]) {
-      return;
-    }
-    const previousSelectedIndex = lastSelectedIndexRef.current;
-    const isSelectedIndexChanged = previousSelectedIndex !== selectedIndex;
-    lastSelectedIndexRef.current = selectedIndex;
-    const shouldScroll = !hasInitialScrolled.current || // Initial scrolling
-    isSelectedIndexChanged && !isInternalOperationRef.current;
-    if (shouldScroll) {
-      const isInitialScroll = !hasInitialScrolled.current;
-      if (isInitialScroll) {
-        (_a = elementsRef.current[selectedIndex]) == null ? void 0 : _a.scrollIntoView({
-          block: "center",
-          behavior: "auto"
-        });
-      } else {
-        const container = scrollRef.current;
-        const element = elementsRef.current[selectedIndex];
-        if (container && element) {
-          const containerRect = container.getBoundingClientRect();
-          const elementRect = element.getBoundingClientRect();
-          const margin = 8;
-          const elementTop = elementRect.top - containerRect.top + container.scrollTop;
-          const elementBottom = elementTop + elementRect.height;
-          const visibleTop = container.scrollTop + margin;
-          const visibleBottom = container.scrollTop + container.clientHeight - margin;
-          let targetScrollTop = container.scrollTop;
-          if (elementTop < visibleTop) {
-            targetScrollTop = elementTop - margin;
-          } else if (elementBottom > visibleBottom) {
-            targetScrollTop = elementBottom - container.clientHeight + margin;
-          }
-          if (targetScrollTop !== container.scrollTop) {
-            container.scrollTo({
-              top: targetScrollTop
-            });
-          }
-        }
-      }
-      if (!hasInitialScrolled.current) {
-        hasInitialScrolled.current = true;
-      }
-    }
-    if (isInternalOperationRef.current) {
-      isInternalOperationRef.current = false;
-    }
-  }, [selectedIndex]);
   const handleTimeSelect = useEventCallback((timeValue) => {
     if (readOnly) return;
-    isInternalOperationRef.current = true;
     const dateValue = timeStringToDate(timeValue);
     setValue(dateValue);
-  });
-  const handleMouseEnter = useEventCallback((index) => {
-    if (isScrolling) {
-      return;
+    if (closeOnSelect) {
+      handleOpenChange(false);
     }
-    setActiveIndex(index);
-  });
-  const handleMouseLeave = useEventCallback(() => {
-    setActiveIndex(null);
-  });
-  const handleClick = useEventCallback((timeValue) => {
-    handleTimeSelect(timeValue);
   });
   return /* @__PURE__ */ jsxs(
-    Menus,
+    Dropdown2,
     {
-      ref: scrollRef,
-      onScroll: handleScroll,
-      onMouseLeave: handleMouseLeave,
-      onMouseMove: handleMouseMove,
-      className,
-      "data-testid": "time-calendar-menu",
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      selection: true,
+      triggerRef,
+      triggerSelector,
       ...rest,
       children: [
-        customTimeOption && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Menus.Item,
-            {
-              ref: (node) => {
-                customElementRef.current = node;
-              },
-              selected: selectedIndex === -1,
-              active: !isScrolling && activeIndex === -1,
-              onClick: () => handleClick(customTimeOption.value),
-              onMouseEnter: () => handleMouseEnter(-1),
-              prefixElement: createPrefixElement(selectedIndex === -1),
-              variant: "highlight",
-              "data-testid": "custom-time-item",
-              children: renderTimeLabel(customTimeOption.label)
-            }
-          ),
-          /* @__PURE__ */ jsx(Menus.Divider, { "data-testid": "custom-time-divider" })
-        ] }),
-        timeOptions.map((option, index) => {
-          const isAmToPmTransition = needsDivider(index);
-          const isItemSelected = selectedIndex === index;
-          const isItemActive = !isScrolling && activeIndex === index;
-          return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-            isAmToPmTransition && /* @__PURE__ */ jsx(Menus.Divider, { "data-testid": "ampm-divider" }),
+        children,
+        /* @__PURE__ */ jsxs(Dropdown2.Content, { className, children: [
+          customTimeOption && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              Menus.Item,
+              Dropdown2.Item,
               {
-                ref: (node) => {
-                  elementsRef.current[index] = node;
-                },
-                selected: isItemSelected,
-                active: isItemActive,
-                onClick: () => handleClick(option.value),
-                onMouseEnter: () => handleMouseEnter(index),
-                prefixElement: createPrefixElement(isItemSelected),
-                variant: "highlight",
-                "data-testid": option.value,
-                children: renderTimeLabel(option.label)
+                onMouseUp: () => handleTimeSelect(customTimeOption.value),
+                prefixElement: createPrefixElement(normalizedTimeString === customTimeOption.value),
+                "data-testid": "custom-time-item",
+                children: renderTimeLabel(customTimeOption.label)
               }
-            )
-          ] }, option.value);
-        }),
-        children
+            ),
+            /* @__PURE__ */ jsx(Dropdown2.Divider, { "data-testid": "custom-time-divider" })
+          ] }),
+          timeOptions.map((option, index) => {
+            const isAmToPmTransition = needsDivider(index);
+            const isSelected = normalizedTimeString === option.value;
+            return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+              isAmToPmTransition && /* @__PURE__ */ jsx(Dropdown2.Divider, { "data-testid": "ampm-divider" }),
+              /* @__PURE__ */ jsx(
+                Dropdown2.Item,
+                {
+                  onMouseUp: () => handleTimeSelect(option.value),
+                  prefixElement: createPrefixElement(isSelected),
+                  "data-testid": option.value,
+                  children: renderTimeLabel(option.label)
+                }
+              )
+            ] }, option.value);
+          })
+        ] })
       ]
     }
   );
 });
-TimeCalendar.displayName = "TimeCalendar";
+TimeCalendarBase.displayName = "TimeCalendar";
+const TimeCalendar = Object.assign(TimeCalendarBase, {
+  Trigger: MenuTrigger
+});
 export {
   TimeCalendar
 };

package/dist/components/calendar/src/utils/time.js

@@ -241,7 +241,7 @@ const generateTimeOptions = (format2, step = 15) => {
     const minutes = i % 60;
     if (is12Hour) {
       const displayHour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
-      const ampm = hours < 12 ? "AM" : "PM";
+      const ampm = hours < 12 ? "am" : "pm";
       const value = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
       const label = `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
       options.push({ value, label });

package/dist/components/dropdown/dist/index.js

@@ -279,27 +279,52 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }),
     [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
   );
+  const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
+  const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;
+  const slotProps = useMemo(() => {
+    const referenceProps = getReferenceProps(
+      parentGetItemProps ? parentGetItemProps({
+        onFocus: handleFocus
+      }) : {}
+    );
+    return {
+      tabIndex: !isNested ? void 0 : parentActiveIndex === item.index ? 0 : -1,
+      role: isNested ? "menuitem" : void 0,
+      "data-open": isControlledOpen ? "" : void 0,
+      "data-nested": isNested ? "" : void 0,
+      "data-focus-inside": hasFocusInside ? "" : void 0,
+      onTouchStart: handleTouchStart,
+      onPointerMove: handlePointerMove,
+      "aria-haspopup": "menu",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...referenceProps
+    };
+  }, [
+    isNested,
+    parentActiveIndex,
+    parentGetItemProps,
+    item.index,
+    isControlledOpen,
+    hasFocusInside,
+    handleTouchStart,
+    handlePointerMove,
+    menuId,
+    getReferenceProps,
+    handleFocus
+  ]);
+  const slotChildren = useMemo(() => {
+    const element = isNested ? subTriggerElement : triggerElement;
+    if (!element) return null;
+    return cloneElement(element, { active: isControlledOpen });
+  }, [isNested, subTriggerElement, triggerElement, isControlledOpen]);
   return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
     !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ jsx(
       Slot,
       {
         ref: refs.setReference,
-        tabIndex: !isNested ? void 0 : (parent == null ? void 0 : parent.activeIndex) === item.index ? 0 : -1,
-        role: isNested ? "menuitem" : void 0,
-        "data-open": isControlledOpen ? "" : void 0,
-        "data-nested": isNested ? "" : void 0,
-        "data-focus-inside": hasFocusInside ? "" : void 0,
-        onTouchStart: handleTouchStart,
-        onPointerMove: handlePointerMove,
-        "aria-haspopup": "menu",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps(
-          parent ? parent.getItemProps({
-            onFocus: handleFocus
-          }) : {}
-        ),
-        children: isNested ? subTriggerElement && cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && cloneElement(triggerElement, { active: isControlledOpen })
+        ...slotProps,
+        children: slotChildren
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/components/dropdown/src/dropdown.js

@@ -279,27 +279,52 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     }),
     [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
   );
+  const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
+  const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;
+  const slotProps = useMemo(() => {
+    const referenceProps = getReferenceProps(
+      parentGetItemProps ? parentGetItemProps({
+        onFocus: handleFocus
+      }) : {}
+    );
+    return {
+      tabIndex: !isNested ? void 0 : parentActiveIndex === item.index ? 0 : -1,
+      role: isNested ? "menuitem" : void 0,
+      "data-open": isControlledOpen ? "" : void 0,
+      "data-nested": isNested ? "" : void 0,
+      "data-focus-inside": hasFocusInside ? "" : void 0,
+      onTouchStart: handleTouchStart,
+      onPointerMove: handlePointerMove,
+      "aria-haspopup": "menu",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...referenceProps
+    };
+  }, [
+    isNested,
+    parentActiveIndex,
+    parentGetItemProps,
+    item.index,
+    isControlledOpen,
+    hasFocusInside,
+    handleTouchStart,
+    handlePointerMove,
+    menuId,
+    getReferenceProps,
+    handleFocus
+  ]);
+  const slotChildren = useMemo(() => {
+    const element = isNested ? subTriggerElement : triggerElement;
+    if (!element) return null;
+    return cloneElement(element, { active: isControlledOpen });
+  }, [isNested, subTriggerElement, triggerElement, isControlledOpen]);
   return /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
     !isCoordinateMode && !hasExternalTrigger && /* @__PURE__ */ jsx(
       Slot,
       {
         ref: refs.setReference,
-        tabIndex: !isNested ? void 0 : (parent == null ? void 0 : parent.activeIndex) === item.index ? 0 : -1,
-        role: isNested ? "menuitem" : void 0,
-        "data-open": isControlledOpen ? "" : void 0,
-        "data-nested": isNested ? "" : void 0,
-        "data-focus-inside": hasFocusInside ? "" : void 0,
-        onTouchStart: handleTouchStart,
-        onPointerMove: handlePointerMove,
-        "aria-haspopup": "menu",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps(
-          parent ? parent.getItemProps({
-            onFocus: handleFocus
-          }) : {}
-        ),
-        children: isNested ? subTriggerElement && cloneElement(subTriggerElement, { active: isControlledOpen }) : triggerElement && cloneElement(triggerElement, { active: isControlledOpen })
+        ...slotProps,
+        children: slotChildren
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/components/menus/dist/index.js

@@ -1,13 +1,13 @@
 import { Button } from "../../button/dist/index.js";
-import React__default, { forwardRef, memo, useContext, createContext, useMemo, startTransition, useCallback, useRef, Children, isValidElement, Fragment as Fragment$1, useState, useEffect } from "react";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Check, ChevronRightSmall, ChevronDownSmall, ChevronUpSmall } from "@choiceform/icons-react";
+import React__default, { memo, forwardRef, useMemo, useContext, createContext, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ChevronDownSmall, Check, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
 import { Kbd } from "../../kbd/dist/index.js";
 import { flushSync } from "react-dom";
 import { SearchInput } from "../../search-input/dist/index.js";
 import { Slot } from "../../slot/dist/index.js";
-import { Input } from "../../input/dist/index.js";
 import { useEventCallback } from "usehooks-ts";
+import { Input } from "../../input/dist/index.js";
 import { useListItem, useFloatingTree, useFloatingNodeId, useFloatingParentNodeId } from "@floating-ui/react";
 import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -638,24 +638,29 @@ var MenuTrigger = memo(
       isEmpty: empty,
       size: size2
     });
-    const slotProps = enterForwardedProps ? {
-      ...rest,
-      active,
-      selected,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (rest.onClick) {
-          rest.onClick(e);
-        }
+    const handleClick = useEventCallback((e) => {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
+    });
+    const slotProps = useMemo(() => {
+      if (enterForwardedProps) {
+        return {
+          ...rest,
+          active,
+          selected,
+          disabled,
+          onClick: handleClick
+        };
       }
-    } : {
-      ...rest,
-      ...active !== void 0 ? { "data-active": active } : {},
-      ...selected !== void 0 ? { "data-selected": selected } : {},
-      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
-    };
+      return {
+        ...rest,
+        ...active !== void 0 ? { "data-active": active } : {},
+        ...selected !== void 0 ? { "data-selected": selected } : {},
+        ...disabled !== void 0 ? { "data-disabled": disabled } : {}
+      };
+    }, [enterForwardedProps, rest, active, selected, disabled, handleClick]);
     return asChild ? /* @__PURE__ */ jsx(
       Slot,
       {
@@ -717,7 +722,7 @@ var MenuValue = memo(({ children, ...rest }) => {
 });
 MenuValue.displayName = "MenuValue";
 var MenusBase = forwardRef((props, ref) => {
-  const { children, className, matchTriggerWidth, variant, ...rest } = props;
+  const { children, className, matchTriggerWidth, variant = "default", ...rest } = props;
   const tv = MenusTv({ matchTriggerWidth, variant });
   const processChildren = (children2) => {
     return Children.map(children2, (child) => {

package/dist/components/menus/src/components/menu-trigger.js

@@ -2,7 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
 import { Slot } from "../../../slot/dist/index.js";
 import { ChevronDownSmall } from "@choiceform/icons-react";
-import { memo, forwardRef } from "react";
+import { memo, forwardRef, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
 import { MenuTriggerTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const MenuTrigger = memo(
@@ -28,24 +29,29 @@ const MenuTrigger = memo(
       isEmpty: empty,
       size
     });
-    const slotProps = enterForwardedProps ? {
-      ...rest,
-      active,
-      selected,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (rest.onClick) {
-          rest.onClick(e);
-        }
+    const handleClick = useEventCallback((e) => {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = rest.onClick) == null ? void 0 : _a.call(rest, e);
+    });
+    const slotProps = useMemo(() => {
+      if (enterForwardedProps) {
+        return {
+          ...rest,
+          active,
+          selected,
+          disabled,
+          onClick: handleClick
+        };
       }
-    } : {
-      ...rest,
-      ...active !== void 0 ? { "data-active": active } : {},
-      ...selected !== void 0 ? { "data-selected": selected } : {},
-      ...disabled !== void 0 ? { "data-disabled": disabled } : {}
-    };
+      return {
+        ...rest,
+        ...active !== void 0 ? { "data-active": active } : {},
+        ...selected !== void 0 ? { "data-selected": selected } : {},
+        ...disabled !== void 0 ? { "data-disabled": disabled } : {}
+      };
+    }, [enterForwardedProps, rest, active, selected, disabled, handleClick]);
     return asChild ? /* @__PURE__ */ jsx(
       Slot,
       {

package/dist/components/menus/src/menus.js

@@ -11,7 +11,7 @@ import { MenuValue } from "./components/menu-value.js";
 import { MenusTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const MenusBase = forwardRef((props, ref) => {
-  const { children, className, matchTriggerWidth, variant, ...rest } = props;
+  const { children, className, matchTriggerWidth, variant = "default", ...rest } = props;
   const tv = MenusTv({ matchTriggerWidth, variant });
   const processChildren = (children2) => {
     return Children.map(children2, (child) => {

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

@@ -740,6 +740,21 @@ var MultiSelectComponent = memo(
       chipVariant,
       valueDisabledMap
     ]);
+    const handleTouchStart = useEventCallback(() => {
+      setTouch(true);
+    });
+    const handlePointerMove = useEventCallback(({ pointerType }) => {
+      if (pointerType !== "touch") {
+        setTouch(false);
+      }
+    });
+    const slotProps = useMemo(() => {
+      return getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onPointerMove: handlePointerMove
+      });
+    }, [getReferenceProps, disabled, handleTouchStart, handlePointerMove]);
     if (!triggerElement || !contentElement) {
       console.error(
         "MultiSelect requires both MultiSelect.Trigger and MultiSelect.Content components as children"
@@ -751,17 +766,7 @@ var MultiSelectComponent = memo(
         Slot,
         {
           ref: refs.setReference,
-          ...getReferenceProps({
-            disabled,
-            onTouchStart() {
-              setTouch(true);
-            },
-            onPointerMove({ pointerType }) {
-              if (pointerType !== "touch") {
-                setTouch(false);
-              }
-            }
-          }),
+          ...slotProps,
           children: enhancedTriggerElement
         }
       ),