@mirohq/design-system-calendar 2.5.9 → 2.5.11

package/dist/main.js

@@ -716,6 +716,37 @@ const Header = ({
     }
     return "";
   };
+  const prevButtonRef = React.useRef(null);
+  const nextButtonRef = React.useRef(null);
+  const titleButtonRef = React.useRef(null);
+  const focusedStepRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    var _a;
+    const focusedStep = focusedStepRef.current;
+    if (focusedStep === null) return;
+    const isPrev = focusedStep === "prev";
+    const isFocusedStepDisabled = (isPrev ? isPrevDisabled : isNextDisabled) === true;
+    if (!isFocusedStepDisabled) return;
+    const disabledButton = isPrev ? prevButtonRef.current : nextButtonRef.current;
+    const otherButton = isPrev ? nextButtonRef.current : prevButtonRef.current;
+    const activeElement = disabledButton == null ? void 0 : disabledButton.ownerDocument.activeElement;
+    focusedStepRef.current = null;
+    if (activeElement != null && activeElement !== disabledButton && activeElement !== (disabledButton == null ? void 0 : disabledButton.ownerDocument.body)) {
+      return;
+    }
+    const fallback = (_a = titleButtonRef.current) != null ? _a : (otherButton == null ? void 0 : otherButton.disabled) === false ? otherButton : null;
+    fallback == null ? void 0 : fallback.focus();
+  }, [isPrevDisabled, isNextDisabled]);
+  const trackStepFocus = (step) => ({
+    onFocus: () => {
+      focusedStepRef.current = step;
+    },
+    // A button that disables itself blurs with no relatedTarget; keep tracking
+    // it so the effect above can still hand focus on.
+    onBlur: (event) => {
+      if (event.relatedTarget !== null) focusedStepRef.current = null;
+    }
+  });
   const isTopLevel = viewMode === "years";
   const showClickableTitle = navigation === true && !isTopLevel;
   const isDayView = viewMode === "days";
@@ -727,15 +758,18 @@ const Header = ({
     isDayView ? /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
       HeaderButton,
       {
+        ref: prevButtonRef,
         "aria-label": stepLabels.prev,
         isDisabled: isPrevDisabled,
         onClick: onPrevOverride,
+        ...trackStepFocus("prev"),
         children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: showClickableTitle ? /* @__PURE__ */ jsxRuntime.jsx(
       StyledHeaderTitleButton,
       {
+        ref: titleButtonRef,
         onClick: onZoomOut,
         "aria-label": (formatSwitchViewLabel != null ? formatSwitchViewLabel : strings.switchView)(
           getTitleText(),
@@ -753,9 +787,11 @@ const Header = ({
     isDayView ? /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
       HeaderButton,
       {
+        ref: nextButtonRef,
         "aria-label": stepLabels.next,
         isDisabled: isNextDisabled,
         onClick: onNextOverride,
+        ...trackStepFocus("next"),
         children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {})
       }
     )