@atlaskit/top-layer 1.2.0 → 1.4.0

package/dist/es2019/animations/presets.js

@@ -1,32 +1,25 @@
 import { getPlacement } from '../internal/resolve-placement';
-// ══════════════════════════════════════════════════════════════════════════════
-// Popover presets
-// ══════════════════════════════════════════════════════════════════════════════
-
-// ── popupMotion ──
-
-const POPUP_MOTION_CSS = `
-  [data-ds-popover-popup-motion] {
-    animation: var(--ds-popover-motion-exit);
-    animation-fill-mode: forwards;
-    transition:
-      overlay 150ms allow-discrete,
-      display 150ms allow-discrete;
-  }
-
-  [data-ds-popover-popup-motion]:popover-open {
-    animation: var(--ds-popover-motion-enter);
-    animation-fill-mode: backwards;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export const animationDurations = {
+  popupMotion: {
+    enter: 150,
+    exit: 100
+  },
+  popoverTransition: {
+    enter: 350,
+    exit: 175
+  },
+  dialogMotion: {
+    enter: 250,
+    exit: 200
+  },
+  dialogTransition: {
+    enter: 350,
+    exit: 175
   }
+};
+// popupMotion
 
-  @media (prefers-reduced-motion: reduce) {
-    [data-ds-popover-popup-motion],
-    [data-ds-popover-popup-motion]:popover-open {
-      animation: none;
-      transition-duration: 0s;
-    }
-  }
-`;
 function getPopupMotionProperties({
   placement
 }) {
@@ -65,9 +58,8 @@ function getPopupMotionProperties({
 export function popupMotion() {
   return {
     name: 'popup-motion',
-    css: POPUP_MOTION_CSS,
-    enterDurationMs: 150,
-    exitDurationMs: 100,
+    enterDurationMs: animationDurations.popupMotion.enter,
+    exitDurationMs: animationDurations.popupMotion.exit,
     getProperties: ({
       placement
     }) => getPopupMotionProperties({
@@ -76,7 +68,7 @@ export function popupMotion() {
   };
 }
 
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties({
   placement,
@@ -120,49 +112,6 @@ function getSlideAndFadeProperties({
   };
 }
 
-// ℹ️ Note: The `transform` x value is flipped in right-to-left mode using the `[dir='rtl']` selector.
-const SLIDE_AND_FADE_CSS = `
-[data-ds-popover-slide-and-fade] {
-  opacity: 0;
-  transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));
-  transition:
-    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[dir='rtl'] [data-ds-popover-slide-and-fade] {
-  transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));
-}
-
-[data-ds-popover-slide-and-fade]:popover-open {
-  opacity: 1;
-  transform: none;
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-popover-slide-and-fade]:popover-open {
-    opacity: 0;
-    transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));
-  }
-}
-
-@starting-style {
-  [dir='rtl'] [data-ds-popover-slide-and-fade]:popover-open {
-    transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-popover-slide-and-fade],
-  [data-ds-popover-slide-and-fade]:popover-open {
-    transition-duration: 0s;
-  }
-}
-`;
-
 /**
  * Directional slide + opacity animation.
  *
@@ -188,48 +137,19 @@ export function slideAndFade(options) {
   const distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
   return {
     name: 'slide-and-fade',
-    css: SLIDE_AND_FADE_CSS,
     getProperties: ({
       placement
     }) => getSlideAndFadeProperties({
       placement,
       distance
     }),
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.popoverTransition.enter,
+    exitDurationMs: animationDurations.popoverTransition.exit
   };
 }
 
 // fade
 
-const FADE_CSS = `
-[data-ds-popover-fade] {
-  opacity: 0;
-  transition:
-    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-popover-fade]:popover-open {
-  opacity: 1;
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-popover-fade]:popover-open {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-popover-fade],
-  [data-ds-popover-fade]:popover-open {
-    transition-duration: 0s;
-  }
-}
-`;
-
 /**
  * Simple opacity transition, no transform.
  *
@@ -246,46 +166,13 @@ const FADE_CSS = `
 export function fade() {
   return {
     name: 'fade',
-    css: FADE_CSS,
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.popoverTransition.enter,
+    exitDurationMs: animationDurations.popoverTransition.exit
   };
 }
 
 // scaleAndFade
 
-const SCALE_AND_FADE_CSS = `
-[data-ds-popover-scale-and-fade] {
-  opacity: 0;
-  transform: scale(0.95);
-  transition:
-    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-popover-scale-and-fade]:popover-open {
-  opacity: 1;
-  transform: none;
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-popover-scale-and-fade]:popover-open {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-popover-scale-and-fade],
-  [data-ds-popover-scale-and-fade]:popover-open {
-    transition-duration: 0s;
-  }
-}
-`;
-
 /**
  * Scale from 0.95 + opacity transition.
  *
@@ -302,56 +189,12 @@ const SCALE_AND_FADE_CSS = `
 export function scaleAndFade() {
   return {
     name: 'scale-and-fade',
-    css: SCALE_AND_FADE_CSS,
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.popoverTransition.enter,
+    exitDurationMs: animationDurations.popoverTransition.exit
   };
 }
 
-// ══════════════════════════════════════════════════════════════════════════════
-// Dialog presets
-// ══════════════════════════════════════════════════════════════════════════════
-
-// ── dialogMotion ──
-
-const DIALOG_MOTION_CSS = `
-  [data-ds-dialog-motion] {
-    animation: ${"var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)"};
-    animation-fill-mode: forwards;
-    transition:
-      overlay 200ms allow-discrete,
-      display 200ms allow-discrete;
-  }
-
-  [data-ds-dialog-motion][open] {
-    animation: ${"var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)"};
-    animation-fill-mode: backwards;
-  }
-
-  [data-ds-dialog-motion]::backdrop {
-    animation: ${"var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"};
-    animation-fill-mode: forwards;
-    background-color: var(--ds-blanket, #050C1F75);
-    transition:
-      overlay 200ms allow-discrete,
-      display 200ms allow-discrete;
-  }
-
-  [data-ds-dialog-motion][open]::backdrop {
-    animation: ${"var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)"};
-    animation-fill-mode: backwards;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-ds-dialog-motion],
-    [data-ds-dialog-motion][open],
-    [data-ds-dialog-motion]::backdrop,
-    [data-ds-dialog-motion][open]::backdrop {
-      animation: none;
-      transition-duration: 0s;
-    }
-  }
-`;
+// dialogMotion
 
 /**
  * Dialog motion animation.
@@ -372,66 +215,12 @@ export function dialogMotion() {
   // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
   return {
     name: 'motion',
-    css: DIALOG_MOTION_CSS,
-    enterDurationMs: 250,
-    exitDurationMs: 200
+    enterDurationMs: animationDurations.dialogMotion.enter,
+    exitDurationMs: animationDurations.dialogMotion.exit
   };
 }
 
-// ── dialogSlideUpAndFade ──
-
-const DIALOG_SLIDE_UP_AND_FADE_CSS = `
-[data-ds-dialog-slide-up-and-fade] {
-  opacity: 0;
-  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));
-  transition:
-    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-dialog-slide-up-and-fade][open] {
-  opacity: 1;
-  transform: none;
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-dialog-slide-up-and-fade][open] {
-    opacity: 0;
-    transform: translateY(var(--ds-dialog-ty, 12px));
-  }
-}
-
-[data-ds-dialog-slide-up-and-fade]::backdrop {
-  background-color: transparent;
-  transition:
-    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-dialog-slide-up-and-fade][open]::backdrop {
-  background-color: var(--ds-blanket, #050C1F75);
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-dialog-slide-up-and-fade][open]::backdrop {
-    background-color: transparent;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-dialog-slide-up-and-fade],
-  [data-ds-dialog-slide-up-and-fade][open],
-  [data-ds-dialog-slide-up-and-fade]::backdrop,
-  [data-ds-dialog-slide-up-and-fade][open]::backdrop {
-    transition-duration: 0s;
-  }
-}
-`;
+// dialogSlideUpAndFade
 
 /**
  * Slide up + opacity animation for dialogs.
@@ -457,65 +246,20 @@ export function dialogSlideUpAndFade(options) {
   const distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
 
   // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
+  // The distance is applied via the `--ds-dialog-ty` custom property rather
+  // than baked into the styles, so the name stays stable across distances.
   return {
-    name: distance === 12 ? 'slide-up-and-fade' : `slide-up-and-fade-${distance}`,
-    css: distance === 12 ? DIALOG_SLIDE_UP_AND_FADE_CSS : DIALOG_SLIDE_UP_AND_FADE_CSS.replace(/12px/g, `${distance}px`),
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    name: 'slide-up-and-fade',
+    getProperties: () => ({
+      '--ds-dialog-ty': `${distance}px`
+    }),
+    enterDurationMs: animationDurations.dialogTransition.enter,
+    exitDurationMs: animationDurations.dialogTransition.exit
   };
 }
 
 // dialogFade
 
-const DIALOG_FADE_CSS = `
-[data-ds-dialog-fade] {
-  opacity: 0;
-  transition:
-    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-dialog-fade][open] {
-  opacity: 1;
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-dialog-fade][open] {
-    opacity: 0;
-  }
-}
-
-[data-ds-dialog-fade]::backdrop {
-  background-color: transparent;
-  transition:
-    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),
-    overlay 175ms allow-discrete,
-    display 175ms allow-discrete;
-}
-
-[data-ds-dialog-fade][open]::backdrop {
-  background-color: var(--ds-blanket, #050C1F75);
-  transition-duration: 350ms;
-}
-
-@starting-style {
-  [data-ds-dialog-fade][open]::backdrop {
-    background-color: transparent;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-dialog-fade],
-  [data-ds-dialog-fade][open],
-  [data-ds-dialog-fade]::backdrop,
-  [data-ds-dialog-fade][open]::backdrop {
-    transition-duration: 0s;
-  }
-}
-`;
-
 /**
  * Simple opacity transition for dialogs, no transform.
  *
@@ -535,8 +279,7 @@ export function dialogFade() {
   // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
   return {
     name: 'fade',
-    css: DIALOG_FADE_CSS,
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.dialogTransition.enter,
+    exitDurationMs: animationDurations.dialogTransition.exit
   };
 }

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

@@ -1,14 +1,58 @@
 
-._19itglyw{border:none}._18u01wug{margin-left:auto}
+._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)}
+._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._13ku1a34::-ms-backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._13ku1a34::backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
+._1fsl1ttt[open]{transition-duration:.35s}
+._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
+._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
+._1gbckb7n[open]{opacity:1}
+._1i0neoah[open]{animation-fill-mode:backwards}
+._1jhdq7pw::-ms-backdrop{animation-fill-mode:forwards}
+._1jhdq7pw::backdrop{animation-fill-mode:forwards}
+._1kdeglyw[open]{transform:none}
 ._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}
+._1o51q7pw{animation-fill-mode:forwards}
+._1oecfnf5{transition-duration:.2s}
+._1oecluct{transition-duration:175ms}
 ._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}
+._4v7i1ttt[open]::-ms-backdrop{transition-duration:.35s}
+._4v7i1ttt[open]::backdrop{transition-duration:.35s}
+._6fl41a34{transition-timing-function:cubic-bezier(.15,1,.3,1)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._bfhk1j28{background-color:transparent}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71lglyw{max-height:none}
+._d7fr1i5c[open]::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._d7fr1i5c[open]::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._k8m011k7{transition-property:overlay,display}
+._k8m01slm{transition-property:opacity,overlay,display}
+._k8m0rv36{transition-property:opacity,transform,overlay,display}
+._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
+._njwk11k7::backdrop{transition-property:overlay,display}
+._njwkivc9::-ms-backdrop{-ms-transition-property:background-color,overlay,display;transition-property:background-color,overlay,display}
+._njwkivc9::backdrop{transition-property:background-color,overlay,display}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
-._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._t9ec9o47{transform:translateY(calc(var(--ds-dialog-ty, 9pt)*-1))}
+._tzy4idpf{opacity:0}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._yhpqfnf5::-ms-backdrop{transition-duration:.2s}
+._yhpqfnf5::backdrop{transition-duration:.2s}
+._yhpqluct::-ms-backdrop{transition-duration:175ms}
+._yhpqluct::backdrop{transition-duration:175ms}
+@media (prefers-reduced-motion:reduce){._156yru3m{transition-duration:0s}._aeldru3m[open]{transition-duration:0s}._1sbqru3m::-ms-backdrop{transition-duration:0s}._1sbqru3m::backdrop{transition-duration:0s}._1i6zru3m[open]::-ms-backdrop{transition-duration:0s}._1i6zru3m[open]::backdrop{transition-duration:0s}._bl8aglyw{animation-name:none}._10aiglyw[open]{animation-name:none}._l57nglyw::-ms-backdrop{animation-name:none}._l57nglyw::backdrop{animation-name:none}._19awglyw[open]::-ms-backdrop{animation-name:none}._19awglyw[open]::backdrop{animation-name:none}}
+@starting-style{._1dar1j28[open]::-ms-backdrop{background-color:transparent}._1dar1j28[open]::backdrop{background-color:transparent}._rornidpf[open]{opacity:0}._1hqtc4j2[open]{transform:translateY(var(--ds-dialog-ty,9pt))}}

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

@@ -9,7 +9,15 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- dialog reset requires values not in cssMap's type union
+// 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 = {
+  motion: "_y44vgeqi _1o51q7pw _k8m011k7 _1oecfnf5 _1s9z1a5r _1iu47kvq _1i0neoah _1m5e1op4 _1jhdq7pw _1ltk1i5c _njwk11k7 _yhpqfnf5 _1fyf1a5r _vhgsxbuz _1rsueoah _bl8aglyw _156yru3m _10aiglyw _aeldru3m _l57nglyw _1sbqru3m _19awglyw _1i6zru3m",
+  slideUpAndFade: "_tzy4idpf _t9ec9o47 _k8m0rv36 _1oecluct _6fl41a34 _1s9z1a5r _1gbckb7n _1kdeglyw _1fsl1ttt _rornidpf _1hqtc4j2 _1ltk1j28 _njwkivc9 _yhpqluct _13ku1a34 _1fyf1a5r _d7fr1i5c _4v7i1ttt _1dar1j28 _156yru3m _aeldru3m _1sbqru3m _1i6zru3m",
+  fade: "_tzy4idpf _k8m01slm _1oecluct _6fl41a34 _1s9z1a5r _1gbckb7n _1fsl1ttt _rornidpf _1ltk1j28 _njwkivc9 _yhpqluct _13ku1a34 _1fyf1a5r _d7fr1i5c _4v7i1ttt _1dar1j28 _156yru3m _aeldru3m _1sbqru3m _1i6zru3m"
+};
 const styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _1ltk1i5c"
 };
@@ -35,8 +43,10 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   children,
   isOpen,
   onClose,
+  onEnterFinish,
   onExitFinish,
   animate,
+  xcss: xcssFromProps,
   style,
   testId,
   id: providedId,
@@ -55,6 +65,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     isOpen,
     animate,
     elementRef: ownRef,
+    onEnterFinish,
     onExitFinish
   });
 
@@ -101,8 +112,39 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     }
   }, [isOpen]);
 
+  // Apply preset-provided animation custom properties (e.g. the
+  // `--ds-dialog-ty` slide distance for `dialogSlideUpAndFade`). The
+  // cleanup removes them so a preset change does not leave stale
+  // custom properties on the element. Dialog presets do not vary by
+  // placement, so an empty placement is passed.
+  useLayoutEffect(() => {
+    const dialog = ownRef.current;
+    if (!dialog || !(preset !== null && preset !== void 0 && preset.getProperties)) {
+      return;
+    }
+    const props = preset.getProperties({
+      placement: {}
+    });
+    Object.entries(props).forEach(([key, value]) => {
+      dialog.style.setProperty(key, String(value));
+    });
+    return () => {
+      Object.keys(props).forEach(key => {
+        dialog.style.removeProperty(key);
+      });
+    };
+  }, [preset, isVisible]);
+
   // Handle native Escape (cancel event)
   const handleCancel = useCallback(event => {
+    // Only handle a cancel targeting THIS dialog. Native `cancel` does not
+    // bubble, but React's synthetic event bubbles up the component tree, so
+    // for nested dialogs (one rendered inside another's DOM subtree) the
+    // inner dialog's Escape would otherwise also fire an ancestor dialog's
+    // handler and close it too. Mirrors the backdrop-click target guard below.
+    if (event.target !== event.currentTarget) {
+      return;
+    }
     event.preventDefault();
     onClose({
       reason: 'escape'
@@ -163,7 +205,8 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   }, preset ? {
     [`data-ds-dialog-${preset.name}`]: ''
   } : undefined, {
-    className: ax([styles.dialog])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes Compiled atomic class names from consumer-owned cssMap entries
+    className: ax([styles.dialog, (preset === null || preset === void 0 ? void 0 : preset.name) === 'motion' && dialogAnimationStyles.motion, (preset === null || preset === void 0 ? void 0 : preset.name) === 'slide-up-and-fade' && dialogAnimationStyles.slideUpAndFade, (preset === null || preset === void 0 ? void 0 : preset.name) === 'fade' && dialogAnimationStyles.fade, xcssFromProps])
   }), shouldHideBackdrop &&
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles

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

@@ -1,7 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import { prefersReducedMotion } from './reduced-motion';
-import { usePresetStyles } from './use-preset-styles';
 /**
  * Fires `onSettled` once when `transitionend` fires on `element`, or after
  * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
@@ -106,9 +105,10 @@ export function useAnimatedVisibility({
   onEnterFinish,
   onExitFinish
 }) {
-  const preset = usePresetStyles({
-    preset: animate
-  });
+  // 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();

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

@@ -1,13 +1,33 @@
 
+._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
-._1r041wug{inset:auto}._18m9ewfl{overflow-y:visible}
+._1r041wug{inset:auto}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ttt:popover-open{transition-duration:.35s}
+._162xglyw:popover-open{transform:none}
+._18m9ewfl{overflow-y:visible}
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
+._1f6ykb7n:popover-open{opacity:1}
+._1o51q7pw{animation-fill-mode:forwards}
+._1oec6ebc{transition-duration:.15s}
+._1oecluct{transition-duration:175ms}
 ._1reoewfl{overflow-x:visible}
+._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
+._6fl41a34{transition-timing-function:cubic-bezier(.15,1,.3,1)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
+._k8m011k7{transition-property:overlay,display}
+._k8m01slm{transition-property:opacity,overlay,display}
+._k8m0rv36{transition-property:opacity,transform,overlay,display}
 ._n3tdidpf{padding-bottom:0}
+._n70peoah:popover-open{animation-fill-mode:backwards}
 ._otyridpf{margin-bottom:0}
-._u5f3idpf{padding-right:0}
+._t9ecgt2x{transform:scale(.95)}
+._t9ecxauz{transform:translate(var(--ds-popover-tx,0),var(--ds-popover-ty,0))}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+[dir=rtl] ._1tz31oq6{transform:translate(calc(var(--ds-popover-tx, 0)*-1),var(--ds-popover-ty,0))}
+@media (prefers-reduced-motion:reduce){._156yru3m{transition-duration:0s}._2qm2ru3m:popover-open{transition-duration:0s}._bl8aglyw{animation-name:none}._8rmvglyw:popover-open{animation-name:none}}
+@starting-style{._1wuhidpf:popover-open{opacity:0}._1423gt2x:popover-open{transform:scale(.95)}._1423xauz:popover-open{transform:translate(var(--ds-popover-tx,0),var(--ds-popover-ty,0))}[dir=rtl] ._1dml1oq6:popover-open{transform:translate(calc(var(--ds-popover-tx, 0)*-1),var(--ds-popover-ty,0))}}

package/dist/es2019/popover/popover.js

@@ -24,7 +24,16 @@ const supportsPopoverHint = once(() => {
   return element.popover === 'hint';
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- popover UA reset requires values not in cssMap's type union
+// 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 = {
+  popupMotion: "_y44vof1f _1o51q7pw _k8m011k7 _1oec6ebc _1s9z1a5r _15ns179n _n70peoah _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m",
+  slideAndFade: "_tzy4idpf _t9ecxauz _k8m0rv36 _1oecluct _6fl41a34 _1s9z1a5r _1tz31oq6 _1f6ykb7n _162xglyw _12t71ttt _1wuhidpf _1423xauz _156yru3m _2qm2ru3m _1dml1oq6",
+  fade: "_tzy4idpf _k8m01slm _1oecluct _6fl41a34 _1s9z1a5r _1f6ykb7n _12t71ttt _1wuhidpf _156yru3m _2qm2ru3m",
+  scaleAndFade: "_tzy4idpf _t9ecgt2x _k8m0rv36 _1oecluct _6fl41a34 _1s9z1a5r _1f6ykb7n _162xglyw _12t71ttt _1wuhidpf _1423gt2x _156yru3m _2qm2ru3m"
+};
 const styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
 };
@@ -254,7 +263,9 @@ 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.
+  // so preset reference changes do not re-trigger visibility. The cleanup
+  // removes the properties so a preset change does not leave stale custom
+  // properties on the element.
   useLayoutEffect(() => {
     const element = ownRef.current;
     if (!element || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
@@ -266,6 +277,11 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     Object.entries(props).forEach(([key, value]) => {
       element.style.setProperty(key, String(value));
     });
+    return () => {
+      Object.keys(props).forEach(key => {
+        element.style.removeProperty(key);
+      });
+    };
   }, [preset, placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
@@ -319,6 +335,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     [`data-ds-popover-${preset.name}`]: ''
   } : undefined, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes compiled atomic class names
-    className: ax([styles.root, xcssFromProps])
+    className: ax([styles.root, (preset === null || preset === void 0 ? void 0 : preset.name) === 'popup-motion' && popoverAnimationStyles.popupMotion, (preset === null || preset === void 0 ? void 0 : preset.name) === 'slide-and-fade' && popoverAnimationStyles.slideAndFade, (preset === null || preset === void 0 ? void 0 : preset.name) === 'fade' && popoverAnimationStyles.fade, (preset === null || preset === void 0 ? void 0 : preset.name) === 'scale-and-fade' && popoverAnimationStyles.scaleAndFade, xcssFromProps])
   }), children);
 });