@kenos-ui/react-datepicker 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -74,6 +74,8 @@ interface DatePickerConfig {
     disabled?: boolean | ((date: Date) => boolean);
     readOnly: boolean;
     closeOnSelect: boolean;
+    /** Opt-in focus trap + aria-modal. Default: false (popup-policy). */
+    modal: boolean;
 }
 
 type RootProps = DatePickerRootProps & {

package/dist/index.d.ts

@@ -74,6 +74,8 @@ interface DatePickerConfig {
     disabled?: boolean | ((date: Date) => boolean);
     readOnly: boolean;
     closeOnSelect: boolean;
+    /** Opt-in focus trap + aria-modal. Default: false (popup-policy). */
+    modal: boolean;
 }
 
 type RootProps = DatePickerRootProps & {

package/dist/index.js

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useMemo, useRef, useState, useEffect,
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTimescape } from 'timescape/react';
 import { createPortal } from 'react-dom';
+import { restoreFocus, useClickOutside, useEscapeKey, useFocusTrap } from '@kenos-ui/utils';
 import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
 
 var __defProp = Object.defineProperty;
@@ -412,6 +413,7 @@ function resolveConfig(props) {
     mode: props.mode ?? "single",
     locale: props.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en-US"),
     readOnly: props.readOnly ?? false,
+    modal: props.modal ?? false,
     closeOnSelect: props.closeOnSelect ?? (props.mode !== "range" && props.mode !== "multiple"),
     ...props.weekStartsOn !== void 0 && { weekStartsOn: props.weekStartsOn },
     ...props.minDate !== void 0 && { minDate: props.minDate },
@@ -437,7 +439,7 @@ function resolveInitialValue(props) {
 }
 function useDatePicker(props) {
   const uid = useId();
-  const { mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect } = props;
+  const { mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect, modal } = props;
   const config = useMemo(
     () => resolveConfig({
       mode,
@@ -447,9 +449,10 @@ function useDatePicker(props) {
       maxDate,
       disabled,
       readOnly,
-      closeOnSelect
+      closeOnSelect,
+      modal
     }),
-    [mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect]
+    [mode, locale, weekStartsOn, minDate, maxDate, disabled, readOnly, closeOnSelect, modal]
   );
   const initialValue = resolveInitialValue(props);
   const [state, dispatch] = useReducer(
@@ -651,6 +654,7 @@ function Segments({
     }
     if (e.key === "Escape") {
       e.preventDefault();
+      e.stopPropagation();
       if (state.open) dispatch({ type: "CLOSE" });
     }
   }
@@ -801,76 +805,6 @@ function Trigger({ children, onClick, disabled, ...props }) {
     }
   );
 }
-function useClickOutside(refs, handler, enabled = true) {
-  const refsRef = useRef(refs);
-  refsRef.current = refs;
-  useEffect(() => {
-    if (!enabled) return;
-    function onPointerDown(e) {
-      const target = e.target;
-      if (refsRef.current.every((r) => !r.current?.contains(target))) {
-        handler();
-      }
-    }
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [enabled, handler]);
-}
-
-// src/utils/aria.ts
-function getFocusableElements(container) {
-  const selector = [
-    "a[href]",
-    "button:not([disabled])",
-    "input:not([disabled])",
-    "select:not([disabled])",
-    "textarea:not([disabled])",
-    '[tabindex]:not([tabindex="-1"])'
-  ].join(", ");
-  return Array.from(container.querySelectorAll(selector)).filter(
-    (el) => !el.closest("[hidden]") && el.offsetParent !== null
-  );
-}
-
-// src/date-picker/use-focus-trap.ts
-function useFocusTrap(containerRef, enabled = true) {
-  useEffect(() => {
-    if (!enabled || !containerRef.current) return;
-    const container = containerRef.current;
-    function onKeyDown(e) {
-      if (e.key !== "Tab") return;
-      const focusable = getFocusableElements(container);
-      if (!focusable.length) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    }
-    const observer = new MutationObserver(() => {
-      const active = document.activeElement;
-      if (active?.getAttribute("role") === "spinbutton") return;
-      if (!container.contains(active)) {
-        const firstFocusable = getFocusableElements(container)[0];
-        firstFocusable?.focus();
-      }
-    });
-    observer.observe(container, { childList: true, subtree: true });
-    container.addEventListener("keydown", onKeyDown);
-    return () => {
-      container.removeEventListener("keydown", onKeyDown);
-      observer.disconnect();
-    };
-  }, [enabled, containerRef]);
-}
 function toPlacement(side, align) {
   return align === "center" ? side : `${side}-${align}`;
 }
@@ -969,12 +903,22 @@ function Content({
     },
     [setFloating]
   );
-  useClickOutside(
-    [contentRef, triggerRef, inputRef, input0Ref, input1Ref],
-    () => dispatch({ type: "CLOSE" }),
-    isOpen
-  );
-  useFocusTrap(contentRef, isOpen);
+  const close = useCallback(() => {
+    const source = state.openSource;
+    dispatch({ type: "CLOSE" });
+    restoreFocus({
+      openSource: source === "input" ? "input" : source === "trigger" ? "trigger" : "unknown",
+      trigger: document.getElementById(ids.trigger),
+      input: document.getElementById(ids.input) ?? document.getElementById(`${ids.input}-0`)
+    });
+  }, [dispatch, ids.input, ids.trigger, state.openSource]);
+  useClickOutside([contentRef, triggerRef, inputRef, input0Ref, input1Ref], close, isOpen);
+  useEscapeKey({
+    enabled: isOpen,
+    stopPropagation: true,
+    onEscape: close
+  });
+  useFocusTrap(contentRef, isOpen && config.modal);
   const [transitionsReady, setTransitionsReady] = useState(false);
   useEffect(() => {
     if (!isOpen || !isPositioned) {
@@ -1003,7 +947,7 @@ function Content({
       ref: mergedRef,
       id: ids.content,
       role: "dialog",
-      "aria-modal": "true",
+      "aria-modal": config.modal ? "true" : void 0,
       "aria-labelledby": ids.label,
       "data-state": isOpen ? "open" : "closed",
       style: {
@@ -1017,14 +961,7 @@ function Content({
         ...isOpen && !transitionsReady ? { transition: "none" } : void 0,
         ...style
       },
-      onKeyDown: (e) => {
-        if (e.key === "Escape") {
-          e.preventDefault();
-          dispatch({ type: "CLOSE" });
-          document.getElementById(ids.trigger)?.focus();
-        }
-        onKeyDown?.(e);
-      },
+      onKeyDown,
       ...props,
       children: [
         /* @__PURE__ */ jsx(