myoperator-mcp 0.2.380 → 0.2.382

package/dist/index.js

@@ -2628,7 +2628,7 @@ const MONTH_LONG_NAMES = [
 ];
 
 const dateRangePickerTriggerVariants = cva(
-  "flex h-10 w-full items-center gap-2 rounded-lg border border-solid border-semantic-border-input bg-semantic-bg-primary px-4 py-2.5 text-left text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex h-10 w-full items-center gap-2 rounded border border-solid border-semantic-border-input bg-semantic-bg-primary px-4 py-2.5 text-left text-sm text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       state: {
@@ -2736,8 +2736,44 @@ function getCalendarDays(month: Date) {
   });
 }
 
+function isMonthSelectable(
+  year: number,
+  monthIndex: number,
+  minDate?: Date,
+  maxDate?: Date
+) {
+  const firstDay = new Date(year, monthIndex, 1);
+  const lastDay = new Date(year, monthIndex + 1, 0);
+
+  if (minDate && isBeforeDay(lastDay, minDate)) return false;
+  if (maxDate && isAfterDay(firstDay, maxDate)) return false;
+
+  return true;
+}
+
+function clampRange(
+  range: DateRangeValue,
+  minDate?: Date,
+  maxDate?: Date
+): DateRangeValue | null {
+  let { start, end } = range;
+
+  // The window and the preset don't overlap at all \u2014 clamping would collapse
+  // the range onto the boundary day, which is not what the preset means.
+  if (end && minDate && isBeforeDay(end, minDate)) return null;
+  if (start && maxDate && isAfterDay(start, maxDate)) return null;
+
+  if (start && minDate && isBeforeDay(start, minDate)) start = minDate;
+  if (end && maxDate && isAfterDay(end, maxDate)) end = maxDate;
+
+  // The whole preset sits outside the allowed window \u2014 nothing to select.
+  if (start && end && isAfterDay(start, end)) return null;
+
+  return { start, end };
+}
+
 function isPointerInsideElement(
-  event: MouseEvent,
+  event: MouseEvent | PointerEvent,
   element: HTMLElement | null
 ) {
   if (!element) return false;
@@ -2886,6 +2922,11 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
     // start a new one (false). Drives the "click 1 = start, click 2 = end,
     // click 3 = restart" cycle.
     const [pendingEnd, setPendingEnd] = React.useState(false);
+    // Month and year share one slot so opening either closes the other \u2014
+    // two independent uncontrolled menus can otherwise sit open at once.
+    const [openMenu, setOpenMenu] = React.useState<"month" | "year" | null>(
+      null
+    );
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.start ?? currentValue.end ?? new Date())
     );
@@ -2941,6 +2982,21 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
 
       return isBeforeDay(minDate, today) ? today : minDate;
     }, [disablePastDates, minDate]);
+    // Year list is centred on the visible year but never offers a year that
+    // has no selectable day in it.
+    const yearOptions = React.useMemo(() => {
+      const centre = visibleMonth.getFullYear();
+      const all = Array.from(
+        { length: YEAR_OPTIONS_SPAN * 2 + 1 },
+        (_, index) => centre - YEAR_OPTIONS_SPAN + index
+      );
+
+      return all.filter(
+        (year) =>
+          !(effectiveMinDate && year < effectiveMinDate.getFullYear()) &&
+          !(maxDate && year > maxDate.getFullYear())
+      );
+    }, [visibleMonth, effectiveMinDate, maxDate]);
     const portalMount =
       typeof document !== "undefined"
         ? usesContainerPortal
@@ -2989,6 +3045,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       const latestValue = currentValueRef.current;
       setDraftValue(latestValue);
       setPendingEnd(false);
+      setOpenMenu(null);
       setVisibleMonth(
         startOfMonth(latestValue.start ?? latestValue.end ?? new Date())
       );
@@ -2997,7 +3054,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
     React.useEffect(() => {
       if (!open) return;
 
-      const handlePointerDown = (event: MouseEvent) => {
+      const handlePointerDown = (event: PointerEvent) => {
         if (
           !isPointerInsideElement(event, rootRef.current) &&
           !isPointerInsideElement(event, popoverRef.current)
@@ -3009,14 +3066,17 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === "Escape") {
           setOpen(false);
+          // Escape must hand focus back to the trigger, otherwise focus is
+          // stranded on a node that is about to unmount.
+          triggerRef.current?.focus();
         }
       };
 
-      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("pointerdown", handlePointerDown);
       document.addEventListener("keydown", handleKeyDown);
 
       return () => {
-        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("pointerdown", handlePointerDown);
         document.removeEventListener("keydown", handleKeyDown);
       };
     }, [open, setOpen]);
@@ -3032,10 +3092,21 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       [isValueControlled, onValueChange]
     );
 
+    // Radix dismisses the open menu on the same pointerdown that would toggle
+    // the sibling trigger, so its own toggle is swallowed and switching menus
+    // takes two clicks. Drive the slot from the trigger directly and
+    // preventDefault so Radix's toggle stays out of it.
+    const toggleCalendarMenu = (menu: "month" | "year") => {
+      setOpenMenu((current) => (current === menu ? null : menu));
+    };
+
     const handlePresetClick = (preset: DateRangePreset) => {
-      const range = preset.getRange();
+      const range = clampRange(preset.getRange(), effectiveMinDate, maxDate);
+      if (!range) return;
+
       commitValue(range);
       setOpen(false);
+      triggerRef.current?.focus();
     };
 
     const handleDayClick = (day: Date) => {
@@ -3056,6 +3127,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       setPendingEnd(false);
       commitValue(nextValue);
       setOpen(false);
+      triggerRef.current?.focus();
     };
 
     const popover =
@@ -3087,23 +3159,34 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           onWheel={(event) => event.stopPropagation()}
           onTouchMove={(event) => event.stopPropagation()}
         >
-          <div className="flex flex-row">
+          <div className="flex flex-col sm:flex-row">
             {presets.length > 0 && (
-              <div className="flex w-36 shrink-0 flex-col gap-0.5 border-r border-solid border-semantic-border-layout p-3">
-                {presets.map((preset) => (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    className="w-full rounded px-2 py-1.5 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
-                    onClick={() => handlePresetClick(preset)}
-                  >
-                    {preset.label}
-                  </button>
-                ))}
+              <div className="flex shrink-0 gap-0.5 border-solid border-semantic-border-layout p-3 max-sm:w-full max-sm:flex-row max-sm:overflow-x-auto max-sm:border-b sm:w-36 sm:flex-col sm:border-r">
+                {presets.map((preset) => {
+                  const presetDisabled =
+                    clampRange(preset.getRange(), effectiveMinDate, maxDate) ===
+                    null;
+
+                  return (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      disabled={presetDisabled}
+                      className={cn(
+                        "shrink-0 whitespace-nowrap rounded px-2 py-2 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover max-sm:border max-sm:border-solid max-sm:border-semantic-border-layout sm:w-full sm:py-1.5",
+                        presetDisabled &&
+                          "cursor-not-allowed opacity-40 hover:bg-transparent"
+                      )}
+                      onClick={() => handlePresetClick(preset)}
+                    >
+                      {preset.label}
+                    </button>
+                  );
+                })}
               </div>
             )}
 
-            <div className="min-w-[272px] flex-1 p-3 touch-pan-y">
+            <div className="min-w-0 flex-1 p-3 touch-pan-y sm:min-w-[272px]">
               <div className="mb-3 flex items-center justify-between gap-2">
                 <button
                   type="button"
@@ -3120,10 +3203,25 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                   id={\`\${triggerId}-calendar-heading\`}
                   className="flex items-center gap-2"
                 >
-                  <DropdownMenu>
+                  <DropdownMenu
+                    modal={false}
+                    open={openMenu === "month"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenMenu((current) => {
+                        if (nextOpen) return "month";
+                        // Clicking the other trigger dismisses this menu
+                        // *after* the other one has opened \u2014 only clear the
+                        // slot if it is still ours.
+                        return current === "month" ? null : current;
+                      })
+                    }
+                  >
                     <DropdownMenuTrigger asChild>
                       <button
                         type="button"
+                        data-calendar-menu="month"
+                        onPointerDown={(event) => event.preventDefault()}
+                        onClick={() => toggleCalendarMenu("month")}
                         className="rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                       >
                         {MONTH_LONG_NAMES[visibleMonth.getMonth()]}
@@ -3131,11 +3229,23 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
+                      // Closing must not pull focus back to the trigger: the
+                      // sibling menu opening in the same click would then see
+                      // focus land outside itself and dismiss immediately.
+                      onCloseAutoFocus={(event) => event.preventDefault()}
                       className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
                     >
                       {MONTH_LONG_NAMES.map((label, monthIndex) => (
                         <DropdownMenuItem
                           key={label}
+                          disabled={
+                            !isMonthSelectable(
+                              visibleMonth.getFullYear(),
+                              monthIndex,
+                              effectiveMinDate,
+                              maxDate
+                            )
+                          }
                           onSelect={() =>
                             setVisibleMonth(
                               startOfMonth(
@@ -3150,10 +3260,25 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuContent>
                   </DropdownMenu>
 
-                  <DropdownMenu>
+                  <DropdownMenu
+                    modal={false}
+                    open={openMenu === "year"}
+                    onOpenChange={(nextOpen) =>
+                      setOpenMenu((current) => {
+                        if (nextOpen) return "year";
+                        // Clicking the other trigger dismisses this menu
+                        // *after* the other one has opened \u2014 only clear the
+                        // slot if it is still ours.
+                        return current === "year" ? null : current;
+                      })
+                    }
+                  >
                     <DropdownMenuTrigger asChild>
                       <button
                         type="button"
+                        data-calendar-menu="year"
+                        onPointerDown={(event) => event.preventDefault()}
+                        onClick={() => toggleCalendarMenu("year")}
                         className="flex items-center gap-1 rounded border border-solid border-semantic-border-layout px-3 py-1.5 text-sm font-semibold text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                       >
                         {visibleMonth.getFullYear()}
@@ -3165,12 +3290,13 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="start"
+                      // Closing must not pull focus back to the trigger: the
+                      // sibling menu opening in the same click would then see
+                      // focus land outside itself and dismiss immediately.
+                      onCloseAutoFocus={(event) => event.preventDefault()}
                       className={cn(CALENDAR_DROPDOWN_Z_INDEX, "max-h-[240px] overflow-y-auto")}
                     >
-                      {Array.from(
-                        { length: YEAR_OPTIONS_SPAN * 2 + 1 },
-                        (_, index) => visibleMonth.getFullYear() - YEAR_OPTIONS_SPAN + index
-                      ).map((year) => (
+                      {yearOptions.map((year) => (
                         <DropdownMenuItem
                           key={year}
                           onSelect={() =>
@@ -3198,11 +3324,11 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                 </button>
               </div>
 
-              <div className="grid grid-cols-7">
+              <div className="grid w-full grid-cols-7">
                 {weekDays.map((day) => (
                   <div
                     key={day}
-                    className="flex h-8 items-center justify-center text-xs font-medium text-semantic-text-muted"
+                    className="flex h-9 items-center justify-center text-xs font-medium text-semantic-text-muted sm:h-8"
                   >
                     {day}
                   </div>
@@ -3238,7 +3364,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                     <div
                       key={day.toISOString()}
                       className={cn(
-                        "relative flex h-8 items-center justify-center",
+                        "relative flex h-9 items-center justify-center sm:h-8",
                         isInBand && "bg-semantic-info-surface",
                         isRangeStart && hasRange && "rounded-l-full",
                         isRangeEnd && hasRange && "rounded-r-full"
@@ -3251,7 +3377,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
                         aria-current={isToday ? "date" : undefined}
                         disabled={!!isDisabled}
                         className={cn(
-                          "relative flex size-8 items-center justify-center rounded-full text-xs transition-colors",
+                          "relative flex h-9 w-full max-w-9 items-center justify-center rounded-full text-xs transition-colors sm:h-8 sm:max-w-8",
                           isSelectedEdge
                             ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
                             : isCurrentMonth
@@ -3408,9 +3534,9 @@ const dateTimePickerTriggerVariants = cva(
   {
     variants: {
       size: {
-        sm: "h-9 gap-2 rounded-lg px-3 py-2 text-sm",
-        default: "h-[42px] gap-2 rounded-lg px-4 py-2.5 text-base",
-        lg: "h-[42px] gap-2 rounded-lg px-4 py-2.5 text-base",
+        sm: "h-9 gap-2 rounded px-3 py-2 text-sm",
+        default: "h-[42px] gap-2 rounded px-4 py-2.5 text-base",
+        lg: "h-[42px] gap-2 rounded px-4 py-2.5 text-base",
       },
       state: {
         default: "",
@@ -4604,7 +4730,7 @@ function TimeField({
         aria-haspopup="listbox"
         aria-expanded={open}
         className={cn(
-          "flex h-[42px] w-full items-center gap-2 rounded-lg border border-solid border-semantic-border-input bg-semantic-bg-primary px-3 text-left text-base text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50",
+          "flex h-[42px] w-full items-center gap-2 rounded border border-solid border-semantic-border-input bg-semantic-bg-primary px-3 text-left text-base text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50",
           open &&
             "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
         )}

package/package.json

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