@atlaskit/popup 4.23.4 → 4.25.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/popup
 
+## 4.25.0
+
+### Minor Changes
+
+- [`2fd74328732bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fd74328732bf) -
+  Updated to use new motion in top layer dialog
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.24.0
+
+### Minor Changes
+
+- [`4df99aae5125e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4df99aae5125e) -
+  Fixed remounting of auto placed popups with new motion
+
 ## 4.23.4
 
 ### Patch Changes

package/dist/cjs/compositional/popup-content-top-layer.js

@@ -24,7 +24,7 @@ var _topLayerBridge = require("../internal/top-layer-bridge");
 var _triggerRefObjectContext = require("./trigger-ref-object-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var overflowAutoStyles = null;
-var animation = (0, _animations.slideAndFade)();
+var animation = (0, _animations.popupMotion)();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};

package/dist/cjs/popper-wrapper.js

@@ -242,6 +242,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    var isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
     var container = /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: _objectSpread(_objectSpread({}, style), {}, {
@@ -261,9 +262,9 @@ function PopperWrapper(_ref) {
       },
       "data-testid": "".concat(testId, "--container"),
       className: (0, _runtime.ax)([shouldFitContainer && wrapperStyles.fullWidth])
-    }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(_motion.Motion, {
-      enteringAnimation: placementMap[placement].enter,
-      exitingAnimation: placementMap[placement].exit,
+    }, /*#__PURE__*/React.createElement(_motion.Motion, {
+      enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
+      exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
       xcss: wrapperStyles.motion
     }, popupContainer));
     return /*#__PURE__*/React.createElement(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {

package/dist/cjs/popup-top-layer.js

@@ -28,7 +28,7 @@ var contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-var animation = (0, _animations.slideAndFade)();
+var animation = (0, _animations.popupMotion)();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};

package/dist/cjs/popup.js

@@ -160,7 +160,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
     });
   }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
-  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
+  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, {
+    appear: true
+  }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/dist/es2019/compositional/popup-content-top-layer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
-import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -14,7 +14,7 @@ import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
 import { TriggerRefObjectContext } from './trigger-ref-object-context';
 const overflowAutoStyles = null;
-const animation = slideAndFade();
+const animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 const EMPTY_STYLE = {};

package/dist/es2019/popper-wrapper.js

@@ -219,6 +219,7 @@ function PopperWrapper({
       onClose,
       setInitialFocusRef
     })));
+    const isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
     const container = /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
@@ -239,9 +240,9 @@ function PopperWrapper({
       },
       "data-testid": `${testId}--container`,
       className: ax([shouldFitContainer && wrapperStyles.fullWidth])
-    }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
-      enteringAnimation: placementMap[placement].enter,
-      exitingAnimation: placementMap[placement].exit,
+    }, /*#__PURE__*/React.createElement(Motion, {
+      enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
+      exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
       xcss: wrapperStyles.motion
     }, popupContainer));
     return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {

package/dist/es2019/popup-top-layer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -18,7 +18,7 @@ const contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-const animation = slideAndFade();
+const animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 const EMPTY_STYLE = {};

package/dist/es2019/popup.js

@@ -140,7 +140,9 @@ export const Popup = /*#__PURE__*/memo(props => {
     });
   }), !fg('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
+  }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/dist/esm/compositional/popup-content-top-layer.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
-import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -15,7 +15,7 @@ import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
 import { TriggerRefObjectContext } from './trigger-ref-object-context';
 var overflowAutoStyles = null;
-var animation = slideAndFade();
+var animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};

package/dist/esm/popper-wrapper.js

@@ -233,6 +233,7 @@ function PopperWrapper(_ref) {
       onClose: onClose,
       setInitialFocusRef: setInitialFocusRef
     })));
+    var isAutoPlacement = placement === 'auto' || placement === 'auto-start' || placement === 'auto-end';
     var container = /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: _objectSpread(_objectSpread({}, style), {}, {
@@ -252,9 +253,9 @@ function PopperWrapper(_ref) {
       },
       "data-testid": "".concat(testId, "--container"),
       className: ax([shouldFitContainer && wrapperStyles.fullWidth])
-    }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
-      enteringAnimation: placementMap[placement].enter,
-      exitingAnimation: placementMap[placement].exit,
+    }, /*#__PURE__*/React.createElement(Motion, {
+      enteringAnimation: !isAutoPlacement ? placementMap[placement].enter : undefined,
+      exitingAnimation: !isAutoPlacement ? placementMap[placement].exit : undefined,
       xcss: wrapperStyles.motion
     }, popupContainer));
     return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {

package/dist/esm/popup-top-layer.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -19,7 +19,7 @@ var contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-var animation = slideAndFade();
+var animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};

package/dist/esm/popup.js

@@ -152,7 +152,9 @@ export var Popup = /*#__PURE__*/memo(function (props) {
     });
   }), !fg('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
+  }, renderPopperWrapper)), fg('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.23.4",
+	"version": "4.25.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,8 +47,8 @@
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.3.0",
-		"@atlaskit/top-layer": "^0.16.0",
+		"@atlaskit/tokens": "^13.4.0",
+		"@atlaskit/top-layer": "^0.17.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -71,7 +71,7 @@
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^15.2.0",
+		"@atlaskit/modal-dialog": "^15.3.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/toggle": "^16.1.0",