@atlaskit/top-layer 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.4.0",
+	"version": "1.6.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",
@@ -10,7 +10,9 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": ["*.compiled.css"],
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"react-compiler": {
@@ -26,7 +28,9 @@
 			"category": "Libraries"
 		},
 		"integrationTests": {
-			"additionalBrowsers": ["desktop-firefox"]
+			"additionalBrowsers": [
+				"desktop-firefox"
+			]
 		}
 	},
 	"dependencies": {
@@ -35,7 +39,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.4.0",
+		"@atlaskit/tokens": "^15.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -49,9 +53,9 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^24.3.0",
-		"@atlaskit/heading": "^6.1.0",
+		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.4.0",
+		"@atlaskit/primitives": "^20.5.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -65,15 +69,29 @@
 	},
 	"techstack": {
 		"@atlassian/frontend": {
-			"import-structure": ["atlassian-conventions"],
-			"circular-dependencies": ["file-and-folder-level"]
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
 		},
 		"@repo/internal": {
 			"dom-events": "use-bind-event-listener",
-			"ui-components": ["lite-mode"],
-			"design-tokens": ["color", "spacing"],
-			"deprecation": ["no-deprecated-imports"],
-			"styling": ["static", "compiled"]
+			"ui-components": [
+				"lite-mode"
+			],
+			"design-tokens": [
+				"color",
+				"spacing"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			]
 		}
 	},
 	"publishConfig": {

package/dist/cjs/animations/presets.js

@@ -1,298 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.animationDurations = void 0;
-exports.dialogFade = dialogFade;
-exports.dialogMotion = dialogMotion;
-exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
-exports.fade = fade;
-exports.popupMotion = popupMotion;
-exports.scaleAndFade = scaleAndFade;
-exports.slideAndFade = slideAndFade;
-var _resolvePlacement = require("../internal/resolve-placement");
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var animationDurations = exports.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 = (0, _resolvePlacement.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
-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 = (0, _resolvePlacement.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
-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
-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
-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
-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
-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
-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/cjs/animations/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/es2019/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 const animationDurations = {
-  popupMotion: {
-    enter: 150,
-    exit: 100
-  },
-  popoverTransition: {
-    enter: 350,
-    exit: 175
-  },
-  dialogMotion: {
-    enter: 250,
-    exit: 200
-  },
-  dialogTransition: {
-    enter: 350,
-    exit: 175
-  }
-};
-// popupMotion
-
-function getPopupMotionProperties({
-  placement
-}) {
-  const {
-    axis,
-    edge
-  } = getPlacement({
-    placement
-  });
-  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: ({
-      placement
-    }) => getPopupMotionProperties({
-      placement
-    })
-  };
-}
-
-// slideAndFade
-
-function getSlideAndFadeProperties({
-  placement,
-  distance
-}) {
-  const pos = `${distance}px`;
-  const neg = `-${distance}px`;
-  const {
-    axis,
-    edge
-  } = getPlacement({
-    placement
-  });
-  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;
-  const 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: ({
-      placement
-    }) => getSlideAndFadeProperties({
-      placement,
-      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;
-  const 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: () => ({
-      '--ds-dialog-ty': `${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/es2019/animations/types.js

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