@atlaskit/top-layer 1.10.1 → 3.0.0

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

@@ -1,7 +1,8 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
 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/placement-to-position-area.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * Resolves placement options to CSS `position-area` syntax.
@@ -24,7 +24,7 @@ export function placementToPositionArea({
     axis,
     edge,
     align
-  } = getPlacement({
+  } = resolvePlacement({
     placement
   });
   const edgeValue = `${axis}-${edge}`;

package/dist/es2019/internal/placement-to-try-fallbacks.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * A `position-area` primary edge — the placement axis joined to its edge, e.g.
@@ -47,7 +47,7 @@ export function placementToTryFallbacks({
    * The browser tries them _in order_ and uses the _first_ one that fits.
    */
 
-  const resolved = getPlacement({
+  const resolved = resolvePlacement({
     placement
   });
   const {

package/dist/es2019/internal/resolve-css-length-to-pixels.js

@@ -61,7 +61,7 @@ export function resolveCssLengthToPixels({
   }
 
   // Fast path: bare `${n}px` strings come from the consumer normalisation
-  // in `getPlacement`. Avoid a reflow when we can.
+  // in `resolvePlacement`. Avoid a reflow when we can.
   const pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
   if (pxMatch) {
     return Number(pxMatch[1]);

package/dist/es2019/internal/resolve-placement.js

@@ -14,7 +14,7 @@ const DEFAULT_GAP = "var(--ds-space-100, 8px)";
  */
 
 /**
- * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
  * length strings.
  */
@@ -37,7 +37,7 @@ const DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * `offset.gap: token('space.100', '8px')`,
  * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
-export function getPlacement({
+export function resolvePlacement({
   placement
 }) {
   var _placement$offset, _placement$axis, _placement$edge, _placement$align, _placement$offset$cro, _placement$offset2, _placement$offset2$cr, _placement$offset$cro2, _placement$offset3, _placement$offset3$cr;

package/dist/es2019/internal/use-anchor-position.js

@@ -21,10 +21,10 @@ import { combine } from './combine';
 import { placementToPositionArea } from './placement-to-position-area';
 import { placementToTryFallbacks } from './placement-to-try-fallbacks';
 import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 import { setStyle } from './set-style';
 
-// `getPlacement` is intentionally NOT re-exported here - import it directly
+// `resolvePlacement` is intentionally NOT re-exported here - import it directly
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
@@ -144,7 +144,7 @@ function crossAxisShiftMargin({
  * (or undefined fields vs explicit defaults) does not produce a fresh result.
  */
 function useStablePlacement(placement) {
-  const resolved = getPlacement({
+  const resolved = resolvePlacement({
     placement
   });
   const axis = resolved.axis;

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

@@ -1,17 +1,17 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, 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';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
+import { resolvePlacement } from '../internal/resolve-placement';
 import { shouldFocusIntoPopover } from '../internal/role-types';
-import { setStyle } from '../internal/set-style';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
-import { getPopupMotionStyles } from './animations';
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
  */
@@ -25,14 +25,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 +40,35 @@ 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"
+};
+
+// Intentionally using `Record<string, string>` instead of `React.CSSProperties`
+// to avoid type errors about the CSS variables not being valid property names
+const popupMotionStyles = {
+  block: {
+    start: {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    }
+  },
+  inline: {
+    start: {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    }
+  }
 };
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
@@ -92,14 +112,14 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   children,
   mode: modeProp = 'auto',
   onClose,
-  onOpenChange,
   onEnterFinish,
   onExitFinish,
-  animate = false,
+  shouldAnimate = false,
   placement,
   testId,
   isOpen,
-  xcss: consumerXcss,
+  enteringAnimationXcss,
+  exitingAnimationXcss,
   // ARIA
   role,
   label,
@@ -112,12 +132,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
@@ -162,6 +181,18 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // will close other `auto` popovers when opened. Acceptable trade-off given
   // shrinking browser set without `hint` support.
   const mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
+  const popupMotionStyle = useMemo(() => {
+    if (!placement || !shouldAnimate) {
+      return undefined;
+    }
+    const {
+      axis,
+      edge
+    } = resolvePlacement({
+      placement
+    });
+    return popupMotionStyles[axis][edge];
+  }, [placement, shouldAnimate]);
 
   // Prevents toggle handler from calling onClose for our own hidePopover() calls.
   const programmaticCloseRef = useRef(false);
@@ -183,21 +214,10 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   const handleToggle = useCallback(event => {
     const element = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
-          isOpen: true,
-          element: element
-        });
-      }
       return;
     }
     if (event.newState === 'closed') {
       if (element) {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
-          isOpen: false,
-          element: element
-        });
-
         // Nested-popover focus restoration fallback (browser only
         // restores outermost; Firefox skips nested entirely).
         // Restore only when the role moved focus in on open AND the
@@ -234,7 +254,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         reason
       });
     }
-  }, [onClose, onOpenChange, role]);
+  }, [onClose, role]);
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
@@ -276,23 +296,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     };
   }, [handleToggle, handleBeforeToggle, isVisible]);
 
-  // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility. The cleanup
-  // restores the previous inline values so a preset change does not leave
-  // stale custom properties on the element.
-  useLayoutEffect(() => {
-    const element = ownRef.current;
-    if (!element || !placement) {
-      return;
-    }
-    return setStyle({
-      element,
-      styles: getPopupMotionStyles({
-        placement
-      })
-    });
-  }, [preset, placement, isVisible]);
-
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
@@ -339,7 +342,11 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     role: role,
     "aria-label": label,
     "aria-labelledby": labelledBy,
-    "data-testid": testId,
-    className: ax([styles.root, surfaceResetStyles.root, preset && popoverAnimationStyles.root, consumerXcss])
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Motion styles are selected at runtime from the placement.
+    ,
+    style: popupMotionStyle,
+    // 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/es2019/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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)}}