@choice-ui/react 1.5.8 → 1.6.0

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 { DropdownProps } from '../../dropdown/src';
 import { MenuTrigger } from '../../menus/src';
 import { TZDate } from '@date-fns/tz';
 import { Locale as Locale$1 } from 'date-fns/locale';
@@ -571,24 +572,15 @@ declare const DateRangeInput: (props: DateRangeInputProps) => react_jsx_runtime.
 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 */
+interface TimeCalendarProps extends BaseTimeProps, StepProps, Pick<DropdownProps, "offset" | "placement" | "matchTriggerWidth" | "variant" | "readOnly"> {
     children?: React__default.ReactNode;
-    /** 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: TimeCalendarComponentType;

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

@@ -3050,6 +3050,10 @@ var TimeCalendarBase = memo(function TimeCalendar(props) {
     closeOnSelect = true,
     triggerRef,
     triggerSelector,
+    offset,
+    placement,
+    matchTriggerWidth,
+    variant,
     ...rest
   } = props;
   const [internalOpen, setInternalOpen] = useState(false);
@@ -3112,6 +3116,23 @@ var TimeCalendarBase = memo(function TimeCalendar(props) {
   const createPrefixElement = useCallback((isSelected) => {
     return isSelected ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Fragment, {});
   }, []);
+  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);
+      }
+    };
+    requestAnimationFrame(scrollToSelected);
+  }, [isOpen, normalizedTimeString]);
   const handleTimeSelect = useEventCallback((timeValue) => {
     if (readOnly) return;
     const dateValue = timeStringToDate(timeValue);
@@ -3128,6 +3149,11 @@ var TimeCalendarBase = memo(function TimeCalendar(props) {
       selection: true,
       triggerRef,
       triggerSelector,
+      offset,
+      placement,
+      matchTriggerWidth,
+      variant,
+      readOnly,
       ...rest,
       children: [
         children,

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

@@ -1,27 +1,19 @@
+import { DropdownProps } from '../../../dropdown/src';
 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 */
+export interface TimeCalendarProps extends BaseTimeProps, StepProps, Pick<DropdownProps, "offset" | "placement" | "matchTriggerWidth" | "variant" | "readOnly"> {
     children?: React.ReactNode;
-    /** 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: TimeCalendarComponentType;

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

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Check } from "@choiceform/icons-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 { Check } from "@choiceform/icons-react";
+import React__default, { memo, useState, useMemo, useCallback, useEffect } 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";
@@ -21,6 +21,10 @@ const TimeCalendarBase = memo(function TimeCalendar2(props) {
     closeOnSelect = true,
     triggerRef,
     triggerSelector,
+    offset,
+    placement,
+    matchTriggerWidth,
+    variant,
     ...rest
   } = props;
   const [internalOpen, setInternalOpen] = useState(false);
@@ -83,6 +87,23 @@ const TimeCalendarBase = memo(function TimeCalendar2(props) {
   const createPrefixElement = useCallback((isSelected) => {
     return isSelected ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Fragment, {});
   }, []);
+  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);
+      }
+    };
+    requestAnimationFrame(scrollToSelected);
+  }, [isOpen, normalizedTimeString]);
   const handleTimeSelect = useEventCallback((timeValue) => {
     if (readOnly) return;
     const dateValue = timeStringToDate(timeValue);
@@ -99,6 +120,11 @@ const TimeCalendarBase = memo(function TimeCalendar2(props) {
       selection: true,
       triggerRef,
       triggerSelector,
+      offset,
+      placement,
+      matchTriggerWidth,
+      variant,
+      readOnly,
       ...rest,
       children: [
         children,

package/package.json

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