@atlaskit/drawer 9.2.6 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/drawer
 
+## 9.3.0
+
+### Minor Changes
+
+- [#100414](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100414)
+  [`ead90a795d15b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ead90a795d15b) -
+  Adds the `@atlaskit/drawer/compiled` entry point. This entry point is a fork of the Drawer
+  component which uses `@compiled/react` instead of `@emotion/react`. It also features a new
+  compositional API. The `overrides` prop is not included in this API, instead safe style overrides
+  are now supported via the `xcss` prop.
+
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/drawer`, you will need to ensure that your bundler is configured to
+  handle `.css` imports correctly. Most bundlers come with built-in support for `.css` imports, so
+  you may not need to do anything. If you are using a different bundler, please refer to the
+  documentation for that bundler to understand how to handle `.css` imports.
+
+  Example of new compositional API:
+
+  ```ts
+  import {
+  	Drawer,
+  	DrawerCloseButton,
+  	DrawerContent,
+  	DrawerSidebar,
+  } from '@atlaskit/drawer/compiled';
+  ```
+
+  ```jsx
+  <Drawer>
+  	<DrawerSidebar xcss={styles.sidebar}>
+  		<DrawerCloseButton />
+  	</DrawerSidebar>
+  	<DrawerContent xcss={styles.content}>Drawer content</DrawerContent>
+  </Drawer>
+  ```
+
+## 9.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.2.6
 
 ### Patch Changes

package/compiled/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/drawer/compiled",
+  "main": "../dist/cjs/entry-points/compiled.js",
+  "module": "../dist/esm/entry-points/compiled.js",
+  "module:es2019": "../dist/es2019/entry-points/compiled.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/compiled.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/compiled.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/compiled/blanket.compiled.css

@@ -0,0 +1 @@
+._kqswh2mm{position:relative}

package/dist/cjs/compiled/blanket.js

@@ -0,0 +1,54 @@
+/* blanket.tsx generated by @compiled/babel-plugin v0.35.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./blanket.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
+var _motion = require("@atlaskit/motion");
+var _constants = require("../constants");
+var styles = {
+  blanket: "_kqswh2mm"
+};
+
+/**
+ * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
+ */
+var Blanket = function Blanket(_ref) {
+  var isOpen = _ref.isOpen,
+    onBlanketClicked = _ref.onBlanketClicked,
+    testId = _ref.testId;
+  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
+    /**
+     * We don't expose this on `FadeIn` but it does get passed down.
+     * TODO: figure out how we want to handle this...
+     */
+    // @ts-ignore
+    ,
+    animationTimingFunction: _constants.animationTimingFunction
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([styles.blanket, className])
+    }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+      isTinted: true,
+      onBlanketClicked: onBlanketClicked,
+      testId: testId && testId
+    }));
+  }));
+};
+var _default = exports.default = Blanket;

package/dist/cjs/compiled/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transitionDurationMs = exports.transitionDuration = 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-close-button.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerCloseButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _new = require("@atlaskit/button/new");
+var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left"));
+var _arrowLeft2 = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _context = require("../../context");
+/**
+ * __Drawer close button
+ *
+ * A button that closes the drawer.
+ */
+var DrawerCloseButton = exports.DrawerCloseButton = function DrawerCloseButton(_ref) {
+  var Icon = _ref.icon,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Close drawer' : _ref$label,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'DrawerCloseButton' : _ref$testId;
+  (0, _context.useEnsureIsInsideDrawer)();
+  var onClose = (0, _context.useOnClose)();
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    onClick: onClose,
+    testId: testId,
+    icon: Icon ? function (iconProps) {
+      return /*#__PURE__*/_react.default.createElement(Icon, (0, _extends2.default)({}, iconProps, {
+        size: "large"
+      }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? {
+        LEGACY_size: 'large'
+      } : {}));
+    } : (0, _platformFeatureFlags.fg)('platform-visual-refresh-icon-ads-migration') ? _arrowLeft.default :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    _arrowLeft2.default,
+    label: label,
+    shape: "circle",
+    appearance: "subtle"
+  });
+};

package/dist/cjs/compiled/drawer-panel/drawer-content.compiled.css

@@ -0,0 +1,6 @@
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._1o9zkb7n{flex-shrink:1}
+._1reo1wug{overflow-x:auto}
+._i0dlf1ug{flex-basis:0%}

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

@@ -0,0 +1,72 @@
+/* drawer-content.tsx generated by @compiled/babel-plugin v0.35.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerContent = void 0;
+require("./drawer-content.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
+var _useCallbackRef = require("use-callback-ref");
+var _context = require("../../context");
+var _usePreventProgrammaticScroll = _interopRequireDefault(require("../../hooks/use-prevent-programmatic-scroll"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug _19pk1ejb"
+};
+var DrawerContentBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollableRef) {
+  var children = _ref.children,
+    _ref$scrollContentLab = _ref.scrollContentLabel,
+    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
+    xcss = _ref.xcss;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showContentFocus = _useState2[0],
+    setContentFocus = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var setLazyContentFocus = function setLazyContentFocus() {
+      var target = ref.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)([styles.default, xcss]),
+    ref: (0, _useCallbackRef.mergeRefs)([ref, scrollableRef])
+    // tabindex is allowed here so that keyboard users can scroll content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    "aria-label": showContentFocus ? scrollContentLabel : undefined,
+    "data-testid": "drawer-contents"
+  }, children);
+});
+
+/**
+ * __Drawer content__
+ *
+ * The main content section of the drawer panel.
+ */
+var DrawerContent = exports.DrawerContent = function DrawerContent(_ref2) {
+  var children = _ref2.children,
+    scrollContentLabel = _ref2.scrollContentLabel,
+    xcss = _ref2.xcss;
+  (0, _context.useEnsureIsInsideDrawer)();
+  (0, _usePreventProgrammaticScroll.default)();
+  return /*#__PURE__*/React.createElement(_reactScrolllock.default, null, /*#__PURE__*/React.createElement(DrawerContentBase, {
+    scrollContentLabel: scrollContentLabel
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
+  }, children));
+};

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

@@ -0,0 +1,15 @@
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18m915vq{overflow-y:hidden}
+._1bsb1gwv{width:360px}
+._1bsb1mwr{width:95vw}
+._1bsb1ogm{width:600px}
+._1bsb1y37{width:5in}
+._1bsbauwl{width:100vw}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1pbybfng{z-index:500}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1reo15vq{overflow-x:hidden}
+._4t3i1kxc{height:100vh}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1n9t{position:fixed}

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

@@ -0,0 +1,112 @@
+/* drawer-panel.tsx generated by @compiled/babel-plugin v0.35.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerPanel = void 0;
+require("./drawer-panel.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _motion = require("@atlaskit/motion");
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("../../constants");
+var _context = require("../../context");
+var _focusLock = _interopRequireDefault(require("./focus-lock"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  root: "_1reo15vq _18m915vq _1e0c1txw _4t3i1kxc _kqsw1n9t _1pbybfng _bfhk1bhr _1q1l1bhr _152tze3t _1e02ze3t",
+  full: "_1bsbauwl",
+  extended: "_1bsb1mwr",
+  narrow: "_1bsb1gwv",
+  medium: "_1bsb1y37",
+  wide: "_1bsb1ogm"
+};
+
+/**
+ * This wrapper is used to specify separate durations for enter and exit.
+ */
+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,
+    enterFrom: enterFrom,
+    exitTo: enterFrom,
+    fade: "none",
+    onFinish: onFinish
+  }, children);
+};
+
+/**
+ * __Drawer panel__
+ */
+var DrawerPanel = exports.DrawerPanel = function DrawerPanel(_ref2) {
+  var children = _ref2.children,
+    onClose = _ref2.onClose,
+    onCloseComplete = _ref2.onCloseComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    testId = _ref2.testId,
+    isOpen = _ref2.isOpen,
+    shouldReturnFocus = _ref2.shouldReturnFocus,
+    autoFocusFirstElem = _ref2.autoFocusFirstElem,
+    isFocusLockEnabled = _ref2.isFocusLockEnabled,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
+    label = _ref2.label,
+    titleId = _ref2.titleId,
+    _ref2$enterFrom = _ref2.enterFrom,
+    enterFrom = _ref2$enterFrom === void 0 ? 'left' : _ref2$enterFrom;
+  /**
+   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
+   */
+  var drawerRef = (0, _react.useRef)(null);
+  var onFinish = (0, _react.useCallback)(function (state) {
+    if (state === 'entering') {
+      onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete(drawerRef.current);
+    } else if (state === 'exiting') {
+      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete(drawerRef.current);
+    }
+  }, [onCloseComplete, onOpenComplete]);
+  return /*#__PURE__*/React.createElement(_motion.ExitingPersistence, {
+    appear: true
+  }, isOpen && /*#__PURE__*/React.createElement(CustomSlideIn, {
+    onFinish: onFinish,
+    enterFrom: enterFrom
+  }, function (_ref3) {
+    var className = _ref3.className;
+    return /*#__PURE__*/React.createElement(_focusLock.default, {
+      autoFocusFirstElem: autoFocusFirstElem,
+      isFocusLockEnabled: isFocusLockEnabled,
+      shouldReturnFocus: shouldReturnFocus
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)([styles.root, styles[width], className]),
+      "data-testid": testId,
+      ref: drawerRef,
+      "aria-modal": true,
+      role: "dialog",
+      "aria-label": label,
+      "aria-labelledby": titleId
+    }, /*#__PURE__*/React.createElement(_context.EnsureIsInsideDrawerContext.Provider, {
+      value: true
+    }, /*#__PURE__*/React.createElement(_context.OnCloseContext.Provider, {
+      value: onClose
+    }, children))));
+  }));
+};

package/dist/cjs/compiled/drawer-panel/drawer-sidebar.compiled.css

@@ -0,0 +1,10 @@
+._1bsbxncg{width:var(--ds-space-800,4pc)}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,33 @@
+/* drawer-sidebar.tsx generated by @compiled/babel-plugin v0.35.0 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerSidebar = void 0;
+require("./drawer-sidebar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _context = require("../../context");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  default: "_4cvr1h6o _vchhusvi _syaz1gjq _1e0c1txw _1o9zidpf _2lx21bp4 _4t3i1kxc _n3tdpxbi _ca0q1ejb _1bsbxncg"
+};
+
+/**
+ * __Drawer sidebar__
+ *
+ * The sidebar of the drawer panel.
+ */
+var DrawerSidebar = exports.DrawerSidebar = function DrawerSidebar(_ref) {
+  var children = _ref.children,
+    xcss = _ref.xcss;
+  (0, _context.useEnsureIsInsideDrawer)();
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)([styles.default, xcss]),
+    "data-testid": "drawer-sidebar"
+  }, children);
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper around react-focus-lock.
+ */
+var FocusLock = function FocusLock(_ref) {
+  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+    isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    _ref$autoFocusFirstEl = _ref.autoFocusFirstElem,
+    autoFocusFirstElem = _ref$autoFocusFirstEl === void 0 ? true : _ref$autoFocusFirstEl,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+    children = _ref.children;
+  var getFocusTarget = function getFocusTarget() {
+    if (typeof shouldReturnFocus === 'boolean') {
+      return shouldReturnFocus;
+    }
+    return false;
+  };
+  var onDeactivation = function onDeactivation() {
+    if (typeof shouldReturnFocus !== 'boolean') {
+      window.setTimeout(function () {
+        var _shouldReturnFocus$cu;
+        shouldReturnFocus === null || shouldReturnFocus === void 0 || (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 || _shouldReturnFocus$cu.focus();
+      }, 0);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, children);
+};
+var _default = exports.default = FocusLock;

package/dist/cjs/compiled/drawer.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _exenv = require("exenv");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _layering = require("@atlaskit/layering");
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _blanket = _interopRequireDefault(require("./blanket"));
+var _drawerPanel = require("./drawer-panel/drawer-panel");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
+// escape close manager for layering
+var EscapeCloseManager = function EscapeCloseManager(_ref) {
+  var onClose = _ref.onClose;
+  // wrap so that we can cast the event to a React.KeyboardEvent
+  var handleClose = (0, _react.useCallback)(function (evt) {
+    onClose && onClose(evt);
+  }, [onClose]);
+  (0, _layering.useCloseOnEscapePress)({
+    onClose: handleClose
+  });
+  return /*#__PURE__*/_react.default.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)
+ */
+var Drawer = exports.Drawer = function Drawer(_ref2) {
+  var _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
+    isOpen = _ref2.isOpen,
+    _ref2$isFocusLockEnab = _ref2.isFocusLockEnabled,
+    isFocusLockEnabled = _ref2$isFocusLockEnab === void 0 ? true : _ref2$isFocusLockEnab,
+    _ref2$shouldReturnFoc = _ref2.shouldReturnFocus,
+    shouldReturnFocus = _ref2$shouldReturnFoc === void 0 ? true : _ref2$shouldReturnFoc,
+    _ref2$autoFocusFirstE = _ref2.autoFocusFirstElem,
+    autoFocusFirstElem = _ref2$autoFocusFirstE === void 0 ? true : _ref2$autoFocusFirstE,
+    onKeyDown = _ref2.onKeyDown,
+    testId = _ref2.testId,
+    children = _ref2.children,
+    onClose = _ref2.onClose,
+    onCloseComplete = _ref2.onCloseComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    _ref2$zIndex = _ref2.zIndex,
+    zIndex = _ref2$zIndex === void 0 ? 'unset' : _ref2$zIndex,
+    label = _ref2.label,
+    titleId = _ref2.titleId,
+    enterFrom = _ref2.enterFrom;
+  var handleClose = (0, _analyticsNext.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: "9.3.0",
+    analyticsData: {
+      trigger: 'escKey'
+    }
+  });
+  var handleKeyDown = (0, _react.useCallback)(function (evt) {
+    onKeyDown && onKeyDown(evt);
+  }, [onKeyDown]);
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, isOpen]);
+  var handleBlanketClick = (0, _analyticsNext.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: "9.3.0",
+    analyticsData: {
+      trigger: 'blanket'
+    }
+  });
+  var handleBackButtonClick = (0, _analyticsNext.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: "9.3.0",
+    analyticsData: {
+      trigger: 'backButton'
+    }
+  });
+  var body = _exenv.canUseDOM ? document.querySelector('body') : undefined;
+  if (!body) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: zIndex
+  }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+    isOpen: isOpen,
+    onBlanketClicked: handleBlanketClick,
+    testId: testId && "".concat(testId, "--blanket")
+  }), /*#__PURE__*/_react.default.createElement(_drawerPanel.DrawerPanel, {
+    testId: testId,
+    isOpen: isOpen,
+    onClose: handleBackButtonClick,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete,
+    width: width,
+    enterFrom: enterFrom,
+    label: label,
+    titleId: titleId,
+    autoFocusFirstElem: autoFocusFirstElem,
+    isFocusLockEnabled: isFocusLockEnabled,
+    shouldReturnFocus: shouldReturnFocus
+  }, isOpen ? /*#__PURE__*/_react.default.createElement(_layering.Layering, {
+    isDisabled: false
+  }, children, /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
+    onClose: handleClose
+  })) : children));
+};

package/dist/cjs/compiled/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/components/index.js

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