@atlaskit/drawer 13.1.1 → 13.3.0

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

@@ -0,0 +1,262 @@
+/* drawer-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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, 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';
+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';
+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.
+var WIDTH_MAP = {
+  narrow: '360px',
+  medium: '480px',
+  wide: '600px',
+  extended: '95vw',
+  full: '100vw'
+};
+
+/**
+ * Resolve the native `<dialog>` accessible name props. Prefer the consumer's
+ * `label`, then their `titleId`. If neither is supplied (legacy allowed this),
+ * fall back to a generic name so the dialog is never unlabelled. Note:
+ * `@atlaskit/drawer` has no i18n setup, so this fallback is English only;
+ * consumers should pass a localised `label` or `titleId`.
+ */
+function getAccessibleName(_ref) {
+  var label = _ref.label,
+    titleId = _ref.titleId;
+  if (label) {
+    return {
+      label: label
+    };
+  }
+  if (titleId) {
+    return {
+      labelledBy: titleId
+    };
+  }
+  return {
+    label: 'Drawer'
+  };
+}
+
+/**
+ * **DrawerTopLayer**
+ *
+ * Top-layer (`platform-dst-top-layer`) implementation of `Drawer`. Renders a
+ * native `<dialog>` via `@atlaskit/top-layer`, replacing Portal, Blanket,
+ * react-focus-lock, react-scrolllock and `@atlaskit/layering` with native
+ * modality, `::backdrop`, focus trap and return, and `DialogScrollLock`.
+ *
+ * The `Dialog` primitive owns the entry and exit animation lifecycle (it keeps
+ * the host element mounted through the exit transition, then fires
+ * `onExitFinish`), so no `ExitingPersistence` wrapper is needed: the drawer
+ * renders `<Dialog isOpen={isOpen}>` directly. `useDrawerStack` tracks stack
+ * depth so only the foreground drawer shows a `::backdrop`.
+ *
+ * `isFocusLockEnabled` is intentionally unsupported: a native modal `<dialog>`
+ * always traps focus, so `isFocusLockEnabled={false}` is a no-op under this gate.
+ */
+export function DrawerTopLayer(_ref2) {
+  var _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
+    isOpen = _ref2.isOpen,
+    _ref2$shouldReturnFoc = _ref2.shouldReturnFocus,
+    shouldReturnFocus = _ref2$shouldReturnFoc === void 0 ? true : _ref2$shouldReturnFoc,
+    onKeyDown = _ref2.onKeyDown,
+    testId = _ref2.testId,
+    children = _ref2.children,
+    onClose = _ref2.onClose,
+    onCloseComplete = _ref2.onCloseComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    label = _ref2.label,
+    titleId = _ref2.titleId,
+    _ref2$enterFrom = _ref2.enterFrom,
+    enterFrom = _ref2$enterFrom === void 0 ? 'left' : _ref2$enterFrom;
+  var stackIndex = useDrawerStack({
+    isOpen: isOpen
+  });
+
+  /**
+   * Points to the panel surface. Passed to `onOpenComplete` / `onCloseComplete`.
+   */
+  var contentRef = useRef(null);
+  // Cache the last content element so `onCloseComplete` still receives a node
+  // after children unmount (with reduced motion `contentRef` can clear before
+  // `onExitFinish` fires).
+  var lastContentElRef = useRef(null);
+  // Callback ref runs at commit (not during render), so both refs stay
+  // populated without a render-time side effect. `lastContentElRef` only
+  // overwrites with a non-null node, preserving it across the unmount.
+  var setContentEl = useCallback(function (el) {
+    contentRef.current = el;
+    if (el) {
+      lastContentElRef.current = el;
+    }
+  }, []);
+
+  // Analytics-wrapped close handlers, one per legacy trigger.
+  var handleEscapeClose = usePlatformLeafEventHandler({
+    fn: function fn(evt, analyticsEvent) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "13.2.0",
+    analyticsData: {
+      trigger: 'escKey'
+    }
+  });
+  var handleBlanketClose = usePlatformLeafEventHandler({
+    fn: function fn(evt, analyticsEvent) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "13.2.0",
+    analyticsData: {
+      trigger: 'blanket'
+    }
+  });
+  var handleBackButtonClose = usePlatformLeafEventHandler({
+    fn: function fn(evt, analyticsEvent) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "13.2.0",
+    analyticsData: {
+      trigger: 'backButton'
+    }
+  });
+
+  // Bridge the Dialog primitive's `onClose({ reason })` to the legacy
+  // `onClose(event, analyticsEvent)` contract via a synthetic event. Drawer
+  // has no `shouldCloseOn*` props, so both reasons always forward.
+  var handleDialogClose = useCallback(function (_ref3) {
+    var reason = _ref3.reason;
+    var event = createCloseEvent({
+      reason: reason
+    });
+    if (reason === 'escape') {
+      handleEscapeClose(event);
+    } else {
+      handleBlanketClose(event);
+    }
+  }, [handleEscapeClose, handleBlanketClose]);
+
+  // Mirror the legacy window `keydown` listener so `onKeyDown` still fires
+  // while the drawer is open.
+  var handleKeyDown = useCallback(function (evt) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(evt);
+  }, [onKeyDown]);
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    return bind(window, {
+      type: 'keydown',
+      listener: handleKeyDown
+    });
+  }, [isOpen, handleKeyDown]);
+
+  // `onOpenComplete` once the entry animation settles (via `Dialog`'s
+  // `onEnterFinish`, which the underlying hook fires for animated,
+  // non-animated and reduced-motion paths).
+  var handleEnterFinish = useCallback(function () {
+    onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete(contentRef.current);
+  }, [onOpenComplete]);
+
+  // `onCloseComplete` once the exit animation settles (via `Dialog`'s
+  // `onExitFinish`). This is also where a custom `shouldReturnFocus={ref}` is
+  // honoured: native `<dialog>` restores focus to the trigger at the start of
+  // close, so the consumer's ref is focused now that the exit is done.
+  // `shouldReturnFocus={false}` is a documented best-effort limitation; native
+  // always restores focus to the trigger.
+  var handleExitFinish = useCallback(function () {
+    var _contentRef$current;
+    onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete((_contentRef$current = contentRef.current) !== null && _contentRef$current !== void 0 ? _contentRef$current : lastContentElRef.current);
+    lastContentElRef.current = null;
+    if (_typeof(shouldReturnFocus) === 'object' && shouldReturnFocus !== null && shouldReturnFocus !== void 0 && shouldReturnFocus.current) {
+      shouldReturnFocus.current.focus();
+    }
+  }, [onCloseComplete, shouldReturnFocus]);
+
+  // Pin the `<dialog>` full-height to the inline-start edge (overriding the
+  // primitive's centred `margin: auto`); width from the preset, clamped to the
+  // viewport. `enterFrom` only drives the slide animation, not the pin edge;
+  // it matches the legacy panel, which always pins `inset-inline-start`.
+  var dialogStyle = {
+    margin: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 'auto',
+    height: '100dvh',
+    maxHeight: '100dvh',
+    width: "min(".concat(WIDTH_MAP[width], ", 100vw)")
+  };
+  var accessibleName = getAccessibleName({
+    label: label,
+    titleId: titleId
+  });
+  return /*#__PURE__*/React.createElement(Dialog, _extends({
+    isOpen: isOpen,
+    onClose: handleDialogClose,
+    onEnterFinish: handleEnterFinish,
+    onExitFinish: handleExitFinish,
+    animate: animate,
+    xcss: cx(styles.root, drawerAnimationStyles[enterFrom]),
+    shouldHideBackdrop: stackIndex > 0,
+    testId: testId
+  }, accessibleName, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: dialogStyle
+  }), /*#__PURE__*/React.createElement(DialogScrollLock, {
+    isOpen: true
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: setContentEl,
+    className: ax([styles.surface])
+  }, /*#__PURE__*/React.createElement(EnsureIsInsideDrawerContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: handleBackButtonClose
+  }, children))));
+}

package/dist/esm/drawer-panel/hooks/use-prevent-programmatic-scroll.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * Returns how far the body is scrolled from the top of the viewport.
@@ -41,6 +42,11 @@ export default function usePreventProgrammaticScroll() {
     }
   }, [scrollTopOffset]);
   useEffect(function () {
+    // The top-layer drawer relies on native modality + `DialogScrollLock`; the
+    // programmatic-scroll guard is intentionally dropped under the flag.
+    if (fg('platform-dst-top-layer')) {
+      return;
+    }
     return bind(window, {
       type: 'scroll',
       listener: onWindowScroll

package/dist/esm/drawer.js

@@ -4,9 +4,11 @@ import React, { useCallback, useEffect } from 'react';
 import { canUseDOM } from 'exenv';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { Layering, useCloseOnEscapePress } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from './blanket';
 import { DrawerPanel } from './drawer-panel/drawer-panel';
+import { DrawerTopLayer } from './drawer-panel/drawer-top-layer';
 // escape close manager for layering
 var EscapeCloseManager = function EscapeCloseManager(_ref) {
   var onClose = _ref.onClose;
@@ -19,17 +21,7 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
   });
   return /*#__PURE__*/React.createElement("span", null);
 };
-
-/**
- * __Drawer__
- *
- * A drawer is a panel that slides in from the left side of the screen.
- *
- * - [Examples](https://atlassian.design/components/drawer/examples)
- * - [Code](https://atlassian.design/components/drawer/code)
- * - [Usage](https://atlassian.design/components/drawer/usage)
- */
-export var Drawer = function Drawer(_ref2) {
+var DrawerBase = function DrawerBase(_ref2) {
   var _ref2$width = _ref2.width,
     width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
     isOpen = _ref2.isOpen,
@@ -57,7 +49,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.0",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -80,7 +72,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.0",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -92,7 +84,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.1.0",
+    packageVersion: "13.2.0",
     analyticsData: {
       trigger: 'backButton'
     }
@@ -125,4 +117,23 @@ export var Drawer = function Drawer(_ref2) {
   }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
     onClose: handleClose
   })) : children));
+};
+
+/**
+ * __Drawer__
+ *
+ * A drawer is a panel that slides in from the left side of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/drawer/examples)
+ * - [Code](https://atlassian.design/components/drawer/code)
+ * - [Usage](https://atlassian.design/components/drawer/usage)
+ */
+export var Drawer = function Drawer(props) {
+  if (fg('platform-dst-top-layer')) {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- internal implementation component takes the same DrawerProps
+    return /*#__PURE__*/React.createElement(DrawerTopLayer, props);
+  }
+
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- internal implementation component takes the same DrawerProps
+  return /*#__PURE__*/React.createElement(DrawerBase, props);
 };

package/dist/esm/use-drawer-stack.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect } from 'react';
+import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import useStateRef from '@atlaskit/ds-lib/use-state-ref';
+
+/**
+ * **Major versions will not know about each other**
+ *
+ * An array holding references to all currently open drawers. This only works
+ * for drawers of the same major version, because the reference differs between
+ * majors (for example V13 will not know about any from V14).
+ *
+ * Adapted from `useModalStack` in `@atlaskit/modal-dialog`. The top-layer drawer
+ * path uses this to know its position in the stack so that only the foreground
+ * drawer renders a visible `::backdrop` (this avoids cumulative darkening for
+ * nested or stacked drawers). Unlike the modal version, the register is timed
+ * off `isOpen` rather than `@atlaskit/motion`'s `useExitingPersistence`: the
+ * `Dialog` primitive owns its own exit lifecycle, so the top-layer drawer needs
+ * no `ExitingPersistence` wrapper.
+ */
+var drawerStackRegister = [];
+/**
+ * Returns the position of the calling drawer in the drawer stack. A stack index
+ * of `0` is the foreground (top of the stack); higher numbers are further back.
+ */
+export default function useDrawerStack(_ref) {
+  var isOpen = _ref.isOpen,
+    onStackChange = _ref.onStackChange;
+  var _useStateRef = useStateRef(0),
+    _useStateRef2 = _slicedToArray(_useStateRef, 2),
+    stackIndexRef = _useStateRef2[0],
+    setStackIndex = _useStateRef2[1];
+  var currentStackIndex = stackIndexRef.current;
+  var previousStackIndex = usePreviousValue(stackIndexRef.current);
+
+  // Kept stable for the lifetime of the component so it can be the identity in
+  // the shared register. This is why it is a lazy callback and not a
+  // useMemo/useCallback value.
+  var updateStack = useLazyCallback(function () {
+    var newStackIndex = drawerStackRegister.indexOf(updateStack);
+    // Read from the ref rather than state: this closure only ever sees the
+    // initial state value.
+    if (stackIndexRef.current !== newStackIndex) {
+      setStackIndex(newStackIndex);
+      stackIndexRef.current = newStackIndex;
+    }
+  });
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    // Opening: join the front of the register (the newest open drawer is the
+    // foreground at index 0), then notify every open drawer to recompute.
+    if (drawerStackRegister.indexOf(updateStack) === -1) {
+      drawerStackRegister.unshift(updateStack);
+    }
+    drawerStackRegister.forEach(function (callback) {
+      return callback();
+    });
+    return function () {
+      // Closing or unmounting: leave the register and notify the rest.
+      var index = drawerStackRegister.indexOf(updateStack);
+      if (index !== -1) {
+        drawerStackRegister.splice(index, 1);
+      }
+      drawerStackRegister.forEach(function (callback) {
+        return callback();
+      });
+    };
+  }, [isOpen, updateStack]);
+  useEffect(function () {
+    if (previousStackIndex === undefined) {
+      // Initial render: nothing to notify about.
+      return;
+    }
+    if (previousStackIndex !== currentStackIndex) {
+      onStackChange === null || onStackChange === void 0 || onStackChange(currentStackIndex);
+    }
+  }, [onStackChange, previousStackIndex, currentStackIndex]);
+  return currentStackIndex;
+}

package/dist/types/drawer-panel/drawer-top-layer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type DrawerProps } from '../types';
+/**
+ * **DrawerTopLayer**
+ *
+ * Top-layer (`platform-dst-top-layer`) implementation of `Drawer`. Renders a
+ * native `<dialog>` via `@atlaskit/top-layer`, replacing Portal, Blanket,
+ * react-focus-lock, react-scrolllock and `@atlaskit/layering` with native
+ * modality, `::backdrop`, focus trap and return, and `DialogScrollLock`.
+ *
+ * The `Dialog` primitive owns the entry and exit animation lifecycle (it keeps
+ * the host element mounted through the exit transition, then fires
+ * `onExitFinish`), so no `ExitingPersistence` wrapper is needed: the drawer
+ * renders `<Dialog isOpen={isOpen}>` directly. `useDrawerStack` tracks stack
+ * depth so only the foreground drawer shows a `::backdrop`.
+ *
+ * `isFocusLockEnabled` is intentionally unsupported: a native modal `<dialog>`
+ * always traps focus, so `isFocusLockEnabled={false}` is a no-op under this gate.
+ */
+export declare function DrawerTopLayer({ width, isOpen, shouldReturnFocus, onKeyDown, testId, children, onClose, onCloseComplete, onOpenComplete, label, titleId, enterFrom, }: DrawerProps): ReactNode;

package/dist/types/drawer.d.ts

@@ -9,4 +9,4 @@ import type { DrawerProps } from './types';
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, testId, children, onClose, onCloseComplete, onOpenComplete, zIndex, label, titleId, enterFrom, }: DrawerProps) => React.JSX.Element | null;
+export declare const Drawer: (props: DrawerProps) => React.JSX.Element | null;

package/dist/types/use-drawer-stack.d.ts

@@ -0,0 +1,17 @@
+type TDrawerStackOpts = {
+    /**
+     * Whether the calling drawer is open. The drawer joins the stack while open
+     * and leaves it on close or unmount.
+     */
+    isOpen: boolean;
+    /**
+     * Fired when the calling drawer's position in the stack changes.
+     */
+    onStackChange?: (newStackIndex: number) => void;
+};
+/**
+ * Returns the position of the calling drawer in the drawer stack. A stack index
+ * of `0` is the foreground (top of the stack); higher numbers are further back.
+ */
+export default function useDrawerStack({ isOpen, onStackChange }: TDrawerStackOpts): number;
+export {};

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.1.1",
+	"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/"
@@ -16,6 +16,11 @@
 		"**/*.compiled.css"
 	],
 	"atlaskit:src": "src/index.tsx",
+	"platform-feature-flags": {
+		"platform-dst-top-layer": {
+			"type": "boolean"
+		}
+	},
 	"homepage": "https://atlassian.design/components/drawer",
 	"atlassian": {
 		"react-compiler": {
@@ -36,17 +41,20 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.1.0",
+		"@atlaskit/analytics-next": "^12.2.0",
 		"@atlaskit/blanket": "^16.1.0",
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/icon": "^36.1.0",
+		"@atlaskit/ds-lib": "^8.0.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.2.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",
@@ -66,14 +74,14 @@
 		"@atlaskit/code": "^18.2.0",
 		"@atlaskit/docs": "^12.0.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
-		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/inline-message": "^16.1.0",
 		"@atlaskit/link": "^4.1.0",
 		"@atlaskit/menu": "^9.1.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
-		"@atlaskit/primitives": "^20.2.0",
+		"@atlaskit/primitives": "^20.5.0",
 		"@atlaskit/section-message": "^9.2.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",