@atlaskit/top-layer 1.6.0 → 1.7.0

package/dist/types/internal/use-safari-escape-fix.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+/**
+ * Safari-only guard: WebKit fires dialog `cancel` on Escape even when a child
+ * `auto`/`hint` popover consumed it, closing the dialog too.
+ * See notes/decisions/safari-escape-nested-popover-in-dialog.md
+ */
+export declare function useSafariEscapeFix({ dialogRef, isVisible, }: {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    isVisible: boolean;
+}): {
+    shouldIgnoreEscape: () => boolean;
+};

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

@@ -1,52 +1,7 @@
-import type { TAnimationPreset } from '../internal/use-animated-visibility';
-export type TPopoverAnimationPresetName = 'motion' | 'slide-and-fade' | 'scale-and-fade' | 'fade';
-export type TPopoverAnimationPreset = TAnimationPreset<'popover', TPopoverAnimationPresetName>;
-export declare function popupMotion(): TPopoverAnimationPreset;
-/**
- * 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?: {
-    distance?: number;
-}): TPopoverAnimationPreset;
-/**
- * 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(): TPopoverAnimationPreset;
-/**
- * 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(): TPopoverAnimationPreset;
+import { type TPlacementOptions } from '../internal/resolve-placement';
+export declare function getPopupMotionStyles({ placement, }: {
+    placement: TPlacementOptions;
+}): Array<{
+    property: string;
+    value: string;
+}>;

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

@@ -2,7 +2,7 @@ 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 TPopoverAnimationPreset } from './animations';
+import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * The reason a popover was closed.
  *
@@ -36,14 +36,17 @@ type TPopoverBaseProps = {
      * Additional CSS styles applied to the popover root element.
      * Use to set `backgroundColor` to match the popup surface colour.
      */
-    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    xcss?: StrictXCSSProp<'animationName', '&:popover-open', {
+        requiredPseudos: '&:popover-open';
+        requiredProperties: never;
+    }>;
     /**
      * Animation preset for entry/exit transitions.
      *
      * Animations use `@starting-style` and `allow-discrete` for progressive
      * enhancement: browsers without support show/hide instantly.
      */
-    animate?: false | TPopoverAnimationPreset;
+    animate?: boolean | TAnimationConfig;
     /**
      * Test ID applied to the popover element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.6.0",
+	"version": "1.7.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",
@@ -29,7 +29,8 @@
 		},
 		"integrationTests": {
 			"additionalBrowsers": [
-				"desktop-firefox"
+				"desktop-firefox",
+				"desktop-webkit"
 			]
 		}
 	},
@@ -39,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -55,11 +56,11 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@atlassian/testing-library": "^0.10.0",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",

package/dist/cjs/dialog/animations.js

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dialogFade = dialogFade;
-exports.dialogMotion = dialogMotion;
-exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
-// `custom` variant currently exists for typing reasons for Drawer
-// not indicative of final API
-
-/**
- * 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
-function dialogMotion() {
-  return {
-    kind: 'dialog',
-    name: 'motion'
-  };
-}
-
-/**
- * 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
-function dialogSlideUpAndFade(options) {
-  var _options$distance;
-  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
-
-  // The configurable distance is applied via the `--ds-dialog-ty` custom property
-  return {
-    kind: 'dialog',
-    name: 'slide-up-and-fade',
-    getStyles: function getStyles() {
-      return [{
-        property: '--ds-dialog-ty',
-        value: "".concat(distance, "px")
-      }];
-    }
-  };
-}
-
-/**
- * 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
-function dialogFade() {
-  return {
-    kind: 'dialog',
-    name: 'fade'
-  };
-}

package/dist/es2019/dialog/animations.js

@@ -1,80 +0,0 @@
-// `custom` variant currently exists for typing reasons for Drawer
-// not indicative of final API
-
-/**
- * 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() {
-  return {
-    kind: 'dialog',
-    name: 'motion'
-  };
-}
-
-/**
- * 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$distance;
-  const distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
-
-  // The configurable distance is applied via the `--ds-dialog-ty` custom property
-  return {
-    kind: 'dialog',
-    name: 'slide-up-and-fade',
-    getStyles: () => [{
-      property: '--ds-dialog-ty',
-      value: `${distance}px`
-    }]
-  };
-}
-
-/**
- * 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() {
-  return {
-    kind: 'dialog',
-    name: 'fade'
-  };
-}

package/dist/esm/dialog/animations.js

@@ -1,82 +0,0 @@
-// `custom` variant currently exists for typing reasons for Drawer
-// not indicative of final API
-
-/**
- * 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() {
-  return {
-    kind: 'dialog',
-    name: 'motion'
-  };
-}
-
-/**
- * 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$distance;
-  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
-
-  // The configurable distance is applied via the `--ds-dialog-ty` custom property
-  return {
-    kind: 'dialog',
-    name: 'slide-up-and-fade',
-    getStyles: function getStyles() {
-      return [{
-        property: '--ds-dialog-ty',
-        value: "".concat(distance, "px")
-      }];
-    }
-  };
-}
-
-/**
- * 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() {
-  return {
-    kind: 'dialog',
-    name: 'fade'
-  };
-}

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

@@ -1,57 +0,0 @@
-import type { TAnimationPreset } from '../internal/use-animated-visibility';
-export type TDialogAnimationPresetName = 'motion' | 'slide-up-and-fade' | 'fade' | 'custom';
-export type TDialogAnimationPreset = TAnimationPreset<'dialog', TDialogAnimationPresetName>;
-/**
- * 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(): TDialogAnimationPreset;
-/**
- * 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?: {
-    /**
-     * Slide distance in pixels. Defaults to `12`.
-     */
-    distance?: number;
-}): TDialogAnimationPreset;
-/**
- * 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(): TDialogAnimationPreset;