@atlaskit/top-layer 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/top-layer
 
+## 1.5.0
+
+### Minor Changes
+
+- [`2f56c78f969b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f56c78f969b8) -
+  Update i18n NPM package versions for teamwork-graph (Group 16)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.4.0
+
+### Minor Changes
+
+- [`608d20a3ca772`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/608d20a3ca772) -
+  Migrate top layer animation presets to Compiled CSS
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/animations/presets.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.animationDurations = void 0;
 exports.dialogFade = dialogFade;
 exports.dialogMotion = dialogMotion;
 exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
@@ -11,13 +12,27 @@ exports.popupMotion = popupMotion;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
 var _resolvePlacement = require("../internal/resolve-placement");
-// ══════════════════════════════════════════════════════════════════════════════
-// Popover presets
-// ══════════════════════════════════════════════════════════════════════════════
-
-// ── popupMotion ──
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+var animationDurations = exports.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 = (0, _resolvePlacement.getPlacement)({
@@ -54,9 +69,8 @@ function getPopupMotionProperties(_ref) {
 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({
@@ -66,7 +80,7 @@ function popupMotion() {
   };
 }
 
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties(_ref3) {
   var placement = _ref3.placement,
@@ -108,9 +122,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.
  *
@@ -136,7 +147,6 @@ 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({
@@ -144,15 +154,13 @@ 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.
  *
@@ -169,16 +177,13 @@ var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    op
 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.
  *
@@ -195,19 +200,12 @@ var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n
 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.
@@ -228,15 +226,12 @@ 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.
@@ -262,18 +257,22 @@ 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.
  *
@@ -293,8 +292,7 @@ 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/cjs/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/cjs/dialog/dialog-content.js

@@ -11,6 +11,7 @@ require("./dialog-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
@@ -19,7 +20,15 @@ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-obs
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 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); }
-// 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"
 };
@@ -48,6 +57,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
+    xcssFromProps = _ref.xcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -111,6 +121,32 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     }
   }, [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.
+  (0, _react.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 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function (event) {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -179,7 +215,8 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     onCancel: handleCancel,
     "data-testid": testId
   }, preset ? (0, _defineProperty2.default)({}, "data-ds-dialog-".concat(preset.name), '') : undefined, {
-    className: (0, _runtime.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: (0, _runtime.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/cjs/internal/use-animated-visibility.js

@@ -9,7 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _reducedMotion = require("./reduced-motion");
-var _usePresetStyles = require("./use-preset-styles");
 /**
  * Fires `onSettled` once when `transitionend` fires on `element`, or after
  * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
@@ -112,9 +111,10 @@ function useAnimatedVisibility(_ref2) {
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
     onExitFinish = _ref2.onExitFinish;
-  var preset = (0, _usePresetStyles.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) && !(0, _reducedMotion.prefersReducedMotion)();

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

@@ -35,7 +35,16 @@ var supportsPopoverHint = (0, _once.default)(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"
 };
@@ -263,7 +272,9 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   }, [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.
   (0, _react.useLayoutEffect)(function () {
     var element = ownRef.current;
     if (!element || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
@@ -278,6 +289,11 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         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
@@ -329,6 +345,6 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     "data-testid": testId
   }, preset ? (0, _defineProperty2.default)({}, "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: (0, _runtime.ax)([styles.root, xcssFromProps])
+    className: (0, _runtime.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);
 });