@atlaskit/top-layer 1.10.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/top-layer
 
+## 2.0.0
+
+### Major Changes
+
+- [`3f6f3bd7da074`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f6f3bd7da074) -
+  Updates the Top Layer animation API:
+  - Renames `animate` to `shouldAnimate` and simplifies the type to just `boolean`, removing unused
+    config type
+  - Custom animation overrides should now be applied via the `enteringAnimationXcss` and
+    `exitingAnimationXcss` props.
+
 ## 1.10.1
 
 ### Patch Changes

package/README.md

@@ -12,7 +12,6 @@ placement — compose it with the `useAnchorPosition` hook when you need anchor-
 
 ```tsx
 import { useRef } from 'react';
-import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -45,7 +44,7 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
 				role="dialog"
 				label="Settings"
 				isOpen={isOpen}
-				animate={slideAndFade()}
+				shouldAnimate
 				onClose={onClose}
 			>
 				<PopoverSurface>Content here</PopoverSurface>
@@ -87,7 +86,7 @@ Compound component for modal dialogs using the native `<dialog>` element with `.
 
 ## Animations
 
-Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `animate` prop.
+Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `shouldAnimate` prop.
 Animations use [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style)
 for entry and
 [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
@@ -109,15 +108,12 @@ import {
 
 ### Popover animation
 
-Pass a preset to `Popover`:
+Pass `shouldAnimate` to enable the default popover entry and exit animation:
 
 ```tsx
-import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { Popover } from '@atlaskit/top-layer/popover';
 
-const animation = slideAndFade();
-
-<Popover animate={animation} role="dialog" label="My popover">
+<Popover shouldAnimate role="dialog" label="My popover" isOpen={isOpen}>
 	Content
 </Popover>;
 ```
@@ -125,31 +121,23 @@ const animation = slideAndFade();
 For overlay styling (background, shadow, border-radius), wrap children in `PopoverSurface` from
 `@atlaskit/top-layer/popover-surface`.
 
-Available popover presets:
-
-- `slideAndFade({ distance? })` — directional slide + opacity (default for tooltip)
-- `fade` — simple opacity transition
-- `scaleAndFade` — scale from 0.95 + opacity (suitable for menus/dropdowns)
+Use `enteringAnimationXcss` and `exitingAnimationXcss` when a composed component needs to override
+the phase-specific animation styles.
 
 ### Dialog animation
 
-Pass a preset to `Dialog.Content`:
+Pass `shouldAnimate` to enable the default dialog entry and exit animation:
 
 ```tsx
-import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
-
-const animation = dialogSlideUpAndFade();
+import { Dialog } from '@atlaskit/top-layer/dialog';
 
-<Dialog.Content animate={animation}>
-	<Dialog.Surface>...</Dialog.Surface>
-</Dialog.Content>;
+<Dialog shouldAnimate isOpen={isOpen} onClose={onClose} label="My dialog">
+	Content
+</Dialog>;
 ```
 
-Available dialog presets:
-
-- `dialogSlideUpAndFade({ distance? })` — slide up + opacity with backdrop fade (matches legacy
-  modal entrance)
-- `dialogFade` — simple opacity + backdrop fade
+Use `enteringAnimationXcss` and `exitingAnimationXcss` when a composed component needs to override
+the phase-specific animation styles.
 
 ### Progressive enhancement
 

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -1,30 +1,21 @@
 ._19itglyw{border:none}
-._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
-._vhgsxbuz[open]::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
-._vhgsxbuz[open]::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1fsl1mzy[open]{transition-duration:var(--ds-duration-long,.25s)}
-._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
-._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
-._1i0neoah[open]{animation-fill-mode:backwards}
 ._1i4q4jg8{overflow-wrap:normal}
-._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
-._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
-._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
-._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
@@ -33,13 +24,9 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
-._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
-._njwk11k7::backdrop{transition-property:overlay,display}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
 ._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}._10aiglyw[open]{animation-name:none}._aeld147i[open]{transition-duration:var(--ds-duration-instant,0ms)}._l57nglyw::-ms-backdrop{animation-name:none}._l57nglyw::backdrop{animation-name:none}._1sbq147i::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1sbq147i::backdrop{transition-duration:var(--ds-duration-instant,0ms)}._19awglyw[open]::-ms-backdrop{animation-name:none}._19awglyw[open]::backdrop{animation-name:none}._1i6z147i[open]::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1i6z147i[open]::backdrop{transition-duration:var(--ds-duration-instant,0ms)}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/cjs/dialog/dialog-content.js

@@ -10,6 +10,7 @@ exports.Dialog = void 0;
 require("./dialog-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -18,15 +19,6 @@ var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 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); }
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
-// component so the Compiled transform can statically extract every referenced
-// style.
-var dialogAnimationStyles = {
-  root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
-  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
-};
-
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
 // Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
 // into the top-layer surface. Excludes `color`/`font` (theming) and
@@ -39,13 +31,17 @@ var dialogAnimationStyles = {
 var surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
-var styles = {
-  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
+var dialogStyles = {
+  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v7kvq",
+  exit: "_y44vgeqi"
 };
 var backdropStyles = {
   root: "_1ltk1i5c",
   hidden: "_1ltk1j28",
-  motion: "_1m5e1op4 _1jhdq7pw _njwk11k7 _yhpqi9qs _1fyf1a5r _vhgsxbuz _1rsueoah _l57nglyw _1sbq147i _19awglyw _1i6z147i"
+  enter: "_1m5exbuz",
+  exit: "_1m5e1op4"
 };
 
 /**
@@ -71,9 +67,11 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     onClose = _ref.onClose,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? false : _ref$animate,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
     consumerXcss = _ref.xcss,
+    enteringAnimationXcss = _ref.enteringAnimationXcss,
+    exitingAnimationXcss = _ref.exitingAnimationXcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -87,13 +85,12 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animationKind: 'dialog',
-      animate: animate,
+      shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase,
-    preset = _useAnimatedVisibilit.preset;
+    phase = _useAnimatedVisibilit.phase;
 
   // True while the host element is mounted (any phase except `closed`).
   // Used as a dep so listener-rebind effects re-attach after a remount.
@@ -198,6 +195,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   if (!isVisible) {
     return null;
   }
+  var shouldAnimateBackdrop = !shouldHideBackdrop && shouldAnimate;
   return /*#__PURE__*/_react.default.createElement("dialog", {
     ref: combinedRef,
     id: dialogId
@@ -211,7 +209,11 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     "aria-labelledby": label ? undefined : labelledBy,
     style: style,
     onCancel: handleCancel,
-    "data-testid": testId,
-    className: (0, _runtime.ax)([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    ,
+    className: (0, _runtime.ax)([
+    // Dialog styles
+    dialogStyles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && dialogStyles.enter, shouldAnimate && phase === 'exiting' && dialogStyles.exit, shouldAnimate && dialogStyles.motion, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, shouldAnimateBackdrop && phase === 'entering' && backdropStyles.enter, shouldAnimateBackdrop && phase === 'exiting' && backdropStyles.exit, (0, _react2.cx)(consumerXcss, shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/cjs/internal/use-animated-visibility.js

@@ -67,13 +67,6 @@ function runOnTransitionEndOrTimeout(_ref) {
   return teardown;
 }
 
-/**
- * Animation config for entry/exit transitions.
- *
- * Currently no configuration is supported via this prop,
- * and this is just a placeholder.
- */
-
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
  * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
@@ -138,17 +131,11 @@ function runOnTransitionEndOrTimeout(_ref) {
 function useAnimatedVisibility(_ref2) {
   var isOpen = _ref2.isOpen,
     animationKind = _ref2.animationKind,
-    animate = _ref2.animate,
+    shouldAnimate = _ref2.shouldAnimate,
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
     onExitFinish = _ref2.onExitFinish;
-  // Styles are applied via the `css` prop on the host element (see `Popover`
-  // and `Dialog`), so there is no longer any CSS injection step. Normalize a
-  // falsy `animate` to `null`.
-  var preset = animate || null;
-
-  // False when there is no preset or `prefers-reduced-motion` is set.
-  var willAnimate = Boolean(animate) && !(0, _reducedMotion.prefersReducedMotion)();
+  var willAnimate = shouldAnimate && !(0, _reducedMotion.prefersReducedMotion)();
 
   // Promote `closed → entering`/`closed → open` synchronously during
   // render so the host element mounts in the same commit as the open
@@ -317,7 +304,6 @@ function useAnimatedVisibility(_ref2) {
     }
   }, [phase, willAnimate]);
   return {
-    phase: phase,
-    preset: preset
+    phase: phase
   };
 }

package/dist/cjs/popover/popover.compiled.css

@@ -1,32 +1,26 @@
-._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ign:popover-open{transition-duration:var(--ds-duration-short,.15s)}
-._18m9ewfl{overflow-y:visible}
+._y44v179n{animation:var(--ds-popover-motion-enter)}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
 ._1i4q4jg8{overflow-wrap:normal}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
 ._1p1dglyw{text-transform:none}
-._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
-._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
-._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
-._n70peoah:popover-open{animation-fill-mode:backwards}
 ._o5724jg8{white-space:normal}
-._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
 ._y3gnv2br{text-align:start}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/cjs/popover/popover.js

@@ -10,6 +10,7 @@ exports.Popover = void 0;
 require("./popover.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
@@ -34,14 +35,6 @@ var supportsPopoverHint = (0, _once.default)(function () {
   return element.popover === 'hint';
 });
 
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `:popover-open`, `[dir='rtl']`, and `allow-discrete`.
-// Keep them in this component so the Compiled transform can statically extract
-// every referenced style.
-var popoverAnimationStyles = {
-  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
-};
-
 // Surface reset — neutralises inherited text-layout properties (e.g.
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
@@ -57,7 +50,10 @@ var surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
+  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v179n",
+  exit: "_y44vof1f"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
@@ -105,12 +101,13 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? false : _ref$animate,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
-    consumerXcss = _ref.xcss,
+    enteringAnimationXcss = _ref.enteringAnimationXcss,
+    exitingAnimationXcss = _ref.exitingAnimationXcss,
     role = _ref.role,
     label = _ref.label,
     labelledBy = _ref.labelledBy,
@@ -123,13 +120,12 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animationKind: 'popover',
-      animate: animate,
+      shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase,
-    preset = _useAnimatedVisibilit.preset;
+    phase = _useAnimatedVisibilit.phase;
 
   // True while the host element is mounted (any phase except `closed`).
   // Used as a dep so listener-rebind effects re-attach after a remount.
@@ -299,7 +295,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         placement: placement
       })
     });
-  }, [preset, placement, isVisible]);
+  }, [placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
@@ -348,6 +344,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    className: (0, _runtime.ax)([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, (0, _react2.cx)(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -1,30 +1,21 @@
 ._19itglyw{border:none}
-._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
-._vhgsxbuz[open]::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
-._vhgsxbuz[open]::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1fsl1mzy[open]{transition-duration:var(--ds-duration-long,.25s)}
-._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
-._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
-._1i0neoah[open]{animation-fill-mode:backwards}
 ._1i4q4jg8{overflow-wrap:normal}
-._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
-._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
-._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
-._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
@@ -33,13 +24,9 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
-._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
-._njwk11k7::backdrop{transition-property:overlay,display}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
 ._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}._10aiglyw[open]{animation-name:none}._aeld147i[open]{transition-duration:var(--ds-duration-instant,0ms)}._l57nglyw::-ms-backdrop{animation-name:none}._l57nglyw::backdrop{animation-name:none}._1sbq147i::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1sbq147i::backdrop{transition-duration:var(--ds-duration-instant,0ms)}._19awglyw[open]::-ms-backdrop{animation-name:none}._19awglyw[open]::backdrop{animation-name:none}._1i6z147i[open]::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1i6z147i[open]::backdrop{transition-duration:var(--ds-duration-instant,0ms)}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/es2019/dialog/dialog-content.js

@@ -2,6 +2,7 @@
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
@@ -9,15 +10,6 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
-// component so the Compiled transform can statically extract every referenced
-// style.
-const dialogAnimationStyles = {
-  root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
-  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
-};
-
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
 // Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
 // into the top-layer surface. Excludes `color`/`font` (theming) and
@@ -30,13 +22,17 @@ const dialogAnimationStyles = {
 const surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
-const styles = {
-  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
+const dialogStyles = {
+  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v7kvq",
+  exit: "_y44vgeqi"
 };
 const backdropStyles = {
   root: "_1ltk1i5c",
   hidden: "_1ltk1j28",
-  motion: "_1m5e1op4 _1jhdq7pw _njwk11k7 _yhpqi9qs _1fyf1a5r _vhgsxbuz _1rsueoah _l57nglyw _1sbq147i _19awglyw _1i6z147i"
+  enter: "_1m5exbuz",
+  exit: "_1m5e1op4"
 };
 
 /**
@@ -62,8 +58,10 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   onClose,
   onEnterFinish,
   onExitFinish,
-  animate = false,
+  shouldAnimate = false,
   xcss: consumerXcss,
+  enteringAnimationXcss,
+  exitingAnimationXcss,
   style,
   testId,
   id: providedId,
@@ -76,12 +74,11 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const ownRef = useRef(null);
   const combinedRef = mergeRefs([ownRef, ref]);
   const {
-    phase,
-    preset
+    phase
   } = useAnimatedVisibility({
     isOpen,
     animationKind: 'dialog',
-    animate,
+    shouldAnimate,
     elementRef: ownRef,
     onEnterFinish,
     onExitFinish
@@ -191,6 +188,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   if (!isVisible) {
     return null;
   }
+  const shouldAnimateBackdrop = !shouldHideBackdrop && shouldAnimate;
   return /*#__PURE__*/React.createElement("dialog", {
     ref: combinedRef,
     id: dialogId
@@ -204,7 +202,11 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     "aria-labelledby": label ? undefined : labelledBy,
     style: style,
     onCancel: handleCancel,
-    "data-testid": testId,
-    className: ax([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    ,
+    className: ax([
+    // Dialog styles
+    dialogStyles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && dialogStyles.enter, shouldAnimate && phase === 'exiting' && dialogStyles.exit, shouldAnimate && dialogStyles.motion, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, shouldAnimateBackdrop && phase === 'entering' && backdropStyles.enter, shouldAnimateBackdrop && phase === 'exiting' && backdropStyles.exit, cx(consumerXcss, shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/es2019/internal/use-animated-visibility.js

@@ -60,13 +60,6 @@ function runOnTransitionEndOrTimeout({
   return teardown;
 }
 
-/**
- * Animation config for entry/exit transitions.
- *
- * Currently no configuration is supported via this prop,
- * and this is just a placeholder.
- */
-
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
  * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
@@ -131,18 +124,12 @@ function runOnTransitionEndOrTimeout({
 export function useAnimatedVisibility({
   isOpen,
   animationKind,
-  animate,
+  shouldAnimate,
   elementRef,
   onEnterFinish,
   onExitFinish
 }) {
-  // Styles are applied via the `css` prop on the host element (see `Popover`
-  // and `Dialog`), so there is no longer any CSS injection step. Normalize a
-  // falsy `animate` to `null`.
-  const preset = animate || null;
-
-  // False when there is no preset or `prefers-reduced-motion` is set.
-  const willAnimate = Boolean(animate) && !prefersReducedMotion();
+  const willAnimate = shouldAnimate && !prefersReducedMotion();
 
   // Promote `closed → entering`/`closed → open` synchronously during
   // render so the host element mounts in the same commit as the open
@@ -302,7 +289,6 @@ export function useAnimatedVisibility({
     }
   }, [phase, willAnimate]);
   return {
-    phase,
-    preset
+    phase
   };
 }

package/dist/es2019/popover/popover.compiled.css

@@ -1,32 +1,26 @@
-._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ign:popover-open{transition-duration:var(--ds-duration-short,.15s)}
-._18m9ewfl{overflow-y:visible}
+._y44v179n{animation:var(--ds-popover-motion-enter)}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
 ._1i4q4jg8{overflow-wrap:normal}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
 ._1p1dglyw{text-transform:none}
-._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
-._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
-._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
-._n70peoah:popover-open{animation-fill-mode:backwards}
 ._o5724jg8{white-space:normal}
-._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
 ._y3gnv2br{text-align:start}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/es2019/popover/popover.js

@@ -2,6 +2,7 @@
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
@@ -25,14 +26,6 @@ const supportsPopoverHint = once(() => {
   return element.popover === 'hint';
 });
 
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `:popover-open`, `[dir='rtl']`, and `allow-discrete`.
-// Keep them in this component so the Compiled transform can statically extract
-// every referenced style.
-const popoverAnimationStyles = {
-  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
-};
-
 // Surface reset — neutralises inherited text-layout properties (e.g.
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
@@ -48,7 +41,10 @@ const surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 const styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
+  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v179n",
+  exit: "_y44vof1f"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
@@ -95,11 +91,12 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   onOpenChange,
   onEnterFinish,
   onExitFinish,
-  animate = false,
+  shouldAnimate = false,
   placement,
   testId,
   isOpen,
-  xcss: consumerXcss,
+  enteringAnimationXcss,
+  exitingAnimationXcss,
   // ARIA
   role,
   label,
@@ -112,12 +109,11 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // `useId()` colons are invalid in CSS selectors and popover target attributes.
   const popoverId = idProp !== null && idProp !== void 0 ? idProp : `popover-${autoId.replace(/:/g, '')}`;
   const {
-    phase,
-    preset
+    phase
   } = useAnimatedVisibility({
     isOpen,
     animationKind: 'popover',
-    animate,
+    shouldAnimate,
     elementRef: ownRef,
     onEnterFinish,
     onExitFinish
@@ -291,7 +287,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         placement
       })
     });
-  }, [preset, placement, isVisible]);
+  }, [placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
@@ -340,6 +336,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    className: ax([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, cx(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/esm/dialog/dialog-content.compiled.css

@@ -1,30 +1,21 @@
 ._19itglyw{border:none}
-._1iu47kvq[open]{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
-._vhgsxbuz[open]::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
-._vhgsxbuz[open]::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
 ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1fsl1mzy[open]{transition-duration:var(--ds-duration-long,.25s)}
-._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
-._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
-._1i0neoah[open]{animation-fill-mode:backwards}
 ._1i4q4jg8{overflow-wrap:normal}
-._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
-._1jhdq7pw::backdrop{animation-fill-mode:forwards}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._1p1dglyw{text-transform:none}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
-._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
-._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwx1wug{margin-right:auto}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
@@ -33,13 +24,9 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
 ._k8m011k7{transition-property:overlay,display}
-._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
-._njwk11k7::backdrop{transition-property:overlay,display}
 ._o5724jg8{white-space:normal}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
 ._y3gnv2br{text-align:start}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}._10aiglyw[open]{animation-name:none}._aeld147i[open]{transition-duration:var(--ds-duration-instant,0ms)}._l57nglyw::-ms-backdrop{animation-name:none}._l57nglyw::backdrop{animation-name:none}._1sbq147i::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1sbq147i::backdrop{transition-duration:var(--ds-duration-instant,0ms)}._19awglyw[open]::-ms-backdrop{animation-name:none}._19awglyw[open]::backdrop{animation-name:none}._1i6z147i[open]::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1i6z147i[open]::backdrop{transition-duration:var(--ds-duration-instant,0ms)}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/esm/dialog/dialog-content.js

@@ -2,6 +2,7 @@
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
@@ -9,15 +10,6 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `[open]`, and `allow-discrete`. Keep them in this
-// component so the Compiled transform can statically extract every referenced
-// style.
-var dialogAnimationStyles = {
-  root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
-  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
-};
-
 // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
 // Neutralises inherited text-layout properties (e.g. `white-space: nowrap`) that leak
 // into the top-layer surface. Excludes `color`/`font` (theming) and
@@ -30,13 +22,17 @@ var dialogAnimationStyles = {
 var surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
-var styles = {
-  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
+var dialogStyles = {
+  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v7kvq",
+  exit: "_y44vgeqi"
 };
 var backdropStyles = {
   root: "_1ltk1i5c",
   hidden: "_1ltk1j28",
-  motion: "_1m5e1op4 _1jhdq7pw _njwk11k7 _yhpqi9qs _1fyf1a5r _vhgsxbuz _1rsueoah _l57nglyw _1sbq147i _19awglyw _1i6z147i"
+  enter: "_1m5exbuz",
+  exit: "_1m5e1op4"
 };
 
 /**
@@ -62,9 +58,11 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     onClose = _ref.onClose,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? false : _ref$animate,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
     consumerXcss = _ref.xcss,
+    enteringAnimationXcss = _ref.enteringAnimationXcss,
+    exitingAnimationXcss = _ref.exitingAnimationXcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -78,13 +76,12 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
       animationKind: 'dialog',
-      animate: animate,
+      shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase,
-    preset = _useAnimatedVisibilit.preset;
+    phase = _useAnimatedVisibilit.phase;
 
   // True while the host element is mounted (any phase except `closed`).
   // Used as a dep so listener-rebind effects re-attach after a remount.
@@ -189,6 +186,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   if (!isVisible) {
     return null;
   }
+  var shouldAnimateBackdrop = !shouldHideBackdrop && shouldAnimate;
   return /*#__PURE__*/React.createElement("dialog", {
     ref: combinedRef,
     id: dialogId
@@ -202,7 +200,11 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     "aria-labelledby": label ? undefined : labelledBy,
     style: style,
     onCancel: handleCancel,
-    "data-testid": testId,
-    className: ax([styles.dialog, surfaceResetStyles.root, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    ,
+    className: ax([
+    // Dialog styles
+    dialogStyles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && dialogStyles.enter, shouldAnimate && phase === 'exiting' && dialogStyles.exit, shouldAnimate && dialogStyles.motion, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, shouldAnimateBackdrop && phase === 'entering' && backdropStyles.enter, shouldAnimateBackdrop && phase === 'exiting' && backdropStyles.exit, cx(consumerXcss, shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/esm/internal/use-animated-visibility.js

@@ -60,13 +60,6 @@ function runOnTransitionEndOrTimeout(_ref) {
   return teardown;
 }
 
-/**
- * Animation config for entry/exit transitions.
- *
- * Currently no configuration is supported via this prop,
- * and this is just a placeholder.
- */
-
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
  * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
@@ -131,17 +124,11 @@ function runOnTransitionEndOrTimeout(_ref) {
 export function useAnimatedVisibility(_ref2) {
   var isOpen = _ref2.isOpen,
     animationKind = _ref2.animationKind,
-    animate = _ref2.animate,
+    shouldAnimate = _ref2.shouldAnimate,
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
     onExitFinish = _ref2.onExitFinish;
-  // Styles are applied via the `css` prop on the host element (see `Popover`
-  // and `Dialog`), so there is no longer any CSS injection step. Normalize a
-  // falsy `animate` to `null`.
-  var preset = animate || null;
-
-  // False when there is no preset or `prefers-reduced-motion` is set.
-  var willAnimate = Boolean(animate) && !prefersReducedMotion();
+  var willAnimate = shouldAnimate && !prefersReducedMotion();
 
   // Promote `closed → entering`/`closed → open` synchronously during
   // render so the host element mounts in the same commit as the open
@@ -310,7 +297,6 @@ export function useAnimatedVisibility(_ref2) {
     }
   }, [phase, willAnimate]);
   return {
-    phase: phase,
-    preset: preset
+    phase: phase
   };
 }

package/dist/esm/popover/popover.compiled.css

@@ -1,32 +1,26 @@
-._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ign:popover-open{transition-duration:var(--ds-duration-short,.15s)}
-._18m9ewfl{overflow-y:visible}
+._y44v179n{animation:var(--ds-popover-motion-enter)}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
 ._1i4q4jg8{overflow-wrap:normal}
 ._1nmz4jg8{word-break:normal}
-._1o51q7pw{animation-fill-mode:forwards}
+._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
 ._1p1dglyw{text-transform:none}
-._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
-._1psg1ign:popover-open{animation-duration:var(--ds-duration-short,.15s)}
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
 ._4t3i1wug{height:auto}
-._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._azhwidpf{text-indent:0}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
-._n70peoah:popover-open{animation-fill-mode:backwards}
 ._o5724jg8{white-space:normal}
-._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
 ._y3gnv2br{text-align:start}
-@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/esm/popover/popover.js

@@ -2,6 +2,7 @@
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
@@ -25,14 +26,6 @@ var supportsPopoverHint = once(function () {
   return element.popover === 'hint';
 });
 
-// These animation styles use the non-strict Compiled cssMap because they rely
-// on `@starting-style`, `:popover-open`, `[dir='rtl']`, and `allow-discrete`.
-// Keep them in this component so the Compiled transform can statically extract
-// every referenced style.
-var popoverAnimationStyles = {
-  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
-};
-
 // Surface reset — neutralises inherited text-layout properties (e.g.
 // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
 // top-layer element because, for CSS inheritance, it is still a DOM child of its
@@ -48,7 +41,10 @@ var surfaceResetStyles = {
   root: "_o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug"
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
+  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
+  enter: "_y44v179n",
+  exit: "_y44vof1f"
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
@@ -96,12 +92,13 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    _ref$animate = _ref.animate,
-    animate = _ref$animate === void 0 ? false : _ref$animate,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate,
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
-    consumerXcss = _ref.xcss,
+    enteringAnimationXcss = _ref.enteringAnimationXcss,
+    exitingAnimationXcss = _ref.exitingAnimationXcss,
     role = _ref.role,
     label = _ref.label,
     labelledBy = _ref.labelledBy,
@@ -114,13 +111,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
       animationKind: 'popover',
-      animate: animate,
+      shouldAnimate: shouldAnimate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
-    phase = _useAnimatedVisibilit.phase,
-    preset = _useAnimatedVisibilit.preset;
+    phase = _useAnimatedVisibilit.phase;
 
   // True while the host element is mounted (any phase except `closed`).
   // Used as a dep so listener-rebind effects re-attach after a remount.
@@ -290,7 +286,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         placement: placement
       })
     });
-  }, [preset, placement, isVisible]);
+  }, [placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
@@ -339,6 +335,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    className: ax([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, cx(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);
 });

package/dist/types/dialog/types.d.ts

@@ -1,6 +1,6 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type CompiledStyles } from '@compiled/react';
-import type { TAnimationConfig } from '../internal/use-animated-visibility';
+import type { CSSProperties, ReactNode } from 'react';
+import type { XCSSProp } from '@compiled/react';
+import type { StrictXCSSProp } from '@atlaskit/css';
 /**
  * Close reasons produced by the Dialog primitive.
  *
@@ -23,9 +23,10 @@ type TDialogBaseProps = {
     /**
      * Whether the dialog is open.
      *
-     * - `true`: calls `showModal()`, entry animation plays via `@starting-style`.
-     * - `false`: calls `close()`. When an `animate` preset is provided, the exit
-     *   animation plays (via `allow-discrete`) before the dialog becomes logically closed.
+     * - `true`: calls `showModal()`. When `shouldAnimate` is `true`, the entry
+     *   animation plays via `@starting-style`.
+     * - `false`: calls `close()`. When `shouldAnimate` is `true`, the exit
+     *   animation plays via `allow-discrete` before the dialog becomes logically closed.
      *
      * **Lifecycle observable to consumers:**
      *
@@ -48,19 +49,31 @@ type TDialogBaseProps = {
         reason: TDialogCloseReason;
     }) => void;
     /**
-     * Animation config for entry/exit transitions.
+     * Whether the dialog should animate in and out.
      *
-     * Pass `true` to use the default dialog animation. Pass a config object to
-     * customize supported animation settings. Pass `false` or omit to disable.
+     * When `true`, default dialog animation styles are applied. Use `enteringAnimationXcss`
+     * and `exitingAnimationXcss` to override the animation used for each phase.
      */
-    animate?: boolean | TAnimationConfig;
+    shouldAnimate?: boolean;
     /**
      * Additional Compiled styles applied to the `<dialog>` element.
      *
      * Applied after built-in dialog and animation styles so consumers can own
      * static styling that must live in their package.
      */
-    xcss?: CompiledStyles<Record<string, unknown>> | false | null | undefined;
+    xcss?: XCSSProp<'margin' | 'height' | 'width' | 'maxWidth' | 'insetBlockStart' | 'insetInlineStart' | 'insetInlineEnd', never>;
+    /**
+     * Animation styles applied while the dialog is entering.
+     *
+     * Only applied when `shouldAnimate` is `true`.
+     */
+    enteringAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
+    /**
+     * Animation styles applied while the dialog is exiting.
+     *
+     * Only applied when `shouldAnimate` is `true`.
+     */
+    exitingAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
     /**
      * Additional inline styles applied to the `<dialog>` element.
      *

package/dist/types/internal/use-animated-visibility.d.ts

@@ -1,12 +1,5 @@
 import { type RefObject } from 'react';
 type TAnimationKind = 'dialog' | 'popover';
-/**
- * Animation config for entry/exit transitions.
- *
- * Currently no configuration is supported via this prop,
- * and this is just a placeholder.
- */
-export type TAnimationConfig = never;
 type TUseAnimatedVisibilityArgs = {
     /**
      * Whether the element is logically open.
@@ -20,7 +13,7 @@ type TUseAnimatedVisibilityArgs = {
      * Animation config for entry/exit transitions.
      * Pass `false` or `undefined` to disable animation.
      */
-    animate: boolean | TAnimationConfig;
+    shouldAnimate: boolean;
     /**
      * Ref to the DOM element that plays the entry/exit transitions.
      * Used to listen for `transitionend`.
@@ -49,11 +42,6 @@ type TUseAnimatedVisibilityResult = {
      * trapping, listeners that must outlive the exit).
      */
     phase: TPhase;
-    /**
-     * Resolved animation preset (styles applied via the host element's `css`
-     * prop), or `null` if animation is disabled.
-     */
-    preset: boolean | TAnimationConfig | null;
 };
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
@@ -116,5 +104,5 @@ export type TPhase = 'closed' | 'entering' | 'open' | 'exiting';
  * Every effect dispatches on the single `phase` value instead of a
  * cross-product of booleans.
  */
-export declare function useAnimatedVisibility({ isOpen, animationKind, animate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
+export declare function useAnimatedVisibility({ isOpen, animationKind, shouldAnimate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
 export {};

package/dist/types/placement-map/legacy-placements.d.ts

@@ -5,5 +5,5 @@
  * to enumerate every placement (e.g. for a settings dropdown). New code
  * should use the object-based `TPlacementOptions` directly.
  */
-export declare const LEGACY_PLACEMENTS: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-center", "top-end", "bottom", "bottom-start", "bottom-center", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
+export declare const LEGACY_PLACEMENTS: readonly ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
 export type TLegacyPlacement = (typeof LEGACY_PLACEMENTS)[number];

package/dist/types/popover/types.d.ts

@@ -2,7 +2,6 @@ import { type ReactNode } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
-import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * The reason a popover was closed.
  *
@@ -33,20 +32,24 @@ export type { TPlacementOptions };
 type TPopoverBaseProps = {
     children: ReactNode;
     /**
-     * Additional CSS styles applied to the popover root element.
-     * Use to set `backgroundColor` to match the popup surface colour.
+     * Animation styles applied while the popover is entering.
+     *
+     * Only applied when `shouldAnimate` is `true`.
+     */
+    enteringAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
+    /**
+     * Animation styles applied while the popover is exiting.
+     *
+     * Only applied when `shouldAnimate` is `true`.
      */
-    xcss?: StrictXCSSProp<'animationName', '&:popover-open', {
-        requiredPseudos: '&:popover-open';
-        requiredProperties: never;
-    }>;
+    exitingAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
     /**
-     * Animation preset for entry/exit transitions.
+     * Whether the popover should animate in and out.
      *
-     * Animations use `@starting-style` and `allow-discrete` for progressive
-     * enhancement: browsers without support show/hide instantly.
+     * When `true`, default popover animation styles are applied. Use `enteringAnimationXcss`
+     * and `exitingAnimationXcss` to override the animation used for each phase.
      */
-    animate?: boolean | TAnimationConfig;
+    shouldAnimate?: boolean;
     /**
      * Test ID applied to the popover element.
      */
@@ -61,9 +64,10 @@ type TPopoverBaseProps = {
     /**
      * Whether the popover is open.
      *
-     * - **`true`:** show the popover (calls `showPopover()`, entry animation plays via `@starting-style`).
-     * - **`false`:** hide the popover. When an `animate` preset is provided, the exit
-     *   animation plays (via `allow-discrete`) before the popover becomes logically closed.
+     * - **`true`:** show the popover (calls `showPopover()`). When `shouldAnimate`
+     *   is `true`, the entry animation plays via `@starting-style`.
+     * - **`false`:** hide the popover. When `shouldAnimate` is `true`, the exit
+     *   animation plays via `allow-discrete` before the popover becomes logically closed.
      *   Otherwise hides instantly.
      *
      * The consumer does not conditionally render the `Popover` - visibility is driven
@@ -112,9 +116,9 @@ type TPopoverBaseProps = {
     /**
      * Placement hint for directional animations (e.g. `slideAndFade`).
      *
-     * When `animate` is provided, the preset's `getStyles(placement)` is
-     * called to set CSS custom properties (like `--ds-popover-tx`, `--ds-popover-ty`)
-     * that control the slide direction. Has no effect without `animate`.
+     * When `shouldAnimate` is `true`, placement is used to set CSS custom
+     * properties (like `--ds-popover-tx`, `--ds-popover-ty`) that control the
+     * slide direction. Has no effect without `shouldAnimate`.
      *
      * This does NOT control positioning. Use `useAnchorPosition` for that.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.10.1",
+	"version": "2.0.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^22.1.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",