@atlaskit/flag 15.9.1 → 15.9.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/flag
 
+## 15.9.3
+
+### Patch Changes
+
+- [#114382](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114382)
+  [`5033cb80b3765`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5033cb80b3765) -
+  Updates internal animation logic to leverage static animation timing names, rather than arbitrary
+  values.
+- Updated dependencies
+
+## 15.9.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.9.1
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.9.1";
+var packageVersion = "15.9.3";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-group.js

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flagWidth = exports.flagAnimationTime = exports.default = exports.FlagGroupContext = void 0;
+exports.flagWidth = exports.default = exports.FlagGroupContext = void 0;
 exports.useFlagGroup = useFlagGroup;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _motion = require("@atlaskit/motion");
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _motion = require("@atlaskit/motion");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -25,7 +25,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var gridSize = (0, _constants.gridSize)();
 var flagWidth = exports.flagWidth = gridSize * 50;
-var flagAnimationTime = exports.flagAnimationTime = 400;
 var defaultFlagGroupContext = {
   onDismissed: _noop.default,
   isDismissAllowed: false
@@ -46,7 +45,8 @@ var baseStyles = (0, _react2.css)({
   width: flagWidth,
   position: 'absolute',
   insetBlockEnd: 0,
-  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transition: "transform ".concat(_motion.durations.medium, "ms ease-in-out"),
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
@@ -83,7 +83,8 @@ var dismissAllowedStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& + *': {
     transform: "translate(0, 0)",
-    transitionDuration: "".concat(flagAnimationTime / 2, "ms")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    transitionDuration: "".concat(_motion.exitingDurations.medium, "ms")
   }
 });
 var flagGroupContainerStyles = (0, _react2.css)({
@@ -131,10 +132,8 @@ var FlagGroup = function FlagGroup(props) {
       return (0, _react2.jsx)(_motion.SlideIn, {
         enterFrom: "left",
         fade: "inout",
-        duration: flagAnimationTime,
-        animationTimingFunction: function animationTimingFunction() {
-          return _motion.easeIn;
-        }
+        duration: "medium",
+        animationTimingFunction: "ease-in"
       }, function (_ref) {
         var className = _ref.className,
           ref = _ref.ref;

package/dist/cjs/flag.js

@@ -57,7 +57,7 @@ var flagWrapperStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.1"
+  packageVersion: "15.9.3"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.9.1";
+const packageVersion = "15.9.3";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-group.js

@@ -7,15 +7,14 @@ import { Children, createContext, useContext, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
+import { durations, exitingDurations, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import Portal from '@atlaskit/portal';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const gridSize = getGridSize();
 export const flagWidth = gridSize * 50;
-export const flagAnimationTime = 400;
 const defaultFlagGroupContext = {
   onDismissed: noop,
   isDismissAllowed: false
@@ -36,7 +35,8 @@ const baseStyles = css({
   width: flagWidth,
   position: 'absolute',
   insetBlockEnd: 0,
-  transition: `transform ${flagAnimationTime}ms ease-in-out`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transition: `transform ${durations.medium}ms ease-in-out`,
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
@@ -73,7 +73,8 @@ const dismissAllowedStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& + *': {
     transform: `translate(0, 0)`,
-    transitionDuration: `${flagAnimationTime / 2}ms`
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    transitionDuration: `${exitingDurations.medium}ms`
   }
 });
 const flagGroupContainerStyles = css({
@@ -117,8 +118,8 @@ const FlagGroup = props => {
       return jsx(SlideIn, {
         enterFrom: "left",
         fade: "inout",
-        duration: flagAnimationTime,
-        animationTimingFunction: () => easeIn
+        duration: "medium",
+        animationTimingFunction: "ease-in"
       }, ({
         className,
         ref

package/dist/es2019/flag.js

@@ -49,7 +49,7 @@ const flagWrapperStyles = css({
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.1"
+  packageVersion: "15.9.3"
 };
 const transitionStyles = css({
   flexGrow: 1,

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.9.1";
+var packageVersion = "15.9.3";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-group.js

@@ -8,15 +8,14 @@ import { Children, createContext, useContext, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
+import { durations, exitingDurations, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import Portal from '@atlaskit/portal';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var gridSize = getGridSize();
 export var flagWidth = gridSize * 50;
-export var flagAnimationTime = 400;
 var defaultFlagGroupContext = {
   onDismissed: noop,
   isDismissAllowed: false
@@ -37,7 +36,8 @@ var baseStyles = css({
   width: flagWidth,
   position: 'absolute',
   insetBlockEnd: 0,
-  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  transition: "transform ".concat(durations.medium, "ms ease-in-out"),
   // TODO: Use new breakpoints
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (max-width: 560px)': {
@@ -74,7 +74,8 @@ var dismissAllowedStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& + *': {
     transform: "translate(0, 0)",
-    transitionDuration: "".concat(flagAnimationTime / 2, "ms")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    transitionDuration: "".concat(exitingDurations.medium, "ms")
   }
 });
 var flagGroupContainerStyles = css({
@@ -122,10 +123,8 @@ var FlagGroup = function FlagGroup(props) {
       return jsx(SlideIn, {
         enterFrom: "left",
         fade: "inout",
-        duration: flagAnimationTime,
-        animationTimingFunction: function animationTimingFunction() {
-          return easeIn;
-        }
+        duration: "medium",
+        animationTimingFunction: "ease-in"
       }, function (_ref) {
         var className = _ref.className,
           ref = _ref.ref;

package/dist/esm/flag.js

@@ -53,7 +53,7 @@ var flagWrapperStyles = css({
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.9.1"
+  packageVersion: "15.9.3"
 };
 var transitionStyles = css({
   flexGrow: 1,

package/dist/types/flag-group.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -31,7 +35,6 @@ type FlagGroupProps = {
     shouldRenderToParent?: boolean;
 };
 export declare const flagWidth: number;
-export declare const flagAnimationTime = 400;
 type FlagGroupAPI = {
     onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
     isDismissAllowed: boolean;

package/dist/types-ts4.5/flag-group.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -31,7 +35,6 @@ type FlagGroupProps = {
     shouldRenderToParent?: boolean;
 };
 export declare const flagWidth: number;
-export declare const flagAnimationTime = 400;
 type FlagGroupAPI = {
     onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
     isDismissAllowed: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.9.1",
+	"version": "15.9.3",
 	"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,10 +48,10 @@
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/ds-lib": "^3.5.0",
 		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.7.0",
-		"@atlaskit/motion": "^1.10.0",
+		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/motion": "^3.0.0",
 		"@atlaskit/portal": "^4.11.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/visually-hidden": "^1.6.0",