@atlaskit/top-layer 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/top-layer
 
+## 1.7.0
+
+### Minor Changes
+
+- [`406346f89178f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/406346f89178f) -
+  Fix a Safari (WebKit) layout bug where `Popover` content could collapse to `0px`. When a
+  `max-height: 100%` flex column with a `flex: 1 1 auto; overflow: auto` child is placed inside a
+  popover, the user-agent `height: fit-content` default (an indefinite block size) makes the column
+  collapse on WebKit. The `Popover` reset now sets `height: auto` to remove the indefinite block
+  size; width is left unchanged so anchor-width matching is unaffected.
+
+  The `Dialog` primitive is intentionally left unchanged for that reset: applying the same reset
+  there would stretch the modal `<dialog>` to fill the viewport and force a layout-centering opinion
+  onto an otherwise unopinionated primitive. See `notes/decisions/safari-popover-flex-collapse.md`.
+
+  Also fix a Safari (WebKit) bug where pressing `Escape` while a `popover="auto"` (for example a
+  menu) is open inside a modal `Dialog` closed the entire dialog instead of only the popover. On
+  WebKit the same Escape also fires the dialog's native `cancel` event. The `Dialog` primitive now
+  snapshots — at Escape keydown, before the browser's close action — whether a light-dismissable
+  (`auto`/`hint`) popover is open inside it, and if so keeps the dialog open so only the popover is
+  dismissed, matching Chromium and Firefox. See
+  `notes/decisions/safari-escape-nested-popover-in-dialog.md`.
+
+## 1.6.1
+
+### Patch Changes
+
+- [`650f4c7ce7fb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/650f4c7ce7fb2) -
+  Type-only fixes for TypeScript 7 (tsgo) compatibility with the updated DOM lib. No runtime or
+  public API changes.
+
 ## 1.6.0
 
 ### Minor Changes

package/README.md

@@ -178,6 +178,19 @@ details.
 | Background inertness (modal dialogs) | ✓            |
 | Close reasons (Dialog)               | ✓            |
 
+## Known limitations
+
+- **Safari `<dialog>` flex-collapse.** On WebKit, a `max-height: 100%` flex column with a
+  `flex: 1 1 auto; overflow: auto` child placed directly inside a `Dialog` collapses to `0px` (the
+  block-axis `fit-content` user-agent default is an indefinite height). `Popover` sets
+  `height: auto` to avoid this; `Dialog` deliberately does not, to keep the primitive free of layout
+  opinions (see
+  [`notes/decisions/safari-popover-flex-collapse.md`](notes/decisions/safari-popover-flex-collapse.md)).
+  A consumer that builds this shape inside a `Dialog` should give the column a definite height or
+  apply its own `height: auto` reset on the surface.
+  - TODO: expand this into full public consumer documentation (the recommended workaround and a
+    worked example) before the top-layer `Dialog` is broadly adopted.
+
 ## Documentation
 
 See [`notes/`](notes/) for project documentation, architecture decisions, migration records, and

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/680f1177-ac84-4787-a7d1-258dd657dc9f
 name: '@atlaskit/top-layer'
-ownerId: ari:cloud:identity::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
+ownerId: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
 labels:
   - platform-code
   - platform-afm
@@ -27,6 +27,9 @@ customFields:
   - name: Technical Owner
     type: user
     value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
+  - name: Reviewer Team
+    type: text
+    value: ari:cloud:teams::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
   - name: Required Reviewers Opt In
     type: boolean
     value: true
@@ -36,3 +39,9 @@ customFields:
   - name: Required Reviewer Approvals
     type: number
     value: 1
+  - name: Trusted Committers
+    type: text
+    value: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
+  - name: Trusted Reviewer Teams
+    type: text
+    value: ari:cloud:teams::team/42f4416b-e028-4daa-b2a5-afe213ac75e1 # Design System Designers

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

@@ -20,23 +20,15 @@
 ._1o51q7pw{animation-fill-mode:forwards}
 ._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}
-._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}
-._j7hq1a5s{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0)}
-._j7hqcmlg{animation-name:ku52lnv,var(--ds-keyframe-fade-out,FadeOut100to0)}
 ._k8m011k7{transition-property:overlay,display}
 ._njwk11k7::-ms-backdrop{-ms-transition-property:overlay,display;transition-property:overlay,display}
 ._njwk11k7::backdrop{transition-property:overlay,display}
@@ -45,6 +37,4 @@
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._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

@@ -14,23 +14,17 @@ 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");
+var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 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 = {
   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: ""
+  motion: "_y44vgeqi _1o51q7pw _1iu47kvq _1i0neoah"
 };
 var styles = {
   dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _bl8aglyw _156y147i _10aiglyw _aeld147i"
@@ -64,7 +58,8 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     onClose = _ref.onClose,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    animate = _ref.animate,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? false : _ref$animate,
     consumerXcss = _ref.xcss,
     style = _ref.style,
     testId = _ref.testId,
@@ -78,6 +73,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
+      animationKind: 'dialog',
       animate: animate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
@@ -129,23 +125,13 @@ 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 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.getStyles)) {
-      return;
-    }
-    return (0, _setStyle.setStyle)({
-      element: dialog,
-      styles: preset.getStyles({
-        placement: {}
-      })
-    });
-  }, [preset, isVisible]);
+  // Safari bug: escape closes open dialog and popovers, rather than just innermost popover
+  // See notes/decisions/safari-escape-nested-popover-in-dialog.md
+  var _useSafariEscapeFix = (0, _useSafariEscapeFix2.useSafariEscapeFix)({
+      dialogRef: ownRef,
+      isVisible: isVisible
+    }),
+    shouldIgnoreEscape = _useSafariEscapeFix.shouldIgnoreEscape;
 
   // Handle native Escape (cancel event)
   var handleCancel = (0, _react.useCallback)(function (event) {
@@ -158,10 +144,16 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       return;
     }
     event.preventDefault();
+    // Spurious Safari `cancel`: the keydown snapshot saw an open child
+    // popover, so this Escape belongs to that popover (light-dismissed
+    // natively). Keep the dialog open instead of forwarding to `onClose`.
+    if (shouldIgnoreEscape()) {
+      return;
+    }
     onClose({
       reason: 'escape'
     });
-  }, [onClose]);
+  }, [onClose, shouldIgnoreEscape]);
 
   // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid
@@ -207,6 +199,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     style: style,
     onCancel: handleCancel,
     "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])
+    className: (0, _runtime.ax)([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
   }, children);
 });

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

@@ -1,49 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "dialogFade", {
-  enumerable: true,
-  get: function get() {
-    return _animations.dialogFade;
-  }
-});
-Object.defineProperty(exports, "dialogMotion", {
-  enumerable: true,
-  get: function get() {
-    return _animations.dialogMotion;
-  }
-});
-Object.defineProperty(exports, "dialogSlideUpAndFade", {
-  enumerable: true,
-  get: function get() {
-    return _animations.dialogSlideUpAndFade;
-  }
-});
-Object.defineProperty(exports, "fade", {
-  enumerable: true,
-  get: function get() {
-    return _animations2.fade;
-  }
-});
-Object.defineProperty(exports, "popupMotion", {
-  enumerable: true,
-  get: function get() {
-    return _animations2.popupMotion;
-  }
-});
-Object.defineProperty(exports, "scaleAndFade", {
-  enumerable: true,
-  get: function get() {
-    return _animations2.scaleAndFade;
-  }
-});
-Object.defineProperty(exports, "slideAndFade", {
-  enumerable: true,
-  get: function get() {
-    return _animations2.slideAndFade;
-  }
-});
-var _animations = require("../dialog/animations");
-var _animations2 = require("../popover/animations");
+"use strict";

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

@@ -9,17 +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");
-/**
- * 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.
  *
@@ -78,6 +67,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`
@@ -141,6 +137,7 @@ function runOnTransitionEndOrTimeout(_ref) {
  */
 function useAnimatedVisibility(_ref2) {
   var isOpen = _ref2.isOpen,
+    animationKind = _ref2.animationKind,
     animate = _ref2.animate,
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
@@ -194,7 +191,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 () {
-    if (phase !== 'entering' || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'entering') {
       return;
     }
     var element = elementRef.current;
@@ -203,7 +200,7 @@ function useAnimatedVisibility(_ref2) {
     }
     return runOnTransitionEndOrTimeout({
       element: element,
-      safetyNetMs: safetyNetMsMap[preset.kind].enter + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: function onSettled() {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -216,7 +213,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, preset === null || preset === void 0 ? void 0 : preset.kind, elementRef]);
+  }, [phase, animationKind, elementRef]);
 
   // Non-animated entry callback. The lifecycle goes `closed → open`
   // directly with no `entering` phase; fire `onEnterFinish` on that jump.
@@ -237,7 +234,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 () {
-    if (phase !== 'exiting' || !willAnimate || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'exiting' || !willAnimate) {
       return;
     }
     var element = elementRef.current;
@@ -246,7 +243,7 @@ function useAnimatedVisibility(_ref2) {
     }
     return runOnTransitionEndOrTimeout({
       element: element,
-      safetyNetMs: safetyNetMsMap[preset.kind].exit + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: function onSettled() {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -261,7 +258,7 @@ function useAnimatedVisibility(_ref2) {
         });
       }
     });
-  }, [phase, willAnimate, preset === null || preset === void 0 ? void 0 : preset.kind, 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/cjs/internal/use-safari-escape-fix.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSafariEscapeFix = useSafariEscapeFix;
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _isSafari = require("@atlaskit/ds-lib/is-safari");
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+function useSafariEscapeFix(_ref) {
+  var dialogRef = _ref.dialogRef,
+    isVisible = _ref.isVisible;
+  var childPopoverOpenAtEscapeRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!(0, _isSafari.isSafari)()) {
+      return;
+    }
+    var dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+
+    // Bind to `document`, not the dialog: on Safari focus can be on `<body>`
+    // (buttons are not focused on click), where a dialog-scoped listener would
+    // never fire. The query below stays scoped to this dialog's subtree.
+    return (0, _bindEventListener.bind)(document, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.key !== 'Escape') {
+          return;
+        }
+        try {
+          childPopoverOpenAtEscapeRef.current = Boolean(dialog.querySelector('[popover="auto"]:popover-open, [popover="hint"]:popover-open'));
+        } catch (_unused) {
+          // `:popover-open` is unsupported in some environments (e.g. jsdom);
+          // treat as "no child popover" so a plain Escape still closes the dialog.
+          childPopoverOpenAtEscapeRef.current = false;
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [dialogRef, isVisible]);
+  var api = (0, _react.useMemo)(function () {
+    return {
+      shouldIgnoreEscape: function shouldIgnoreEscape() {
+        if (childPopoverOpenAtEscapeRef.current) {
+          childPopoverOpenAtEscapeRef.current = false;
+          return true;
+        }
+        return false;
+      }
+    };
+  }, []);
+  return api;
+}

package/dist/cjs/popover/animations.js

@@ -3,10 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fade = fade;
-exports.popupMotion = popupMotion;
-exports.scaleAndFade = scaleAndFade;
-exports.slideAndFade = slideAndFade;
+exports.getPopupMotionStyles = getPopupMotionStyles;
 var _resolvePlacement = require("../internal/resolve-placement");
 function getPopupMotionStyles(_ref) {
   var placement = _ref.placement;
@@ -50,147 +47,4 @@ function getPopupMotionStyles(_ref) {
     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'
-  };
 }

package/dist/cjs/popover/popover.compiled.css

@@ -7,7 +7,6 @@
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
-._1a5xt94y{--dir:1px}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
 ._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
@@ -15,22 +14,14 @@
 ._1reoewfl{overflow-x:visible}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
+._4t3i1wug{height:auto}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
-._71re1bym:popover-open{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
-._71re1v6b:popover-open{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100),var(--ds-keyframe-scale-in-small,ScaleIn95to100)}
-._71rervlo:popover-open{animation-name:k1ut9kob,var(--ds-keyframe-fade-in,FadeIn0to100)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
-._j7hq1a5s{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0)}
-._j7hq1l2h{animation-name:k1e4c1ew,var(--ds-keyframe-fade-out,FadeOut100to0)}
-._j7hqneez{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0),var(--ds-keyframe-scale-out-small,ScaleOut100to95)}
 ._k8m011k7{transition-property: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}
 ._u5f3idpf{padding-right:0}
-[dir=rtl] ._34bx1n1a{--dir:-1px}
-@keyframes k1e4c1ew{0%{transform:none}to{transform:translate(calc(var(--dir)*var(--ds-popover-tx, 0)),var(--ds-popover-ty,0))}}
-@keyframes k1ut9kob{0%{transform:translate(calc(var(--dir)*var(--ds-popover-tx, 0)),var(--ds-popover-ty,0))}to{transform:none}}
 @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}}