@atlaskit/drawer 9.4.2 → 9.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/drawer
 
+## 9.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.4.2
 
 ### Patch Changes

package/dist/cjs/compiled/blanket.js

@@ -26,13 +26,10 @@ var Blanket = function Blanket(_ref) {
   return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
     appear: true
   }, isOpen && /*#__PURE__*/_react.default.createElement(_motion.FadeIn
-  /**
-   * We double the duration because the fade in keyframes have
-   * `opacity: 1` at `50%`.
-   *
+  /*
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: _constants.transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/cjs/compiled/constants.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transitionDurationMs = exports.transitionDuration = exports.animationTimingFunction = void 0;
+exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
-var transitionDuration = exports.transitionDuration = '0.22s';
-var transitionDurationMs = exports.transitionDurationMs = 220;
 var animationTimingFunction = exports.animationTimingFunction = function animationTimingFunction() {
   return _curves.easeOut;
 };

package/dist/cjs/compiled/drawer-panel/drawer-panel.js

@@ -34,18 +34,9 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
     onFinish = _ref.onFinish,
     enterFrom = _ref.enterFrom;
-  var _useExitingPersistenc = (0, _motion.useExitingPersistence)(),
-    isExiting = _useExitingPersistenc.isExiting;
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  var duration = isExiting ? _constants.transitionDurationMs * 2 : _constants.transitionDurationMs;
   return /*#__PURE__*/React.createElement(_motion.SlideIn, {
     animationTimingFunction: _constants.animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/cjs/compiled/drawer.js

@@ -67,7 +67,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -90,7 +90,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -102,7 +102,7 @@ var Drawer = exports.Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/cjs/components/blanket.js

@@ -37,7 +37,7 @@ var Blanket = function Blanket(_ref) {
    *
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: _constants.transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/cjs/components/index.js

@@ -72,7 +72,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -95,7 +95,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -107,7 +107,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/cjs/components/primitives/index.js

@@ -40,18 +40,9 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
     onFinish = _ref.onFinish,
     enterFrom = _ref.enterFrom;
-  var _useExitingPersistenc = (0, _motion.useExitingPersistence)(),
-    isExiting = _useExitingPersistenc.isExiting;
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  var duration = isExiting ? _constants.transitionDurationMs * 2 : _constants.transitionDurationMs;
   return (0, _react2.jsx)(_motion.SlideIn, {
     animationTimingFunction: _constants.animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/cjs/constants.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.directions = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
+exports.widths = exports.transitionTimingFunction = exports.directions = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
-var transitionDuration = exports.transitionDuration = '0.22s';
-var transitionDurationMs = exports.transitionDurationMs = 220;
 var transitionTimingFunction = exports.transitionTimingFunction = _curves.easeOut;
 var widths = exports.widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
 var directions = exports.directions = ['top', 'right', 'bottom', 'left'];

package/dist/es2019/compiled/blanket.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../constants';
+import { animationTimingFunction } from '../constants';
 const styles = {
   blanket: "_kqswh2mm"
 };
@@ -20,13 +20,10 @@ const Blanket = ({
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
   }, isOpen && /*#__PURE__*/React.createElement(FadeIn
-  /**
-   * We double the duration because the fade in keyframes have
-   * `opacity: 1` at `50%`.
-   *
+  /*
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/es2019/compiled/constants.js

@@ -1,4 +1,2 @@
 import { easeOut } from '@atlaskit/motion/curves';
-export const transitionDuration = '0.22s';
-export const transitionDurationMs = 220;
 export const animationTimingFunction = () => easeOut;

package/dist/es2019/compiled/drawer-panel/drawer-panel.js

@@ -3,8 +3,8 @@ import "./drawer-panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef } from 'react';
-import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../../constants';
+import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { animationTimingFunction } from '../../constants';
 import { EnsureIsInsideDrawerContext, OnCloseContext } from '../../context';
 import FocusLock from './focus-lock';
 const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
@@ -25,19 +25,9 @@ const CustomSlideIn = ({
   onFinish,
   enterFrom
 }) => {
-  const {
-    isExiting
-  } = useExitingPersistence();
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  const duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
   return /*#__PURE__*/React.createElement(SlideIn, {
     animationTimingFunction: animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/es2019/compiled/drawer.js

@@ -51,7 +51,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -72,7 +72,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -82,7 +82,7 @@ export const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/es2019/components/blanket.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../constants';
+import { animationTimingFunction } from '../constants';
 const blanketStyles = css({
   position: 'relative'
 });
@@ -30,7 +30,7 @@ const Blanket = ({
    *
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/es2019/components/index.js

@@ -57,7 +57,7 @@ const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -78,7 +78,7 @@ const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -88,7 +88,7 @@ const Drawer = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/es2019/components/primitives/index.js

@@ -10,8 +10,8 @@ import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
-import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../../constants';
+import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { animationTimingFunction } from '../../constants';
 import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
@@ -34,19 +34,9 @@ const CustomSlideIn = ({
   onFinish,
   enterFrom
 }) => {
-  const {
-    isExiting
-  } = useExitingPersistence();
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  const duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
   return jsx(SlideIn, {
     animationTimingFunction: animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/es2019/constants.js

@@ -1,6 +1,4 @@
 import { easeOut } from '@atlaskit/motion/curves';
-export const transitionDuration = '0.22s';
-export const transitionDurationMs = 220;
 export const transitionTimingFunction = easeOut;
 export const widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
 export const directions = ['top', 'right', 'bottom', 'left'];

package/dist/esm/compiled/blanket.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../constants';
+import { animationTimingFunction } from '../constants';
 var styles = {
   blanket: "_kqswh2mm"
 };
@@ -19,13 +19,10 @@ var Blanket = function Blanket(_ref) {
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
   }, isOpen && /*#__PURE__*/React.createElement(FadeIn
-  /**
-   * We double the duration because the fade in keyframes have
-   * `opacity: 1` at `50%`.
-   *
+  /*
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/esm/compiled/constants.js

@@ -1,6 +1,4 @@
 import { easeOut } from '@atlaskit/motion/curves';
-export var transitionDuration = '0.22s';
-export var transitionDurationMs = 220;
 export var animationTimingFunction = function animationTimingFunction() {
   return easeOut;
 };

package/dist/esm/compiled/drawer-panel/drawer-panel.js

@@ -3,8 +3,8 @@ import "./drawer-panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef } from 'react';
-import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../../constants';
+import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { animationTimingFunction } from '../../constants';
 import { EnsureIsInsideDrawerContext, OnCloseContext } from '../../context';
 import FocusLock from './focus-lock';
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
@@ -24,18 +24,9 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
     onFinish = _ref.onFinish,
     enterFrom = _ref.enterFrom;
-  var _useExitingPersistenc = useExitingPersistence(),
-    isExiting = _useExitingPersistenc.isExiting;
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  var duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
   return /*#__PURE__*/React.createElement(SlideIn, {
     animationTimingFunction: animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/esm/compiled/drawer.js

@@ -56,7 +56,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -79,7 +79,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -91,7 +91,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/esm/components/blanket.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../constants';
+import { animationTimingFunction } from '../constants';
 var blanketStyles = css({
   position: 'relative'
 });
@@ -29,7 +29,7 @@ var Blanket = function Blanket(_ref) {
    *
    * The fade out animation uses half the passed duration so it evens out.
    */, {
-    duration: transitionDurationMs * 2
+    duration: "large"
     /**
      * We don't expose this on `FadeIn` but it does get passed down.
      * TODO: figure out how we want to handle this...

package/dist/esm/components/index.js

@@ -61,7 +61,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -84,7 +84,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -96,7 +96,7 @@ var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "9.4.2",
+    packageVersion: "9.4.3",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/esm/components/primitives/index.js

@@ -13,8 +13,8 @@ import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
-import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
-import { animationTimingFunction, transitionDurationMs } from '../../constants';
+import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { animationTimingFunction } from '../../constants';
 import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
@@ -36,18 +36,9 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
   var children = _ref.children,
     onFinish = _ref.onFinish,
     enterFrom = _ref.enterFrom;
-  var _useExitingPersistenc = useExitingPersistence(),
-    isExiting = _useExitingPersistenc.isExiting;
-
-  /**
-   * The actual duration should be the same for both enter and exit,
-   * but motion halves the passed duration for exit animations,
-   * so we double it when exiting.
-   */
-  var duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
   return jsx(SlideIn, {
     animationTimingFunction: animationTimingFunction,
-    duration: duration,
+    duration: "small",
     enterFrom: enterFrom,
     exitTo: enterFrom,
     fade: "none",

package/dist/esm/constants.js

@@ -1,6 +1,4 @@
 import { easeOut } from '@atlaskit/motion/curves';
-export var transitionDuration = '0.22s';
-export var transitionDurationMs = 220;
 export var transitionTimingFunction = easeOut;
 export var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
 export var directions = ['top', 'right', 'bottom', 'left'];

package/dist/types/compiled/constants.d.ts

@@ -1,3 +1 @@
-export declare const transitionDuration = "0.22s";
-export declare const transitionDurationMs = 220;
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;

package/dist/types/constants.d.ts

@@ -1,7 +1,5 @@
 import type { Direction } from '@atlaskit/motion';
 import type { DrawerWidth, FocusLockSettings } from './components/types';
-export declare const transitionDuration = "0.22s";
-export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
 export declare const directions: Direction[];

package/dist/types-ts4.5/compiled/constants.d.ts

@@ -1,3 +1 @@
-export declare const transitionDuration = "0.22s";
-export declare const transitionDurationMs = 220;
 export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;

package/dist/types-ts4.5/constants.d.ts

@@ -1,7 +1,5 @@
 import type { Direction } from '@atlaskit/motion';
 import type { DrawerWidth, FocusLockSettings } from './components/types';
-export declare const transitionDuration = "0.22s";
-export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
 export declare const directions: Direction[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "9.4.2",
+	"version": "9.4.3",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -60,9 +60,9 @@
 		"@atlaskit/blanket": "^14.1.0",
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/css": "^0.8.0",
-		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/icon": "^23.8.0",
 		"@atlaskit/layering": "^1.1.0",
-		"@atlaskit/motion": "^1.10.0",
+		"@atlaskit/motion": "^2.0.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
 		"@atlaskit/portal": "^4.11.0",
 		"@atlaskit/theme": "^15.0.0",
@@ -93,7 +93,7 @@
 		"@atlaskit/link": "*",
 		"@atlaskit/menu": "^2.14.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
 		"@testing-library/react": "^13.4.0",