@atlaskit/top-layer 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/top-layer
 
+## 3.0.0
+
+### Major Changes
+
+- [`30abd36d3c8d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/30abd36d3c8d6) -
+  Removes the `onOpenChange` prop from Popover. This prop was not being relied on, and created a
+  divergence between the Dialog and Popover APIs.
+
+### Patch Changes
+
+- [`c0874b1b13309`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0874b1b13309) -
+  Refactor popover motion styles and rename `getPlacement` to `resolvePlacement`.
+
 ## 2.0.0
 
 ### Major Changes

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/placement-to-position-area.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.placementToPositionArea = placementToPositionArea;
-var _resolvePlacement = require("./resolve-placement");
+var _resolvePlacement2 = require("./resolve-placement");
 /**
  * Resolves placement options to CSS `position-area` syntax.
  *
@@ -24,12 +24,12 @@ var _resolvePlacement = require("./resolve-placement");
  */
 function placementToPositionArea(_ref) {
   var placement = _ref.placement;
-  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+  var _resolvePlacement = (0, _resolvePlacement2.resolvePlacement)({
       placement: placement
     }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
+    axis = _resolvePlacement.axis,
+    edge = _resolvePlacement.edge,
+    align = _resolvePlacement.align;
   var edgeValue = "".concat(axis, "-").concat(edge);
   if (align === 'center') {
     return edgeValue;

package/dist/cjs/internal/placement-to-try-fallbacks.js

@@ -49,7 +49,7 @@ function placementToTryFallbacks(_ref3) {
    * The browser tries them _in order_ and uses the _first_ one that fits.
    */
 
-  var resolved = (0, _resolvePlacement.getPlacement)({
+  var resolved = (0, _resolvePlacement.resolvePlacement)({
     placement: placement
   });
   var axis = resolved.axis,

package/dist/cjs/internal/resolve-css-length-to-pixels.js

@@ -64,7 +64,7 @@ function resolveCssLengthToPixels(_ref3) {
   }
 
   // Fast path: bare `${n}px` strings come from the consumer normalisation
-  // in `getPlacement`. Avoid a reflow when we can.
+  // in `resolvePlacement`. Avoid a reflow when we can.
   var pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
   if (pxMatch) {
     return Number(pxMatch[1]);

package/dist/cjs/internal/resolve-placement.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPlacement = getPlacement;
+exports.resolvePlacement = resolvePlacement;
 var _resolveCssLength = require("./resolve-css-length");
 /**
  * Default gap between trigger and popover. Resolves to a design
@@ -19,7 +19,7 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  */
 
 /**
- * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
  * length strings.
  */
@@ -42,7 +42,7 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * `offset.gap: token('space.100', '8px')`,
  * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
-function getPlacement(_ref) {
+function resolvePlacement(_ref) {
   var _placement$offset, _placement$axis, _placement$edge, _placement$align, _placement$offset$cro, _placement$offset2, _placement$offset$cro2, _placement$offset3;
   var placement = _ref.placement;
   var consumerGap = (_placement$offset = placement.offset) === null || _placement$offset === void 0 ? void 0 : _placement$offset.gap;

package/dist/cjs/internal/use-anchor-position.js

@@ -33,7 +33,7 @@ var _setStyle = require("./set-style");
  * is never painted at the wrong location.
  */
 
-// `getPlacement` is intentionally NOT re-exported here - import it directly
+// `resolvePlacement` is intentionally NOT re-exported here - import it directly
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
@@ -157,7 +157,7 @@ function crossAxisShiftMargin(_ref2) {
  * (or undefined fields vs explicit defaults) does not produce a fresh result.
  */
 function useStablePlacement(placement) {
-  var resolved = (0, _resolvePlacement.getPlacement)({
+  var resolved = (0, _resolvePlacement.resolvePlacement)({
     placement: placement
   });
   var axis = resolved.axis;

package/dist/cjs/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,12 +15,11 @@ var _bindEventListener = require("bind-event-listener");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
+var _resolvePlacement2 = require("../internal/resolve-placement");
 var _roleTypes = require("../internal/role-types");
-var _setStyle = require("../internal/set-style");
 var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useInitialFocus = require("../internal/use-initial-focus");
-var _animations = require("./animations");
 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); }
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
@@ -55,6 +54,31 @@ var styles = {
   enter: "_y44v179n",
   exit: "_y44vof1f"
 };
+
+// Intentionally using `Record<string, string>` instead of `React.CSSProperties`
+// to avoid type errors about the CSS variables not being valid property names
+var popupMotionStyles = {
+  block: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  },
+  inline: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  }
+};
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
  * dismisses them. `modal` comes from Dialog only; other layer types are unused.
@@ -98,7 +122,6 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     _ref$mode = _ref.mode,
     modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
     onClose = _ref.onClose,
-    onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     _ref$shouldAnimate = _ref.shouldAnimate,
@@ -166,6 +189,17 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // will close other `auto` popovers when opened. Acceptable trade-off given
   // shrinking browser set without `hint` support.
   var mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
+  var popupMotionStyle = (0, _react.useMemo)(function () {
+    if (!placement || !shouldAnimate) {
+      return undefined;
+    }
+    var _resolvePlacement = (0, _resolvePlacement2.resolvePlacement)({
+        placement: placement
+      }),
+      axis = _resolvePlacement.axis,
+      edge = _resolvePlacement.edge;
+    return popupMotionStyles[axis][edge];
+  }, [placement, shouldAnimate]);
 
   // Prevents toggle handler from calling onClose for our own hidePopover() calls.
   var programmaticCloseRef = (0, _react.useRef)(false);
@@ -187,21 +221,10 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   var handleToggle = (0, _react.useCallback)(function (event) {
     var element = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
-          isOpen: true,
-          element: element
-        });
-      }
       return;
     }
     if (event.newState === 'closed') {
       if (element) {
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
-          isOpen: false,
-          element: element
-        });
-
         // Nested-popover focus restoration fallback (browser only
         // restores outermost; Firefox skips nested entirely).
         // Restore only when the role moved focus in on open AND the
@@ -238,7 +261,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         reason: reason
       });
     }
-  }, [onClose, onOpenChange, role]);
+  }, [onClose, role]);
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
@@ -280,23 +303,6 @@ 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. The cleanup
-  // restores the previous inline values so a preset change does not leave
-  // stale custom properties on the element.
-  (0, _react.useLayoutEffect)(function () {
-    var element = ownRef.current;
-    if (!element || !placement) {
-      return;
-    }
-    return (0, _setStyle.setStyle)({
-      element: element,
-      styles: (0, _animations.getPopupMotionStyles)({
-        placement: placement
-      })
-    });
-  }, [placement, isVisible]);
-
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
@@ -343,7 +349,10 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     role: role,
     "aria-label": label,
     "aria-labelledby": labelledBy,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Motion styles are selected at runtime from the placement.
+    ,
+    style: popupMotionStyle,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: (0, _runtime.ax)([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, (0, _react2.cx)(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);

package/dist/cjs/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';

package/dist/es2019/internal/placement-to-position-area.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * Resolves placement options to CSS `position-area` syntax.
@@ -24,7 +24,7 @@ export function placementToPositionArea({
     axis,
     edge,
     align
-  } = getPlacement({
+  } = resolvePlacement({
     placement
   });
   const edgeValue = `${axis}-${edge}`;

package/dist/es2019/internal/placement-to-try-fallbacks.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * A `position-area` primary edge — the placement axis joined to its edge, e.g.
@@ -47,7 +47,7 @@ export function placementToTryFallbacks({
    * The browser tries them _in order_ and uses the _first_ one that fits.
    */
 
-  const resolved = getPlacement({
+  const resolved = resolvePlacement({
     placement
   });
   const {

package/dist/es2019/internal/resolve-css-length-to-pixels.js

@@ -61,7 +61,7 @@ export function resolveCssLengthToPixels({
   }
 
   // Fast path: bare `${n}px` strings come from the consumer normalisation
-  // in `getPlacement`. Avoid a reflow when we can.
+  // in `resolvePlacement`. Avoid a reflow when we can.
   const pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
   if (pxMatch) {
     return Number(pxMatch[1]);

package/dist/es2019/internal/resolve-placement.js

@@ -14,7 +14,7 @@ const DEFAULT_GAP = "var(--ds-space-100, 8px)";
  */
 
 /**
- * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
  * length strings.
  */
@@ -37,7 +37,7 @@ const DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * `offset.gap: token('space.100', '8px')`,
  * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
-export function getPlacement({
+export function resolvePlacement({
   placement
 }) {
   var _placement$offset, _placement$axis, _placement$edge, _placement$align, _placement$offset$cro, _placement$offset2, _placement$offset2$cr, _placement$offset$cro2, _placement$offset3, _placement$offset3$cr;

package/dist/es2019/internal/use-anchor-position.js

@@ -21,10 +21,10 @@ import { combine } from './combine';
 import { placementToPositionArea } from './placement-to-position-area';
 import { placementToTryFallbacks } from './placement-to-try-fallbacks';
 import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 import { setStyle } from './set-style';
 
-// `getPlacement` is intentionally NOT re-exported here - import it directly
+// `resolvePlacement` is intentionally NOT re-exported here - import it directly
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
@@ -144,7 +144,7 @@ function crossAxisShiftMargin({
  * (or undefined fields vs explicit defaults) does not produce a fresh result.
  */
 function useStablePlacement(placement) {
-  const resolved = getPlacement({
+  const resolved = resolvePlacement({
     placement
   });
   const axis = resolved.axis;

package/dist/es2019/popover/popover.js

@@ -1,18 +1,17 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
+import { resolvePlacement } from '../internal/resolve-placement';
 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.
  */
@@ -46,6 +45,31 @@ const styles = {
   enter: "_y44v179n",
   exit: "_y44vof1f"
 };
+
+// Intentionally using `Record<string, string>` instead of `React.CSSProperties`
+// to avoid type errors about the CSS variables not being valid property names
+const popupMotionStyles = {
+  block: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  },
+  inline: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  }
+};
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
  * dismisses them. `modal` comes from Dialog only; other layer types are unused.
@@ -88,7 +112,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   children,
   mode: modeProp = 'auto',
   onClose,
-  onOpenChange,
   onEnterFinish,
   onExitFinish,
   shouldAnimate = false,
@@ -158,6 +181,18 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // will close other `auto` popovers when opened. Acceptable trade-off given
   // shrinking browser set without `hint` support.
   const mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
+  const popupMotionStyle = useMemo(() => {
+    if (!placement || !shouldAnimate) {
+      return undefined;
+    }
+    const {
+      axis,
+      edge
+    } = resolvePlacement({
+      placement
+    });
+    return popupMotionStyles[axis][edge];
+  }, [placement, shouldAnimate]);
 
   // Prevents toggle handler from calling onClose for our own hidePopover() calls.
   const programmaticCloseRef = useRef(false);
@@ -179,21 +214,10 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   const handleToggle = useCallback(event => {
     const element = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
-          isOpen: true,
-          element: element
-        });
-      }
       return;
     }
     if (event.newState === 'closed') {
       if (element) {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
-          isOpen: false,
-          element: element
-        });
-
         // Nested-popover focus restoration fallback (browser only
         // restores outermost; Firefox skips nested entirely).
         // Restore only when the role moved focus in on open AND the
@@ -230,7 +254,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         reason
       });
     }
-  }, [onClose, onOpenChange, role]);
+  }, [onClose, role]);
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
@@ -272,23 +296,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     };
   }, [handleToggle, handleBeforeToggle, isVisible]);
 
-  // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility. The cleanup
-  // restores the previous inline values so a preset change does not leave
-  // stale custom properties on the element.
-  useLayoutEffect(() => {
-    const element = ownRef.current;
-    if (!element || !placement) {
-      return;
-    }
-    return setStyle({
-      element,
-      styles: getPopupMotionStyles({
-        placement
-      })
-    });
-  }, [placement, isVisible]);
-
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
@@ -335,7 +342,10 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     role: role,
     "aria-label": label,
     "aria-labelledby": labelledBy,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Motion styles are selected at runtime from the placement.
+    ,
+    style: popupMotionStyle,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: ax([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, cx(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);

package/dist/es2019/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';

package/dist/esm/internal/placement-to-position-area.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * Resolves placement options to CSS `position-area` syntax.
@@ -19,12 +19,12 @@ import { getPlacement } from './resolve-placement';
  */
 export function placementToPositionArea(_ref) {
   var placement = _ref.placement;
-  var _getPlacement = getPlacement({
+  var _resolvePlacement = resolvePlacement({
       placement: placement
     }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
+    axis = _resolvePlacement.axis,
+    edge = _resolvePlacement.edge,
+    align = _resolvePlacement.align;
   var edgeValue = "".concat(axis, "-").concat(edge);
   if (align === 'center') {
     return edgeValue;

package/dist/esm/internal/placement-to-try-fallbacks.js

@@ -1,4 +1,4 @@
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 
 /**
  * A `position-area` primary edge — the placement axis joined to its edge, e.g.
@@ -44,7 +44,7 @@ export function placementToTryFallbacks(_ref3) {
    * The browser tries them _in order_ and uses the _first_ one that fits.
    */
 
-  var resolved = getPlacement({
+  var resolved = resolvePlacement({
     placement: placement
   });
   var axis = resolved.axis,

package/dist/esm/internal/resolve-css-length-to-pixels.js

@@ -58,7 +58,7 @@ export function resolveCssLengthToPixels(_ref3) {
   }
 
   // Fast path: bare `${n}px` strings come from the consumer normalisation
-  // in `getPlacement`. Avoid a reflow when we can.
+  // in `resolvePlacement`. Avoid a reflow when we can.
   var pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
   if (pxMatch) {
     return Number(pxMatch[1]);

package/dist/esm/internal/resolve-placement.js

@@ -14,7 +14,7 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  */
 
 /**
- * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
  * length strings.
  */
@@ -37,7 +37,7 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * `offset.gap: token('space.100', '8px')`,
  * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
-export function getPlacement(_ref) {
+export function resolvePlacement(_ref) {
   var _placement$offset, _placement$axis, _placement$edge, _placement$align, _placement$offset$cro, _placement$offset2, _placement$offset$cro2, _placement$offset3;
   var placement = _ref.placement;
   var consumerGap = (_placement$offset = placement.offset) === null || _placement$offset === void 0 ? void 0 : _placement$offset.gap;

package/dist/esm/internal/use-anchor-position.js

@@ -23,10 +23,10 @@ import { combine } from './combine';
 import { placementToPositionArea } from './placement-to-position-area';
 import { placementToTryFallbacks } from './placement-to-try-fallbacks';
 import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
-import { getPlacement } from './resolve-placement';
+import { resolvePlacement } from './resolve-placement';
 import { setStyle } from './set-style';
 
-// `getPlacement` is intentionally NOT re-exported here - import it directly
+// `resolvePlacement` is intentionally NOT re-exported here - import it directly
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
@@ -150,7 +150,7 @@ function crossAxisShiftMargin(_ref2) {
  * (or undefined fields vs explicit defaults) does not produce a fresh result.
  */
 function useStablePlacement(placement) {
-  var resolved = getPlacement({
+  var resolved = resolvePlacement({
     placement: placement
   });
   var axis = resolved.axis;

package/dist/esm/popover/popover.js

@@ -1,18 +1,17 @@
-/* popover.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import once from '@atlaskit/ds-lib/once';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
+import { resolvePlacement } from '../internal/resolve-placement';
 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.
  */
@@ -46,6 +45,31 @@ var styles = {
   enter: "_y44v179n",
   exit: "_y44vof1f"
 };
+
+// Intentionally using `Record<string, string>` instead of `React.CSSProperties`
+// to avoid type errors about the CSS variables not being valid property names
+var popupMotionStyles = {
+  block: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  },
+  inline: {
+    start: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    },
+    end: {
+      '--ds-popover-motion-enter': "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)",
+      '--ds-popover-motion-exit': "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)"
+    }
+  }
+};
 /**
  * Roles registered with the open layer observer as `popup`, so `closeLayers()`
  * dismisses them. `modal` comes from Dialog only; other layer types are unused.
@@ -89,7 +113,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     _ref$mode = _ref.mode,
     modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
     onClose = _ref.onClose,
-    onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     _ref$shouldAnimate = _ref.shouldAnimate,
@@ -157,6 +180,17 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // will close other `auto` popovers when opened. Acceptable trade-off given
   // shrinking browser set without `hint` support.
   var mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
+  var popupMotionStyle = useMemo(function () {
+    if (!placement || !shouldAnimate) {
+      return undefined;
+    }
+    var _resolvePlacement = resolvePlacement({
+        placement: placement
+      }),
+      axis = _resolvePlacement.axis,
+      edge = _resolvePlacement.edge;
+    return popupMotionStyles[axis][edge];
+  }, [placement, shouldAnimate]);
 
   // Prevents toggle handler from calling onClose for our own hidePopover() calls.
   var programmaticCloseRef = useRef(false);
@@ -178,21 +212,10 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var handleToggle = useCallback(function (event) {
     var element = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
-          isOpen: true,
-          element: element
-        });
-      }
       return;
     }
     if (event.newState === 'closed') {
       if (element) {
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
-          isOpen: false,
-          element: element
-        });
-
         // Nested-popover focus restoration fallback (browser only
         // restores outermost; Firefox skips nested entirely).
         // Restore only when the role moved focus in on open AND the
@@ -229,7 +252,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         reason: reason
       });
     }
-  }, [onClose, onOpenChange, role]);
+  }, [onClose, role]);
 
   // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
   // below, so listeners are attached when `showPopover()` synchronously
@@ -271,23 +294,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     };
   }, [handleToggle, handleBeforeToggle, isVisible]);
 
-  // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility. The cleanup
-  // 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 || !placement) {
-      return;
-    }
-    return setStyle({
-      element: element,
-      styles: getPopupMotionStyles({
-        placement: placement
-      })
-    });
-  }, [placement, isVisible]);
-
   // Show/hide based on isOpen. `showPopover`/`hidePopover` are no-ops when
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
@@ -334,7 +340,10 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     role: role,
     "aria-label": label,
     "aria-labelledby": labelledBy,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Motion styles are selected at runtime from the placement.
+    ,
+    style: popupMotionStyle,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     className: ax([styles.root, surfaceResetStyles.root, shouldAnimate && phase === 'entering' && styles.enter, shouldAnimate && phase === 'exiting' && styles.exit, shouldAnimate && styles.motion, cx(shouldAnimate && phase === 'entering' && enteringAnimationXcss, shouldAnimate && phase === 'exiting' && exitingAnimationXcss)])
   }, children);

package/dist/esm/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/types/internal/resolve-placement.d.ts

@@ -7,14 +7,16 @@ export type TCrossAxisShiftOffset = {
     value: string;
     direction: 'forwards' | 'backwards';
 };
+export type TPlacementAxis = 'block' | 'inline';
+export type TPlacementEdge = 'start' | 'end';
 /**
- * Fully-resolved placement (internal). Use `getPlacement` for partial input.
+ * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
  * length strings.
  */
 export type TPlacement = {
-    axis: 'block' | 'inline';
-    edge: 'start' | 'end';
+    axis: TPlacementAxis;
+    edge: TPlacementEdge;
     align: 'start' | 'center' | 'end';
     offset: {
         gap: string;
@@ -53,6 +55,6 @@ export type TPlacementOptions = {
  * `offset.gap: token('space.100', '8px')`,
  * `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
  */
-export declare function getPlacement({ placement }: {
+export declare function resolvePlacement({ placement }: {
     placement: TPlacementOptions;
 }): TPlacement;

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

@@ -81,8 +81,8 @@ type TPopoverBaseProps = {
      *   The exact unmount timing is private and may change.
      * - The `id` (supplied or generated via `usePopoverId()`) is stable across opens.
      * - The `ref` is populated only while the host element is rendered. Consumers
-     *   that read from the ref outside of `onOpenChange` / `onEnterFinish` should
-     *   gate the read on `isOpen` being `true`.
+     *   that read from the ref outside of `onEnterFinish` should gate the read on
+     *   `isOpen` being `true`.
      *
      * **Important:** For `mode="auto"` popovers, the browser can dismiss the popover
      * via light dismiss (Escape, click outside) independently of this prop. When that
@@ -91,28 +91,6 @@ type TPopoverBaseProps = {
      * React state will be out of sync (the popover will be hidden despite `isOpen={true}`).
      */
     isOpen: boolean;
-    /**
-     * Called when the popover's open state changes via browser toggle events.
-     *
-     * Receives the new open state and a reference to the popover element,
-     * which is useful for focus management (e.g. focusing the first interactive
-     * child on open via `getFirstFocusable` from `@atlaskit/top-layer/focus`).
-     *
-     * @example
-     * ```tsx
-     * <Popover
-     *   onOpenChange={({ isOpen, element }) => {
-     *     if (isOpen) {
-     *       getFirstFocusable({ container: element })?.focus();
-     *     }
-     *   }}
-     * />
-     * ```
-     */
-    onOpenChange?: (args: {
-        isOpen: boolean;
-        element: HTMLDivElement;
-    }) => void;
     /**
      * Placement hint for directional animations (e.g. `slideAndFade`).
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "2.0.0",
+	"version": "3.0.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -54,7 +54,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^24.3.0",
-		"@atlaskit/heading": "^6.2.0",
+		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/ssr": "workspace:^",

package/dist/cjs/popover/animations.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPopupMotionStyles = getPopupMotionStyles;
-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)"
-  }];
-}

package/dist/es2019/popover/animations.js

@@ -1,46 +0,0 @@
-import { getPlacement } from '../internal/resolve-placement';
-export function getPopupMotionStyles({
-  placement
-}) {
-  const {
-    axis,
-    edge
-  } = getPlacement({
-    placement
-  });
-  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/animations.js

@@ -1,44 +0,0 @@
-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/types/popover/animations.d.ts

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