@atlaskit/popup 4.13.1 → 4.13.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/popup
 
+## 4.13.3
+
+### Patch Changes
+
+- [`77f2151e059b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/77f2151e059b7) -
+  Ensure focus returns to nested dropdown trigger instead of popup trigger when ESCAPE is used to
+  dismiss the dropdown.
+
+## 4.13.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.13.1
 
 ### Patch Changes

package/dist/cjs/use-close-manager.js

@@ -111,9 +111,18 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       mouseDownTarget.current = event.target;
     };
     var onKeyDown = function onKeyDown(event) {
+      var key = event.key;
+      if ((key === 'Escape' || key === 'Esc') && (0, _platformFeatureFlags.fg)('platform_dst_nested_escape')) {
+        var _eventTarget$closest;
+        var eventTarget = event.target instanceof HTMLElement ? event.target : null;
+        var layeredAncestor = eventTarget === null || eventTarget === void 0 || (_eventTarget$closest = eventTarget.closest) === null || _eventTarget$closest === void 0 ? void 0 : _eventTarget$closest.call(eventTarget, '[data-ds--level]');
+        var levelStr = layeredAncestor === null || layeredAncestor === void 0 ? void 0 : layeredAncestor.getAttribute('data-ds--level');
+        if (levelStr && Number(levelStr) > currentLevel) {
+          return;
+        }
+      }
       if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
-        var key = event.key,
-          shiftKey = event.shiftKey;
+        var shiftKey = event.shiftKey;
         if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
           if (isLayerDisabled()) {
             return;
@@ -176,8 +185,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         if (isLayerDisabled()) {
           return;
         }
-        var _key = event.key;
-        if (_key === 'Escape' || _key === 'Esc' || shouldCloseOnTab && _key === 'Tab') {
+        if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
           closePopup(event);
         }
       }

package/dist/cjs/use-focus-manager.js

@@ -47,7 +47,7 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
     }
     var trapConfig = {
       clickOutsideDeactivates: true,
-      escapeDeactivates: true,
+      escapeDeactivates: (0, _platformFeatureFlags.fg)('platform_dst_nested_escape') ? false : true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: shouldReturnFocus

package/dist/es2019/use-close-manager.js

@@ -108,9 +108,18 @@ export const useCloseManager = ({
       mouseDownTarget.current = event.target;
     };
     const onKeyDown = event => {
+      const key = event.key;
+      if ((key === 'Escape' || key === 'Esc') && fg('platform_dst_nested_escape')) {
+        var _eventTarget$closest;
+        const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+        const layeredAncestor = eventTarget === null || eventTarget === void 0 ? void 0 : (_eventTarget$closest = eventTarget.closest) === null || _eventTarget$closest === void 0 ? void 0 : _eventTarget$closest.call(eventTarget, '[data-ds--level]');
+        const levelStr = layeredAncestor === null || layeredAncestor === void 0 ? void 0 : layeredAncestor.getAttribute('data-ds--level');
+        if (levelStr && Number(levelStr) > currentLevel) {
+          return;
+        }
+      }
       if (fg('platform_dst_popup-disable-focuslock')) {
         const {
-          key,
           shiftKey
         } = event;
         if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
@@ -175,9 +184,6 @@ export const useCloseManager = ({
         if (isLayerDisabled()) {
           return;
         }
-        const {
-          key
-        } = event;
         if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
           closePopup(event);
         }

package/dist/es2019/use-focus-manager.js

@@ -43,7 +43,7 @@ export const useFocusManager = ({
     }
     const trapConfig = {
       clickOutsideDeactivates: true,
-      escapeDeactivates: true,
+      escapeDeactivates: fg('platform_dst_nested_escape') ? false : true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: shouldReturnFocus

package/dist/esm/use-close-manager.js

@@ -103,9 +103,18 @@ export var useCloseManager = function useCloseManager(_ref) {
       mouseDownTarget.current = event.target;
     };
     var onKeyDown = function onKeyDown(event) {
+      var key = event.key;
+      if ((key === 'Escape' || key === 'Esc') && fg('platform_dst_nested_escape')) {
+        var _eventTarget$closest;
+        var eventTarget = event.target instanceof HTMLElement ? event.target : null;
+        var layeredAncestor = eventTarget === null || eventTarget === void 0 || (_eventTarget$closest = eventTarget.closest) === null || _eventTarget$closest === void 0 ? void 0 : _eventTarget$closest.call(eventTarget, '[data-ds--level]');
+        var levelStr = layeredAncestor === null || layeredAncestor === void 0 ? void 0 : layeredAncestor.getAttribute('data-ds--level');
+        if (levelStr && Number(levelStr) > currentLevel) {
+          return;
+        }
+      }
       if (fg('platform_dst_popup-disable-focuslock')) {
-        var key = event.key,
-          shiftKey = event.shiftKey;
+        var shiftKey = event.shiftKey;
         if (shiftKey && key === 'Tab' && !shouldRenderToParent) {
           if (isLayerDisabled()) {
             return;
@@ -168,8 +177,7 @@ export var useCloseManager = function useCloseManager(_ref) {
         if (isLayerDisabled()) {
           return;
         }
-        var _key = event.key;
-        if (_key === 'Escape' || _key === 'Esc' || shouldCloseOnTab && _key === 'Tab') {
+        if (key === 'Escape' || key === 'Esc' || shouldCloseOnTab && key === 'Tab') {
           closePopup(event);
         }
       }

package/dist/esm/use-focus-manager.js

@@ -40,7 +40,7 @@ export var useFocusManager = function useFocusManager(_ref) {
     }
     var trapConfig = {
       clickOutsideDeactivates: true,
-      escapeDeactivates: true,
+      escapeDeactivates: fg('platform_dst_nested_escape') ? false : true,
       initialFocus: initialFocusRef || popupRef,
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: shouldReturnFocus

package/dist/types/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,8 +1,9 @@
 import { type Dispatch, type SetStateAction } from 'react';
+import { type MemoizedFn } from 'memoize-one';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
  * Used behind ff `platform-design-system-popup-ref` for regular popup.
  * Compositional popup always uses this variant.
  * @returns Function to set trigger ref
  */
-export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;
+export declare const useGetMemoizedMergedTriggerRefNew: () => MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/dist/types/use-get-memoized-merged-trigger-ref.d.ts

@@ -1,2 +1,3 @@
 import { type Dispatch, type SetStateAction } from 'react';
-export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;
+import { type MemoizedFn } from 'memoize-one';
+export declare const useGetMemoizedMergedTriggerRef: () => MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,8 +1,9 @@
 import { type Dispatch, type SetStateAction } from 'react';
+import { type MemoizedFn } from 'memoize-one';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
  * Used behind ff `platform-design-system-popup-ref` for regular popup.
  * Compositional popup always uses this variant.
  * @returns Function to set trigger ref
  */
-export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;
+export declare const useGetMemoizedMergedTriggerRefNew: () => MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref.d.ts

@@ -1,2 +1,3 @@
 import { type Dispatch, type SetStateAction } from 'react';
-export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;
+import { type MemoizedFn } from 'memoize-one';
+export declare const useGetMemoizedMergedTriggerRef: () => MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.13.1",
+	"version": "4.13.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,8 +38,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.2.0",
-		"@atlaskit/primitives": "^17.1.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
@@ -59,8 +59,8 @@
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/docs": "^11.3.0",
 		"@atlaskit/form": "^15.3.0",
-		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.4.0",
+		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/icon": "^30.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/section-message": "^8.12.0",
@@ -121,6 +121,9 @@
 		},
 		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
 			"type": "boolean"
+		},
+		"platform_dst_nested_escape": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"