@atlaskit/top-layer 1.3.0 → 1.4.0

package/dist/esm/animations/presets.js

@@ -1,11 +1,25 @@
 import { getPlacement } from '../internal/resolve-placement';
-// ══════════════════════════════════════════════════════════════════════════════
-// Popover presets
-// ══════════════════════════════════════════════════════════════════════════════
-
-// ── popupMotion ──
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export var animationDurations = {
+  popupMotion: {
+    enter: 150,
+    exit: 100
+  },
+  popoverTransition: {
+    enter: 350,
+    exit: 175
+  },
+  dialogMotion: {
+    enter: 250,
+    exit: 200
+  },
+  dialogTransition: {
+    enter: 350,
+    exit: 175
+  }
+};
+// popupMotion
 
-var POPUP_MOTION_CSS = "\n  [data-ds-popover-popup-motion] {\n    animation: var(--ds-popover-motion-exit);\n    animation-fill-mode: forwards;\n    transition:\n      overlay 150ms allow-discrete,\n      display 150ms allow-discrete;\n  }\n\n  [data-ds-popover-popup-motion]:popover-open {\n    animation: var(--ds-popover-motion-enter);\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-popover-popup-motion],\n    [data-ds-popover-popup-motion]:popover-open {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n";
 function getPopupMotionProperties(_ref) {
   var placement = _ref.placement;
   var _getPlacement = getPlacement({
@@ -42,9 +56,8 @@ function getPopupMotionProperties(_ref) {
 export function popupMotion() {
   return {
     name: 'popup-motion',
-    css: POPUP_MOTION_CSS,
-    enterDurationMs: 150,
-    exitDurationMs: 100,
+    enterDurationMs: animationDurations.popupMotion.enter,
+    exitDurationMs: animationDurations.popupMotion.exit,
     getProperties: function getProperties(_ref2) {
       var placement = _ref2.placement;
       return getPopupMotionProperties({
@@ -54,7 +67,7 @@ export function popupMotion() {
   };
 }
 
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties(_ref3) {
   var placement = _ref3.placement,
@@ -96,9 +109,6 @@ function getSlideAndFadeProperties(_ref3) {
   };
 }
 
-// ℹ️ Note: The `transform` x value is flipped in right-to-left mode using the `[dir='rtl']` selector.
-var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n  opacity: 0;\n  transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[dir='rtl'] [data-ds-popover-slide-and-fade] {\n  transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n}\n\n[data-ds-popover-slide-and-fade]:popover-open {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-slide-and-fade]:popover-open {\n    opacity: 0;\n    transform: translate(var(--ds-popover-tx, 0), var(--ds-popover-ty, 0));\n  }\n}\n\n@starting-style {\n  [dir='rtl'] [data-ds-popover-slide-and-fade]:popover-open {\n    transform: translate(calc(-1 * var(--ds-popover-tx, 0)), var(--ds-popover-ty, 0));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-slide-and-fade],\n  [data-ds-popover-slide-and-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
-
 /**
  * Directional slide + opacity animation.
  *
@@ -124,7 +134,6 @@ export function slideAndFade(options) {
   var 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: function getProperties(_ref4) {
       var placement = _ref4.placement;
       return getSlideAndFadeProperties({
@@ -132,15 +141,13 @@ export function slideAndFade(options) {
         distance: distance
       });
     },
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.popoverTransition.enter,
+    exitDurationMs: animationDurations.popoverTransition.exit
   };
 }
 
 // fade
 
-var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-fade]:popover-open {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-fade]:popover-open {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-fade],\n  [data-ds-popover-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
-
 /**
  * Simple opacity transition, no transform.
  *
@@ -157,16 +164,13 @@ var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    op
 export function fade() {
   return {
     name: 'fade',
-    css: FADE_CSS,
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    enterDurationMs: animationDurations.popoverTransition.enter,
+    exitDurationMs: animationDurations.popoverTransition.exit
   };
 }
 
 // scaleAndFade
 
-var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-scale-and-fade]:popover-open {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-scale-and-fade]:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-scale-and-fade],\n  [data-ds-popover-scale-and-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
-
 /**
  * Scale from 0.95 + opacity transition.
  *
@@ -183,19 +187,12 @@ var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n
 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 ──
-
-var DIALOG_MOTION_CSS = "\n  [data-ds-dialog-motion] {\n    animation: ".concat("var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)", ";\n    animation-fill-mode: forwards;\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open] {\n    animation: ", "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  [data-ds-dialog-motion]::backdrop {\n    animation: ", "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)", ";\n    animation-fill-mode: forwards;\n    background-color: var(--ds-blanket, #050C1F75);\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open]::backdrop {\n    animation: ", "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-dialog-motion],\n    [data-ds-dialog-motion][open],\n    [data-ds-dialog-motion]::backdrop,\n    [data-ds-dialog-motion][open]::backdrop {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n");
+// dialogMotion
 
 /**
  * Dialog motion animation.
@@ -216,15 +213,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 ──
-
-var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
+// dialogSlideUpAndFade
 
 /**
  * Slide up + opacity animation for dialogs.
@@ -250,18 +244,22 @@ export function dialogSlideUpAndFade(options) {
   var 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-".concat(distance),
-    css: distance === 12 ? DIALOG_SLIDE_UP_AND_FADE_CSS : DIALOG_SLIDE_UP_AND_FADE_CSS.replace(/12px/g, "".concat(distance, "px")),
-    enterDurationMs: 350,
-    exitDurationMs: 175
+    name: 'slide-up-and-fade',
+    getProperties: function getProperties() {
+      return {
+        '--ds-dialog-ty': "".concat(distance, "px")
+      };
+    },
+    enterDurationMs: animationDurations.dialogTransition.enter,
+    exitDurationMs: animationDurations.dialogTransition.exit
   };
 }
 
 // dialogFade
 
-var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open] {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open] {\n    opacity: 0;\n  }\n}\n\n[data-ds-dialog-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-fade],\n  [data-ds-dialog-fade][open],\n  [data-ds-dialog-fade]::backdrop,\n  [data-ds-dialog-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
-
 /**
  * Simple opacity transition for dialogs, no transform.
  *
@@ -281,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/esm/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/esm/dialog/dialog-content.js

@@ -1,6 +1,7 @@
 /* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
@@ -10,7 +11,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.
+var 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"
+};
 var styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _1ltk1i5c"
 };
@@ -39,6 +48,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
+    xcssFromProps = _ref.xcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -102,6 +112,32 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     }
   }, [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(function () {
+    var dialog = ownRef.current;
+    if (!dialog || !(preset !== null && preset !== void 0 && preset.getProperties)) {
+      return;
+    }
+    var props = preset.getProperties({
+      placement: {}
+    });
+    Object.entries(props).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      dialog.style.setProperty(key, String(value));
+    });
+    return function () {
+      Object.keys(props).forEach(function (key) {
+        dialog.style.removeProperty(key);
+      });
+    };
+  }, [preset, isVisible]);
+
   // Handle native Escape (cancel event)
   var handleCancel = useCallback(function (event) {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -170,7 +206,8 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     onCancel: handleCancel,
     "data-testid": testId
   }, preset ? _defineProperty({}, "data-ds-dialog-".concat(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/esm/internal/use-animated-visibility.js

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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
@@ -105,9 +104,10 @@ export function useAnimatedVisibility(_ref2) {
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
     onExitFinish = _ref2.onExitFinish;
-  var 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`.
+  var preset = animate || null;
 
   // False when there is no preset or `prefers-reduced-motion` is set.
   var willAnimate = Boolean(animate) && !prefersReducedMotion();

package/dist/esm/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/esm/popover/popover.js

@@ -26,7 +26,16 @@ var supportsPopoverHint = once(function () {
   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.
+var 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"
+};
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
 };
@@ -254,7 +263,9 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   }, [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(function () {
     var element = ownRef.current;
     if (!element || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
@@ -269,6 +280,11 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         value = _ref3[1];
       element.style.setProperty(key, String(value));
     });
+    return function () {
+      Object.keys(props).forEach(function (key) {
+        element.style.removeProperty(key);
+      });
+    };
   }, [preset, placement, isVisible]);
 
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
@@ -320,6 +336,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     "data-testid": testId
   }, preset ? _defineProperty({}, "data-ds-popover-".concat(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);
 });

package/dist/types/animations/presets.d.ts

@@ -1,4 +1,22 @@
 import { type TAnimationPreset } from './types';
+export declare const animationDurations: {
+    readonly popupMotion: {
+        readonly enter: 150;
+        readonly exit: 100;
+    };
+    readonly popoverTransition: {
+        readonly enter: 350;
+        readonly exit: 175;
+    };
+    readonly dialogMotion: {
+        readonly enter: 250;
+        readonly exit: 200;
+    };
+    readonly dialogTransition: {
+        readonly enter: 350;
+        readonly exit: 175;
+    };
+};
 export declare function popupMotion(): TAnimationPreset;
 type TSlideAndFadeOptions = {
     /**

package/dist/types/animations/types.d.ts

@@ -1,28 +1,24 @@
 import type { TPlacementOptions } from '../internal/resolve-placement';
 /**
- * A self-contained animation preset for top-layer elements (popovers and dialogs).
+ * A self-contained animation preset for top-layer elements.
  *
- * Contains the CSS rules (injected once into `<head>`), a data-attribute name
- * for CSS targeting, optional per-placement custom properties, and the exit
- * duration used for a `transitionend` fallback timeout.
+ * Contains a data-attribute name used as a stable test and debugging hook,
+ * optional per-placement custom properties, and the entry and exit durations
+ * used for a `transitionend` fallback timeout.
  *
- * Entry animation uses `@starting-style`.
- * Exit animation uses `allow-discrete` on `display`/`overlay` to keep the
- * element visible in the top layer while CSS transitions play.
+ * The actual Compiled styles are kept static and component-local so the
+ * Compiled transform can extract them at build time.
  */
 export type TAnimationPreset = {
     /**
-     * CSS to inject once into `document.head`, scoped via a data attribute
-     * (e.g. `[data-ds-popover-{name}]` or `[data-ds-dialog-{name}]`).
-     */
-    css: string;
-    /**
-     * Data attribute suffix for CSS targeting (e.g. `'slide-and-fade'`).
+     * Data attribute suffix used as a stable test and debugging hook (e.g.
+     * `'slide-and-fade'` becomes `data-ds-popover-slide-and-fade`).
      */
     name: string;
     /**
      * Per-placement CSS custom properties (e.g. directional offset for
-     * `slideAndFade`). Only used by popover presets that vary by placement.
+     * `slideAndFade`). Only used by presets that vary by placement or by a
+     * configurable distance.
      */
     getProperties?: (args: {
         placement: TPlacementOptions;

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

@@ -1,4 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
+import { type CompiledStyles } from '@compiled/react';
 import { type TAnimationPreset } from '../animations/types';
 /**
  * Close reasons produced by the Dialog primitive.
@@ -49,10 +50,17 @@ type TDialogBaseProps = {
     /**
      * Animation preset for entry/exit transitions.
      *
-     * Pass an `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
+     * Pass a `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
      * CSS-based entry and exit animation. Pass `false` (or omit) to disable.
      */
     animate?: TAnimationPreset | false;
+    /**
+     * 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;
     /**
      * Additional inline styles applied to the `<dialog>` element.
      *

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

@@ -39,8 +39,8 @@ type TUseAnimatedVisibilityResult = {
      */
     phase: TPhase;
     /**
-     * Resolved animation preset (with CSS injected), or `null` if
-     * animation is disabled.
+     * Resolved animation preset (styles applied via the host element's `css`
+     * prop), or `null` if animation is disabled.
      */
     preset: TAnimationPreset | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.3.0",
+	"version": "1.4.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",
@@ -10,9 +10,7 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": [
-		"*.compiled.css"
-	],
+	"sideEffects": ["*.compiled.css"],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"react-compiler": {
@@ -28,9 +26,7 @@
 			"category": "Libraries"
 		},
 		"integrationTests": {
-			"additionalBrowsers": [
-				"desktop-firefox"
-			]
+			"additionalBrowsers": ["desktop-firefox"]
 		}
 	},
 	"dependencies": {
@@ -55,11 +51,11 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.1.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.4.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@atlassian/testing-library": "^0.7.0",
+		"@atlassian/testing-library": "^0.10.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",
@@ -69,29 +65,15 @@
 	},
 	"techstack": {
 		"@atlassian/frontend": {
-			"import-structure": [
-				"atlassian-conventions"
-			],
-			"circular-dependencies": [
-				"file-and-folder-level"
-			]
+			"import-structure": ["atlassian-conventions"],
+			"circular-dependencies": ["file-and-folder-level"]
 		},
 		"@repo/internal": {
 			"dom-events": "use-bind-event-listener",
-			"ui-components": [
-				"lite-mode"
-			],
-			"design-tokens": [
-				"color",
-				"spacing"
-			],
-			"deprecation": [
-				"no-deprecated-imports"
-			],
-			"styling": [
-				"static",
-				"compiled"
-			]
+			"ui-components": ["lite-mode"],
+			"design-tokens": ["color", "spacing"],
+			"deprecation": ["no-deprecated-imports"],
+			"styling": ["static", "compiled"]
 		}
 	},
 	"publishConfig": {