@choice-ui/react 1.6.1 → 1.6.2

package/dist/components/calendar/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { default as React__default } from 'react';
 import { Locale, Quarter as Quarter$1, Day, isSameDay, isSameMonth, isSameYear, addMonths, startOfMonth, endOfMonth, startOfWeek, endOfWeek } from 'date-fns';
 import { TextFieldProps } from '../../text-field/src';
-import { DropdownProps } from '../../dropdown/src';
-import { MenuTrigger } from '../../menus/src';
 import { TZDate } from '@date-fns/tz';
 import { Locale as Locale$1 } from 'date-fns/locale';
 import { PressMoveProps } from '../../../../../shared/src';
@@ -569,21 +567,16 @@ interface DateRangeInputProps extends Omit<TextFieldProps, "value" | "onChange"
 }
 declare const DateRangeInput: (props: DateRangeInputProps) => react_jsx_runtime.JSX.Element;
 
-interface TimeCalendarComponentType extends React__default.MemoExoticComponent<React__default.FC<TimeCalendarProps>> {
-    Trigger: typeof MenuTrigger;
-}
-interface TimeCalendarProps extends BaseTimeProps, StepProps, Pick<DropdownProps, "offset" | "placement" | "matchTriggerWidth" | "variant" | "readOnly"> {
+interface TimeCalendarProps extends BaseTimeProps, StepProps {
     children?: React__default.ReactNode;
+    /** Custom class name */
     className?: string;
+    /** Hour step, default 1 hour */
     hourStep?: number;
+    /** Minute step, default 15 minutes */
     minuteStep?: number;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    closeOnSelect?: boolean;
-    triggerRef?: React__default.RefObject<HTMLElement>;
-    triggerSelector?: string;
 }
-declare const TimeCalendar: TimeCalendarComponentType;
+declare const TimeCalendar: React__default.NamedExoticComponent<TimeCalendarProps>;
 
 interface TimeInputProps extends Omit<TextFieldProps, "value" | "onChange" | "format" | "defaultValue" | "step">, BaseTimeProps, StepProps, TimeInteractionProps {
     prefixElement?: React__default.ReactNode;

package/dist/components/calendar/dist/index.js

@@ -10,8 +10,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { IconButton } from "../../icon-button/dist/index.js";
 import { FieldTypeDate, Undo, ChevronUpSmall, ChevronLeftSmall, ChevronDownSmall, ChevronRightSmall, Check, Clock } from "@choiceform/icons-react";
 import { TextField } from "../../text-field/dist/index.js";
-import { Dropdown as Dropdown2 } from "../../dropdown/dist/index.js";
-import { MenuTrigger } from "../../menus/dist/index.js";
+import { Menus } from "../../menus/dist/index.js";
 import { tcx, tcv } from "../../../shared/utils/tcx/tcx.js";
 import { useMergedValue } from "../../../shared/hooks/use-merged-value/use-merged-value.js";
 import { useModifierKeys } from "../../../shared/hooks/use-modifier-keys/use-modifier-keys.js";
@@ -1222,71 +1221,54 @@ function parseCompositeFormat(input, format10, locale) {
   }
 }
 function removeWeekdayFromFormat(format10) {
-  return format10.replace(/\s*[eEic]{1,4}\s*/g, "").replace(/MMM(?!M)/g, "M月").replace(/\s+/g, " ").replace(/\s*([,，、])\s*/g, "$1").trim();
+  return format10.replace(/\s*[eEic]{1,4}\s*/g, "").replace(/\s+/g, " ").replace(/\s*([,，、])\s*/g, "$1").trim();
 }
 function removeWeekdayFromInput(input, locale) {
   try {
-    const { longNames, shortNames } = generateWeekdayNames2(locale);
-    let result = input;
-    if (longNames.length > 0) {
-      const sortedLongNames = longNames.sort((a, b) => b.length - a.length);
-      const longPattern = new RegExp(`\\s*(${sortedLongNames.join("|")})\\s*`, "gi");
-      result = result.replace(longPattern, " ");
-    }
-    if (shortNames.length > 0) {
-      const sortedShortNames = shortNames.sort((a, b) => b.length - a.length);
-      const singleCharNames = sortedShortNames.filter((name) => name.length === 1);
-      const multiCharNames = sortedShortNames.filter((name) => name.length > 1);
-      if (multiCharNames.length > 0) {
-        const multiPattern = new RegExp(`\\s*(${multiCharNames.join("|")})\\s*`, "gi");
-        result = result.replace(multiPattern, " ");
-      }
-      if (singleCharNames.length > 0) {
-        const singlePattern = new RegExp(
-          `([（(「【])(${singleCharNames.join("|")})([）)」】])`,
-          "gi"
-        );
-        result = result.replace(singlePattern, "$1$3");
-      }
+    const weekdayNames = generateWeekdayNames2(locale);
+    if (weekdayNames.length === 0) {
+      return input;
     }
-    return result.replace(/\s+/g, " ").trim();
+    const sortedNames = weekdayNames.sort((a, b) => b.length - a.length);
+    const pattern = new RegExp(`\\s*(${sortedNames.join("|")})\\s*`, "gi");
+    return input.replace(pattern, "").replace(/\s+/g, " ").trim();
   } catch {
     return input.replace(/\s*(星期[一二三四五六日天]|周[一二三四五六日天])\s*/g, "").replace(/\s+/g, " ").trim();
   }
 }
 function generateWeekdayNames2(locale) {
-  const longNames = [];
-  const shortNames = [];
+  const names = [];
   try {
     const baseDate = new Date(2024, 0, 7);
     for (let i = 0; i < 7; i++) {
       const currentDate = new Date(baseDate);
       currentDate.setDate(baseDate.getDate() + i);
       const fullName = format(currentDate, "eeee", { locale });
-      if (fullName && fullName !== "eeee" && !fullName.includes("e")) {
-        longNames.push(fullName);
+      if (fullName && fullName !== "eeee") {
+        names.push(fullName);
       }
       const shortName = format(currentDate, "eee", { locale });
-      if (shortName && shortName !== "eee" && shortName !== fullName && !shortName.includes("e")) {
-        shortNames.push(shortName);
+      if (shortName && shortName !== "eee" && shortName !== fullName) {
+        names.push(shortName);
+      }
+      const veryShortName = format(currentDate, "ee", { locale });
+      if (veryShortName && veryShortName !== "ee" && veryShortName !== shortName && veryShortName !== fullName) {
+        names.push(veryShortName);
       }
       const localeKey = getLocaleKey(locale);
-      if (localeKey === "zh" && fullName) {
-        const weekFormat = fullName.replace("星期", "周");
+      if (localeKey === "zh") {
+        const weekFormat = format(currentDate, "eeee", { locale }).replace("星期", "周");
         if (weekFormat !== fullName) {
-          shortNames.push(weekFormat);
+          names.push(weekFormat);
         }
       }
     }
-    const filterNames = (names) => [...new Set(names)].filter(
-      (name) => name && name.length > 0 && !/^\d+$/.test(name) && name !== "Invalid Date"
+    return [...new Set(names)].filter(
+      (name) => name && name.length > 0 && !name.includes("e") && // 过滤掉格式化失败的情况
+      name !== "Invalid Date"
     );
-    return {
-      longNames: filterNames(longNames),
-      shortNames: filterNames(shortNames)
-    };
   } catch {
-    return { longNames: [], shortNames: [] };
+    return [];
   }
 }
 function parseInvalidFormattedDate(input, targetFormat, locale) {
@@ -1733,7 +1715,7 @@ var generateTimeOptions = (format10, 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 });
@@ -3052,7 +3034,7 @@ var DateInput = forwardRef((props, ref) => {
   );
 });
 DateInput.displayName = "DateInput";
-var TimeCalendarBase = memo(function TimeCalendar(props) {
+var TimeCalendar = memo(function TimeCalendar2(props) {
   const {
     value,
     defaultValue,
@@ -3062,25 +3044,16 @@ var TimeCalendarBase = memo(function TimeCalendar(props) {
     className,
     children,
     readOnly = false,
-    open: controlledOpen,
-    onOpenChange,
-    closeOnSelect = true,
-    triggerRef,
-    triggerSelector,
-    offset,
-    placement,
-    matchTriggerWidth,
-    variant,
     ...rest
   } = props;
-  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 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 [innerValue, setValue] = useMergedValue({
     value,
     defaultValue,
@@ -3096,7 +3069,7 @@ var TimeCalendarBase = memo(function TimeCalendar(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(() => {
@@ -3123,95 +3096,222 @@ var TimeCalendarBase = memo(function TimeCalendar(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.toLowerCase().includes("pm") && timeOptions[index - 1].label.toLowerCase().includes("am");
+      return index > 0 && timeOptions[index].label.includes("PM") && timeOptions[index - 1].label.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(() => {
-    if (!isOpen || !normalizedTimeString) return;
-    let attempts = 0;
-    const maxAttempts = 10;
-    const scrollToSelected = () => {
-      const selectedItem = document.querySelector(
-        `[data-testid="${normalizedTimeString}"]`
-      );
-      if (selectedItem) {
-        selectedItem.scrollIntoView({ block: "center" });
-      } else if (attempts < maxAttempts) {
-        attempts++;
-        requestAnimationFrame(scrollToSelected);
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
       }
     };
-    requestAnimationFrame(scrollToSelected);
-  }, [isOpen, normalizedTimeString]);
+  }, []);
+  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);
-    if (closeOnSelect) {
-      handleOpenChange(false);
+  });
+  const handleMouseEnter = useEventCallback((index) => {
+    if (isScrolling) {
+      return;
     }
+    setActiveIndex(index);
+  });
+  const handleMouseLeave = useEventCallback(() => {
+    setActiveIndex(null);
+  });
+  const handleClick = useEventCallback((timeValue) => {
+    handleTimeSelect(timeValue);
   });
   return /* @__PURE__ */ jsxs(
-    Dropdown2,
+    Menus,
     {
-      open: isOpen,
-      onOpenChange: handleOpenChange,
-      selection: true,
-      triggerRef,
-      triggerSelector,
-      offset,
-      placement,
-      matchTriggerWidth,
-      variant,
-      readOnly,
+      ref: scrollRef,
+      onScroll: handleScroll,
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
+      className,
+      "data-testid": "time-calendar-menu",
       ...rest,
       children: [
-        children,
-        /* @__PURE__ */ jsxs(Dropdown2.Content, { className, children: [
-          customTimeOption && /* @__PURE__ */ jsxs(Fragment, { 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" }),
             /* @__PURE__ */ jsx(
-              Dropdown2.Item,
+              Menus.Item,
               {
-                onMouseUp: () => handleTimeSelect(customTimeOption.value),
-                prefixElement: createPrefixElement(normalizedTimeString === customTimeOption.value),
-                "data-testid": "custom-time-item",
-                children: renderTimeLabel(customTimeOption.label)
+                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)
               }
-            ),
-            /* @__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);
-          })
-        ] })
+            )
+          ] }, option.value);
+        }),
+        children
       ]
     }
   );
 });
-TimeCalendarBase.displayName = "TimeCalendar";
-Object.assign(TimeCalendarBase, {
-  Trigger: MenuTrigger
-});
+TimeCalendar.displayName = "TimeCalendar";
 function useTimeInput(props) {
   const {
     value,
@@ -4429,6 +4529,7 @@ export {
   LOCALE_MAP,
   MonthCalendar,
   QuarterCalendar,
+  TimeCalendar,
   TimeInput,
   YearCalendar,
   calculateWeekNumbers,

package/dist/components/dialog/dist/index.d.ts

@@ -13,8 +13,9 @@ declare const DialogTrigger: react.MemoExoticComponent<react.ForwardRefExoticCom
 
 type DialogPosition = "left-top" | "center-top" | "right-top" | "left-center" | "center" | "right-center" | "left-bottom" | "center-bottom" | "right-bottom";
 
-interface DialogProps {
+interface DialogProps extends Omit<react__default.HTMLAttributes<HTMLElement>, "title"> {
     afterOpenChange?: (isOpen: boolean) => void;
+    as?: react__default.ElementType;
     children?: react__default.ReactNode;
     className?: string;
     closeOnEscape?: boolean;

package/dist/components/dialog/dist/index.js

@@ -645,6 +645,7 @@ var dragDialogTv = tcv({
 });
 var PORTAL_ROOT_ID = "floating-modal-root";
 var DialogComponent = memo(function DialogComponent2({
+  as,
   className,
   children,
   closeOnEscape = true,
@@ -667,7 +668,8 @@ var DialogComponent = memo(function DialogComponent2({
   rememberSize = false,
   focusManagerProps = { initialFocus: 1 },
   transitionStylesProps,
-  root
+  root,
+  ...restProps
 }) {
   const dialogRef = useRef(null);
   const contentRef = useRef(null);
@@ -829,9 +831,11 @@ var DialogComponent = memo(function DialogComponent2({
                         floating.refs.setFloating(node);
                       }
                     },
+                    as,
                     style: getStyleWithDefaults,
                     className: tcx(style.dialog(), className),
                     ...floating.getFloatingProps(),
+                    ...restProps,
                     "aria-labelledby": titleId,
                     "aria-describedby": descriptionId,
                     role: "dialog",

package/dist/components/dialog/src/dialog.d.ts

@@ -3,8 +3,9 @@ import { FloatingFocusManagerProps, UseTransitionStylesProps } from '@floating-u
 import { default as React } from 'react';
 import { DialogHeader, DialogTrigger } from './components';
 import { DialogPosition } from './types';
-export interface DialogProps {
+export interface DialogProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     afterOpenChange?: (isOpen: boolean) => void;
+    as?: React.ElementType;
     children?: React.ReactNode;
     className?: string;
     closeOnEscape?: boolean;

package/dist/components/dialog/src/dialog.js

@@ -14,6 +14,7 @@ import { findChildByType } from "../../../shared/utils/assertion.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const PORTAL_ROOT_ID = "floating-modal-root";
 const DialogComponent = memo(function DialogComponent2({
+  as,
   className,
   children,
   closeOnEscape = true,
@@ -36,7 +37,8 @@ const DialogComponent = memo(function DialogComponent2({
   rememberSize = false,
   focusManagerProps = { initialFocus: 1 },
   transitionStylesProps,
-  root
+  root,
+  ...restProps
 }) {
   const dialogRef = useRef(null);
   const contentRef = useRef(null);
@@ -198,9 +200,11 @@ const DialogComponent = memo(function DialogComponent2({
                         floating.refs.setFloating(node);
                       }
                     },
+                    as,
                     style: getStyleWithDefaults,
                     className: tcx(style.dialog(), className),
                     ...floating.getFloatingProps(),
+                    ...restProps,
                     "aria-labelledby": titleId,
                     "aria-describedby": descriptionId,
                     role: "dialog",

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

@@ -279,52 +279,27 @@ 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,
-        ...slotProps,
-        children: slotChildren
+        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 })
       }
     ),
     /* @__PURE__ */ jsx(