@atlaskit/top-layer 1.5.0 → 1.6.0

package/dist/esm/animations/presets.js

@@ -1,285 +0,0 @@
-import { getPlacement } from '../internal/resolve-placement';
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var animationDurations = {
-  popupMotion: {
-    enter: 150,
-    exit: 100
-  },
-  popoverTransition: {
-    enter: 350,
-    exit: 175
-  },
-  dialogMotion: {
-    enter: 250,
-    exit: 200
-  },
-  dialogTransition: {
-    enter: 350,
-    exit: 175
-  }
-};
-// popupMotion
-
-function getPopupMotionProperties(_ref) {
-  var placement = _ref.placement;
-  var _getPlacement = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge;
-  if (axis === 'block' && edge === 'start') {
-    return {
-      '--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)"
-    };
-  }
-  if (axis === 'inline' && edge === 'start') {
-    return {
-      '--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)"
-    };
-  }
-  if (axis === 'inline' && edge === 'end') {
-    return {
-      '--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)"
-    };
-  }
-  // Default: block/end (popover below trigger)
-  return {
-    '--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)"
-  };
-}
-
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function popupMotion() {
-  return {
-    name: 'popup-motion',
-    enterDurationMs: animationDurations.popupMotion.enter,
-    exitDurationMs: animationDurations.popupMotion.exit,
-    getProperties: function getProperties(_ref2) {
-      var placement = _ref2.placement;
-      return getPopupMotionProperties({
-        placement: placement
-      });
-    }
-  };
-}
-
-// slideAndFade
-
-function getSlideAndFadeProperties(_ref3) {
-  var placement = _ref3.placement,
-    distance = _ref3.distance;
-  var pos = "".concat(distance, "px");
-  var neg = "-".concat(distance, "px");
-  var _getPlacement2 = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement2.axis,
-    edge = _getPlacement2.edge;
-  if (axis === 'block' && edge === 'start') {
-    return {
-      '--ds-popover-tx': '0',
-      '--ds-popover-ty': pos
-    };
-  }
-  if (axis === 'block' && edge === 'end') {
-    return {
-      '--ds-popover-tx': '0',
-      '--ds-popover-ty': neg
-    };
-  }
-  if (axis === 'inline' && edge === 'start') {
-    return {
-      '--ds-popover-tx': pos,
-      '--ds-popover-ty': '0'
-    };
-  }
-  if (axis === 'inline' && edge === 'end') {
-    return {
-      '--ds-popover-tx': neg,
-      '--ds-popover-ty': '0'
-    };
-  }
-  return {
-    '--ds-popover-tx': '0',
-    '--ds-popover-ty': 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;
-  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
-  return {
-    name: 'slide-and-fade',
-    getProperties: function getProperties(_ref4) {
-      var placement = _ref4.placement;
-      return getSlideAndFadeProperties({
-        placement: placement,
-        distance: distance
-      });
-    },
-    enterDurationMs: animationDurations.popoverTransition.enter,
-    exitDurationMs: animationDurations.popoverTransition.exit
-  };
-}
-
-// 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 {
-    name: 'fade',
-    enterDurationMs: animationDurations.popoverTransition.enter,
-    exitDurationMs: animationDurations.popoverTransition.exit
-  };
-}
-
-// 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 {
-    name: 'scale-and-fade',
-    enterDurationMs: animationDurations.popoverTransition.enter,
-    exitDurationMs: animationDurations.popoverTransition.exit
-  };
-}
-
-// dialogMotion
-
-/**
- * Dialog motion animation.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogMotion } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogMotion() {
-  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
-  return {
-    name: 'motion',
-    enterDurationMs: animationDurations.dialogMotion.enter,
-    exitDurationMs: animationDurations.dialogMotion.exit
-  };
-}
-
-// dialogSlideUpAndFade
-
-/**
- * Slide up + opacity animation for dialogs.
- *
- * Entry slides up from below; exit slides up and out (asymmetric).
- * Includes backdrop fade animation.
- *
- * @param options.distance - Slide distance in pixels. Defaults to `12`.
- *
- * @example
- * ```tsx
- * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
- *
- * const animation = dialogSlideUpAndFade();
- * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogSlideUpAndFade(options) {
-  var _options$distance2;
-  var distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
-
-  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
-  // The distance is applied via the `--ds-dialog-ty` custom property rather
-  // than baked into the styles, so the name stays stable across distances.
-  return {
-    name: 'slide-up-and-fade',
-    getProperties: function getProperties() {
-      return {
-        '--ds-dialog-ty': "".concat(distance, "px")
-      };
-    },
-    enterDurationMs: animationDurations.dialogTransition.enter,
-    exitDurationMs: animationDurations.dialogTransition.exit
-  };
-}
-
-// dialogFade
-
-/**
- * Simple opacity transition for dialogs, no transform.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogFade } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogFade() {
-  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
-  return {
-    name: 'fade',
-    enterDurationMs: animationDurations.dialogTransition.enter,
-    exitDurationMs: animationDurations.dialogTransition.exit
-  };
-}

package/dist/esm/animations/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,128 +0,0 @@
-import { type TAnimationPreset } from './types';
-export declare const animationDurations: {
-    readonly popupMotion: {
-        readonly enter: 150;
-        readonly exit: 100;
-    };
-    readonly popoverTransition: {
-        readonly enter: 350;
-        readonly exit: 175;
-    };
-    readonly dialogMotion: {
-        readonly enter: 250;
-        readonly exit: 200;
-    };
-    readonly dialogTransition: {
-        readonly enter: 350;
-        readonly exit: 175;
-    };
-};
-export declare function popupMotion(): TAnimationPreset;
-type TSlideAndFadeOptions = {
-    /**
-     * Slide distance in pixels. Defaults to `4`.
-     */
-    distance?: number;
-};
-/**
- * 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 })} />
- * ```
- */
-export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimationPreset;
-/**
- * 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()} />
- * ```
- */
-export declare function fade(): TAnimationPreset;
-/**
- * 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()} />
- * ```
- */
-export declare function scaleAndFade(): TAnimationPreset;
-/**
- * Dialog motion animation.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogMotion } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogMotion(): TAnimationPreset;
-type TDialogSlideUpAndFadeOptions = {
-    /**
-     * Slide distance in pixels. Defaults to `12`.
-     */
-    distance?: number;
-};
-/**
- * Slide up + opacity animation for dialogs.
- *
- * Entry slides up from below; exit slides up and out (asymmetric).
- * Includes backdrop fade animation.
- *
- * @param options.distance - Slide distance in pixels. Defaults to `12`.
- *
- * @example
- * ```tsx
- * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
- *
- * const animation = dialogSlideUpAndFade();
- * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogSlideUpAndFade(options?: TDialogSlideUpAndFadeOptions): TAnimationPreset;
-/**
- * Simple opacity transition for dialogs, no transform.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogFade } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogFade(): TAnimationPreset;
-export {};

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

@@ -1,34 +0,0 @@
-import type { TPlacementOptions } from '../internal/resolve-placement';
-/**
- * A self-contained animation preset for top-layer elements.
- *
- * Contains a data-attribute name used as a stable test and debugging hook,
- * optional per-placement custom properties, and the entry and exit durations
- * used for a `transitionend` fallback timeout.
- *
- * The actual Compiled styles are kept static and component-local so the
- * Compiled transform can extract them at build time.
- */
-export type TAnimationPreset = {
-    /**
-     * Data attribute suffix used as a stable test and debugging hook (e.g.
-     * `'slide-and-fade'` becomes `data-ds-popover-slide-and-fade`).
-     */
-    name: string;
-    /**
-     * Per-placement CSS custom properties (e.g. directional offset for
-     * `slideAndFade`). Only used by presets that vary by placement or by a
-     * configurable distance.
-     */
-    getProperties?: (args: {
-        placement: TPlacementOptions;
-    }) => Record<string, string>;
-    /**
-     * Entry duration in ms (for `transitionend` fallback timeout on open).
-     */
-    enterDurationMs: number;
-    /**
-     * Exit duration in ms (for `transitionend` fallback timeout on close).
-     */
-    exitDurationMs: number;
-};