@choice-ui/react 1.5.7 → 1.5.8

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

@@ -1,6 +1,7 @@
 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 { 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 +568,30 @@ 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 {
+    /** Custom trigger element. Use Dropdown.Trigger as wrapper */
     children?: React__default.ReactNode;
-    /** Custom class name */
+    /** Custom class name for dropdown content */
     className?: string;
     /** Hour step, default 1 hour */
     hourStep?: number;
     /** Minute step, default 15 minutes */
     minuteStep?: number;
+    /** Whether the dropdown is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether to close dropdown after selection */
+    closeOnSelect?: boolean;
+    /** External trigger element ref */
+    triggerRef?: React__default.RefObject<HTMLElement>;
+    /** CSS selector for external trigger element */
+    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";
@@ -1715,7 +1716,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 +3035,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 +3045,21 @@ var 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,
@@ -3069,7 +3075,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 +3102,73 @@ 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);
-      }
-    };
-  }, []);
-  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";
+Object.assign(TimeCalendarBase, {
+  Trigger: MenuTrigger
+});
 function useTimeInput(props) {
   const {
     value,
@@ -4529,7 +4386,6 @@ export {
   LOCALE_MAP,
   MonthCalendar,
   QuarterCalendar,
-  TimeCalendar,
   TimeInput,
   YearCalendar,
   calculateWeekNumbers,

package/dist/components/calendar/src/time-calendar/time-calendar.d.ts

@@ -1,12 +1,28 @@
+import { MenuTrigger } from '../../../menus/src';
 import { default as React } from 'react';
 import { BaseTimeProps, StepProps } from '../types';
+interface TimeCalendarComponentType extends React.MemoExoticComponent<React.FC<TimeCalendarProps>> {
+    Trigger: typeof MenuTrigger;
+}
 export interface TimeCalendarProps extends BaseTimeProps, StepProps {
+    /** Custom trigger element. Use Dropdown.Trigger as wrapper */
     children?: React.ReactNode;
-    /** Custom class name */
+    /** Custom class name for dropdown content */
     className?: string;
     /** Hour step, default 1 hour */
     hourStep?: number;
     /** Minute step, default 15 minutes */
     minuteStep?: number;
+    /** Whether the dropdown is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether to close dropdown after selection */
+    closeOnSelect?: boolean;
+    /** External trigger element ref */
+    triggerRef?: React.RefObject<HTMLElement>;
+    /** CSS selector for external trigger element */
+    triggerSelector?: string;
 }
-export declare const TimeCalendar: React.NamedExoticComponent<TimeCalendarProps>;
+export declare const TimeCalendar: TimeCalendarComponentType;
+export {};

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

@@ -1,7 +1,7 @@
 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";
@@ -722,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/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/package.json

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