@atlaskit/top-layer 1.10.1 → 3.0.0

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

@@ -2,7 +2,6 @@ import { type ReactNode } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
-import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * The reason a popover was closed.
  *
@@ -33,20 +32,24 @@ export type { TPlacementOptions };
 type TPopoverBaseProps = {
     children: ReactNode;
     /**
-     * Additional CSS styles applied to the popover root element.
-     * Use to set `backgroundColor` to match the popup surface colour.
+     * Animation styles applied while the popover is entering.
+     *
+     * Only applied when `shouldAnimate` is `true`.
      */
-    xcss?: StrictXCSSProp<'animationName', '&:popover-open', {
-        requiredPseudos: '&:popover-open';
-        requiredProperties: never;
-    }>;
+    enteringAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
     /**
-     * Animation preset for entry/exit transitions.
+     * Animation styles applied while the popover is exiting.
      *
-     * Animations use `@starting-style` and `allow-discrete` for progressive
-     * enhancement: browsers without support show/hide instantly.
+     * Only applied when `shouldAnimate` is `true`.
      */
-    animate?: boolean | TAnimationConfig;
+    exitingAnimationXcss?: StrictXCSSProp<'animationName' | 'animationDuration' | 'animationTimingFunction' | 'animationDelay', never>;
+    /**
+     * Whether the popover should animate in and out.
+     *
+     * When `true`, default popover animation styles are applied. Use `enteringAnimationXcss`
+     * and `exitingAnimationXcss` to override the animation used for each phase.
+     */
+    shouldAnimate?: boolean;
     /**
      * Test ID applied to the popover element.
      */
@@ -61,9 +64,10 @@ type TPopoverBaseProps = {
     /**
      * Whether the popover is open.
      *
-     * - **`true`:** show the popover (calls `showPopover()`, entry animation plays via `@starting-style`).
-     * - **`false`:** hide the popover. When an `animate` preset is provided, the exit
-     *   animation plays (via `allow-discrete`) before the popover becomes logically closed.
+     * - **`true`:** show the popover (calls `showPopover()`). When `shouldAnimate`
+     *   is `true`, the entry animation plays via `@starting-style`.
+     * - **`false`:** hide the popover. When `shouldAnimate` is `true`, the exit
+     *   animation plays via `allow-discrete` before the popover becomes logically closed.
      *   Otherwise hides instantly.
      *
      * The consumer does not conditionally render the `Popover` - visibility is driven
@@ -77,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
@@ -87,34 +91,12 @@ 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`).
      *
-     * When `animate` is provided, the preset's `getStyles(placement)` is
-     * called to set CSS custom properties (like `--ds-popover-tx`, `--ds-popover-ty`)
-     * that control the slide direction. Has no effect without `animate`.
+     * When `shouldAnimate` is `true`, placement is used to set CSS custom
+     * properties (like `--ds-popover-tx`, `--ds-popover-ty`) that control the
+     * slide direction. Has no effect without `shouldAnimate`.
      *
      * This does NOT control positioning. Use `useAnchorPosition` for that.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.10.1",
+	"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",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -54,9 +54,9 @@
 		"@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.1.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "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;
-}>;