@atlaskit/popup 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 1.8.1
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
+## 1.8.0
+
+### Minor Changes
+
+- [`ac5a05f5929`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac5a05f5929) - We are testing an upgrade to the `focus-trap` dependency behind a feature flag. If this fix is successful it will be available in a later release.
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.js

@@ -23,7 +23,7 @@ var popupStyles = (0, _react2.css)({
   zIndex: _constants.layers.layer(),
   flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   overflow: 'auto',
   ':focus': {

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusManager = void 0;
 var _react = require("react");
-var _focusTrap = _interopRequireDefault(require("focus-trap"));
+var _focusTrap = require("focus-trap");
+var _focusTrapV = _interopRequireDefault(require("focus-trap-v2"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
     initialFocusRef = _ref.initialFocusRef;
@@ -22,7 +24,12 @@ var useFocusManager = function useFocusManager(_ref) {
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
+    var focusTrap;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = (0, _focusTrap.createFocusTrap)(popupRef, trapConfig);
+    } else {
+      focusTrap = (0, _focusTrapV.default)(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.7.0",
+	"version": "1.8.1",
 	"sideEffects": false
 }

package/dist/es2019/popper-wrapper.js

@@ -4,7 +4,7 @@ import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, layers } from '@atlaskit/theme/constants';
+import { layers } from '@atlaskit/theme/constants';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
@@ -14,7 +14,7 @@ const popupStyles = css({
   zIndex: layers.layer(),
   flex: '1 1 auto',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   overflow: 'auto',
   ':focus': {

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

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const useFocusManager = ({
   popupRef,
   initialFocusRef
@@ -16,7 +18,12 @@ export const useFocusManager = ({
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    const focusTrap = createFocusTrap(popupRef, trapConfig);
+    let focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(popupRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     let frameId = requestAnimationFrame(() => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.7.0",
+	"version": "1.8.1",
 	"sideEffects": false
 }

package/dist/esm/popper-wrapper.js

@@ -5,7 +5,7 @@ import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, layers } from '@atlaskit/theme/constants';
+import { layers } from '@atlaskit/theme/constants';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
@@ -15,7 +15,7 @@ var popupStyles = css({
   zIndex: layers.layer(),
   flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   overflow: 'auto',
   ':focus': {

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

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
     initialFocusRef = _ref.initialFocusRef;
@@ -15,7 +17,12 @@ export var useFocusManager = function useFocusManager(_ref) {
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    var focusTrap = createFocusTrap(popupRef, trapConfig);
+    var focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(popupRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.7.0",
+	"version": "1.8.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,21 +40,22 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
-    "focus-trap": "^2.4.5"
+    "focus-trap": "^7.0.0",
+    "focus-trap-v2": "npm:focus-trap@^2.4.5"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.7.0",
+    "@atlaskit/menu": "^1.9.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
@@ -62,6 +63,7 @@
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
@@ -101,10 +103,13 @@
     }
   },
   "homepage": "https://atlassian.design/components/popup/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "platform-feature-flags": {
     "platform.design-system-team.render-popup-in-parent_f73ij": {
       "type": "boolean"
+    },
+    "platform.design-system-team.focus-trap-upgrade_p2cei": {
+      "type": "boolean"
     }
-  }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/extract-react-types/popup-attributes.tsx

@@ -1,5 +0,0 @@
-import { PopupProps } from '../src/types';
-
-export default function PopupAttributesFunction(props: PopupProps) {
-  return null;
-}