@atlaskit/top-layer 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/top-layer
 
+## 1.6.0
+
+### Minor Changes
+
+- [`530dfb5aee695`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/530dfb5aee695) -
+  Improves animation preset typing and makes animations more consistent by aligning timings and
+  introducing tokens.
+
+## 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

package/dist/cjs/dialog/animations.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogFade = dialogFade;
+exports.dialogMotion = dialogMotion;
+exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
+// `custom` variant currently exists for typing reasons for Drawer
+// not indicative of final API
+
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function dialogMotion() {
+  return {
+    kind: 'dialog',
+    name: 'motion'
+  };
+}
+
+/**
+ * Slide up + opacity animation for dialogs.
+ *
+ * Entry slides up from below; exit slides up and out (asymmetric).
+ * Includes backdrop fade animation.
+ *
+ * @param options.distance - Slide distance in pixels. Defaults to `12`.
+ *
+ * @example
+ * ```tsx
+ * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
+ *
+ * const animation = dialogSlideUpAndFade();
+ * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function dialogSlideUpAndFade(options) {
+  var _options$distance;
+  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
+
+  // The configurable distance is applied via the `--ds-dialog-ty` custom property
+  return {
+    kind: 'dialog',
+    name: 'slide-up-and-fade',
+    getStyles: function getStyles() {
+      return [{
+        property: '--ds-dialog-ty',
+        value: "".concat(distance, "px")
+      }];
+    }
+  };
+}
+
+/**
+ * Simple opacity transition for dialogs, no transform.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogFade } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function dialogFade() {
+  return {
+    kind: 'dialog',
+    name: 'fade'
+  };
+}

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

@@ -5,54 +5,46 @@
 ._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}
+._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1fsl1ttt[open]{transition-duration:.35s}
+._1fsl1mzy[open]{transition-duration:var(--ds-duration-long,.25s)}
 ._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}
+._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
+._1oil1d08[open]{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
+._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1rjx1d08[open]{animation-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
 ._1rsueoah[open]::-ms-backdrop{animation-fill-mode:backwards}
 ._1rsueoah[open]::backdrop{animation-fill-mode:backwards}
 ._1s9z1a5r{transition-behavior:allow-discrete}
+._1szp1mzy[open]{animation-duration:var(--ds-duration-long,.25s)}
 ._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)}
+._5sagi9qs{animation-duration:var(--ds-duration-medium,.2s)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._8ar61bym[open]{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._8ar6yjsl[open]{animation-name:k1c1nn4,var(--ds-keyframe-fade-in,FadeIn0to100)}
 ._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)}
+._j7hq1a5s{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0)}
+._j7hqcmlg{animation-name:ku52lnv,var(--ds-keyframe-fade-out,FadeOut100to0)}
 ._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}
-._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))}}
+._yhpqi9qs::-ms-backdrop{transition-duration:var(--ds-duration-medium,.2s)}
+._yhpqi9qs::backdrop{transition-duration:var(--ds-duration-medium,.2s)}
+@keyframes k1c1nn4{0%{transform:translateY(calc(var(--ds-dialog-ty, 9pt)))}to{transform:none}}
+@keyframes ku52lnv{0%{transform:none}to{transform:translateY(calc(var(--ds-dialog-ty, 9pt)*-1))}}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}._10aiglyw[open]{animation-name:none}._aeld147i[open]{transition-duration:var(--ds-duration-instant,0ms)}._l57nglyw::-ms-backdrop{animation-name:none}._l57nglyw::backdrop{animation-name:none}._1sbq147i::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1sbq147i::backdrop{transition-duration:var(--ds-duration-instant,0ms)}._19awglyw[open]::-ms-backdrop{animation-name:none}._19awglyw[open]::backdrop{animation-name:none}._1i6z147i[open]::-ms-backdrop{transition-duration:var(--ds-duration-instant,0ms)}._1i6z147i[open]::backdrop{transition-duration:var(--ds-duration-instant,0ms)}}

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

@@ -9,28 +9,36 @@ Object.defineProperty(exports, "__esModule", {
 exports.Dialog = void 0;
 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"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _setStyle = require("../internal/set-style");
 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); }
+var slideInKeyframes = null;
+var slideOutKeyframes = null;
+
 // 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"
+  root: "_k8m011k7 _1oeci9qs _1s9z1a5r _1fsl1mzy _1oil1d08",
+  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah",
+  'slide-up-and-fade': "_j7hqcmlg _5sagi9qs _1pgl1lbj _8ar6yjsl _1szp1mzy _1rjx1d08",
+  fade: "_j7hq1a5s _5sagi9qs _1pgl1lbj _8ar61bym _1szp1mzy _1rjx1d08",
+  custom: ""
 };
 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"
 };
 
 /**
@@ -57,7 +65,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
-    xcssFromProps = _ref.xcss,
+    consumerXcss = _ref.xcss,
     style = _ref.style,
     testId = _ref.testId,
     providedId = _ref.id,
@@ -123,28 +131,20 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
 
   // 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.
+  // cleanup restores the previous inline values 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)) {
+    if (!dialog || !(preset !== null && preset !== void 0 && preset.getStyles)) {
       return;
     }
-    var props = preset.getProperties({
-      placement: {}
+    return (0, _setStyle.setStyle)({
+      element: dialog,
+      styles: preset.getStyles({
+        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)
@@ -186,12 +186,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     });
   }, [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]`
@@ -199,7 +193,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement("dialog", {
     ref: combinedRef,
     id: dialogId
     // `aria-modal` is intentionally NOT set: native `<dialog>.showModal()`
@@ -210,15 +204,9 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     ,
     "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 ? (0, _defineProperty2.default)({}, "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: (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
-  _react.default.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), children);
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles[preset.name], consumerXcss])
+  }, children);
 });

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

@@ -6,43 +6,44 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "dialogFade", {
   enumerable: true,
   get: function get() {
-    return _presets.dialogFade;
+    return _animations.dialogFade;
   }
 });
 Object.defineProperty(exports, "dialogMotion", {
   enumerable: true,
   get: function get() {
-    return _presets.dialogMotion;
+    return _animations.dialogMotion;
   }
 });
 Object.defineProperty(exports, "dialogSlideUpAndFade", {
   enumerable: true,
   get: function get() {
-    return _presets.dialogSlideUpAndFade;
+    return _animations.dialogSlideUpAndFade;
   }
 });
 Object.defineProperty(exports, "fade", {
   enumerable: true,
   get: function get() {
-    return _presets.fade;
+    return _animations2.fade;
   }
 });
 Object.defineProperty(exports, "popupMotion", {
   enumerable: true,
   get: function get() {
-    return _presets.popupMotion;
+    return _animations2.popupMotion;
   }
 });
 Object.defineProperty(exports, "scaleAndFade", {
   enumerable: true,
   get: function get() {
-    return _presets.scaleAndFade;
+    return _animations2.scaleAndFade;
   }
 });
 Object.defineProperty(exports, "slideAndFade", {
   enumerable: true,
   get: function get() {
-    return _presets.slideAndFade;
+    return _animations2.slideAndFade;
   }
 });
-var _presets = require("../animations/presets");
+var _animations = require("../dialog/animations");
+var _animations2 = require("../popover/animations");

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

@@ -9,6 +9,40 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _reducedMotion = require("./reduced-motion");
+/**
+ * A self-contained animation preset for top-layer elements.
+ *
+ * Contains a stable preset name used by the host component to select its
+ * component-local Compiled style entry, plus optional per-placement inline
+ * styles.
+ *
+ * The actual Compiled styles are kept static and component-local so the
+ * Compiled transform can extract them at build time.
+ */
+
+/**
+ * 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
@@ -160,8 +194,7 @@ function useAnimatedVisibility(_ref2) {
   // move to `open`. The fallback guarantees settle on swallowed events
   // (zero-duration, browser quirk, mid-transition unmount).
   (0, _react.useEffect)(function () {
-    var _preset$enterDuration;
-    if (phase !== 'entering') {
+    if (phase !== 'entering' || !(preset !== null && preset !== void 0 && preset.kind)) {
       return;
     }
     var element = elementRef.current;
@@ -170,7 +203,7 @@ 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[preset.kind].enter + 50,
       onSettled: function onSettled() {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -183,7 +216,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
+  }, [phase, preset === null || preset === void 0 ? void 0 : preset.kind, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -204,8 +237,7 @@ function useAnimatedVisibility(_ref2) {
   // Animated exit: wait for `transitionend` (or a safety-net timeout),
   // fire `onExitFinish`, then move to `closed` to unmount the host.
   (0, _react.useEffect)(function () {
-    var _preset$exitDurationM;
-    if (phase !== 'exiting' || !willAnimate) {
+    if (phase !== 'exiting' || !willAnimate || !(preset !== null && preset !== void 0 && preset.kind)) {
       return;
     }
     var element = elementRef.current;
@@ -214,7 +246,7 @@ 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[preset.kind].exit + 50,
       onSettled: function onSettled() {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -229,7 +261,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
+  }, [phase, willAnimate, preset === null || preset === void 0 ? void 0 : preset.kind, elementRef]);
 
   // Non-animated exit: wait for the browser's `toggle` (closed) or
   // `close` event before unmounting, so the consumer's listener (close

package/dist/cjs/popover/animations.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fade = fade;
+exports.popupMotion = popupMotion;
+exports.scaleAndFade = scaleAndFade;
+exports.slideAndFade = slideAndFade;
+var _resolvePlacement = require("../internal/resolve-placement");
+function getPopupMotionStyles(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = (0, _resolvePlacement.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)"
+  }];
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function popupMotion() {
+  return {
+    kind: 'popover',
+    name: 'motion',
+    getStyles: getPopupMotionStyles
+  };
+}
+function getSlideAndFadeStyles(_ref2) {
+  var placement = _ref2.placement,
+    distance = _ref2.distance;
+  var pos = "".concat(distance, "px");
+  var neg = "-".concat(distance, "px");
+  var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement2.axis,
+    edge = _getPlacement2.edge;
+  if (axis === 'block' && edge === 'start') {
+    return [{
+      property: '--ds-popover-tx',
+      value: '0'
+    }, {
+      property: '--ds-popover-ty',
+      value: pos
+    }];
+  }
+  if (axis === 'block' && edge === 'end') {
+    return [{
+      property: '--ds-popover-tx',
+      value: '0'
+    }, {
+      property: '--ds-popover-ty',
+      value: neg
+    }];
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return [{
+      property: '--ds-popover-tx',
+      value: pos
+    }, {
+      property: '--ds-popover-ty',
+      value: '0'
+    }];
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return [{
+      property: '--ds-popover-tx',
+      value: neg
+    }, {
+      property: '--ds-popover-ty',
+      value: '0'
+    }];
+  }
+  return [{
+    property: '--ds-popover-tx',
+    value: '0'
+  }, {
+    property: '--ds-popover-ty',
+    value: neg
+  }];
+}
+
+/**
+ * Directional slide + opacity animation.
+ *
+ * The popover slides in from the direction opposite its placement edge
+ * (e.g. a `block-end` popover slides down from above).
+ *
+ * @param options.distance - Slide distance in pixels. Defaults to `4`.
+ *
+ * @example
+ * ```tsx
+ * import { slideAndFade } from '@atlaskit/top-layer/animations';
+ *
+ * // Default 4px slide (tooltip)
+ * <Popover animate={slideAndFade()} />
+ *
+ * // Custom 8px slide (popup / dropdown)
+ * <Popover animate={slideAndFade({ distance: 8 })} />
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function slideAndFade(options) {
+  var _options$distance;
+  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
+  return {
+    kind: 'popover',
+    name: 'slide-and-fade',
+    getStyles: function getStyles(_ref3) {
+      var placement = _ref3.placement;
+      return getSlideAndFadeStyles({
+        placement: placement,
+        distance: distance
+      });
+    }
+  };
+}
+
+// fade
+
+/**
+ * Simple opacity transition, no transform.
+ *
+ * Suitable for popup dialogs or content that does not need directional motion.
+ *
+ * @example
+ * ```tsx
+ * import { fade } from '@atlaskit/top-layer/animations';
+ *
+ * <Popover animate={fade()} />
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function fade() {
+  return {
+    kind: 'popover',
+    name: 'fade'
+  };
+}
+
+// scaleAndFade
+
+/**
+ * Scale from 0.95 + opacity transition.
+ *
+ * Suitable for menus, dropdowns, and select options.
+ *
+ * @example
+ * ```tsx
+ * import { scaleAndFade } from '@atlaskit/top-layer/animations';
+ *
+ * <Popover animate={scaleAndFade()} />
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function scaleAndFade() {
+  return {
+    kind: 'popover',
+    name: 'scale-and-fade'
+  };
+}