@atlaskit/drawer 13.2.0 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/drawer
 
+## 13.3.0
+
+### Minor Changes
+
+- [`530dfb5aee695`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/530dfb5aee695) -
+  Updates how animations are applied to Drawer when the `platform-dst-top-layer` feature gate is
+  enabled.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/cjs/drawer-panel/drawer-top-layer.compiled.css

@@ -1,8 +1,34 @@
+._13ku1fu8::-ms-backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._13ku1fu8::backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1fsl1yx9[open]{transition-duration:.1s}
+._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
+._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
+._1kdeglyw[open]{transform:none}
+._1ltk1j28::-ms-backdrop{background-color:transparent}
+._1ltk1j28::backdrop{background-color:transparent}
+._1oec14ed{transition-duration:50ms}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
 ._1reo15vq{overflow-x:hidden}
+._1s9z1a5r{transition-behavior:allow-discrete}
 ._4t3i1osq{height:100%}
+._4v7ipwmj[open]::-ms-backdrop{transition-duration:.7s}
+._4v7ipwmj[open]::backdrop{transition-duration:.7s}
+._6fl4dkwg{transition-timing-function:cubic-bezier(.2,0,0,1)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._d7fr1i5c[open]::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._d7fr1i5c[open]::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._k8m05ji5{transition-property:transform,overlay,display}
+._njwkivc9::-ms-backdrop{-ms-transition-property:background-color,overlay,display;transition-property:background-color,overlay,display}
+._njwkivc9::backdrop{transition-property:background-color,overlay,display}
+._t9ec3k1b{transform:translateY(100%)}
+._t9ecjq3t{transform:translateX(-100%)}
+._t9ecxwn4{transform:translateX(100%)}
+._t9ecz6y5{transform:translateY(-100%)}
+._yhpq1ttt::-ms-backdrop{transition-duration:.35s}
+._yhpq1ttt::backdrop{transition-duration:.35s}
+@media (prefers-reduced-motion:reduce){._156yru3m{transition-duration:0s}._aeldru3m[open]{transition-duration:0s}._1sbqru3m::-ms-backdrop{transition-duration:0s}._1sbqru3m::backdrop{transition-duration:0s}._1i6zru3m[open]::-ms-backdrop{transition-duration:0s}._1i6zru3m[open]::backdrop{transition-duration:0s}}
+@starting-style{._1dar1j28[open]::-ms-backdrop{background-color:transparent}._1dar1j28[open]::backdrop{background-color:transparent}._1hqt3k1b[open]{transform:translateY(100%)}._1hqtjq3t[open]{transform:translateX(-100%)}._1hqtxwn4[open]{transform:translateX(100%)}._1hqtz6y5[open]{transform:translateY(-100%)}}

package/dist/cjs/drawer-panel/drawer-top-layer.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react2 = require("@compiled/react");
 var _bindEventListener = require("bind-event-listener");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _dialog = require("@atlaskit/top-layer/dialog");
@@ -20,12 +21,33 @@ var _dialogScrollLock = require("@atlaskit/top-layer/dialog-scroll-lock");
 var _ensureIsInsideDrawerContext = require("../ensure-is-inside-drawer-context");
 var _onCloseContext = require("../on-close-context");
 var _useDrawerStack = _interopRequireDefault(require("../use-drawer-stack"));
-var _drawerSlideIn = require("./drawer-slide-in");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+
+// Legacy drawer panel uses `SlideIn duration="small"`, which resolves to
+// 100ms on enter and 50ms on exit.
+var slideEnterDurationMs = 100;
+var slideExitDurationMs = 50;
+
+// Legacy drawer blanket is a separate `FadeIn duration="large"`, which resolves
+// to 700ms on enter and 350ms on exit. These intentionally differ from the panel
+// slide timings to preserve the old visual behavior.
+var fadeEnterDurationMs = 700;
+var fadeExitDurationMs = 350;
+var animate = {
+  kind: 'dialog',
+  name: 'custom'
+};
 var styles = {
+  root: "_k8m05ji5 _1oec14ed _6fl4dkwg _1s9z1a5r _1kdeglyw _1fsl1yx9 _1ltk1j28 _njwkivc9 _yhpq1ttt _13ku1fu8 _1fyf1a5r _d7fr1i5c _4v7ipwmj _1dar1j28 _156yru3m _aeldru3m _1sbqru3m _1i6zru3m",
   surface: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _bfhk1bhr _1q1l1bhr _ect4ttxp"
 };
+var drawerAnimationStyles = {
+  left: "_t9ecjq3t _1hqtjq3t",
+  right: "_t9ecxwn4 _1hqtxwn4",
+  top: "_t9ecz6y5 _1hqtz6y5",
+  bottom: "_t9ec3k1b _1hqt3k1b"
+};
 
 // Width presets mirror the legacy `DrawerPanel`. Applied to the `<dialog>` (the
 // sized, edge-pinned element) and clamped to the viewport for mobile safety.
@@ -125,7 +147,7 @@ function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -137,7 +159,7 @@ function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -149,7 +171,7 @@ function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }
@@ -220,14 +242,6 @@ function DrawerTopLayer(_ref2) {
     maxHeight: '100dvh',
     width: "min(".concat(WIDTH_MAP[width], ", 100vw)")
   };
-
-  // Memoized so the preset object (and its CSS string) is rebuilt only when
-  // `enterFrom` changes, not on every render.
-  var animate = (0, _react.useMemo)(function () {
-    return (0, _drawerSlideIn.drawerSlideIn)({
-      from: enterFrom
-    });
-  }, [enterFrom]);
   var accessibleName = getAccessibleName({
     label: label,
     titleId: titleId
@@ -238,6 +252,7 @@ function DrawerTopLayer(_ref2) {
     onEnterFinish: handleEnterFinish,
     onExitFinish: handleExitFinish,
     animate: animate,
+    xcss: (0, _react2.cx)(styles.root, drawerAnimationStyles[enterFrom]),
     shouldHideBackdrop: stackIndex > 0,
     testId: testId
   }, accessibleName, {

package/dist/cjs/drawer.js

@@ -59,7 +59,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -82,7 +82,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -94,7 +94,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/es2019/drawer-panel/drawer-top-layer.compiled.css

@@ -1,8 +1,34 @@
+._13ku1fu8::-ms-backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._13ku1fu8::backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1fsl1yx9[open]{transition-duration:.1s}
+._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
+._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
+._1kdeglyw[open]{transform:none}
+._1ltk1j28::-ms-backdrop{background-color:transparent}
+._1ltk1j28::backdrop{background-color:transparent}
+._1oec14ed{transition-duration:50ms}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
 ._1reo15vq{overflow-x:hidden}
+._1s9z1a5r{transition-behavior:allow-discrete}
 ._4t3i1osq{height:100%}
+._4v7ipwmj[open]::-ms-backdrop{transition-duration:.7s}
+._4v7ipwmj[open]::backdrop{transition-duration:.7s}
+._6fl4dkwg{transition-timing-function:cubic-bezier(.2,0,0,1)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._d7fr1i5c[open]::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._d7fr1i5c[open]::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._k8m05ji5{transition-property:transform,overlay,display}
+._njwkivc9::-ms-backdrop{-ms-transition-property:background-color,overlay,display;transition-property:background-color,overlay,display}
+._njwkivc9::backdrop{transition-property:background-color,overlay,display}
+._t9ec3k1b{transform:translateY(100%)}
+._t9ecjq3t{transform:translateX(-100%)}
+._t9ecxwn4{transform:translateX(100%)}
+._t9ecz6y5{transform:translateY(-100%)}
+._yhpq1ttt::-ms-backdrop{transition-duration:.35s}
+._yhpq1ttt::backdrop{transition-duration:.35s}
+@media (prefers-reduced-motion:reduce){._156yru3m{transition-duration:0s}._aeldru3m[open]{transition-duration:0s}._1sbqru3m::-ms-backdrop{transition-duration:0s}._1sbqru3m::backdrop{transition-duration:0s}._1i6zru3m[open]::-ms-backdrop{transition-duration:0s}._1i6zru3m[open]::backdrop{transition-duration:0s}}
+@starting-style{._1dar1j28[open]::-ms-backdrop{background-color:transparent}._1dar1j28[open]::backdrop{background-color:transparent}._1hqt3k1b[open]{transform:translateY(100%)}._1hqtjq3t[open]{transform:translateX(-100%)}._1hqtxwn4[open]{transform:translateX(100%)}._1hqtz6y5[open]{transform:translateY(-100%)}}

package/dist/es2019/drawer-panel/drawer-top-layer.js

@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./drawer-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import { createCloseEvent, Dialog } from '@atlaskit/top-layer/dialog';
@@ -11,11 +12,32 @@ import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
 import { EnsureIsInsideDrawerContext } from '../ensure-is-inside-drawer-context';
 import { OnCloseContext } from '../on-close-context';
 import useDrawerStack from '../use-drawer-stack';
-import { drawerSlideIn } from './drawer-slide-in';
 const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+
+// Legacy drawer panel uses `SlideIn duration="small"`, which resolves to
+// 100ms on enter and 50ms on exit.
+const slideEnterDurationMs = 100;
+const slideExitDurationMs = 50;
+
+// Legacy drawer blanket is a separate `FadeIn duration="large"`, which resolves
+// to 700ms on enter and 350ms on exit. These intentionally differ from the panel
+// slide timings to preserve the old visual behavior.
+const fadeEnterDurationMs = 700;
+const fadeExitDurationMs = 350;
+const animate = {
+  kind: 'dialog',
+  name: 'custom'
+};
 const styles = {
+  root: "_k8m05ji5 _1oec14ed _6fl4dkwg _1s9z1a5r _1kdeglyw _1fsl1yx9 _1ltk1j28 _njwkivc9 _yhpq1ttt _13ku1fu8 _1fyf1a5r _d7fr1i5c _4v7ipwmj _1dar1j28 _156yru3m _aeldru3m _1sbqru3m _1i6zru3m",
   surface: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _bfhk1bhr _1q1l1bhr _ect4ttxp"
 };
+const drawerAnimationStyles = {
+  left: "_t9ecjq3t _1hqtjq3t",
+  right: "_t9ecxwn4 _1hqtxwn4",
+  top: "_t9ecz6y5 _1hqtz6y5",
+  bottom: "_t9ec3k1b _1hqt3k1b"
+};
 
 // Width presets mirror the legacy `DrawerPanel`. Applied to the `<dialog>` (the
 // sized, edge-pinned element) and clamped to the viewport for mobile safety.
@@ -112,7 +134,7 @@ export function DrawerTopLayer({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -122,7 +144,7 @@ export function DrawerTopLayer({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -132,7 +154,7 @@ export function DrawerTopLayer({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }
@@ -204,12 +226,6 @@ export function DrawerTopLayer({
     maxHeight: '100dvh',
     width: `min(${WIDTH_MAP[width]}, 100vw)`
   };
-
-  // Memoized so the preset object (and its CSS string) is rebuilt only when
-  // `enterFrom` changes, not on every render.
-  const animate = useMemo(() => drawerSlideIn({
-    from: enterFrom
-  }), [enterFrom]);
   const accessibleName = getAccessibleName({
     label,
     titleId
@@ -220,6 +236,7 @@ export function DrawerTopLayer({
     onEnterFinish: handleEnterFinish,
     onExitFinish: handleExitFinish,
     animate: animate,
+    xcss: cx(styles.root, drawerAnimationStyles[enterFrom]),
     shouldHideBackdrop: stackIndex > 0,
     testId: testId
   }, accessibleName, {

package/dist/es2019/drawer.js

@@ -44,7 +44,7 @@ const DrawerBase = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -65,7 +65,7 @@ const DrawerBase = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -75,7 +75,7 @@ const DrawerBase = ({
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }

package/dist/esm/drawer-panel/drawer-top-layer.compiled.css

@@ -1,8 +1,34 @@
+._13ku1fu8::-ms-backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
+._13ku1fu8::backdrop{transition-timing-function:cubic-bezier(.15,1,.3,1)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
+._1fsl1yx9[open]{transition-duration:.1s}
+._1fyf1a5r::-ms-backdrop{transition-behavior:allow-discrete}
+._1fyf1a5r::backdrop{transition-behavior:allow-discrete}
+._1kdeglyw[open]{transform:none}
+._1ltk1j28::-ms-backdrop{background-color:transparent}
+._1ltk1j28::backdrop{background-color:transparent}
+._1oec14ed{transition-duration:50ms}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
 ._1reo15vq{overflow-x:hidden}
+._1s9z1a5r{transition-behavior:allow-discrete}
 ._4t3i1osq{height:100%}
+._4v7ipwmj[open]::-ms-backdrop{transition-duration:.7s}
+._4v7ipwmj[open]::backdrop{transition-duration:.7s}
+._6fl4dkwg{transition-timing-function:cubic-bezier(.2,0,0,1)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._d7fr1i5c[open]::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._d7fr1i5c[open]::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._k8m05ji5{transition-property:transform,overlay,display}
+._njwkivc9::-ms-backdrop{-ms-transition-property:background-color,overlay,display;transition-property:background-color,overlay,display}
+._njwkivc9::backdrop{transition-property:background-color,overlay,display}
+._t9ec3k1b{transform:translateY(100%)}
+._t9ecjq3t{transform:translateX(-100%)}
+._t9ecxwn4{transform:translateX(100%)}
+._t9ecz6y5{transform:translateY(-100%)}
+._yhpq1ttt::-ms-backdrop{transition-duration:.35s}
+._yhpq1ttt::backdrop{transition-duration:.35s}
+@media (prefers-reduced-motion:reduce){._156yru3m{transition-duration:0s}._aeldru3m[open]{transition-duration:0s}._1sbqru3m::-ms-backdrop{transition-duration:0s}._1sbqru3m::backdrop{transition-duration:0s}._1i6zru3m[open]::-ms-backdrop{transition-duration:0s}._1i6zru3m[open]::backdrop{transition-duration:0s}}
+@starting-style{._1dar1j28[open]::-ms-backdrop{background-color:transparent}._1dar1j28[open]::backdrop{background-color:transparent}._1hqt3k1b[open]{transform:translateY(100%)}._1hqtjq3t[open]{transform:translateX(-100%)}._1hqtxwn4[open]{transform:translateX(100%)}._1hqtz6y5[open]{transform:translateY(-100%)}}

package/dist/esm/drawer-panel/drawer-top-layer.js

@@ -4,7 +4,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import "./drawer-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import { createCloseEvent, Dialog } from '@atlaskit/top-layer/dialog';
@@ -12,11 +13,32 @@ import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
 import { EnsureIsInsideDrawerContext } from '../ensure-is-inside-drawer-context';
 import { OnCloseContext } from '../on-close-context';
 import useDrawerStack from '../use-drawer-stack';
-import { drawerSlideIn } from './drawer-slide-in';
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+
+// Legacy drawer panel uses `SlideIn duration="small"`, which resolves to
+// 100ms on enter and 50ms on exit.
+var slideEnterDurationMs = 100;
+var slideExitDurationMs = 50;
+
+// Legacy drawer blanket is a separate `FadeIn duration="large"`, which resolves
+// to 700ms on enter and 350ms on exit. These intentionally differ from the panel
+// slide timings to preserve the old visual behavior.
+var fadeEnterDurationMs = 700;
+var fadeExitDurationMs = 350;
+var animate = {
+  kind: 'dialog',
+  name: 'custom'
+};
 var styles = {
+  root: "_k8m05ji5 _1oec14ed _6fl4dkwg _1s9z1a5r _1kdeglyw _1fsl1yx9 _1ltk1j28 _njwkivc9 _yhpq1ttt _13ku1fu8 _1fyf1a5r _d7fr1i5c _4v7ipwmj _1dar1j28 _156yru3m _aeldru3m _1sbqru3m _1i6zru3m",
   surface: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _bfhk1bhr _1q1l1bhr _ect4ttxp"
 };
+var drawerAnimationStyles = {
+  left: "_t9ecjq3t _1hqtjq3t",
+  right: "_t9ecxwn4 _1hqtxwn4",
+  top: "_t9ecz6y5 _1hqtz6y5",
+  bottom: "_t9ec3k1b _1hqt3k1b"
+};
 
 // Width presets mirror the legacy `DrawerPanel`. Applied to the `<dialog>` (the
 // sized, edge-pinned element) and clamped to the viewport for mobile safety.
@@ -116,7 +138,7 @@ export function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -128,7 +150,7 @@ export function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -140,7 +162,7 @@ export function DrawerTopLayer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }
@@ -211,14 +233,6 @@ export function DrawerTopLayer(_ref2) {
     maxHeight: '100dvh',
     width: "min(".concat(WIDTH_MAP[width], ", 100vw)")
   };
-
-  // Memoized so the preset object (and its CSS string) is rebuilt only when
-  // `enterFrom` changes, not on every render.
-  var animate = useMemo(function () {
-    return drawerSlideIn({
-      from: enterFrom
-    });
-  }, [enterFrom]);
   var accessibleName = getAccessibleName({
     label: label,
     titleId: titleId
@@ -229,6 +243,7 @@ export function DrawerTopLayer(_ref2) {
     onEnterFinish: handleEnterFinish,
     onExitFinish: handleExitFinish,
     animate: animate,
+    xcss: cx(styles.root, drawerAnimationStyles[enterFrom]),
     shouldHideBackdrop: stackIndex > 0,
     testId: testId
   }, accessibleName, {

package/dist/esm/drawer.js

@@ -49,7 +49,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -72,7 +72,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -84,7 +84,7 @@ var DrawerBase = function DrawerBase(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.1",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }

package/drawer.docs.tsx

@@ -11,7 +11,7 @@ const documentation: StructuredContentSource = {
 			status: 'intent-to-deprecate',
 			import: {
 				name: 'Drawer',
-				package: '@atlaskit/drawer',
+				package: '@atlaskit/drawer/drawer',
 				type: 'default',
 				packagePath: path.resolve(__dirname),
 				packageJson: require('./package.json'),
@@ -52,7 +52,7 @@ const documentation: StructuredContentSource = {
 			status: 'intent-to-deprecate',
 			import: {
 				name: 'DrawerContent',
-				package: '@atlaskit/drawer',
+				package: '@atlaskit/drawer/drawer-content',
 				type: 'named',
 				packagePath: path.resolve(__dirname),
 				packageJson: require('./package.json'),
@@ -83,7 +83,7 @@ const documentation: StructuredContentSource = {
 			status: 'intent-to-deprecate',
 			import: {
 				name: 'DrawerSidebar',
-				package: '@atlaskit/drawer',
+				package: '@atlaskit/drawer/drawer-sidebar',
 				type: 'named',
 				packagePath: path.resolve(__dirname),
 				packageJson: require('./package.json'),
@@ -114,7 +114,7 @@ const documentation: StructuredContentSource = {
 			status: 'intent-to-deprecate',
 			import: {
 				name: 'DrawerCloseButton',
-				package: '@atlaskit/drawer',
+				package: '@atlaskit/drawer/drawer-close-button',
 				type: 'named',
 				packagePath: path.resolve(__dirname),
 				packageJson: require('./package.json'),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "13.2.0",
+	"version": "13.3.0",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,15 +46,15 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^36.1.0",
+		"@atlaskit/icon": "^36.2.0",
 		"@atlaskit/layering": "^4.1.0",
-		"@atlaskit/motion": "^7.2.0",
+		"@atlaskit/motion": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/portal": "^6.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tokens": "^15.4.0",
-		"@atlaskit/top-layer": "^1.3.0",
+		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/top-layer": "^1.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -79,7 +79,7 @@
 		"@atlaskit/link": "^4.1.0",
 		"@atlaskit/menu": "^9.1.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.5.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/ssr-tests": "workspace:^",

package/dist/cjs/drawer-panel/drawer-slide-in.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.drawerSlideIn = drawerSlideIn;
-/**
- * Off-screen transform per entry edge. A drawer slides in from the edge it is
- * pinned to and exits back to the same edge (legacy `SlideIn` used
- * `exitTo={enterFrom}`), so enter and exit are symmetric.
- */
-var HIDDEN_TRANSFORM = {
-  left: 'translateX(-100%)',
-  right: 'translateX(100%)',
-  top: 'translateY(-100%)',
-  bottom: 'translateY(100%)'
-};
-
-// Match the legacy `CustomSlideIn`: `duration="small"` (100ms) on enter,
-// `small * 0.5` (50ms) on exit, `ease-out` timing. Drawer slides with no panel
-// fade (`fade="none"`); only the backdrop fades.
-var ENTER_MS = 100;
-var EXIT_MS = 50;
-var EASE = 'cubic-bezier(0.2,0,0,1)'; // @atlaskit/motion `easeOut`
-
-/**
- * Builds the slide CSS for a single entry edge, scoped to
- * `[data-ds-dialog-drawer-slide-{from}]` (the `Dialog` primitive stamps
- * `data-ds-dialog-{name}` on the `<dialog>` element).
- *
- * - base selector  → hidden/exit state + exit duration
- * - `[open]`        → visible state + enter duration
- * - `@starting-style` → initial (pre-paint) state so the entry transition runs
- *
- * The `::backdrop` fades its blanket colour in step with the panel. Stacked
- * drawers hide their backdrop via the `Dialog` `shouldHideBackdrop` prop (an
- * ID-scoped `<style>` whose specificity beats this rule).
- */
-function buildCss(name, hidden) {
-  var sel = "[data-ds-dialog-".concat(name, "]");
-  return "\n".concat(sel, " {\n  transform: ").concat(hidden, ";\n  transition:\n    transform ").concat(EXIT_MS, "ms ").concat(EASE, ",\n    overlay ").concat(EXIT_MS, "ms allow-discrete,\n    display ").concat(EXIT_MS, "ms allow-discrete;\n}\n\n").concat(sel, "[open] {\n  transform: none;\n  transition-duration: ").concat(ENTER_MS, "ms;\n}\n\n@starting-style {\n  ").concat(sel, "[open] {\n    transform: ").concat(hidden, ";\n  }\n}\n\n").concat(sel, "::backdrop {\n  background-color: transparent;\n  transition:\n    background-color ").concat(EXIT_MS, "ms ").concat(EASE, ",\n    overlay ").concat(EXIT_MS, "ms allow-discrete,\n    display ").concat(EXIT_MS, "ms allow-discrete;\n}\n\n").concat(sel, "[open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: ").concat(ENTER_MS, "ms;\n}\n\n@starting-style {\n  ").concat(sel, "[open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ").concat(sel, ",\n  ").concat(sel, "[open],\n  ").concat(sel, "::backdrop,\n  ").concat(sel, "[open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n");
-}
-/**
- * Directional slide animation for the top-layer `Drawer`, passed to the
- * `Dialog` primitive's `animate` prop. Local to `@atlaskit/drawer` (not a
- * shared top-layer preset). The panel slides in from its pinned viewport edge
- * while the `::backdrop` fades.
- *
- * @example
- * ```tsx
- * <Dialog animate={drawerSlideIn({ from: 'left' })} isOpen={isOpen} onClose={onClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-function drawerSlideIn() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$from = _ref.from,
-    from = _ref$from === void 0 ? 'left' : _ref$from;
-  var name = "drawer-slide-".concat(from);
-  return {
-    name: name,
-    css: buildCss(name, HIDDEN_TRANSFORM[from]),
-    enterDurationMs: ENTER_MS,
-    exitDurationMs: EXIT_MS
-  };
-}

package/dist/es2019/drawer-panel/drawer-slide-in.js

@@ -1,107 +0,0 @@
-/**
- * Off-screen transform per entry edge. A drawer slides in from the edge it is
- * pinned to and exits back to the same edge (legacy `SlideIn` used
- * `exitTo={enterFrom}`), so enter and exit are symmetric.
- */
-const HIDDEN_TRANSFORM = {
-  left: 'translateX(-100%)',
-  right: 'translateX(100%)',
-  top: 'translateY(-100%)',
-  bottom: 'translateY(100%)'
-};
-
-// Match the legacy `CustomSlideIn`: `duration="small"` (100ms) on enter,
-// `small * 0.5` (50ms) on exit, `ease-out` timing. Drawer slides with no panel
-// fade (`fade="none"`); only the backdrop fades.
-const ENTER_MS = 100;
-const EXIT_MS = 50;
-const EASE = 'cubic-bezier(0.2,0,0,1)'; // @atlaskit/motion `easeOut`
-
-/**
- * Builds the slide CSS for a single entry edge, scoped to
- * `[data-ds-dialog-drawer-slide-{from}]` (the `Dialog` primitive stamps
- * `data-ds-dialog-{name}` on the `<dialog>` element).
- *
- * - base selector  → hidden/exit state + exit duration
- * - `[open]`        → visible state + enter duration
- * - `@starting-style` → initial (pre-paint) state so the entry transition runs
- *
- * The `::backdrop` fades its blanket colour in step with the panel. Stacked
- * drawers hide their backdrop via the `Dialog` `shouldHideBackdrop` prop (an
- * ID-scoped `<style>` whose specificity beats this rule).
- */
-function buildCss(name, hidden) {
-  const sel = `[data-ds-dialog-${name}]`;
-  return `
-${sel} {
-  transform: ${hidden};
-  transition:
-    transform ${EXIT_MS}ms ${EASE},
-    overlay ${EXIT_MS}ms allow-discrete,
-    display ${EXIT_MS}ms allow-discrete;
-}
-
-${sel}[open] {
-  transform: none;
-  transition-duration: ${ENTER_MS}ms;
-}
-
-@starting-style {
-  ${sel}[open] {
-    transform: ${hidden};
-  }
-}
-
-${sel}::backdrop {
-  background-color: transparent;
-  transition:
-    background-color ${EXIT_MS}ms ${EASE},
-    overlay ${EXIT_MS}ms allow-discrete,
-    display ${EXIT_MS}ms allow-discrete;
-}
-
-${sel}[open]::backdrop {
-  background-color: var(--ds-blanket, #050C1F75);
-  transition-duration: ${ENTER_MS}ms;
-}
-
-@starting-style {
-  ${sel}[open]::backdrop {
-    background-color: transparent;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ${sel},
-  ${sel}[open],
-  ${sel}::backdrop,
-  ${sel}[open]::backdrop {
-    transition-duration: 0s;
-  }
-}
-`;
-}
-/**
- * Directional slide animation for the top-layer `Drawer`, passed to the
- * `Dialog` primitive's `animate` prop. Local to `@atlaskit/drawer` (not a
- * shared top-layer preset). The panel slides in from its pinned viewport edge
- * while the `::backdrop` fades.
- *
- * @example
- * ```tsx
- * <Dialog animate={drawerSlideIn({ from: 'left' })} isOpen={isOpen} onClose={onClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export function drawerSlideIn({
-  from = 'left'
-} = {}) {
-  const name = `drawer-slide-${from}`;
-  return {
-    name,
-    css: buildCss(name, HIDDEN_TRANSFORM[from]),
-    enterDurationMs: ENTER_MS,
-    exitDurationMs: EXIT_MS
-  };
-}

package/dist/esm/drawer-panel/drawer-slide-in.js

@@ -1,61 +0,0 @@
-/**
- * Off-screen transform per entry edge. A drawer slides in from the edge it is
- * pinned to and exits back to the same edge (legacy `SlideIn` used
- * `exitTo={enterFrom}`), so enter and exit are symmetric.
- */
-var HIDDEN_TRANSFORM = {
-  left: 'translateX(-100%)',
-  right: 'translateX(100%)',
-  top: 'translateY(-100%)',
-  bottom: 'translateY(100%)'
-};
-
-// Match the legacy `CustomSlideIn`: `duration="small"` (100ms) on enter,
-// `small * 0.5` (50ms) on exit, `ease-out` timing. Drawer slides with no panel
-// fade (`fade="none"`); only the backdrop fades.
-var ENTER_MS = 100;
-var EXIT_MS = 50;
-var EASE = 'cubic-bezier(0.2,0,0,1)'; // @atlaskit/motion `easeOut`
-
-/**
- * Builds the slide CSS for a single entry edge, scoped to
- * `[data-ds-dialog-drawer-slide-{from}]` (the `Dialog` primitive stamps
- * `data-ds-dialog-{name}` on the `<dialog>` element).
- *
- * - base selector  → hidden/exit state + exit duration
- * - `[open]`        → visible state + enter duration
- * - `@starting-style` → initial (pre-paint) state so the entry transition runs
- *
- * The `::backdrop` fades its blanket colour in step with the panel. Stacked
- * drawers hide their backdrop via the `Dialog` `shouldHideBackdrop` prop (an
- * ID-scoped `<style>` whose specificity beats this rule).
- */
-function buildCss(name, hidden) {
-  var sel = "[data-ds-dialog-".concat(name, "]");
-  return "\n".concat(sel, " {\n  transform: ").concat(hidden, ";\n  transition:\n    transform ").concat(EXIT_MS, "ms ").concat(EASE, ",\n    overlay ").concat(EXIT_MS, "ms allow-discrete,\n    display ").concat(EXIT_MS, "ms allow-discrete;\n}\n\n").concat(sel, "[open] {\n  transform: none;\n  transition-duration: ").concat(ENTER_MS, "ms;\n}\n\n@starting-style {\n  ").concat(sel, "[open] {\n    transform: ").concat(hidden, ";\n  }\n}\n\n").concat(sel, "::backdrop {\n  background-color: transparent;\n  transition:\n    background-color ").concat(EXIT_MS, "ms ").concat(EASE, ",\n    overlay ").concat(EXIT_MS, "ms allow-discrete,\n    display ").concat(EXIT_MS, "ms allow-discrete;\n}\n\n").concat(sel, "[open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: ").concat(ENTER_MS, "ms;\n}\n\n@starting-style {\n  ").concat(sel, "[open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ").concat(sel, ",\n  ").concat(sel, "[open],\n  ").concat(sel, "::backdrop,\n  ").concat(sel, "[open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n");
-}
-/**
- * Directional slide animation for the top-layer `Drawer`, passed to the
- * `Dialog` primitive's `animate` prop. Local to `@atlaskit/drawer` (not a
- * shared top-layer preset). The panel slides in from its pinned viewport edge
- * while the `::backdrop` fades.
- *
- * @example
- * ```tsx
- * <Dialog animate={drawerSlideIn({ from: 'left' })} isOpen={isOpen} onClose={onClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export function drawerSlideIn() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$from = _ref.from,
-    from = _ref$from === void 0 ? 'left' : _ref$from;
-  var name = "drawer-slide-".concat(from);
-  return {
-    name: name,
-    css: buildCss(name, HIDDEN_TRANSFORM[from]),
-    enterDurationMs: ENTER_MS,
-    exitDurationMs: EXIT_MS
-  };
-}

package/dist/types/drawer-panel/drawer-slide-in.d.ts

@@ -1,23 +0,0 @@
-import { type Direction } from '@atlaskit/motion/types';
-import { type TAnimationPreset } from '@atlaskit/top-layer/animations';
-type TDrawerSlideInOptions = {
-    /**
-     * The edge the drawer slides in from. Defaults to `left`.
-     */
-    from?: Direction;
-};
-/**
- * Directional slide animation for the top-layer `Drawer`, passed to the
- * `Dialog` primitive's `animate` prop. Local to `@atlaskit/drawer` (not a
- * shared top-layer preset). The panel slides in from its pinned viewport edge
- * while the `::backdrop` fades.
- *
- * @example
- * ```tsx
- * <Dialog animate={drawerSlideIn({ from: 'left' })} isOpen={isOpen} onClose={onClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function drawerSlideIn({ from }?: TDrawerSlideInOptions): TAnimationPreset;
-export {};