myoperator-mcp 0.2.324 → 0.2.326

package/dist/index.js

@@ -2542,9 +2542,12 @@ const YEAR_RANGE_BEFORE = 100;
 const YEAR_RANGE_AFTER = 10;
 const CALENDAR_SELECT_CONTENT_SELECTOR =
   "[data-date-time-picker-calendar-select]";
-const CALENDAR_SELECT_TRIGGER_CLASS = "!w-[90px] !gap-[6px]";
+const CALENDAR_SELECT_TRIGGER_SELECTOR =
+  "[data-date-time-picker-calendar-select-trigger]";
+const CALENDAR_SELECT_TRIGGER_CLASS = "!w-[90px] !min-w-[90px] !gap-[6px] !px-3";
 const CALENDAR_SELECT_CONTENT_CLASS =
   "z-[10060] w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)] max-h-[min(16rem,var(--radix-select-content-available-height))]";
+type CalendarSelect = "month" | "year";
 const DATE_TIME_INPUT_SEGMENT_RANGES = {
   day: [0, 2],
   month: [3, 5],
@@ -3220,6 +3223,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       formatDateForDisplay(currentValue.date, currentValue.startTime)
     );
     const [isDateInputFocused, setIsDateInputFocused] = React.useState(false);
+    const [openCalendarSelect, setOpenCalendarSelect] =
+      React.useState<CalendarSelect | null>(null);
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const triggerRef = React.useRef<HTMLDivElement | null>(null);
     const popoverRef = React.useRef<HTMLDivElement | null>(null);
@@ -3290,11 +3295,39 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           setInternalOpen(nextOpen);
         }
 
+        if (!nextOpen) {
+          setOpenCalendarSelect(null);
+        }
+
         onOpenChange?.(nextOpen);
       },
       [isOpenControlled, onOpenChange]
     );
 
+    const handleCalendarSelectOpenChange = React.useCallback(
+      (select: CalendarSelect, nextOpen: boolean) => {
+        setOpenCalendarSelect((currentSelect) => {
+          if (nextOpen) return select;
+
+          return currentSelect === select ? null : currentSelect;
+        });
+      },
+      []
+    );
+
+    const handleCalendarSelectTriggerPointerDown = React.useCallback(
+      (
+        select: CalendarSelect,
+        event: React.PointerEvent<HTMLButtonElement>
+      ) => {
+        if (openCalendarSelect !== select) return;
+
+        event.preventDefault();
+        setOpenCalendarSelect(null);
+      },
+      [openCalendarSelect]
+    );
+
     const setTriggerRef = React.useCallback(
       (node: HTMLDivElement | null) => {
         triggerRef.current = node;
@@ -3323,6 +3356,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       }
     }, [displayValue, isDateInputFocused]);
 
+    React.useEffect(() => {
+      if (!open) {
+        setOpenCalendarSelect(null);
+      }
+    }, [open]);
+
     React.useEffect(() => {
       if (!open) return;
 
@@ -3332,12 +3371,14 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           !isPointerInsideElement(event, popoverRef.current) &&
           !isPointerInsideSelector(event, CALENDAR_SELECT_CONTENT_SELECTOR)
         ) {
+          setOpenCalendarSelect(null);
           setOpen(false);
         }
       };
 
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === "Escape") {
+          setOpenCalendarSelect(null);
           setOpen(false);
         }
       };
@@ -3504,7 +3545,16 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             zIndex: 10050,
             visibility: isPositioned ? undefined : "hidden",
           }}
-          onPointerDown={(event) => event.stopPropagation()}
+          onPointerDown={(event) => {
+            if (
+              event.target instanceof Element &&
+              !event.target.closest(CALENDAR_SELECT_TRIGGER_SELECTOR)
+            ) {
+              setOpenCalendarSelect(null);
+            }
+
+            event.stopPropagation();
+          }}
           onMouseDown={(event) => event.stopPropagation()}
           onWheel={(event) => event.stopPropagation()}
           onTouchMove={(event) => event.stopPropagation()}
@@ -3524,6 +3574,10 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   Month
                 </label>
                 <Select
+                  open={openCalendarSelect === "month"}
+                  onOpenChange={(nextOpen) =>
+                    handleCalendarSelectOpenChange("month", nextOpen)
+                  }
                   value={visibleMonth.getMonth().toString()}
                   onValueChange={(nextMonth) =>
                     updateVisibleMonth(
@@ -3537,8 +3591,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 >
                   <SelectTrigger
                     id={\`\${triggerId}-month\`}
+                    data-date-time-picker-calendar-select-trigger=""
                     aria-label="Month"
                     className={CALENDAR_SELECT_TRIGGER_CLASS}
+                  onPointerDown={(event) =>
+                    handleCalendarSelectTriggerPointerDown("month", event)
+                  }
                   >
                     <SelectValue />
                   </SelectTrigger>
@@ -3573,6 +3631,10 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   Year
                 </label>
                 <Select
+                  open={openCalendarSelect === "year"}
+                  onOpenChange={(nextOpen) =>
+                    handleCalendarSelectOpenChange("year", nextOpen)
+                  }
                   value={visibleMonth.getFullYear().toString()}
                   onValueChange={(nextYear) =>
                     updateVisibleMonth(
@@ -3586,8 +3648,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 >
                   <SelectTrigger
                     id={\`\${triggerId}-year\`}
+                    data-date-time-picker-calendar-select-trigger=""
                     aria-label="Year"
                     className={CALENDAR_SELECT_TRIGGER_CLASS}
+                  onPointerDown={(event) =>
+                    handleCalendarSelectTriggerPointerDown("year", event)
+                  }
                   >
                     <SelectValue />
                   </SelectTrigger>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.324",
+  "version": "0.2.326",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",