@reykjavik/hanna-react 0.10.125 → 0.10.126

package/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.126
+
+_2024-06-05_
+
+- `FocusTrap`:
+  - feat: Add className to wrapper element
+  - fix: Exclude `FocusTrap` elements from list of eligible focusables
+- fix: Mishandled focus-managment of `Modal` while open
+
 ## 0.10.125
 
 _2024-04-10_

package/FocusTrap.d.ts

@@ -11,8 +11,9 @@ export type FocusTrapProps = {
     depth?: number;
 };
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/FocusTrap.js

@@ -4,13 +4,14 @@ exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
-    return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+    return (react_1.default.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
             var _a;
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
@@ -20,7 +21,7 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const targetIdx = props.atTop ? focusables.length - 1 : 0;
             (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
         } }));

package/_abstract/_AbstractModal.d.ts

@@ -45,9 +45,10 @@ export type AbstractModalProps = {
      * defined then `stable` takes precedence.
      */
     fickle?: boolean;
-    /** Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+    /**
+     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
      *
-     * However, the initial `onOpen` is skipped  `startOpen` is set to `true`.
+     * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */
     onOpen?: () => void;
     /**

package/_abstract/_AbstractModal.js

@@ -62,9 +62,9 @@ const AbstractModal = (props) => {
             addToModalStack(privateDomId);
             setTimeout(() => {
                 setOpen(true);
-                props.onOpen && props.onOpen();
-                (0, focusElm_1.focusElm)(modalElmRef.current);
-            }, 100);
+                (0, focusElm_1.focusElm)(modalElmRef.current, { delay: 50 });
+                props.onOpen && props.onOpen(); // allow onOpen to move focus to a new place....
+            }, 50);
         }
     };
     const closeModal = () => {
@@ -126,6 +126,6 @@ const AbstractModal = (props) => {
             react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
-            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }))));
+            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null))));
 };
 exports.AbstractModal = AbstractModal;

package/esm/FocusTrap.d.ts

@@ -11,8 +11,9 @@ export type FocusTrapProps = {
     depth?: number;
 };
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/esm/FocusTrap.js

@@ -1,12 +1,13 @@
 import React from 'react';
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
-    return (React.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+    return (React.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
             var _a;
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
@@ -16,7 +17,7 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const targetIdx = props.atTop ? focusables.length - 1 : 0;
             (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
         } }));

package/esm/_abstract/_AbstractModal.d.ts

@@ -45,9 +45,10 @@ export type AbstractModalProps = {
      * defined then `stable` takes precedence.
      */
     fickle?: boolean;
-    /** Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+    /**
+     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
      *
-     * However, the initial `onOpen` is skipped  `startOpen` is set to `true`.
+     * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */
     onOpen?: () => void;
     /**

package/esm/_abstract/_AbstractModal.js

@@ -58,9 +58,9 @@ export const AbstractModal = (props) => {
             addToModalStack(privateDomId);
             setTimeout(() => {
                 setOpen(true);
-                props.onOpen && props.onOpen();
-                focusElm(modalElmRef.current);
-            }, 100);
+                focusElm(modalElmRef.current, { delay: 50 });
+                props.onOpen && props.onOpen(); // allow onOpen to move focus to a new place....
+            }, 50);
         }
     };
     const closeModal = () => {
@@ -122,5 +122,5 @@ export const AbstractModal = (props) => {
             React.createElement("div", { className: modifiedClass(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (React.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
-            isBrowser && React.createElement(FocusTrap, { atTop: true }))));
+            isBrowser && React.createElement(FocusTrap, null))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.125",
+	"version": "0.10.126",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",