@atlaskit/popup 9.0.1 → 9.0.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/popup
 
+## 9.0.3
+
+### Patch Changes
+
+- [`cf31b7db11afe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf31b7db11afe) -
+  Isolate container content from parent entry and exit motion behind
+  platform-dst-motion-isolate-presence, so nested tags animate only for their own changes.
+- Updated dependencies
+
+## 9.0.2
+
+### Patch Changes
+
+- [`c0d0247b0e650`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0d0247b0e650) -
+  With `platform-dst-top-layer` enabled, restore the raw `testId` on the default popup content
+  wrapper. Custom `popupComponent` implementations continue receiving the raw ID. The popover host
+  uses `${testId}--container` instead of `${testId}--content`, matching legacy Popup test ID naming
+  in both APIs.
+
 ## 9.0.1
 
 ### Patch Changes

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

@@ -190,7 +190,7 @@ function PopupContentTopLayer(_ref) {
     shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
-    testId: testId && "".concat(testId, "--content")
+    testId: testId && "".concat(testId, "--container")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -212,6 +212,7 @@ function PopupContentTopLayer(_ref) {
   // level in. Same shape as `../popup-top-layer.tsx`.
   React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
+    className: xcss,
+    "data-testid": testId
   }, children(contentProps))));
 }

package/dist/cjs/popper-wrapper.js

@@ -18,6 +18,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _runtime = require("@compiled/react/runtime");
 var _useLayering2 = require("@atlaskit/layering/use-layering");
 var _motion = _interopRequireDefault(require("@atlaskit/motion/entering/motion"));
+var _motionPresenceBoundary = _interopRequireDefault(require("@atlaskit/motion/motion-presence-boundary"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _main = require("@atlaskit/popper/main");
 var _repositionOnUpdate = require("./reposition-on-update");
@@ -235,12 +236,12 @@ function PopperWrapper(_ref) {
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
-    }, content({
+    }, /*#__PURE__*/React.createElement(_motionPresenceBoundary.default, null, content({
       update: update,
       isOpen: isOpen,
       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

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

@@ -13,6 +13,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _motionPresenceBoundary = _interopRequireDefault(require("@atlaskit/motion/motion-presence-boundary"));
 var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
 var _index = require("@atlaskit/top-layer/placement-map/index");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
@@ -221,7 +222,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     onClose: handleOnClose,
     shouldAnimate: true,
     placement: topLayerPlacement,
-    testId: testId && "".concat(testId, "--content")
+    testId: testId && "".concat(testId, "--container")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -233,7 +234,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     // `overflow: auto` branch off it.
     ,
     shouldFitViewport: shouldFitViewport
-  }, content(contentProps)) :
+  }, /*#__PURE__*/React.createElement(_motionPresenceBoundary.default, null, content(contentProps))) :
   /*#__PURE__*/
   // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
   // same element, so it is the scroll container. The wrapper exists only
@@ -243,6 +244,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
   // level in. Same shape as `compositional/popup-content-top-layer.tsx`.
   React.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
-  }, content(contentProps)))));
+    className: xcss,
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(_motionPresenceBoundary.default, null, content(contentProps))))));
 });

package/dist/cjs/popup.js

@@ -20,7 +20,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _manager = require("@atlaskit/popper/manager");
 var _reference = require("@atlaskit/popper/reference");
 var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
-var _compiled = require("@atlaskit/primitives/compiled");
+var _box = require("@atlaskit/primitives/compiled/box");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
 var _popupTopLayer = require("./popup-top-layer");
 var _useAppearance = require("./use-appearance");
@@ -153,7 +153,7 @@ var PopupLegacy = function PopupLegacy(props) {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {
-    return /*#__PURE__*/React.createElement(_compiled.Box, {
+    return /*#__PURE__*/React.createElement(_box.Box, {
       xcss: wrapperStyles.root
     }, popupContent);
   }

package/dist/cjs/use-appearance.js

@@ -8,7 +8,7 @@ exports.usePopupAppearance = usePopupAppearance;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _useMediaQuery = require("@atlaskit/primitives/compiled/use-media-query");
 /**
  * **usePopupAppearance()**
  *
@@ -27,7 +27,7 @@ function usePopupAppearance(_ref) {
    * The state change is only needed if the popup can become a modal - and this is maintained
    */
   var shouldUseMediaQuery = !(0, _fg.fg)('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
-  var mq = (0, _compiled.UNSAFE_useMediaQuery)('below.sm', shouldUseMediaQuery ? function (e) {
+  var mq = (0, _useMediaQuery.UNSAFE_useMediaQuery)('below.sm', shouldUseMediaQuery ? function (e) {
     setIsSmallViewport(!!e.matches);
   } : undefined);
   var _useState = (0, _react.useState)(!!(mq !== null && mq !== void 0 && mq.matches)),

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

@@ -196,7 +196,7 @@ export function PopupContentTopLayer({
     shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
-    testId: testId && `${testId}--content`
+    testId: testId && `${testId}--container`
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -218,6 +218,7 @@ export function PopupContentTopLayer({
   // level in. Same shape as `../popup-top-layer.tsx`.
   React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
+    className: xcss,
+    "data-testid": testId
   }, children(contentProps))));
 }

package/dist/es2019/popper-wrapper.js

@@ -6,6 +6,7 @@ import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import { useLayering } from '@atlaskit/layering/use-layering';
 import Motion from '@atlaskit/motion/entering/motion';
+import MotionPresenceBoundary from '@atlaskit/motion/motion-presence-boundary';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popper } from '@atlaskit/popper/main';
 import { RepositionOnUpdate } from './reposition-on-update';
@@ -211,12 +212,12 @@ function PopperWrapper({
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update
-    }, content({
+    }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content({
       update,
       isOpen,
       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

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import MotionPresenceBoundary from '@atlaskit/motion/motion-presence-boundary';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -233,7 +234,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     onClose: handleOnClose,
     shouldAnimate: true,
     placement: topLayerPlacement,
-    testId: testId && `${testId}--content`
+    testId: testId && `${testId}--container`
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -245,7 +246,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     // `overflow: auto` branch off it.
     ,
     shouldFitViewport: shouldFitViewport
-  }, content(contentProps)) :
+  }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content(contentProps))) :
   /*#__PURE__*/
   // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
   // same element, so it is the scroll container. The wrapper exists only
@@ -255,6 +256,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   // level in. Same shape as `compositional/popup-content-top-layer.tsx`.
   React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
-  }, content(contentProps)))));
+    className: xcss,
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content(contentProps))))));
 });

package/dist/es2019/popup.js

@@ -12,7 +12,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Manager } from '@atlaskit/popper/manager';
 import { Reference } from '@atlaskit/popper/reference';
 import Portal from '@atlaskit/portal/portal';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 import PopperWrapper from './popper-wrapper';
 import { PopupTopLayer } from './popup-top-layer';
 import { usePopupAppearance } from './use-appearance';

package/dist/es2019/use-appearance.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/use-media-query';
 
 /**
  * **usePopupAppearance()**

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

@@ -182,7 +182,7 @@ export function PopupContentTopLayer(_ref) {
     shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
-    testId: testId && "".concat(testId, "--content")
+    testId: testId && "".concat(testId, "--container")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -204,6 +204,7 @@ export function PopupContentTopLayer(_ref) {
   // level in. Same shape as `../popup-top-layer.tsx`.
   React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
+    className: xcss,
+    "data-testid": testId
   }, children(contentProps))));
 }

package/dist/esm/popper-wrapper.js

@@ -13,6 +13,7 @@ import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import { useLayering } from '@atlaskit/layering/use-layering';
 import Motion from '@atlaskit/motion/entering/motion';
+import MotionPresenceBoundary from '@atlaskit/motion/motion-presence-boundary';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popper } from '@atlaskit/popper/main';
 import { RepositionOnUpdate } from './reposition-on-update';
@@ -226,12 +227,12 @@ function PopperWrapper(_ref) {
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update
-    }, content({
+    }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content({
       update: update,
       isOpen: isOpen,
       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

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

@@ -7,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
+import MotionPresenceBoundary from '@atlaskit/motion/motion-presence-boundary';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -212,7 +213,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     onClose: handleOnClose,
     shouldAnimate: true,
     placement: topLayerPlacement,
-    testId: testId && "".concat(testId, "--content")
+    testId: testId && "".concat(testId, "--container")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
     style: EMPTY_STYLE,
     id: providedId,
@@ -224,7 +225,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     // `overflow: auto` branch off it.
     ,
     shouldFitViewport: shouldFitViewport
-  }, content(contentProps)) :
+  }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content(contentProps))) :
   /*#__PURE__*/
   // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
   // same element, so it is the scroll container. The wrapper exists only
@@ -234,6 +235,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   // level in. Same shape as `compositional/popup-content-top-layer.tsx`.
   React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: xcss
-  }, content(contentProps)))));
+    className: xcss,
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(MotionPresenceBoundary, null, content(contentProps))))));
 });

package/dist/esm/popup.js

@@ -14,7 +14,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Manager } from '@atlaskit/popper/manager';
 import { Reference } from '@atlaskit/popper/reference';
 import Portal from '@atlaskit/portal/portal';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 import PopperWrapper from './popper-wrapper';
 import { PopupTopLayer } from './popup-top-layer';
 import { usePopupAppearance } from './use-appearance';

package/dist/esm/use-appearance.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/use-media-query';
 
 /**
  * **usePopupAppearance()**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "9.0.1",
+	"version": "9.0.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,13 +37,13 @@
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^6.0.0",
-		"@atlaskit/motion": "^9.3.0",
+		"@atlaskit/motion": "^9.4.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/popper": "^9.4.0",
 		"@atlaskit/portal": "^7.0.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/tokens": "^20.4.0",
 		"@atlaskit/top-layer": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",