@atlaskit/top-layer 5.0.4 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/top-layer
 
+## 5.1.0
+
+### Minor Changes
+
+- [`38dbf5a2b937f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38dbf5a2b937f) -
+  Use a manual popover for Select's built-in menu on the platform-dst-top-layer path so input and
+  menu interactions do not dismiss it. The menu owns Escape dismissal even when focus is outside
+  Select, and leaves already-cancelled Escape events alone. Custom menu portals retain ownership of
+  their dismissal. DatePicker defers top-layer Escape dismissal to Select, then restores focus after
+  the menu closes so an enclosing popup remains open.
+
+  Add `additionalInsideElementRefs` to Select and `useSimpleLightDismiss` so detached controls can
+  participate in a menu's light-dismiss boundary.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.4
 
 ### Patch Changes

package/dist/cjs/popover/popover.js

@@ -92,21 +92,21 @@ var popupMotionStyles = {
   block: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   },
   inline: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   }
 };

package/dist/cjs/use-simple-light-dismiss/index.js

@@ -24,6 +24,7 @@ var _bindEventListener = require("bind-event-listener");
  */
 function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
+    additionalInsideElementRefs = _ref.additionalInsideElementRefs,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
   // Keep a stable ref to onClose so the effect does not re-bind on every render.
@@ -38,11 +39,16 @@ function useSimpleLightDismiss(_ref) {
     var unbindEscape = (0, _bindEventListener.bind)(document, {
       type: 'keydown',
       listener: function listener(event) {
-        if (event.key === 'Escape') {
-          onCloseRef.current({
-            reason: 'escape'
-          });
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+          return;
         }
+
+        // Preserve JavaScript bubbling while preventing a native/manual
+        // popover ancestor from also handling this Escape key.
+        event.preventDefault();
+        onCloseRef.current({
+          reason: 'escape'
+        });
       }
     });
 
@@ -60,12 +66,16 @@ function useSimpleLightDismiss(_ref) {
       type: 'click',
       listener: function listener(event) {
         var element = popoverRef.current;
-        if (!element) {
+        var target = event.target;
+        if (!element || !(target instanceof Node)) {
           return;
         }
 
-        // If the click target is inside the popover, do not dismiss.
-        if (event.target instanceof Node && element.contains(event.target)) {
+        // Clicks inside the popover or its additional inside elements do not dismiss it.
+        if (element.contains(target) || additionalInsideElementRefs !== null && additionalInsideElementRefs !== void 0 && additionalInsideElementRefs.some(function (insideElementRef) {
+          var _insideElementRef$cur;
+          return (_insideElementRef$cur = insideElementRef.current) === null || _insideElementRef$cur === void 0 ? void 0 : _insideElementRef$cur.contains(target);
+        })) {
           return;
         }
         onCloseRef.current({
@@ -80,5 +90,5 @@ function useSimpleLightDismiss(_ref) {
       unbindEscape();
       unbindClickOutside();
     };
-  }, [isOpen, popoverRef]);
+  }, [additionalInsideElementRefs, isOpen, popoverRef]);
 }

package/dist/es2019/dialog/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { createCloseEvent } from './create-close-event';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/es2019/entry-points/open-layer-observer.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/es2019/entry-points/placement-map.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { fromLegacyPlacement } from '../placement-map';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/es2019/entry-points/use-arrow-navigation.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { useArrowNavigation } from '../use-arrow-navigation/use-arrow-navigation';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/es2019/popover/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { Popover } from './popover';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/es2019/popover/popover.js

@@ -86,21 +86,21 @@ const popupMotionStyles = {
   block: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   },
   inline: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   }
 };

package/dist/es2019/use-simple-light-dismiss/index.js

@@ -18,6 +18,7 @@ import { bind } from 'bind-event-listener';
  */
 export function useSimpleLightDismiss({
   popoverRef,
+  additionalInsideElementRefs,
   isOpen,
   onClose
 }) {
@@ -33,11 +34,16 @@ export function useSimpleLightDismiss({
     const unbindEscape = bind(document, {
       type: 'keydown',
       listener: event => {
-        if (event.key === 'Escape') {
-          onCloseRef.current({
-            reason: 'escape'
-          });
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+          return;
         }
+
+        // Preserve JavaScript bubbling while preventing a native/manual
+        // popover ancestor from also handling this Escape key.
+        event.preventDefault();
+        onCloseRef.current({
+          reason: 'escape'
+        });
       }
     });
 
@@ -55,12 +61,16 @@ export function useSimpleLightDismiss({
       type: 'click',
       listener: event => {
         const element = popoverRef.current;
-        if (!element) {
+        const target = event.target;
+        if (!element || !(target instanceof Node)) {
           return;
         }
 
-        // If the click target is inside the popover, do not dismiss.
-        if (event.target instanceof Node && element.contains(event.target)) {
+        // Clicks inside the popover or its additional inside elements do not dismiss it.
+        if (element.contains(target) || additionalInsideElementRefs !== null && additionalInsideElementRefs !== void 0 && additionalInsideElementRefs.some(insideElementRef => {
+          var _insideElementRef$cur;
+          return (_insideElementRef$cur = insideElementRef.current) === null || _insideElementRef$cur === void 0 ? void 0 : _insideElementRef$cur.contains(target);
+        })) {
           return;
         }
         onCloseRef.current({
@@ -75,5 +85,5 @@ export function useSimpleLightDismiss({
       unbindEscape();
       unbindClickOutside();
     };
-  }, [isOpen, popoverRef]);
+  }, [additionalInsideElementRefs, isOpen, popoverRef]);
 }

package/dist/esm/dialog/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { createCloseEvent } from './create-close-event';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/esm/entry-points/open-layer-observer.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/esm/entry-points/placement-map.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { fromLegacyPlacement } from '../placement-map';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/esm/entry-points/use-arrow-navigation.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { useArrowNavigation } from '../use-arrow-navigation/use-arrow-navigation';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/esm/popover/index.js

@@ -2,6 +2,7 @@
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
+
 export { Popover } from './popover';
 /**
  * @deprecated Import from the generated per-export subpath instead.

package/dist/esm/popover/popover.js

@@ -83,21 +83,21 @@ var popupMotionStyles = {
   block: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   },
   inline: {
     start: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     },
     end: {
       '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
-      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight4px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
     }
   }
 };

package/dist/esm/use-simple-light-dismiss/index.js

@@ -18,6 +18,7 @@ import { bind } from 'bind-event-listener';
  */
 export function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
+    additionalInsideElementRefs = _ref.additionalInsideElementRefs,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
   // Keep a stable ref to onClose so the effect does not re-bind on every render.
@@ -32,11 +33,16 @@ export function useSimpleLightDismiss(_ref) {
     var unbindEscape = bind(document, {
       type: 'keydown',
       listener: function listener(event) {
-        if (event.key === 'Escape') {
-          onCloseRef.current({
-            reason: 'escape'
-          });
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+          return;
         }
+
+        // Preserve JavaScript bubbling while preventing a native/manual
+        // popover ancestor from also handling this Escape key.
+        event.preventDefault();
+        onCloseRef.current({
+          reason: 'escape'
+        });
       }
     });
 
@@ -54,12 +60,16 @@ export function useSimpleLightDismiss(_ref) {
       type: 'click',
       listener: function listener(event) {
         var element = popoverRef.current;
-        if (!element) {
+        var target = event.target;
+        if (!element || !(target instanceof Node)) {
           return;
         }
 
-        // If the click target is inside the popover, do not dismiss.
-        if (event.target instanceof Node && element.contains(event.target)) {
+        // Clicks inside the popover or its additional inside elements do not dismiss it.
+        if (element.contains(target) || additionalInsideElementRefs !== null && additionalInsideElementRefs !== void 0 && additionalInsideElementRefs.some(function (insideElementRef) {
+          var _insideElementRef$cur;
+          return (_insideElementRef$cur = insideElementRef.current) === null || _insideElementRef$cur === void 0 ? void 0 : _insideElementRef$cur.contains(target);
+        })) {
           return;
         }
         onCloseRef.current({
@@ -74,5 +84,5 @@ export function useSimpleLightDismiss(_ref) {
       unbindEscape();
       unbindClickOutside();
     };
-  }, [isOpen, popoverRef]);
+  }, [additionalInsideElementRefs, isOpen, popoverRef]);
 }

package/dist/types/use-simple-light-dismiss/index.d.ts

@@ -5,6 +5,11 @@ type TUseSimpleLightDismissOptions = {
      * Ref to the popover element. Clicks inside this element will not trigger dismiss.
      */
     popoverRef: RefObject<HTMLElement | null>;
+    /**
+     * Optional element refs outside the popover that are still part of its
+     * dismissal boundary. Clicks inside these elements will not trigger dismiss.
+     */
+    additionalInsideElementRefs?: readonly RefObject<HTMLElement | null>[];
     /**
      * Whether the popover is currently open.
      * Listeners are only bound when `isOpen` is `true`.
@@ -41,5 +46,5 @@ type TUseSimpleLightDismissOptions = {
  * `popover="auto"` mode instead, which provides native stack-aware
  * light dismiss via the browser's top-layer stack.
  */
-export declare function useSimpleLightDismiss({ popoverRef, isOpen, onClose, }: TUseSimpleLightDismissOptions): void;
+export declare function useSimpleLightDismiss({ popoverRef, additionalInsideElementRefs, isOpen, onClose, }: TUseSimpleLightDismissOptions): void;
 export type { TUseSimpleLightDismissOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "5.0.4",
+	"version": "5.1.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",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^18.0.0",
+		"@atlaskit/tokens": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -53,7 +53,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/checkbox": "^19.2.0",
 		"@atlaskit/heading": "^7.2.0",
 		"@atlaskit/lozenge": "^15.4.0",