@atlaskit/top-layer 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/top-layer
 
+## 1.7.0
+
+### Minor Changes
+
+- [`406346f89178f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/406346f89178f) -
+  Fix a Safari (WebKit) layout bug where `Popover` content could collapse to `0px`. When a
+  `max-height: 100%` flex column with a `flex: 1 1 auto; overflow: auto` child is placed inside a
+  popover, the user-agent `height: fit-content` default (an indefinite block size) makes the column
+  collapse on WebKit. The `Popover` reset now sets `height: auto` to remove the indefinite block
+  size; width is left unchanged so anchor-width matching is unaffected.
+
+  The `Dialog` primitive is intentionally left unchanged for that reset: applying the same reset
+  there would stretch the modal `<dialog>` to fill the viewport and force a layout-centering opinion
+  onto an otherwise unopinionated primitive. See `notes/decisions/safari-popover-flex-collapse.md`.
+
+  Also fix a Safari (WebKit) bug where pressing `Escape` while a `popover="auto"` (for example a
+  menu) is open inside a modal `Dialog` closed the entire dialog instead of only the popover. On
+  WebKit the same Escape also fires the dialog's native `cancel` event. The `Dialog` primitive now
+  snapshots — at Escape keydown, before the browser's close action — whether a light-dismissable
+  (`auto`/`hint`) popover is open inside it, and if so keeps the dialog open so only the popover is
+  dismissed, matching Chromium and Firefox. See
+  `notes/decisions/safari-escape-nested-popover-in-dialog.md`.
+
 ## 1.6.1
 
 ### Patch Changes

package/README.md

@@ -178,6 +178,19 @@ details.
 | Background inertness (modal dialogs) | ✓            |
 | Close reasons (Dialog)               | ✓            |
 
+## Known limitations
+
+- **Safari `<dialog>` flex-collapse.** On WebKit, a `max-height: 100%` flex column with a
+  `flex: 1 1 auto; overflow: auto` child placed directly inside a `Dialog` collapses to `0px` (the
+  block-axis `fit-content` user-agent default is an indefinite height). `Popover` sets
+  `height: auto` to avoid this; `Dialog` deliberately does not, to keep the primitive free of layout
+  opinions (see
+  [`notes/decisions/safari-popover-flex-collapse.md`](notes/decisions/safari-popover-flex-collapse.md)).
+  A consumer that builds this shape inside a `Dialog` should give the column a definite height or
+  apply its own `height: auto` reset on the surface.
+  - TODO: expand this into full public consumer documentation (the recommended workaround and a
+    worked example) before the top-layer `Dialog` is broadly adopted.
+
 ## Documentation
 
 See [`notes/`](notes/) for project documentation, architecture decisions, migration records, and

package/dist/cjs/dialog/dialog-content.js

@@ -16,6 +16,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
+var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // These animation styles use the non-strict Compiled cssMap because they rely
 // on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
@@ -124,6 +125,14 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     }
   }, [isOpen]);
 
+  // Safari bug: escape closes open dialog and popovers, rather than just innermost popover
+  // See notes/decisions/safari-escape-nested-popover-in-dialog.md
+  var _useSafariEscapeFix = (0, _useSafariEscapeFix2.useSafariEscapeFix)({
+      dialogRef: ownRef,
+      isVisible: isVisible
+    }),
+    shouldIgnoreEscape = _useSafariEscapeFix.shouldIgnoreEscape;
+
   // Handle native Escape (cancel event)
   var handleCancel = (0, _react.useCallback)(function (event) {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -135,10 +144,16 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       return;
     }
     event.preventDefault();
+    // Spurious Safari `cancel`: the keydown snapshot saw an open child
+    // popover, so this Escape belongs to that popover (light-dismissed
+    // natively). Keep the dialog open instead of forwarding to `onClose`.
+    if (shouldIgnoreEscape()) {
+      return;
+    }
     onClose({
       reason: 'escape'
     });
-  }, [onClose]);
+  }, [onClose, shouldIgnoreEscape]);
 
   // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid

package/dist/cjs/internal/use-safari-escape-fix.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSafariEscapeFix = useSafariEscapeFix;
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _isSafari = require("@atlaskit/ds-lib/is-safari");
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+function useSafariEscapeFix(_ref) {
+  var dialogRef = _ref.dialogRef,
+    isVisible = _ref.isVisible;
+  var childPopoverOpenAtEscapeRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!(0, _isSafari.isSafari)()) {
+      return;
+    }
+    var dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+
+    // Bind to `document`, not the dialog: on Safari focus can be on `<body>`
+    // (buttons are not focused on click), where a dialog-scoped listener would
+    // never fire. The query below stays scoped to this dialog's subtree.
+    return (0, _bindEventListener.bind)(document, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.key !== 'Escape') {
+          return;
+        }
+        try {
+          childPopoverOpenAtEscapeRef.current = Boolean(dialog.querySelector('[popover="auto"]:popover-open, [popover="hint"]:popover-open'));
+        } catch (_unused) {
+          // `:popover-open` is unsupported in some environments (e.g. jsdom);
+          // treat as "no child popover" so a plain Escape still closes the dialog.
+          childPopoverOpenAtEscapeRef.current = false;
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [dialogRef, isVisible]);
+  var api = (0, _react.useMemo)(function () {
+    return {
+      shouldIgnoreEscape: function shouldIgnoreEscape() {
+        if (childPopoverOpenAtEscapeRef.current) {
+          childPopoverOpenAtEscapeRef.current = false;
+          return true;
+        }
+        return false;
+      }
+    };
+  }, []);
+  return api;
+}

package/dist/cjs/popover/popover.compiled.css

@@ -14,6 +14,7 @@
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
+._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

package/dist/cjs/popover/popover.js

@@ -42,7 +42,7 @@ var popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`

package/dist/es2019/dialog/dialog-content.js

@@ -8,6 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
+import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
 // These animation styles use the non-strict Compiled cssMap because they rely
 // on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
 // component so the Compiled transform can statically extract every referenced
@@ -116,6 +117,15 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     }
   }, [isOpen]);
 
+  // Safari bug: escape closes open dialog and popovers, rather than just innermost popover
+  // See notes/decisions/safari-escape-nested-popover-in-dialog.md
+  const {
+    shouldIgnoreEscape
+  } = useSafariEscapeFix({
+    dialogRef: ownRef,
+    isVisible
+  });
+
   // Handle native Escape (cancel event)
   const handleCancel = useCallback(event => {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -127,10 +137,16 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
       return;
     }
     event.preventDefault();
+    // Spurious Safari `cancel`: the keydown snapshot saw an open child
+    // popover, so this Escape belongs to that popover (light-dismissed
+    // natively). Keep the dialog open instead of forwarding to `onClose`.
+    if (shouldIgnoreEscape()) {
+      return;
+    }
     onClose({
       reason: 'escape'
     });
-  }, [onClose]);
+  }, [onClose, shouldIgnoreEscape]);
 
   // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid

package/dist/es2019/internal/use-safari-escape-fix.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { isSafari } from '@atlaskit/ds-lib/is-safari';
+
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+export function useSafariEscapeFix({
+  dialogRef,
+  isVisible
+}) {
+  const childPopoverOpenAtEscapeRef = useRef(false);
+  useEffect(() => {
+    if (!isSafari()) {
+      return;
+    }
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+
+    // Bind to `document`, not the dialog: on Safari focus can be on `<body>`
+    // (buttons are not focused on click), where a dialog-scoped listener would
+    // never fire. The query below stays scoped to this dialog's subtree.
+    return bind(document, {
+      type: 'keydown',
+      listener(event) {
+        if (event.key !== 'Escape') {
+          return;
+        }
+        try {
+          childPopoverOpenAtEscapeRef.current = Boolean(dialog.querySelector('[popover="auto"]:popover-open, [popover="hint"]:popover-open'));
+        } catch {
+          // `:popover-open` is unsupported in some environments (e.g. jsdom);
+          // treat as "no child popover" so a plain Escape still closes the dialog.
+          childPopoverOpenAtEscapeRef.current = false;
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [dialogRef, isVisible]);
+  const api = useMemo(() => {
+    return {
+      shouldIgnoreEscape() {
+        if (childPopoverOpenAtEscapeRef.current) {
+          childPopoverOpenAtEscapeRef.current = false;
+          return true;
+        }
+        return false;
+      }
+    };
+  }, []);
+  return api;
+}

package/dist/es2019/popover/popover.compiled.css

@@ -14,6 +14,7 @@
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
+._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

package/dist/es2019/popover/popover.js

@@ -33,7 +33,7 @@ const popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 const styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`

package/dist/esm/dialog/dialog-content.js

@@ -8,6 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
+import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
 // These animation styles use the non-strict Compiled cssMap because they rely
 // on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
 // component so the Compiled transform can statically extract every referenced
@@ -115,6 +116,14 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     }
   }, [isOpen]);
 
+  // Safari bug: escape closes open dialog and popovers, rather than just innermost popover
+  // See notes/decisions/safari-escape-nested-popover-in-dialog.md
+  var _useSafariEscapeFix = useSafariEscapeFix({
+      dialogRef: ownRef,
+      isVisible: isVisible
+    }),
+    shouldIgnoreEscape = _useSafariEscapeFix.shouldIgnoreEscape;
+
   // Handle native Escape (cancel event)
   var handleCancel = useCallback(function (event) {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -126,10 +135,16 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
       return;
     }
     event.preventDefault();
+    // Spurious Safari `cancel`: the keydown snapshot saw an open child
+    // popover, so this Escape belongs to that popover (light-dismissed
+    // natively). Keep the dialog open instead of forwarding to `onClose`.
+    if (shouldIgnoreEscape()) {
+      return;
+    }
     onClose({
       reason: 'escape'
     });
-  }, [onClose]);
+  }, [onClose, shouldIgnoreEscape]);
 
   // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid

package/dist/esm/internal/use-safari-escape-fix.js

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { isSafari } from '@atlaskit/ds-lib/is-safari';
+
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+export function useSafariEscapeFix(_ref) {
+  var dialogRef = _ref.dialogRef,
+    isVisible = _ref.isVisible;
+  var childPopoverOpenAtEscapeRef = useRef(false);
+  useEffect(function () {
+    if (!isSafari()) {
+      return;
+    }
+    var dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+
+    // Bind to `document`, not the dialog: on Safari focus can be on `<body>`
+    // (buttons are not focused on click), where a dialog-scoped listener would
+    // never fire. The query below stays scoped to this dialog's subtree.
+    return bind(document, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.key !== 'Escape') {
+          return;
+        }
+        try {
+          childPopoverOpenAtEscapeRef.current = Boolean(dialog.querySelector('[popover="auto"]:popover-open, [popover="hint"]:popover-open'));
+        } catch (_unused) {
+          // `:popover-open` is unsupported in some environments (e.g. jsdom);
+          // treat as "no child popover" so a plain Escape still closes the dialog.
+          childPopoverOpenAtEscapeRef.current = false;
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [dialogRef, isVisible]);
+  var api = useMemo(function () {
+    return {
+      shouldIgnoreEscape: function shouldIgnoreEscape() {
+        if (childPopoverOpenAtEscapeRef.current) {
+          childPopoverOpenAtEscapeRef.current = false;
+          return true;
+        }
+        return false;
+      }
+    };
+  }, []);
+  return api;
+}

package/dist/esm/popover/popover.compiled.css

@@ -14,6 +14,7 @@
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
+._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

package/dist/esm/popover/popover.js

@@ -33,7 +33,7 @@ var popoverAnimationStyles = {
   root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`

package/dist/types/internal/use-safari-escape-fix.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+export declare function useSafariEscapeFix({ dialogRef, isVisible, }: {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    isVisible: boolean;
+}): {
+    shouldIgnoreEscape: () => boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.6.1",
+	"version": "1.7.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -29,7 +29,8 @@
 		},
 		"integrationTests": {
 			"additionalBrowsers": [
-				"desktop-firefox"
+				"desktop-firefox",
+				"desktop-webkit"
 			]
 		}
 	},
@@ -39,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.7.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",