@atlaskit/drawer 13.1.0 → 13.2.0

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

@@ -0,0 +1,61 @@
+/**
+ * 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/esm/drawer-panel/drawer-top-layer.compiled.css

@@ -0,0 +1,8 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._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)}

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

@@ -0,0 +1,247 @@
+/* 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, useMemo, useRef } from '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';
+import { drawerSlideIn } from './drawer-slide-in';
+var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+var styles = {
+  surface: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _bfhk1bhr _1q1l1bhr _ect4ttxp"
+};
+
+// 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.1.1",
+    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.1.1",
+    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.1.1",
+    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)")
+  };
+
+  // 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
+  });
+  return /*#__PURE__*/React.createElement(Dialog, _extends({
+    isOpen: isOpen,
+    onClose: handleDialogClose,
+    onEnterFinish: handleEnterFinish,
+    onExitFinish: handleExitFinish,
+    animate: animate,
+    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.0.1",
+    packageVersion: "13.1.1",
     analyticsData: {
       trigger: 'escKey'
     }
@@ -80,7 +72,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.0.1",
+    packageVersion: "13.1.1",
     analyticsData: {
       trigger: 'blanket'
     }
@@ -92,7 +84,7 @@ export var Drawer = function Drawer(_ref2) {
     action: 'dismissed',
     componentName: 'drawer',
     packageName: "@atlaskit/drawer",
-    packageVersion: "13.0.1",
+    packageVersion: "13.1.1",
     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-slide-in.d.ts

@@ -0,0 +1,23 @@
+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 {};

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "13.1.0",
+	"version": "13.2.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.2.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^36.1.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/motion": "^7.2.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.1.0",
+		"@atlaskit/tokens": "^15.4.0",
+		"@atlaskit/top-layer": "^1.3.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.1.0",
+		"@atlaskit/primitives": "^20.3.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",