@atlaskit/popup 1.9.2 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/popup
 
+## 1.10.0
+
+### Minor Changes
+
+- [`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux] Support to press escape key and only close the top layer
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.9.3
+
+### Patch Changes
+
+- [`84442a93613`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84442a93613) - Adds support for surface detection when using design tokens. Enabling children to be styled with the surface color of the popup when using the `utility.elevation.surface.current` design token.
+- Updated dependencies
+
 ## 1.9.2
 
 ### Patch Changes

package/dist/cjs/popper-wrapper.js

@@ -7,29 +7,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _tokens = require("@atlaskit/tokens");
 var _repositionOnUpdate = require("./reposition-on-update");
 var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
+var _css;
 /** @jsx jsx */
-
-var popupStyles = (0, _react2.css)({
+var popupStyles = (0, _react2.css)((_css = {
   display: 'block',
   boxSizing: 'border-box',
   zIndex: _constants.layers.layer(),
   flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   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), ")"),
-  ':focus': {
-    outline: 'none'
-  }
-}, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
+  outline: 'none'
+}), _css), !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
   overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/dist/cjs/popup.js

@@ -8,6 +8,7 @@ exports.default = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -46,7 +47,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var renderPopperWrapper = (0, _react2.jsx)(_popperWrapper.default, {
+  var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, null, (0, _react2.jsx)(_popperWrapper.default, {
     content: content,
     isOpen: isOpen,
     placement: placement,
@@ -62,7 +63,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
-  });
+  }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({

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

@@ -8,12 +8,15 @@ exports.useCloseManager = void 0;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _layering = require("@atlaskit/layering");
 var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
     capture = _ref.shouldUseCaptureOnOutsideClick;
+  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return _noop.default;
@@ -44,6 +47,9 @@ var useCloseManager = function useCloseManager(_ref) {
       }
     };
     var onKeyDown = function onKeyDown(event) {
+      if (isLayerDisabled()) {
+        return;
+      }
       var key = event.key;
       if (key === 'Escape' || key === 'Esc') {
         closePopup(event);
@@ -60,6 +66,6 @@ var useCloseManager = function useCloseManager(_ref) {
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
 };
 exports.useCloseManager = useCloseManager;

package/dist/es2019/popper-wrapper.js

@@ -6,6 +6,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
@@ -17,6 +18,7 @@ const popupStyles = css({
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
   ':focus': {
     outline: 'none'
   }

package/dist/es2019/popup.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -28,7 +29,7 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
-  const renderPopperWrapper = jsx(PopperWrapper, {
+  const renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
     content: content,
     isOpen: isOpen,
     placement: placement,
@@ -44,7 +45,7 @@ export const Popup = /*#__PURE__*/memo(({
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
-  });
+  }));
   return jsx(Manager, null, jsx(Reference, null, ({
     ref
   }) => {

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 export const useCloseManager = ({
   isOpen,
   onClose,
@@ -8,6 +9,9 @@ export const useCloseManager = ({
   triggerRef,
   shouldUseCaptureOnOutsideClick: capture
 }) => {
+  const {
+    isLayerDisabled
+  } = UNSAFE_useLayering();
   useEffect(() => {
     if (!isOpen || !popupRef) {
       return noop;
@@ -40,6 +44,9 @@ export const useCloseManager = ({
       }
     };
     const onKeyDown = event => {
+      if (isLayerDisabled()) {
+        return;
+      }
       const {
         key
       } = event;
@@ -58,5 +65,5 @@ export const useCloseManager = ({
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
 };

package/dist/esm/popper-wrapper.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -7,21 +9,21 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
-var popupStyles = css({
+var popupStyles = css((_css = {
   display: 'block',
   boxSizing: 'border-box',
   zIndex: layers.layer(),
   flex: '1 1 auto',
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-  ':focus': {
-    outline: 'none'
-  }
-}, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
+  outline: 'none'
+}), _css), !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
   overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {

package/dist/esm/popup.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -38,7 +39,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var renderPopperWrapper = jsx(PopperWrapper, {
+  var renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
     content: content,
     isOpen: isOpen,
     placement: placement,
@@ -54,7 +55,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
     triggerRef: triggerRef
-  });
+  }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({

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

@@ -1,12 +1,15 @@
 import { useEffect } from 'react';
 import { bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     popupRef = _ref.popupRef,
     triggerRef = _ref.triggerRef,
     capture = _ref.shouldUseCaptureOnOutsideClick;
+  var _UNSAFE_useLayering = UNSAFE_useLayering(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -37,6 +40,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       }
     };
     var onKeyDown = function onKeyDown(event) {
+      if (isLayerDisabled()) {
+        return;
+      }
       var key = event.key;
       if (key === 'Escape' || key === 'Esc') {
         closePopup(event);
@@ -53,5 +59,5 @@ export var useCloseManager = function useCloseManager(_ref) {
       listener: onKeyDown
     }]);
     return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture]);
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,11 +36,12 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/layering": "^0.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -52,7 +53,8 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.8.0",
+    "@af/visual-regression": "*",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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