colibri-ui 0.8.81 → 0.8.82

package/Modal/index.js

@@ -4,18 +4,18 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var clsx = require('clsx');
-var index$5 = require('../hooks/useScrollLock/index.js');
-var index$6 = require('../hooks/useTrapFocus/index.js');
-var index$9 = require('../Portal/index.js');
+var index$6 = require('../hooks/useScrollLock/index.js');
+var index$7 = require('../hooks/useTrapFocus/index.js');
+var index$5 = require('../hooks/useModalStack/index.js');
+var index$a = require('../Portal/index.js');
 var index$4 = require('../hooks/useMediaSizes/index.js');
 var index = require('./components/Body/index.js');
-var index$7 = require('./components/Close/index.js');
-var index$8 = require('./components/Content/index.js');
+var index$8 = require('./components/Close/index.js');
+var index$9 = require('./components/Content/index.js');
 var index$1 = require('./components/Footer/index.js');
 var index$2 = require('./components/Header/index.js');
 var index$3 = require('./components/Title/index.js');
 var context = require('./context.js');
-var useModalStack = require('./useModalStack.js');
 var styles = require('./Modal.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -58,9 +58,9 @@ var ModalRoot = function ModalRoot(_ref) {
     _useState4 = _slicedToArray__default.default(_useState3, 2),
     titleCount = _useState4[0],
     setTitleCount = _useState4[1];
-  var isTopmost = useModalStack.useModalStack(titleId);
-  index$5.useScrollLock();
-  index$6.useTrapFocus(modalRef, isTopmost);
+  var isTopmost = index$5.useModalStack(titleId);
+  index$6.useScrollLock();
+  index$7.useTrapFocus(modalRef, isTopmost);
   var handleClose = React.useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
@@ -93,7 +93,9 @@ var ModalRoot = function ModalRoot(_ref) {
   }, [handleClose]);
   React.useEffect(function () {
     var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape" && isTopmost()) {
+      // A layer that closed on this Escape already called preventDefault.
+      if (event.key === "Escape" && !event.defaultPrevented && isTopmost()) {
+        event.preventDefault();
         handleClose();
       }
     };
@@ -105,7 +107,7 @@ var ModalRoot = function ModalRoot(_ref) {
   var isCompound = React.Children.toArray(children).some(isCompoundPart);
   var standaloneClose = /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["close-wrapper"]
-  }, /*#__PURE__*/React__default.default.createElement(index$7.Close, {
+  }, /*#__PURE__*/React__default.default.createElement(index$8.Close, {
     onClick: handleClose,
     "aria-label": "Close modal"
   }));
@@ -113,11 +115,11 @@ var ModalRoot = function ModalRoot(_ref) {
   if (isCompound) {
     content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, !hasHeader(children) && standaloneClose, children);
   } else {
-    content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, title ? (/*#__PURE__*/React__default.default.createElement(index$2.Header, null, /*#__PURE__*/React__default.default.createElement(index$3.Title, null, title))) : standaloneClose, /*#__PURE__*/React__default.default.createElement(index$8.Content, null, children));
+    content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, title ? (/*#__PURE__*/React__default.default.createElement(index$2.Header, null, /*#__PURE__*/React__default.default.createElement(index$3.Title, null, title))) : standaloneClose, /*#__PURE__*/React__default.default.createElement(index$9.Content, null, children));
   }
   // Wait for the parent window node instead of flashing in document.body.
   if (withinParent && parentModal && !parentContainer) return null;
-  return /*#__PURE__*/React__default.default.createElement(index$9.Portal, {
+  return /*#__PURE__*/React__default.default.createElement(index$a.Portal, {
     node: parentContainer
   }, /*#__PURE__*/React__default.default.createElement(context.ModalContext.Provider, {
     value: contextValue

package/Sheet/Sheet.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
+var index = require('../hooks/useModalStack/index.js');
 var styles = require('./Sheet.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -97,6 +98,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
   });
   var titleId = React.useId();
   var descriptionId = React.useId();
+  var isTopmost = index.useModalStack(titleId, open && modal);
   var setPanelRef = function setPanelRef(node) {
     panelRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
@@ -141,6 +143,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
       (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : first) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     });
     var onKeyDown = function onKeyDown(event) {
+      if (event.defaultPrevented || !isTopmost()) return;
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
         onOpenChange(false, "escape");
@@ -170,7 +173,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
       if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
       returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
     };
-  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef]);
+  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
   var startDrag = function startDrag(event) {
     if (!draggable || !panelRef.current) return;
     event.currentTarget.setPointerCapture(event.pointerId);

package/esm/Modal/index.js

@@ -4,6 +4,7 @@ import React, { useRef, useState, useContext, useId, useCallback, useMemo, useEf
 import clsx from 'clsx';
 import { useScrollLock } from '../hooks/useScrollLock/index.js';
 import { useTrapFocus } from '../hooks/useTrapFocus/index.js';
+import { useModalStack } from '../hooks/useModalStack/index.js';
 import { Portal } from '../Portal/index.js';
 import { useMediaSizes } from '../hooks/useMediaSizes/index.js';
 import { Body } from './components/Body/index.js';
@@ -13,7 +14,6 @@ import { Footer } from './components/Footer/index.js';
 import { Header } from './components/Header/index.js';
 import { Title } from './components/Title/index.js';
 import { ModalContext } from './context.js';
-import { useModalStack } from './useModalStack.js';
 import styles from './Modal.module.css';
 
 var compoundParts = [Header, Body, Footer];
@@ -83,7 +83,9 @@ var ModalRoot = function ModalRoot(_ref) {
   }, [handleClose]);
   useEffect(function () {
     var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape" && isTopmost()) {
+      // A layer that closed on this Escape already called preventDefault.
+      if (event.key === "Escape" && !event.defaultPrevented && isTopmost()) {
+        event.preventDefault();
         handleClose();
       }
     };

package/esm/Sheet/Sheet.js

@@ -4,6 +4,7 @@ import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef, useId, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
+import { useModalStack } from '../hooks/useModalStack/index.js';
 import styles from './Sheet.module.css';
 
 var defaultSnapPoints = ["60dvh"];
@@ -87,6 +88,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
   });
   var titleId = useId();
   var descriptionId = useId();
+  var isTopmost = useModalStack(titleId, open && modal);
   var setPanelRef = function setPanelRef(node) {
     panelRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
@@ -131,6 +133,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
       (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : first) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     });
     var onKeyDown = function onKeyDown(event) {
+      if (event.defaultPrevented || !isTopmost()) return;
       if (event.key === "Escape" && closeOnEscape) {
         event.preventDefault();
         onOpenChange(false, "escape");
@@ -160,7 +163,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
       if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
       returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
     };
-  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef]);
+  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
   var startDrag = function startDrag(event) {
     if (!draggable || !panelRef.current) return;
     event.currentTarget.setPointerCapture(event.pointerId);

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

@@ -0,0 +1,6 @@
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+export declare const useModalStack: (id: string, active?: boolean) => () => boolean;

package/esm/hooks/useModalStack/index.js

@@ -0,0 +1,24 @@
+import { useEffect, useCallback } from 'react';
+
+var stack = [];
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+var useModalStack = function useModalStack(id) {
+  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  useEffect(function () {
+    if (!active) return;
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id, active]);
+  return useCallback(function () {
+    return stack.length ? stack[stack.length - 1] === id : !active;
+  }, [id, active]);
+};
+
+export { useModalStack };

package/hooks/useModalStack/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+export declare const useModalStack: (id: string, active?: boolean) => () => boolean;

package/hooks/useModalStack/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+var stack = [];
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+var useModalStack = function useModalStack(id) {
+  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  React.useEffect(function () {
+    if (!active) return;
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id, active]);
+  return React.useCallback(function () {
+    return stack.length ? stack[stack.length - 1] === id : !active;
+  }, [id, active]);
+};
+
+exports.useModalStack = useModalStack;

package/package.json

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

package/Modal/useModalStack.d.ts

@@ -1,2 +0,0 @@
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-export declare const useModalStack: (id: string) => () => boolean;

package/Modal/useModalStack.js

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-var stack = [];
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-var useModalStack = function useModalStack(id) {
-  React.useEffect(function () {
-    stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
-      if (index !== -1) stack.splice(index, 1);
-    };
-  }, [id]);
-  return React.useCallback(function () {
-    return stack[stack.length - 1] === id;
-  }, [id]);
-};
-
-exports.useModalStack = useModalStack;

package/esm/Modal/useModalStack.d.ts

@@ -1,2 +0,0 @@
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-export declare const useModalStack: (id: string) => () => boolean;

package/esm/Modal/useModalStack.js

@@ -1,18 +0,0 @@
-import { useEffect, useCallback } from 'react';
-
-var stack = [];
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-var useModalStack = function useModalStack(id) {
-  useEffect(function () {
-    stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
-      if (index !== -1) stack.splice(index, 1);
-    };
-  }, [id]);
-  return useCallback(function () {
-    return stack[stack.length - 1] === id;
-  }, [id]);
-};
-
-export { useModalStack };