@atlaskit/top-layer 1.5.0 → 1.6.1

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

@@ -1,7 +1,4 @@
 /* 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';
@@ -16,12 +13,16 @@ import { useFocusWrap } from '../internal/use-focus-wrap';
 // 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"
+  root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
+  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
 };
 var styles = {
-  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _1ltk1i5c"
+  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
+};
+var backdropStyles = {
+  root: "_1ltk1i5c",
+  hidden: "_1ltk1j28",
+  motion: "_1m5e1op4 _1jhdq7pw _njwk11k7 _yhpqi9qs _1fyf1a5r _vhgsxbuz _1rsueoah _l57nglyw _1sbq147i _19awglyw _1i6z147i"
 };
 
 /**
@@ -47,8 +48,9 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     onClose = _ref.onClose,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    animate = _ref.animate,
-    xcssFromProps = _ref.xcss,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? false : _ref$animate,
+    consumerXcss = _ref.xcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -61,6 +63,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var combinedRef = mergeRefs([ownRef, ref]);
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
+      animationKind: 'dialog',
       animate: animate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
@@ -112,32 +115,6 @@ 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
@@ -177,12 +154,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     });
   }, [onClose, isVisible]);
 
-  // Atomic CSS (Compiled) deduplicates ::backdrop { background-color }
-  // into a single class, making it impossible to toggle between two values
-  // via cssMap entries. An ID-scoped <style> has higher specificity than
-  // any atomic class, so the override always wins.
-  var escapedId = CSS.escape(dialogId);
-
   // Unmount the `<dialog>` once exit completes so it does not leave an
   // empty `role="dialog"` element in the accessibility tree. On the next
   // open the element remounts and the `[isOpen]` and `[onClose, isVisible]`
@@ -190,7 +161,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("dialog", _extends({
+  return /*#__PURE__*/React.createElement("dialog", {
     ref: combinedRef,
     id: dialogId
     // `aria-modal` is intentionally NOT set: native `<dialog>.showModal()`
@@ -201,15 +172,9 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     ,
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: style,
     onCancel: handleCancel,
-    "data-testid": testId
-  }, preset ? _defineProperty({}, "data-ds-dialog-".concat(preset.name), '') : undefined, {
-    // 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
-  React.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), children);
+    "data-testid": testId,
+    className: ax([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
+  }, children);
 });

package/dist/esm/entry-points/animations.js

@@ -1 +0,0 @@
-export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';

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

@@ -2,6 +2,29 @@ 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';
+/**
+ * Using the recommended motion timings for safety net.
+ *
+ * Not setting these timings on the preset config because they're defined in the CSS,
+ * so configuring it in the preset doesn't achieve anything except introduce a potential
+ * source of drift.
+ *
+ * TODO: figure out a way to not need to redeclare these in the future,
+ * and keep CSS and JS timings in sync always.
+ */
+var safetyNetMsMap = {
+  dialog: {
+    enter: 250,
+    // Corresponds to `motion.duration.long`
+    exit: 200 // Corresponds to `motion.duration.medium`
+  },
+  popover: {
+    enter: 150,
+    // Corresponds to `motion.duration.short`
+    exit: 100 // Corresponds to `motion.duration.xshort`
+  }
+};
+
 /**
  * Fires `onSettled` once when `transitionend` fires on `element`, or after
  * `safetyNetMs` if the event is swallowed (mid-transition unmount, CSS
@@ -37,6 +60,13 @@ function runOnTransitionEndOrTimeout(_ref) {
   return teardown;
 }
 
+/**
+ * Animation config for entry/exit transitions.
+ *
+ * Currently no configuration is supported via this prop,
+ * and this is just a placeholder.
+ */
+
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
  * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
@@ -100,6 +130,7 @@ function runOnTransitionEndOrTimeout(_ref) {
  */
 export function useAnimatedVisibility(_ref2) {
   var isOpen = _ref2.isOpen,
+    animationKind = _ref2.animationKind,
     animate = _ref2.animate,
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
@@ -153,7 +184,6 @@ export function useAnimatedVisibility(_ref2) {
   // move to `open`. The fallback guarantees settle on swallowed events
   // (zero-duration, browser quirk, mid-transition unmount).
   useEffect(function () {
-    var _preset$enterDuration;
     if (phase !== 'entering') {
       return;
     }
@@ -163,7 +193,7 @@ export function useAnimatedVisibility(_ref2) {
     }
     return runOnTransitionEndOrTimeout({
       element: element,
-      safetyNetMs: ((_preset$enterDuration = preset === null || preset === void 0 ? void 0 : preset.enterDurationMs) !== null && _preset$enterDuration !== void 0 ? _preset$enterDuration : 0) + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: function onSettled() {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -176,7 +206,7 @@ export function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
+  }, [phase, animationKind, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -197,7 +227,6 @@ export function useAnimatedVisibility(_ref2) {
   // Animated exit: wait for `transitionend` (or a safety-net timeout),
   // fire `onExitFinish`, then move to `closed` to unmount the host.
   useEffect(function () {
-    var _preset$exitDurationM;
     if (phase !== 'exiting' || !willAnimate) {
       return;
     }
@@ -207,7 +236,7 @@ export function useAnimatedVisibility(_ref2) {
     }
     return runOnTransitionEndOrTimeout({
       element: element,
-      safetyNetMs: ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: function onSettled() {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -222,7 +251,7 @@ export function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
+  }, [phase, willAnimate, animationKind, elementRef]);
 
   // Non-animated exit: wait for the browser's `toggle` (closed) or
   // `close` event before unmounting, so the consumer's listener (close

package/dist/esm/popover/animations.js

@@ -0,0 +1,44 @@
+import { getPlacement } from '../internal/resolve-placement';
+export function getPopupMotionStyles(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = getPlacement({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge;
+  if (axis === 'block' && edge === 'start') {
+    return [{
+      property: '--ds-popover-motion-enter',
+      value: "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)"
+    }, {
+      property: '--ds-popover-motion-exit',
+      value: "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)"
+    }];
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return [{
+      property: '--ds-popover-motion-enter',
+      value: "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)"
+    }, {
+      property: '--ds-popover-motion-exit',
+      value: "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)"
+    }];
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return [{
+      property: '--ds-popover-motion-enter',
+      value: "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)"
+    }, {
+      property: '--ds-popover-motion-exit',
+      value: "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)"
+    }];
+  }
+  // Default: block/end (popover below trigger)
+  return [{
+    property: '--ds-popover-motion-enter',
+    value: "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)"
+  }, {
+    property: '--ds-popover-motion-exit',
+    value: "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)"
+  }];
+}

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

@@ -2,32 +2,25 @@
 ._15ns179n:popover-open{animation:var(--ds-popover-motion-enter)}
 ._19itglyw{border:none}
 ._1r041wug{inset:auto}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ttt:popover-open{transition-duration:.35s}
-._162xglyw:popover-open{transform:none}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._12t71ign:popover-open{transition-duration:var(--ds-duration-short,.15s)}
 ._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}
+._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
+._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}
-._6fl41a34{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
 ._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}
+._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom: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))}}
+@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}}

package/dist/esm/popover/popover.js

@@ -1,7 +1,4 @@
 /* popover.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 "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
@@ -10,9 +7,11 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 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.
  */
@@ -31,10 +30,7 @@ var supportsPopoverHint = once(function () {
 // 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"
+  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
@@ -85,11 +81,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    animate = _ref.animate,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? false : _ref$animate,
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
-    xcssFromProps = _ref.xcss,
+    consumerXcss = _ref.xcss,
     role = _ref.role,
     label = _ref.label,
     labelledBy = _ref.labelledBy,
@@ -101,6 +98,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
+      animationKind: 'popover',
       animate: animate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
@@ -264,27 +262,19 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
 
   // Placement-dependent animation CSS vars. Kept separate from show/hide
   // 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.
+  // restores the previous inline values 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) {
+    if (!element || !placement) {
       return;
     }
-    var props = preset.getProperties({
-      placement: placement
+    return setStyle({
+      element: element,
+      styles: getPopupMotionStyles({
+        placement: placement
+      })
     });
-    Object.entries(props).forEach(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        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
@@ -323,7 +313,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", {
     ref: combinedRef,
     id: popoverId
     // @ts-expect-error -- popover attribute not yet in React types
@@ -333,9 +323,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     role: role,
     "aria-label": label,
     "aria-labelledby": labelledBy,
-    "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, (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);
+    "data-testid": testId,
+    className: ax([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
+  }, children);
 });

package/dist/esm/testing/polyfill.js

@@ -524,6 +524,9 @@ if (typeof HTMLElement !== 'undefined') {
   // delegate every other selector to the original implementation.
   // Spec: https://html.spec.whatwg.org/multipage/semantics-other.html#selector-popover-open
   var originalMatches = Element.prototype.matches;
+  // The DOM lib types `Element.prototype.matches` as a set of type-predicate
+  // overloads. This polyfill intentionally replaces it with a plain boolean
+  // implementation, so we cast to the original member type.
   Element.prototype.matches = function patchedMatches(selector) {
     if (selector === ':popover-open') {
       return this.hasAttribute('data-popover-open');

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

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type CompiledStyles } from '@compiled/react';
-import { type TAnimationPreset } from '../animations/types';
+import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * Close reasons produced by the Dialog primitive.
  *
@@ -48,12 +48,12 @@ type TDialogBaseProps = {
         reason: TDialogCloseReason;
     }) => void;
     /**
-     * Animation preset for entry/exit transitions.
+     * Animation config for entry/exit transitions.
      *
-     * Pass a `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
-     * CSS-based entry and exit animation. Pass `false` (or omit) to disable.
+     * Pass `true` to use the default dialog animation. Pass a config object to
+     * customize supported animation settings. Pass `false` or omit to disable.
      */
-    animate?: TAnimationPreset | false;
+    animate?: boolean | TAnimationConfig;
     /**
      * Additional Compiled styles applied to the `<dialog>` element.
      *

package/dist/types/entry-points/animations.d.ts

@@ -1,2 +0,0 @@
-export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
-export type { TAnimationPreset } from '../animations/types';

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

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

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

@@ -0,0 +1,7 @@
+import { type TPlacementOptions } from '../internal/resolve-placement';
+export declare function getPopupMotionStyles({ placement, }: {
+    placement: TPlacementOptions;
+}): Array<{
+    property: string;
+    value: string;
+}>;

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

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
-import { type TAnimationPreset } from '../animations/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
+import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * The reason a popover was closed.
  *
@@ -36,14 +36,17 @@ type TPopoverBaseProps = {
      * Additional CSS styles applied to the popover root element.
      * Use to set `backgroundColor` to match the popup surface colour.
      */
-    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    xcss?: StrictXCSSProp<'animationName', '&:popover-open', {
+        requiredPseudos: '&:popover-open';
+        requiredProperties: never;
+    }>;
     /**
      * Animation preset for entry/exit transitions.
      *
      * Animations use `@starting-style` and `allow-discrete` for progressive
      * enhancement: browsers without support show/hide instantly.
      */
-    animate?: false | TAnimationPreset;
+    animate?: boolean | TAnimationConfig;
     /**
      * Test ID applied to the popover element.
      */
@@ -109,7 +112,7 @@ type TPopoverBaseProps = {
     /**
      * Placement hint for directional animations (e.g. `slideAndFade`).
      *
-     * When `animate` is provided, the preset's `getProperties(placement)` is
+     * When `animate` is provided, the preset's `getStyles(placement)` is
      * called to set CSS custom properties (like `--ds-popover-tx`, `--ds-popover-ty`)
      * that control the slide direction. Has no effect without `animate`.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.5.0",
+	"version": "1.6.1",
 	"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,7 +10,9 @@
 	"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": {
@@ -26,7 +28,9 @@
 			"category": "Libraries"
 		},
 		"integrationTests": {
-			"additionalBrowsers": ["desktop-firefox"]
+			"additionalBrowsers": [
+				"desktop-firefox"
+			]
 		}
 	},
 	"dependencies": {
@@ -35,7 +39,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/tokens": "^15.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -51,11 +55,11 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@atlassian/testing-library": "^0.10.0",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",
@@ -65,15 +69,29 @@
 	},
 	"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": {