@atlaskit/top-layer 1.6.0 → 1.6.1

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

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

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

@@ -1,18 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import { prefersReducedMotion } from './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.
  *
@@ -72,6 +60,13 @@ function runOnTransitionEndOrTimeout({
   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`
@@ -135,6 +130,7 @@ function runOnTransitionEndOrTimeout({
  */
 export function useAnimatedVisibility({
   isOpen,
+  animationKind,
   animate,
   elementRef,
   onEnterFinish,
@@ -186,7 +182,7 @@ export function useAnimatedVisibility({
   // move to `open`. The fallback guarantees settle on swallowed events
   // (zero-duration, browser quirk, mid-transition unmount).
   useEffect(() => {
-    if (phase !== 'entering' || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'entering') {
       return;
     }
     const element = elementRef.current;
@@ -195,7 +191,7 @@ export function useAnimatedVisibility({
     }
     return runOnTransitionEndOrTimeout({
       element,
-      safetyNetMs: safetyNetMsMap[preset.kind].enter + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].enter + 50,
       onSettled: () => {
         var _onEnterFinishRef$cur;
         // Fire the consumer callback before transitioning phase so any
@@ -206,7 +202,7 @@ export function useAnimatedVisibility({
         setPhase(current => current === 'entering' ? 'open' : current);
       }
     });
-  }, [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.
@@ -227,7 +223,7 @@ export function useAnimatedVisibility({
   // Animated exit: wait for `transitionend` (or a safety-net timeout),
   // fire `onExitFinish`, then move to `closed` to unmount the host.
   useEffect(() => {
-    if (phase !== 'exiting' || !willAnimate || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'exiting' || !willAnimate) {
       return;
     }
     const element = elementRef.current;
@@ -236,7 +232,7 @@ export function useAnimatedVisibility({
     }
     return runOnTransitionEndOrTimeout({
       element,
-      safetyNetMs: safetyNetMsMap[preset.kind].exit + 50,
+      safetyNetMs: safetyNetMsMap[animationKind].exit + 50,
       onSettled: () => {
         var _onExitFinishRef$curr;
         // Fire the consumer callback before transitioning phase to
@@ -249,7 +245,7 @@ export function useAnimatedVisibility({
         setPhase(current => current === 'exiting' ? 'closed' : current);
       }
     });
-  }, [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/es2019/popover/animations.js

@@ -1,5 +1,5 @@
 import { getPlacement } from '../internal/resolve-placement';
-function getPopupMotionStyles({
+export function getPopupMotionStyles({
   placement
 }) {
   const {
@@ -43,148 +43,4 @@ function getPopupMotionStyles({
     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
-export function popupMotion() {
-  return {
-    kind: 'popover',
-    name: 'motion',
-    getStyles: getPopupMotionStyles
-  };
-}
-function getSlideAndFadeStyles({
-  placement,
-  distance
-}) {
-  const pos = `${distance}px`;
-  const neg = `-${distance}px`;
-  const {
-    axis,
-    edge
-  } = getPlacement({
-    placement
-  });
-  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
-export function slideAndFade(options) {
-  var _options$distance;
-  const 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: ({
-      placement
-    }) => getSlideAndFadeStyles({
-      placement,
-      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
-export 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
-export function scaleAndFade() {
-  return {
-    kind: 'popover',
-    name: 'scale-and-fade'
-  };
 }

package/dist/es2019/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))}
@@ -16,21 +15,12 @@
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
 ._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}}

package/dist/es2019/popover/popover.js

@@ -11,6 +11,7 @@ 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.
  */
@@ -23,19 +24,13 @@ const supportsPopoverHint = once(() => {
   element.setAttribute('popover', 'hint');
   return element.popover === 'hint';
 });
-const slideInKeyframes = null;
-const slideOutKeyframes = null;
 
 // These animation styles use the non-strict Compiled cssMap because they rely
 // on `@starting-style`, `:popover-open`, `[dir='rtl']`, and `allow-discrete`.
 // Keep them in this component so the Compiled transform can statically extract
 // every referenced style.
 const popoverAnimationStyles = {
-  root: "_k8m011k7 _1oecdn4k _1s9z1a5r _1a5xt94y _12t71ign _34bx1n1a _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m",
-  motion: "_y44vof1f _1o51q7pw _15ns179n _n70peoah",
-  'slide-and-fade': "_j7hq1l2h _5sagdn4k _1pgl1lbj _71rervlo _1psg1ign _o8i7indk",
-  fade: "_j7hq1a5s _5sagdn4k _1pgl1lbj _71re1bym _1psg1ign _o8i7indk",
-  'scale-and-fade': "_j7hqneez _5sagdn4k _1pgl1lbj _71re1v6b _1psg1ign _o8i7indk"
+  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 const styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
@@ -85,7 +80,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   onOpenChange,
   onEnterFinish,
   onExitFinish,
-  animate,
+  animate = false,
   placement,
   testId,
   isOpen,
@@ -106,6 +101,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     preset
   } = useAnimatedVisibility({
     isOpen,
+    animationKind: 'popover',
     animate,
     elementRef: ownRef,
     onEnterFinish,
@@ -271,12 +267,12 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // stale custom properties on the element.
   useLayoutEffect(() => {
     const element = ownRef.current;
-    if (!element || !(preset !== null && preset !== void 0 && preset.getStyles) || !placement) {
+    if (!element || !placement) {
       return;
     }
     return setStyle({
       element,
-      styles: preset.getStyles({
+      styles: getPopupMotionStyles({
         placement
       })
     });
@@ -329,6 +325,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, preset && popoverAnimationStyles.root, preset && popoverAnimationStyles[preset.name], consumerXcss])
+    className: ax([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
   }, children);
 });

package/dist/es2019/testing/polyfill.js

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

package/dist/esm/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/esm/dialog/dialog-content.js

@@ -6,22 +6,15 @@ import { bind } from 'bind-event-listener';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-import { setStyle } from '../internal/set-style';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
-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"
@@ -55,7 +48,8 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     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,
@@ -69,6 +63,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var combinedRef = mergeRefs([ownRef, ref]);
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
+      animationKind: 'dialog',
       animate: animate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
@@ -120,24 +115,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     }
   }, [isOpen]);
 
-  // Apply preset-provided animation custom properties (e.g. the
-  // `--ds-dialog-ty` slide distance for `dialogSlideUpAndFade`). The
-  // cleanup 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.
-  useLayoutEffect(function () {
-    var dialog = ownRef.current;
-    if (!dialog || !(preset !== null && preset !== void 0 && preset.getStyles)) {
-      return;
-    }
-    return setStyle({
-      element: dialog,
-      styles: preset.getStyles({
-        placement: {}
-      })
-    });
-  }, [preset, isVisible]);
-
   // Handle native Escape (cancel event)
   var handleCancel = useCallback(function (event) {
     // Only handle a cancel targeting THIS dialog. Native `cancel` does not
@@ -198,6 +175,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     style: style,
     onCancel: handleCancel,
     "data-testid": testId,
-    className: ax([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles[preset.name], consumerXcss])
+    className: ax([styles.dialog, shouldHideBackdrop ? backdropStyles.hidden : backdropStyles.root, preset && backdropStyles.motion, preset && dialogAnimationStyles.root, preset && dialogAnimationStyles.motion, consumerXcss])
   }, children);
 });

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

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

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

@@ -2,18 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import { prefersReducedMotion } from './reduced-motion';
-
-/**
- * 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.
  *
@@ -72,6 +60,13 @@ function runOnTransitionEndOrTimeout(_ref) {
   return teardown;
 }
 
+/**
+ * Animation config for entry/exit transitions.
+ *
+ * Currently no configuration is supported via this prop,
+ * and this is just a placeholder.
+ */
+
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
  * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
@@ -135,6 +130,7 @@ function runOnTransitionEndOrTimeout(_ref) {
  */
 export function useAnimatedVisibility(_ref2) {
   var isOpen = _ref2.isOpen,
+    animationKind = _ref2.animationKind,
     animate = _ref2.animate,
     elementRef = _ref2.elementRef,
     onEnterFinish = _ref2.onEnterFinish,
@@ -188,7 +184,7 @@ export function useAnimatedVisibility(_ref2) {
   // move to `open`. The fallback guarantees settle on swallowed events
   // (zero-duration, browser quirk, mid-transition unmount).
   useEffect(function () {
-    if (phase !== 'entering' || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'entering') {
       return;
     }
     var element = elementRef.current;
@@ -197,7 +193,7 @@ export 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
@@ -210,7 +206,7 @@ export 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.
@@ -231,7 +227,7 @@ export function useAnimatedVisibility(_ref2) {
   // Animated exit: wait for `transitionend` (or a safety-net timeout),
   // fire `onExitFinish`, then move to `closed` to unmount the host.
   useEffect(function () {
-    if (phase !== 'exiting' || !willAnimate || !(preset !== null && preset !== void 0 && preset.kind)) {
+    if (phase !== 'exiting' || !willAnimate) {
       return;
     }
     var element = elementRef.current;
@@ -240,7 +236,7 @@ export 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
@@ -255,7 +251,7 @@ export 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