@atlaskit/drawer 7.14.2 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/drawer
 
+## 8.0.0
+
+### Major Changes
+
+- [#140090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140090)
+  [`89833597971da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89833597971da) -
+  Refactor of analytics handling to remove usages of legacy AnalyticsContext. Removed
+  WithAnalyticsEventsProps from type.
+
+## 7.14.3
+
+### Patch Changes
+
+- [#138959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138959)
+  [`787e6d015c8cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/787e6d015c8cd) -
+  Internal change only: Convert from class components to function components.
+
 ## 7.14.2
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -5,194 +5,32 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DrawerBase = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
-var _constants = require("../constants");
 var _blanket = _interopRequireDefault(require("./blanket"));
 var _primitives = _interopRequireDefault(require("./primitives"));
 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 && Object.prototype.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; }
-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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
-var packageName = "@atlaskit/drawer";
-var packageVersion = "7.14.2";
-var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
-var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
-  return createAndFireEventOnAtlaskit({
-    action: 'dismissed',
-    actionSubject: 'drawer',
-    attributes: {
-      componentName: 'drawer',
-      packageName: packageName,
-      packageVersion: packageVersion,
-      trigger: trigger
-    }
-  })(createAnalyticsEvent);
-};
+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 createAnalyticsEvent = _ref.createAnalyticsEvent,
-    handleClose = _ref.handleClose;
-  var onClose = _react.default.useCallback(function (event) {
-    if (handleClose) {
-      var _analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
-      handleClose(event, _analyticsEvent);
-    }
-  }, [handleClose, createAnalyticsEvent]);
+  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: onClose
+    onClose: handleClose
   });
-  // only create a dummy component for using ths hook in class component
   return /*#__PURE__*/_react.default.createElement("span", null);
 };
-var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DrawerBase, _Component);
-  var _super = _createSuper(DrawerBase);
-  function DrawerBase() {
-    var _this;
-    (0, _classCallCheck2.default)(this, DrawerBase);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      renderPortal: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "body", _exenv.canUseDOM ? document.querySelector('body') : undefined);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlanketClick", function (event) {
-      _this.handleClose(event, 'blanket');
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBackButtonClick", function (event) {
-      _this.handleClose(event, 'backButton');
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var _this$props2 = _this.props,
-        isOpen = _this$props2.isOpen,
-        onKeyDown = _this$props2.onKeyDown;
-      if (!(0, _platformFeatureFlags.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');
-        }
-      }
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(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 = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
-      return /*#__PURE__*/_react.default.createElement(_portal.default, {
-        zIndex: zIndex
-      }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
-        isOpen: isOpen,
-        onBlanketClicked: this.handleBlanketClick,
-        testId: testId && "".concat(testId, "--blanket")
-      }), /*#__PURE__*/_react.default.createElement(_primitives.default, {
-        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.default.createElement(_layering.UNSAFE_LAYERING, {
-        isDisabled: false
-      }, children, /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
-        createAnalyticsEvent: this.props.createAnalyticsEvent,
-        handleClose: this.handleClose
-      })) : children));
-    }
-  }]);
-  return DrawerBase;
-}(_react.Component);
+
 /**
  * __Drawer__
  *
@@ -202,12 +40,119 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-(0, _defineProperty2.default)(DrawerBase, "defaultProps", _objectSpread({
-  width: 'narrow'
-}, _constants.defaultFocusLockSettings));
-var Drawer = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'drawer',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)()(DrawerBase));
+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,
+    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 = _exenv.canUseDOM ? document.querySelector('body') : undefined;
+  var handleClose = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: function fn(evt, analyticsEvent) {
+      return onClose && onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'escKey'
+    }
+  });
+  var handleKeyDown = (0, _react.useCallback)(function (evt) {
+    onKeyDown && onKeyDown(evt);
+    if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p')) {
+      // when feature flag on, we will use the EscapeCloseManager instead
+      if (evt.key === 'Escape' && isOpen && onClose) {
+        handleClose(evt);
+      }
+    }
+  }, [handleClose, isOpen, onClose, 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 && onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'blanket'
+    }
+  });
+  var handleBackButtonClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: function fn(evt, analyticsEvent) {
+      return onClose && onClose(evt, analyticsEvent);
+    },
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'backButton'
+    }
+  });
+  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(_primitives.default, {
+    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 && (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
+    isDisabled: false
+  }, children, /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
+    onClose: handleClose
+  })) : children));
+};
 var _default = exports.default = Drawer;

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

@@ -6,85 +6,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _constants = require("../../constants");
 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 && Object.prototype.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; }
-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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-// 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
-var FocusLock = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(FocusLock, _Component);
-  var _super = _createSuper(FocusLock);
-  function FocusLock() {
-    var _this;
-    (0, _classCallCheck2.default)(this, FocusLock);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+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; }
+/**
+ * __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
+ */
+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;
+  (0, _react.useEffect)(function () {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
+      (0, _tinyInvariant.default)(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFocusTarget", function () {
-      var shouldReturnFocus = _this.props.shouldReturnFocus;
-      if (typeof shouldReturnFocus === 'boolean') {
-        return shouldReturnFocus;
-      }
-      return false;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeactivation", function () {
-      var shouldReturnFocus = _this.props.shouldReturnFocus;
-      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 _this;
-  }
-  (0, _createClass2.default)(FocusLock, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        isFocusLockEnabled = _this$props.isFocusLockEnabled,
-        autoFocusFirstElem = _this$props.autoFocusFirstElem;
-      if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-        (0, _tinyInvariant.default)(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
-      }
-      if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
-        var elem = autoFocusFirstElem();
-        if (elem && elem.focus) {
-          elem.focus();
-        }
+    if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
+      var elem = autoFocusFirstElem();
+      if (elem && elem.focus) {
+        elem.focus();
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isFocusLockEnabled = _this$props2.isFocusLockEnabled,
-        autoFocusFirstElem = _this$props2.autoFocusFirstElem,
-        children = _this$props2.children;
-      return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
-        disabled: !isFocusLockEnabled,
-        autoFocus: !!autoFocusFirstElem,
-        returnFocus: this.getFocusTarget(),
-        onDeactivation: this.onDeactivation
-      }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null, children));
+  }, [autoFocusFirstElem, isFocusLockEnabled]);
+  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 FocusLock;
-}(_react.Component);
-(0, _defineProperty2.default)(FocusLock, "defaultProps", _objectSpread({}, _constants.defaultFocusLockSettings));
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: !!autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null, children));
+};
+var _default = exports.default = FocusLock;