@atlaskit/popup 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/popup
 
+## 1.26.0
+
+### Minor Changes
+
+- [#142538](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142538)
+  [`3979d0196514a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3979d0196514a) -
+  [ux] We are testing focus ring for popup wrapper `onKeyDown`. Changes are implemented behind
+  feature flag. If this fix is successful, it will be available in a later release.
+
 ## 1.25.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -18,7 +18,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
 var _useGetMemoizedMergedTriggerRef = require("../use-get-memoized-merged-trigger-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
 var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/popper-wrapper.js

@@ -12,7 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -145,7 +147,7 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return (0, _react2.jsx)(PopupContainer, {
+    var popupContainer = (0, _react2.jsx)(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -180,6 +182,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    return !initialFocusRef && (0, _platformFeatureFlags.fg)('platform-design-system-apply-popup-wrapper-focus') ? (0, _react2.jsx)(_focusRing.default, null, popupContainer) : popupContainer;
   });
 }
 

package/dist/cjs/reposition-on-update.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RepositionOnUpdate = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,

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

@@ -49,10 +49,12 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       }
       if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

package/dist/es2019/popper-wrapper.js

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -128,7 +130,7 @@ function PopperWrapper({
     placement,
     update
   }) => {
-    return jsx(PopupContainer, {
+    const popupContainer = jsx(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -163,6 +165,7 @@ function PopperWrapper({
       onClose,
       setInitialFocusRef
     })));
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
   });
 }
 

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

@@ -44,10 +44,12 @@ export const useCloseManager = ({
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(() => {
+          triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

package/dist/esm/popper-wrapper.js

@@ -11,7 +11,9 @@ var _css;
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -138,7 +140,7 @@ function PopperWrapper(_ref) {
       style = _ref2.style,
       placement = _ref2.placement,
       update = _ref2.update;
-    return jsx(PopupContainer, {
+    var popupContainer = jsx(PopupContainer, {
       id: id,
       "data-ds--level": currentLevel,
       "data-placement": placement,
@@ -173,6 +175,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    return !initialFocusRef && fg('platform-design-system-apply-popup-wrapper-focus') ? jsx(FocusRing, null, popupContainer) : popupContainer;
   });
 }
 

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

@@ -41,10 +41,12 @@ export var useCloseManager = function useCloseManager(_ref) {
       }
       if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
         // Restoring the normal focus order for trigger.
-        triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
-        if (popupRef && autoFocus) {
-          popupRef.setAttribute('tabindex', '0');
-        }
+        requestFrame(function () {
+          triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '0');
+          if (popupRef && autoFocus) {
+            popupRef.setAttribute('tabindex', '0');
+          }
+        });
       }
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.25.0",
+	"version": "1.26.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,13 +37,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/focus-ring": "^1.6.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,7 +61,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/icon": "^22.16.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/toggle": "^13.4.0",
@@ -114,6 +115,9 @@
 		},
 		"sibling-dropdown-close-issue": {
 			"type": "boolean"
+		},
+		"platform-design-system-apply-popup-wrapper-focus": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"