@atlaskit/drawer 7.14.2 → 7.14.3

package/dist/es2019/components/index.js

@@ -1,16 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-import React, { Component } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { canUseDOM } from 'exenv';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
-import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.14.2";
+const packageVersion = "7.14.3";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -40,127 +38,108 @@ const EscapeCloseManager = ({
   // only create a dummy component for using ths hook in class component
   return /*#__PURE__*/React.createElement("span", null);
 };
-export class DrawerBase extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      renderPortal: false
-    });
-    _defineProperty(this, "body", canUseDOM ? document.querySelector('body') : undefined);
-    _defineProperty(this, "handleBlanketClick", event => {
-      this.handleClose(event, 'blanket');
-    });
-    _defineProperty(this, "handleBackButtonClick", event => {
-      this.handleClose(event, 'backButton');
-    });
-    _defineProperty(this, "handleClose", (event, trigger) => {
-      const {
-        createAnalyticsEvent,
-        onClose
-      } = this.props;
-      const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
-      if (onClose) {
-        onClose(event, analyticsEvent);
-      }
-    });
-    _defineProperty(this, "handleKeyDown", event => {
-      const {
-        isOpen,
-        onKeyDown
-      } = this.props;
+
+/**
+ * __Drawer base__
+ *
+ * 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 const DrawerBase = ({
+  width = 'narrow',
+  isOpen,
+  isFocusLockEnabled = true,
+  shouldReturnFocus = true,
+  autoFocusFirstElem = true,
+  onKeyDown,
+  createAnalyticsEvent,
+  onClose,
+  testId,
+  children,
+  icon,
+  closeLabel,
+  scrollContentLabel,
+  shouldUnmountOnExit,
+  onCloseComplete,
+  onOpenComplete,
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  overrides,
+  zIndex = 'unset',
+  label,
+  titleId,
+  enterFrom
+}) => {
+  const body = canUseDOM ? document.querySelector('body') : undefined;
+  const handleClose = useCallback((event, trigger) => {
+    const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
+    if (onClose) {
+      onClose(event, analyticsEvent);
+    }
+  }, [createAnalyticsEvent, onClose]);
+  useEffect(() => {
+    const handleKeyDown = event => {
       if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
         // when feature flag on, we will use the EscapeCloseManager instead
         if (event.key === 'Escape' && isOpen) {
-          this.handleClose(event, 'escKey');
+          handleClose(event, 'escKey');
         }
       }
       if (onKeyDown) {
         onKeyDown(event);
       }
-    });
-  }
-  componentDidMount() {
-    const {
-      isOpen
-    } = this.props;
+    };
     if (isOpen) {
-      window.addEventListener('keydown', this.handleKeyDown);
-    }
-  }
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.handleKeyDown);
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      isOpen
-    } = this.props;
-    if (isOpen !== prevProps.isOpen) {
-      if (isOpen) {
-        window.addEventListener('keydown', this.handleKeyDown);
-      } else {
-        window.removeEventListener('keydown', this.handleKeyDown);
-      }
+      window.addEventListener('keydown', handleKeyDown);
     }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClose, isOpen, onKeyDown]);
+  const handleBlanketClick = event => {
+    handleClose(event, 'blanket');
+  };
+  const handleBackButtonClick = event => {
+    handleClose(event, 'backButton');
+  };
+  if (!body) {
+    return null;
   }
-  render() {
-    if (!this.body) {
-      return null;
-    }
-    const {
-      testId,
-      isOpen,
-      children,
-      icon,
-      closeLabel,
-      scrollContentLabel,
-      width,
-      shouldUnmountOnExit,
-      onCloseComplete,
-      onOpenComplete,
-      autoFocusFirstElem,
-      isFocusLockEnabled,
-      shouldReturnFocus,
-      overrides,
-      zIndex = 'unset',
-      label,
-      titleId,
-      enterFrom
-    } = this.props;
-    const shouldHaveLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
-    return /*#__PURE__*/React.createElement(Portal, {
-      zIndex: zIndex
-    }, /*#__PURE__*/React.createElement(Blanket, {
-      isOpen: isOpen,
-      onBlanketClicked: this.handleBlanketClick,
-      testId: testId && `${testId}--blanket`
-    }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
-      testId: testId,
-      icon: icon,
-      closeLabel: closeLabel,
-      in: isOpen,
-      onClose: this.handleBackButtonClick,
-      onCloseComplete: onCloseComplete,
-      onOpenComplete: onOpenComplete,
-      width: width,
-      enterFrom: enterFrom,
-      label: label,
-      titleId: titleId,
-      shouldUnmountOnExit: shouldUnmountOnExit
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-      ,
-      overrides: overrides,
-      autoFocusFirstElem: autoFocusFirstElem,
-      isFocusLockEnabled: isFocusLockEnabled,
-      shouldReturnFocus: shouldReturnFocus,
-      scrollContentLabel: scrollContentLabel
-    }, shouldHaveLayeringEnabled ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
-      isDisabled: false
-    }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
-      createAnalyticsEvent: this.props.createAnalyticsEvent,
-      handleClose: this.handleClose
-    })) : children));
-  }
-}
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, /*#__PURE__*/React.createElement(Blanket, {
+    isOpen: isOpen,
+    onBlanketClicked: handleBlanketClick,
+    testId: testId && `${testId}--blanket`
+  }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
+    testId: testId,
+    icon: icon,
+    closeLabel: closeLabel,
+    in: isOpen,
+    onClose: handleBackButtonClick,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete,
+    width: width,
+    enterFrom: enterFrom,
+    label: label,
+    titleId: titleId,
+    shouldUnmountOnExit: shouldUnmountOnExit
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    overrides: overrides,
+    autoFocusFirstElem: autoFocusFirstElem,
+    isFocusLockEnabled: isFocusLockEnabled,
+    shouldReturnFocus: shouldReturnFocus,
+    scrollContentLabel: scrollContentLabel
+  }, isOpen && fg('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    handleClose: handleClose
+  })) : children));
+};
 
 /**
  * __Drawer__
@@ -171,10 +150,6 @@ export class DrawerBase extends Component {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-_defineProperty(DrawerBase, "defaultProps", {
-  width: 'narrow',
-  ...defaultFocusLockSettings
-});
 const Drawer = withAnalyticsContext({
   componentName: 'drawer',
   packageName,

package/dist/es2019/components/primitives/focus-lock.js

@@ -1,40 +1,20 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import ReactFocusLock from 'react-focus-lock';
 import ScrollLock from 'react-scrolllock';
 import invariant from 'tiny-invariant';
-import { defaultFocusLockSettings } from '../../constants';
-// Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
-// This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
-export default class FocusLock extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "getFocusTarget", () => {
-      const {
-        shouldReturnFocus
-      } = this.props;
-      if (typeof shouldReturnFocus === 'boolean') {
-        return shouldReturnFocus;
-      }
-      return false;
-    });
-    _defineProperty(this, "onDeactivation", () => {
-      const {
-        shouldReturnFocus
-      } = this.props;
-      if (typeof shouldReturnFocus !== 'boolean') {
-        window.setTimeout(() => {
-          var _shouldReturnFocus$cu;
-          shouldReturnFocus === null || shouldReturnFocus === void 0 ? void 0 : (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
-        }, 0);
-      }
-    });
-  }
-  componentDidMount() {
-    const {
-      isFocusLockEnabled,
-      autoFocusFirstElem
-    } = this.props;
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
+ * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
+ */
+const FocusLock = ({
+  isFocusLockEnabled = true,
+  autoFocusFirstElem = true,
+  shouldReturnFocus = true,
+  children
+}) => {
+  useEffect(() => {
     if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
     }
@@ -44,21 +24,26 @@ export default class FocusLock extends Component {
         elem.focus();
       }
     }
-  }
-  render() {
-    const {
-      isFocusLockEnabled,
-      autoFocusFirstElem,
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ReactFocusLock, {
-      disabled: !isFocusLockEnabled,
-      autoFocus: !!autoFocusFirstElem,
-      returnFocus: this.getFocusTarget(),
-      onDeactivation: this.onDeactivation
-    }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
-  }
-}
-_defineProperty(FocusLock, "defaultProps", {
-  ...defaultFocusLockSettings
-});
+  }, [autoFocusFirstElem, isFocusLockEnabled]);
+  const getFocusTarget = () => {
+    if (typeof shouldReturnFocus === 'boolean') {
+      return shouldReturnFocus;
+    }
+    return false;
+  };
+  const onDeactivation = () => {
+    if (typeof shouldReturnFocus !== 'boolean') {
+      window.setTimeout(() => {
+        var _shouldReturnFocus$cu;
+        shouldReturnFocus === null || shouldReturnFocus === void 0 ? void 0 : (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
+      }, 0);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ReactFocusLock, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: !!autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
+};
+export default FocusLock;

package/dist/esm/components/index.js

@@ -1,26 +1,14 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-import React, { Component } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { canUseDOM } from 'exenv';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
-import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.14.2";
+var packageVersion = "7.14.3";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -51,139 +39,111 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
   // only create a dummy component for using ths hook in class component
   return /*#__PURE__*/React.createElement("span", null);
 };
-export var DrawerBase = /*#__PURE__*/function (_Component) {
-  _inherits(DrawerBase, _Component);
-  var _super = _createSuper(DrawerBase);
-  function DrawerBase() {
-    var _this;
-    _classCallCheck(this, DrawerBase);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+
+/**
+ * __Drawer base__
+ *
+ * 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 DrawerBase = function DrawerBase(_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,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    onClose = _ref2.onClose,
+    testId = _ref2.testId,
+    children = _ref2.children,
+    icon = _ref2.icon,
+    closeLabel = _ref2.closeLabel,
+    scrollContentLabel = _ref2.scrollContentLabel,
+    shouldUnmountOnExit = _ref2.shouldUnmountOnExit,
+    onCloseComplete = _ref2.onCloseComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    overrides = _ref2.overrides,
+    _ref2$zIndex = _ref2.zIndex,
+    zIndex = _ref2$zIndex === void 0 ? 'unset' : _ref2$zIndex,
+    label = _ref2.label,
+    titleId = _ref2.titleId,
+    enterFrom = _ref2.enterFrom;
+  var body = canUseDOM ? document.querySelector('body') : undefined;
+  var handleClose = useCallback(function (event, trigger) {
+    var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
+    if (onClose) {
+      onClose(event, analyticsEvent);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      renderPortal: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "body", canUseDOM ? document.querySelector('body') : undefined);
-    _defineProperty(_assertThisInitialized(_this), "handleBlanketClick", function (event) {
-      _this.handleClose(event, 'blanket');
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleBackButtonClick", function (event) {
-      _this.handleClose(event, 'backButton');
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleClose", function (event, trigger) {
-      var _this$props = _this.props,
-        createAnalyticsEvent = _this$props.createAnalyticsEvent,
-        onClose = _this$props.onClose;
-      var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
-      if (onClose) {
-        onClose(event, analyticsEvent);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      var _this$props2 = _this.props,
-        isOpen = _this$props2.isOpen,
-        onKeyDown = _this$props2.onKeyDown;
+  }, [createAnalyticsEvent, onClose]);
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
       if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
         // when feature flag on, we will use the EscapeCloseManager instead
         if (event.key === 'Escape' && isOpen) {
-          _this.handleClose(event, 'escKey');
+          handleClose(event, 'escKey');
         }
       }
       if (onKeyDown) {
         onKeyDown(event);
       }
-    });
-    return _this;
-  }
-  _createClass(DrawerBase, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isOpen = this.props.isOpen;
-      if (isOpen) {
-        window.addEventListener('keydown', this.handleKeyDown);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('keydown', this.handleKeyDown);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var isOpen = this.props.isOpen;
-      if (isOpen !== prevProps.isOpen) {
-        if (isOpen) {
-          window.addEventListener('keydown', this.handleKeyDown);
-        } else {
-          window.removeEventListener('keydown', this.handleKeyDown);
-        }
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.body) {
-        return null;
-      }
-      var _this$props3 = this.props,
-        testId = _this$props3.testId,
-        isOpen = _this$props3.isOpen,
-        children = _this$props3.children,
-        icon = _this$props3.icon,
-        closeLabel = _this$props3.closeLabel,
-        scrollContentLabel = _this$props3.scrollContentLabel,
-        width = _this$props3.width,
-        shouldUnmountOnExit = _this$props3.shouldUnmountOnExit,
-        onCloseComplete = _this$props3.onCloseComplete,
-        onOpenComplete = _this$props3.onOpenComplete,
-        autoFocusFirstElem = _this$props3.autoFocusFirstElem,
-        isFocusLockEnabled = _this$props3.isFocusLockEnabled,
-        shouldReturnFocus = _this$props3.shouldReturnFocus,
-        overrides = _this$props3.overrides,
-        _this$props3$zIndex = _this$props3.zIndex,
-        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
-        label = _this$props3.label,
-        titleId = _this$props3.titleId,
-        enterFrom = _this$props3.enterFrom;
-      var shouldHaveLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
-      return /*#__PURE__*/React.createElement(Portal, {
-        zIndex: zIndex
-      }, /*#__PURE__*/React.createElement(Blanket, {
-        isOpen: isOpen,
-        onBlanketClicked: this.handleBlanketClick,
-        testId: testId && "".concat(testId, "--blanket")
-      }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
-        testId: testId,
-        icon: icon,
-        closeLabel: closeLabel,
-        in: isOpen,
-        onClose: this.handleBackButtonClick,
-        onCloseComplete: onCloseComplete,
-        onOpenComplete: onOpenComplete,
-        width: width,
-        enterFrom: enterFrom,
-        label: label,
-        titleId: titleId,
-        shouldUnmountOnExit: shouldUnmountOnExit
-        // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-        ,
-        overrides: overrides,
-        autoFocusFirstElem: autoFocusFirstElem,
-        isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus,
-        scrollContentLabel: scrollContentLabel
-      }, shouldHaveLayeringEnabled ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
-        isDisabled: false
-      }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
-        createAnalyticsEvent: this.props.createAnalyticsEvent,
-        handleClose: this.handleClose
-      })) : children));
+    };
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
     }
-  }]);
-  return DrawerBase;
-}(Component);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClose, isOpen, onKeyDown]);
+  var handleBlanketClick = function handleBlanketClick(event) {
+    handleClose(event, 'blanket');
+  };
+  var handleBackButtonClick = function handleBackButtonClick(event) {
+    handleClose(event, 'backButton');
+  };
+  if (!body) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, /*#__PURE__*/React.createElement(Blanket, {
+    isOpen: isOpen,
+    onBlanketClicked: handleBlanketClick,
+    testId: testId && "".concat(testId, "--blanket")
+  }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
+    testId: testId,
+    icon: icon,
+    closeLabel: closeLabel,
+    in: isOpen,
+    onClose: handleBackButtonClick,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete,
+    width: width,
+    enterFrom: enterFrom,
+    label: label,
+    titleId: titleId,
+    shouldUnmountOnExit: shouldUnmountOnExit
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
+    overrides: overrides,
+    autoFocusFirstElem: autoFocusFirstElem,
+    isFocusLockEnabled: isFocusLockEnabled,
+    shouldReturnFocus: shouldReturnFocus,
+    scrollContentLabel: scrollContentLabel
+  }, isOpen && fg('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    handleClose: handleClose
+  })) : children));
+};
 
 /**
  * __Drawer__
@@ -194,9 +154,6 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-_defineProperty(DrawerBase, "defaultProps", _objectSpread({
-  width: 'narrow'
-}, defaultFocusLockSettings));
 var Drawer = withAnalyticsContext({
   componentName: 'drawer',
   packageName: packageName,