colibri-ui 0.8.94 → 0.8.95

package/Modal/Modal.module.css

@@ -1,6 +1,7 @@
 .root {
   bottom: 0;
   height: 100%;
+  outline: none;
   position: fixed;
   top: 0;
   width: 100%;

package/Modal/index.js

@@ -32,7 +32,7 @@ const ModalRoot = ({
   title,
   withinParent = false
 }) => {
-  const modalRef = React.useRef(null);
+  const [dialog, setDialog] = React.useState(null);
   const [container, setContainer] = React.useState(null);
   const parentModal = React.useContext(context.ModalContext);
   const parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
@@ -42,7 +42,7 @@ const ModalRoot = ({
   const [titleCount, setTitleCount] = React.useState(0);
   const isTopmost = index$5.useModalStack(titleId);
   index$6.useScrollLock();
-  index$7.useTrapFocus(modalRef, isTopmost);
+  index$7.useTrapFocus(dialog, isTopmost);
   const handleClose = React.useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
@@ -50,10 +50,6 @@ const ModalRoot = ({
     setTitleCount(count => count + 1);
     return () => setTitleCount(count => count - 1);
   }, []);
-  const setWrapperRef = React.useCallback(node => {
-    modalRef.current = node;
-    setContainer(node);
-  }, []);
   const contextValue = React.useMemo(() => ({
     onClose: handleClose,
     titleId,
@@ -99,8 +95,10 @@ const ModalRoot = ({
     className: clsx__default.default(styles__default.default.root, {
       [styles__default.default.root_contained]: isContained
     }),
+    ref: setDialog,
     role: "dialog",
     "aria-modal": "true",
+    tabIndex: -1,
     "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["modal-overlay"],
@@ -112,7 +110,7 @@ const ModalRoot = ({
       [styles__default.default["modal-wrapper_mobile"]]: !isDesktop,
       [styles__default.default["modal-wrapper_contained"]]: isContained
     }, className),
-    ref: setWrapperRef
+    ref: setContainer
   }, content))));
 };
 const Modal = Object.assign(ModalRoot, {

package/esm/Modal/Modal.module.css

@@ -1,6 +1,7 @@
 .root {
   bottom: 0;
   height: 100%;
+  outline: none;
   position: fixed;
   top: 0;
   width: 100%;

package/esm/Modal/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useId, useCallback, useMemo, useEffect, Children, isValidElement } from 'react';
+import React, { useState, useContext, useId, useCallback, useMemo, useEffect, Children, isValidElement } from 'react';
 import clsx from 'clsx';
 import { useScrollLock } from '../hooks/useScrollLock/index.js';
 import { useTrapFocus } from '../hooks/useTrapFocus/index.js';
@@ -24,7 +24,7 @@ const ModalRoot = ({
   title,
   withinParent = false
 }) => {
-  const modalRef = useRef(null);
+  const [dialog, setDialog] = useState(null);
   const [container, setContainer] = useState(null);
   const parentModal = useContext(ModalContext);
   const parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
@@ -34,7 +34,7 @@ const ModalRoot = ({
   const [titleCount, setTitleCount] = useState(0);
   const isTopmost = useModalStack(titleId);
   useScrollLock();
-  useTrapFocus(modalRef, isTopmost);
+  useTrapFocus(dialog, isTopmost);
   const handleClose = useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
@@ -42,10 +42,6 @@ const ModalRoot = ({
     setTitleCount(count => count + 1);
     return () => setTitleCount(count => count - 1);
   }, []);
-  const setWrapperRef = useCallback(node => {
-    modalRef.current = node;
-    setContainer(node);
-  }, []);
   const contextValue = useMemo(() => ({
     onClose: handleClose,
     titleId,
@@ -91,8 +87,10 @@ const ModalRoot = ({
     className: clsx(styles.root, {
       [styles.root_contained]: isContained
     }),
+    ref: setDialog,
     role: "dialog",
     "aria-modal": "true",
+    tabIndex: -1,
     "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: styles["modal-overlay"],
@@ -104,7 +102,7 @@ const ModalRoot = ({
       [styles["modal-wrapper_mobile"]]: !isDesktop,
       [styles["modal-wrapper_contained"]]: isContained
     }, className),
-    ref: setWrapperRef
+    ref: setContainer
   }, content))));
 };
 const Modal = Object.assign(ModalRoot, {

package/esm/hooks/useTrapFocus/index.d.ts

@@ -1,2 +1,7 @@
-import type { RefObject } from "react";
-export declare function useTrapFocus(refObject: RefObject<HTMLElement | null>, isActive?: () => boolean): void;
+/**
+ * Moves focus into `element` when it mounts (first focusable element, or the
+ * element itself, which needs tabIndex={-1}), keeps Tab inside it while
+ * `isActive` returns true, and returns focus to the previously focused
+ * element when it unmounts.
+ */
+export declare function useTrapFocus(element: HTMLElement | null, isActive?: () => boolean): void;

package/esm/hooks/useTrapFocus/index.js

@@ -1,15 +1,70 @@
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
-const getFocusableModalElements = element => element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
-function useTrapFocus(refObject, isActive) {
+const candidateSelector = ["a[href]", "button", "textarea", 'input:not([type="hidden"])', "select", "[tabindex]", '[role="button"]'].join(",");
+// The selector only finds candidates: `[tabindex]` also matches disabled
+// controls and `[role="button"]` alone does not make an element focusable.
+const isTabbable = node => node.tabIndex >= 0 && !node.matches(":disabled");
+const getFocusableElements = element => Array.from(element.querySelectorAll(candidateSelector)).filter(isTabbable);
+// Open traps in mount order, so a closing trap can hand its saved focus to
+// traps opened on top of it.
+const focusStack = [];
+/**
+ * Moves focus into `element` when it mounts (first focusable element, or the
+ * element itself, which needs tabIndex={-1}), keeps Tab inside it while
+ * `isActive` returns true, and returns focus to the previously focused
+ * element when it unmounts.
+ */
+function useTrapFocus(element, isActive) {
+  // Read during render, before children with autoFocus take focus.
+  const previousFocusRef = useRef(null);
+  if (!element && typeof document !== "undefined") {
+    previousFocusRef.current = document.activeElement;
+  }
   useEffect(() => {
+    var _a;
+    if (!element) return;
+    const entry = {
+      element,
+      previousFocus: previousFocusRef.current
+    };
+    focusStack.push(entry);
+    if (!element.contains(document.activeElement)) {
+      ((_a = getFocusableElements(element)[0]) !== null && _a !== void 0 ? _a : element).focus();
+    }
+    return () => {
+      focusStack.splice(focusStack.indexOf(entry), 1);
+      // Traps opened from inside this one would restore focus to a removed
+      // element; give them the focus this trap saved instead.
+      focusStack.forEach(other => {
+        if (element.contains(other.previousFocus)) {
+          other.previousFocus = entry.previousFocus;
+        }
+      });
+      // Focus inside another trap stays there. Focus removed with this
+      // element falls back to body.
+      const active = document.activeElement;
+      const ownsFocus = !active || active === document.body || element.contains(active);
+      const {
+        previousFocus
+      } = entry;
+      if (ownsFocus && previousFocus instanceof HTMLElement && previousFocus.isConnected) {
+        previousFocus.focus();
+      }
+    };
+  }, [element]);
+  useEffect(() => {
+    if (!element) return;
     const handler = event => {
-      if (!refObject.current || event.code !== "Tab") return;
+      if (event.key !== "Tab") return;
       if (isActive && !isActive()) return;
-      const focusable = Array.from(getFocusableModalElements(refObject.current));
+      const focusable = getFocusableElements(element);
       const firstElement = focusable[0];
       const lastElement = focusable[focusable.length - 1];
-      if (!lastElement || !firstElement) return;
+      if (!lastElement || !firstElement) {
+        event.preventDefault();
+        element.focus();
+        return;
+      }
       const focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
       if (event.shiftKey && (document.activeElement === firstElement || focusOutside)) {
         lastElement.focus();
@@ -23,7 +78,7 @@ function useTrapFocus(refObject, isActive) {
     return () => {
       document.removeEventListener("keydown", handler);
     };
-  }, [refObject, isActive]);
+  }, [element, isActive]);
 }
 
 export { useTrapFocus };

package/hooks/useTrapFocus/index.d.ts

@@ -1,2 +1,7 @@
-import type { RefObject } from "react";
-export declare function useTrapFocus(refObject: RefObject<HTMLElement | null>, isActive?: () => boolean): void;
+/**
+ * Moves focus into `element` when it mounts (first focusable element, or the
+ * element itself, which needs tabIndex={-1}), keeps Tab inside it while
+ * `isActive` returns true, and returns focus to the previously focused
+ * element when it unmounts.
+ */
+export declare function useTrapFocus(element: HTMLElement | null, isActive?: () => boolean): void;

package/hooks/useTrapFocus/index.js

@@ -2,16 +2,71 @@
 
 var React = require('react');
 
-const getFocusableModalElements = element => element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="password"], input[type="radio"], input[type="checkbox"], select');
-function useTrapFocus(refObject, isActive) {
+const candidateSelector = ["a[href]", "button", "textarea", 'input:not([type="hidden"])', "select", "[tabindex]", '[role="button"]'].join(",");
+// The selector only finds candidates: `[tabindex]` also matches disabled
+// controls and `[role="button"]` alone does not make an element focusable.
+const isTabbable = node => node.tabIndex >= 0 && !node.matches(":disabled");
+const getFocusableElements = element => Array.from(element.querySelectorAll(candidateSelector)).filter(isTabbable);
+// Open traps in mount order, so a closing trap can hand its saved focus to
+// traps opened on top of it.
+const focusStack = [];
+/**
+ * Moves focus into `element` when it mounts (first focusable element, or the
+ * element itself, which needs tabIndex={-1}), keeps Tab inside it while
+ * `isActive` returns true, and returns focus to the previously focused
+ * element when it unmounts.
+ */
+function useTrapFocus(element, isActive) {
+  // Read during render, before children with autoFocus take focus.
+  const previousFocusRef = React.useRef(null);
+  if (!element && typeof document !== "undefined") {
+    previousFocusRef.current = document.activeElement;
+  }
   React.useEffect(() => {
+    var _a;
+    if (!element) return;
+    const entry = {
+      element,
+      previousFocus: previousFocusRef.current
+    };
+    focusStack.push(entry);
+    if (!element.contains(document.activeElement)) {
+      ((_a = getFocusableElements(element)[0]) !== null && _a !== void 0 ? _a : element).focus();
+    }
+    return () => {
+      focusStack.splice(focusStack.indexOf(entry), 1);
+      // Traps opened from inside this one would restore focus to a removed
+      // element; give them the focus this trap saved instead.
+      focusStack.forEach(other => {
+        if (element.contains(other.previousFocus)) {
+          other.previousFocus = entry.previousFocus;
+        }
+      });
+      // Focus inside another trap stays there. Focus removed with this
+      // element falls back to body.
+      const active = document.activeElement;
+      const ownsFocus = !active || active === document.body || element.contains(active);
+      const {
+        previousFocus
+      } = entry;
+      if (ownsFocus && previousFocus instanceof HTMLElement && previousFocus.isConnected) {
+        previousFocus.focus();
+      }
+    };
+  }, [element]);
+  React.useEffect(() => {
+    if (!element) return;
     const handler = event => {
-      if (!refObject.current || event.code !== "Tab") return;
+      if (event.key !== "Tab") return;
       if (isActive && !isActive()) return;
-      const focusable = Array.from(getFocusableModalElements(refObject.current));
+      const focusable = getFocusableElements(element);
       const firstElement = focusable[0];
       const lastElement = focusable[focusable.length - 1];
-      if (!lastElement || !firstElement) return;
+      if (!lastElement || !firstElement) {
+        event.preventDefault();
+        element.focus();
+        return;
+      }
       const focusOutside = document.activeElement ? !focusable.includes(document.activeElement) : true;
       if (event.shiftKey && (document.activeElement === firstElement || focusOutside)) {
         lastElement.focus();
@@ -25,7 +80,7 @@ function useTrapFocus(refObject, isActive) {
     return () => {
       document.removeEventListener("keydown", handler);
     };
-  }, [refObject, isActive]);
+  }, [element, isActive]);
 }
 
 exports.useTrapFocus = useTrapFocus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.94",
+  "version": "0.8.95",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",