@choice-ui/react 1.6.2 → 1.6.4

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

@@ -1,6 +1,8 @@
 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';
@@ -567,16 +569,21 @@ interface DateRangeInputProps extends Omit<TextFieldProps, "value" | "onChange"
 }
 declare const DateRangeInput: (props: DateRangeInputProps) => react_jsx_runtime.JSX.Element;
 
-interface TimeCalendarProps extends BaseTimeProps, StepProps {
+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"> {
     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: React__default.NamedExoticComponent<TimeCalendarProps>;
+declare const TimeCalendar: TimeCalendarComponentType;
 
 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,7 +10,8 @@ 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 { Menus } from "../../menus/dist/index.js";
+import { Dropdown as Dropdown2 } from "../../dropdown/dist/index.js";
+import { MenuTrigger } 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";
@@ -1221,54 +1222,71 @@ function parseCompositeFormat(input, format10, locale) {
   }
 }
 function removeWeekdayFromFormat(format10) {
-  return format10.replace(/\s*[eEic]{1,4}\s*/g, "").replace(/\s+/g, " ").replace(/\s*([,，、])\s*/g, "$1").trim();
+  return format10.replace(/\s*[eEic]{1,4}\s*/g, "").replace(/MMM(?!M)/g, "M月").replace(/\s+/g, " ").replace(/\s*([,，、])\s*/g, "$1").trim();
 }
 function removeWeekdayFromInput(input, locale) {
   try {
-    const weekdayNames = generateWeekdayNames2(locale);
-    if (weekdayNames.length === 0) {
-      return input;
+    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 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();
+    return result.replace(/\s+/g, " ").trim();
   } catch {
     return input.replace(/\s*(星期[一二三四五六日天]|周[一二三四五六日天])\s*/g, "").replace(/\s+/g, " ").trim();
   }
 }
 function generateWeekdayNames2(locale) {
-  const names = [];
+  const longNames = [];
+  const shortNames = [];
   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") {
-        names.push(fullName);
+      if (fullName && fullName !== "eeee" && !fullName.includes("e")) {
+        longNames.push(fullName);
       }
       const shortName = format(currentDate, "eee", { locale });
-      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);
+      if (shortName && shortName !== "eee" && shortName !== fullName && !shortName.includes("e")) {
+        shortNames.push(shortName);
       }
       const localeKey = getLocaleKey(locale);
-      if (localeKey === "zh") {
-        const weekFormat = format(currentDate, "eeee", { locale }).replace("星期", "周");
+      if (localeKey === "zh" && fullName) {
+        const weekFormat = fullName.replace("星期", "周");
         if (weekFormat !== fullName) {
-          names.push(weekFormat);
+          shortNames.push(weekFormat);
         }
       }
     }
-    return [...new Set(names)].filter(
-      (name) => name && name.length > 0 && !name.includes("e") && // 过滤掉格式化失败的情况
-      name !== "Invalid Date"
+    const filterNames = (names) => [...new Set(names)].filter(
+      (name) => name && name.length > 0 && !/^\d+$/.test(name) && name !== "Invalid Date"
     );
+    return {
+      longNames: filterNames(longNames),
+      shortNames: filterNames(shortNames)
+    };
   } catch {
-    return [];
+    return { longNames: [], shortNames: [] };
   }
 }
 function parseInvalidFormattedDate(input, targetFormat, locale) {
@@ -1715,7 +1733,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 });
@@ -3034,7 +3052,7 @@ var DateInput = forwardRef((props, ref) => {
   );
 });
 DateInput.displayName = "DateInput";
-var TimeCalendar = memo(function TimeCalendar2(props) {
+var TimeCalendarBase = memo(function TimeCalendar(props) {
   const {
     value,
     defaultValue,
@@ -3044,16 +3062,25 @@ var TimeCalendar = memo(function TimeCalendar2(props) {
     className,
     children,
     readOnly = false,
+    open: controlledOpen,
+    onOpenChange,
+    closeOnSelect = true,
+    triggerRef,
+    triggerSelector,
+    offset,
+    placement,
+    matchTriggerWidth,
+    variant,
     ...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,
@@ -3069,7 +3096,7 @@ var 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(() => {
@@ -3096,222 +3123,95 @@ var 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);
+    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);
       }
     };
-  }, []);
-  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]);
+    requestAnimationFrame(scrollToSelected);
+  }, [isOpen, normalizedTimeString]);
   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,
+      offset,
+      placement,
+      matchTriggerWidth,
+      variant,
+      readOnly,
       ...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";
+Object.assign(TimeCalendarBase, {
+  Trigger: MenuTrigger
+});
 function useTimeInput(props) {
   const {
     value,
@@ -4529,7 +4429,6 @@ export {
   LOCALE_MAP,
   MonthCalendar,
   QuarterCalendar,
-  TimeCalendar,
   TimeInput,
   YearCalendar,
   calculateWeekNumbers,

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/md-render/dist/index.js

@@ -53,7 +53,7 @@ var mdRenderTv = tcv({
     },
     variant: {
       github: {
-        root: "markdown-body",
+        root: "github-md",
         tableWrapper: "table-wrapper"
       },
       default: {

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

@@ -1,13 +1,13 @@
 import { Button } from "../../button/dist/index.js";
-import React__default, { memo, forwardRef, useContext, createContext, useMemo, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "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/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
         }
       ),

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

@@ -94,6 +94,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
   const allowMouseUpRef = useRef(true);
   const selectTimeoutRef = useRef();
   const scrollRef = useRef(null);
+  const isMouseDownFromTriggerRef = useRef(false);
   const refs = useMemo(
     () => ({
       list: listRef,
@@ -102,7 +103,8 @@ var SelectComponent = memo(function SelectComponent2(props) {
       allowSelect: allowSelectRef,
       allowMouseUp: allowMouseUpRef,
       selectTimeout: selectTimeoutRef,
-      scroll: scrollRef
+      scroll: scrollRef,
+      isMouseDownFromTrigger: isMouseDownFromTriggerRef
     }),
     []
     // refs are stable references, no dependencies needed
@@ -232,6 +234,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
     } else {
       refs.allowSelect.current = false;
       refs.allowMouseUp.current = true;
+      refs.isMouseDownFromTrigger.current = false;
     }
   }, [isControlledOpen]);
   const { handleArrowScroll, handleArrowHide, scrollProps } = useMenuScroll({
@@ -319,6 +322,13 @@ var SelectComponent = memo(function SelectComponent2(props) {
         },
         onMouseUp: () => {
           if (!refs.allowMouseUp.current || customActive) return;
+          if (refs.isMouseDownFromTrigger.current) {
+            refs.isMouseDownFromTrigger.current = false;
+            if (!isDisabled) {
+              handleSelect(currentSelectableIndex);
+            }
+            return;
+          }
           if (refs.allowSelect.current) {
             handleSelect(currentSelectableIndex);
           }
@@ -363,6 +373,38 @@ var SelectComponent = memo(function SelectComponent2(props) {
       size: sizeProp
     });
   }, [triggerElement, isControlledOpen, sizeProp]);
+  const handleTouchStart = useEventCallback(() => {
+    setTouch(true);
+  });
+  const handleMouseDown = useEventCallback(() => {
+    refs.isMouseDownFromTrigger.current = true;
+  });
+  const handlePointerMove = useEventCallback(({ pointerType }) => {
+    if (pointerType !== "touch") {
+      setTouch(false);
+    }
+  });
+  const slotProps = useMemo(() => {
+    return {
+      "aria-haspopup": "listbox",
+      "aria-expanded": isControlledOpen,
+      "aria-controls": menuId,
+      ...getReferenceProps({
+        disabled,
+        onTouchStart: handleTouchStart,
+        onMouseDown: handleMouseDown,
+        onPointerMove: handlePointerMove
+      })
+    };
+  }, [
+    isControlledOpen,
+    menuId,
+    getReferenceProps,
+    disabled,
+    handleTouchStart,
+    handleMouseDown,
+    handlePointerMove
+  ]);
   if (!triggerElement || !contentElement) {
     console.error("Select requires both Select.Trigger and Select.Content components as children");
     return null;
@@ -372,20 +414,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
       Slot,
       {
         ref: floating.refs.setReference,
-        "aria-haspopup": "listbox",
-        "aria-expanded": isControlledOpen,
-        "aria-controls": menuId,
-        ...getReferenceProps({
-          disabled,
-          onTouchStart() {
-            setTouch(true);
-          },
-          onPointerMove({ pointerType }) {
-            if (pointerType !== "touch") {
-              setTouch(false);
-            }
-          }
-        }),
+        ...slotProps,
         children: enhancedTriggerElement
       }
     ),
@@ -399,6 +428,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
           {
             lockScroll: !touch,
             className: tcx("z-menu", focusManagerProps.modal ? "" : "pointer-events-none"),
+            onMouseUp: () => {
+              refs.isMouseDownFromTrigger.current = false;
+            },
             children: /* @__PURE__ */ jsx(
               FloatingFocusManager,
               {

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

@@ -1,25 +1,21 @@
-import { default as React } from 'react';
+import * as React from 'react';
+
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
 /**
- * Optimized Slot component implementation
+ * Slot component - Lightweight implementation
  *
- * Compared to performance optimization of @radix-ui/react-slot:
- * 1. Use useMemo to cache children processing results
- * 2. Simplify props merging logic
- * 3. Avoid unnecessary deep traversal
- * 4. Better type safety
+ * Based on @radix-ui/react-slot design, used for asChild pattern prop forwarding
+ * Performance optimization should be done at the consumer level (e.g., useMemo to cache props)
  */
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
  * Hook version of Slot logic
- * Used for scenarios that require more granular control
  */
 declare function useSlot(children: React.ReactNode, slotProps: Record<string, unknown>, forwardedRef?: React.Ref<unknown>): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 /**
- * Performance optimized asChild mode Hook
- * Used to replace `const Component = asChild ? Slot : "button"` mode
+ * asChild 模式 Hook
  */
 declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 

package/dist/components/slot/dist/index.js

@@ -1,76 +1,57 @@
-import React__default, { forwardRef, useMemo } from "react";
+import * as React from "react";
+import { forwardRef } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
-var REACT_MAJOR = parseInt(React__default.version.split(".")[0], 10);
-var IS_REACT_19 = REACT_MAJOR >= 19;
-function getChildRef(children) {
-  if (IS_REACT_19) {
-    return children.props.ref;
-  }
-  return void 0;
-}
 var Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = getChildRef(children);
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 Slot.displayName = "Slot";
 var SlotClone = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
-    const slottedChild = useMemo(() => {
-      if (!React__default.isValidElement(children)) {
-        return children;
-      }
-      const childRef = getChildRef(children);
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
-      return React__default.cloneElement(children, {
+      return React.cloneElement(children, {
         ...mergedProps,
-        ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef
+        ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
       });
-    }, [children, slotProps, forwardedRef]);
-    return /* @__PURE__ */ jsx(Fragment, { children: slottedChild });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
 );
 SlotClone.displayName = "SlotClone";
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
-  if (slotProps.className && childProps.className) {
-    overrideProps.className = `${slotProps.className} ${childProps.className}`;
-  } else if (slotProps.className) {
-    overrideProps.className = slotProps.className;
-  }
-  if (slotProps.style && childProps.style) {
-    overrideProps.style = { ...slotProps.style, ...childProps.style };
-  } else if (slotProps.style) {
-    overrideProps.style = slotProps.style;
-  }
-  for (const propName in slotProps) {
-    if (propName.startsWith("on") && typeof slotProps[propName] === "function") {
-      const slotHandler = slotProps[propName];
-      const childHandler = childProps[propName];
-      if (childHandler && typeof childHandler === "function") {
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
         overrideProps[propName] = (...args) => {
-          childHandler(...args);
-          slotHandler(...args);
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
         };
-      } else {
-        overrideProps[propName] = slotHandler;
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
       }
-    } else if (propName !== "className" && propName !== "style") {
-      overrideProps[propName] = slotProps[propName];
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
     }
   }
-  return overrideProps;
+  return { ...slotProps, ...overrideProps };
 }
 function composeRefs(...refs) {
   return (node) => {
@@ -78,12 +59,25 @@ function composeRefs(...refs) {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref != null) {
-        const mutableRef = ref;
-        mutableRef.current = node;
+        ref.current = node;
       }
     });
   };
 }
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
 export {
   Slot
 };

package/dist/components/table/src/components/table-body.js

@@ -13,7 +13,6 @@ const VirtualRowWrapper = memo(
         position: "absolute",
         top: 0,
         left: 0,
-        right: 0,
         height,
         transform: `translateY(${start}px)`
       }),

package/dist/components/table/src/components/table-row.d.ts

@@ -16,7 +16,7 @@ interface TableRowInternalProps extends TableRowProps {
     onRowClickHandler: ((event: React.MouseEvent) => void) | undefined;
     onRowKeyDown: ((event: React.KeyboardEvent) => void) | undefined;
 }
-declare function TableRowPure({ rowKey, index, children, className, selectable, isSelected, isActive, consecutiveStyle, columnOrder, reorderable, hasRowClick, onCheckboxClick, onRowClickHandler, onRowKeyDown, }: TableRowInternalProps): ReactNode;
+declare function TableRowPure({ rowKey: _rowKey, index, children, className, selectable, isSelected, isActive, consecutiveStyle, columnOrder, reorderable, hasRowClick, onCheckboxClick, onRowClickHandler, onRowKeyDown, }: TableRowInternalProps): ReactNode;
 declare const TableRowMemo: import('react').MemoExoticComponent<typeof TableRowPure>;
 export type { TableRowProps };
 export { TableRowMemo as TableRowPure };

package/dist/components/table/src/components/table-row.js

@@ -7,7 +7,7 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const NOOP = () => {
 };
 function TableRowPure({
-  rowKey,
+  rowKey: _rowKey,
   index,
   children,
   className,
@@ -89,9 +89,7 @@ function TableRowPure({
     }
   );
 }
-const TableRowMemo = memo(TableRowPure, (prev, next) => {
-  return prev.rowKey === next.rowKey && prev.index === next.index && prev.className === next.className && prev.selectable === next.selectable && prev.isSelected === next.isSelected && prev.isActive === next.isActive && prev.consecutiveStyle === next.consecutiveStyle && prev.reorderable === next.reorderable && prev.hasRowClick === next.hasRowClick && prev.columnOrder === next.columnOrder;
-});
+const TableRowMemo = memo(TableRowPure);
 function TableRow({
   rowKey,
   index,

package/dist/components/tooltip/dist/index.js

@@ -184,12 +184,17 @@ var TooltipTrigger = forwardRef(
   function TooltipTrigger2({ children, ...props }, propRef) {
     const state = useTooltipState();
     const ref = useMergeRefs([state.refs.setReference, propRef]);
+    const slotProps = useMemo(() => {
+      return {
+        ...state.disabled && { disabled: true },
+        ...state.getReferenceProps(props)
+      };
+    }, [state.disabled, state.getReferenceProps, props]);
     return /* @__PURE__ */ jsx(
       Slot,
       {
         ref,
-        ...state.disabled && { disabled: true },
-        ...state.getReferenceProps(props),
+        ...slotProps,
         children
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",

package/dist/components/virtual-select/dist/index.d.ts

@@ -1,48 +0,0 @@
-import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
-import { FloatingFocusManagerProps } from '@floating-ui/react';
-import { default as React } from 'react';
-interface VirtualSelectOption<T = unknown> {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    data?: T;
-}
-interface VirtualSelectProps<T = unknown> {
-    className?: string;
-    closeOnEscape?: boolean;
-    disabled?: boolean;
-    emptyText?: string;
-    focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    matchTriggerWidth?: boolean;
-    maxHeight?: number;
-    onChange?: (value: string) => void;
-    onOpenChange?: (open: boolean) => void;
-    open?: boolean;
-    options: VirtualSelectOption<T>[];
-    overscan?: number;
-    placeholder?: string;
-    placement?: "bottom-start" | "bottom-end";
-    portalId?: string;
-    readOnly?: boolean;
-    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
-    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
-    root?: HTMLElement | null;
-    searchPlaceholder?: string;
-    size?: "default" | "large";
-    value?: string | null;
-    variant?: "default" | "light" | "reset";
-}
-interface VirtualSelectComponentType {
-    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
-    displayName?: string;
-    Content: typeof MenuContextContent;
-    Divider: typeof MenuDivider;
-    Empty: typeof MenuEmpty;
-    Item: typeof MenuContextItem;
-    Search: typeof MenuSearch;
-    Trigger: typeof MenuTrigger;
-    Value: typeof MenuValue;
-}
-declare const VirtualSelect: VirtualSelectComponentType;
-
-export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };