@atlaskit/drawer 7.14.2 → 8.0.0

package/dist/esm/components/index.js

@@ -1,189 +1,24 @@
-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 { usePlatformLeafEventHandler } 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 createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
-  return createAndFireEventOnAtlaskit({
-    action: 'dismissed',
-    actionSubject: 'drawer',
-    attributes: {
-      componentName: 'drawer',
-      packageName: packageName,
-      packageVersion: packageVersion,
-      trigger: trigger
-    }
-  })(createAnalyticsEvent);
-};
-
 // escape close manager for layering
 var EscapeCloseManager = function EscapeCloseManager(_ref) {
-  var createAnalyticsEvent = _ref.createAnalyticsEvent,
-    handleClose = _ref.handleClose;
-  var onClose = React.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 = useCallback(function (evt) {
+    onClose && onClose(evt);
+  }, [onClose]);
   useCloseOnEscapePress({
-    onClose: onClose
+    onClose: handleClose
   });
-  // 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];
-    }
-    _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;
-      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');
-        }
-      }
-      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));
-    }
-  }]);
-  return DrawerBase;
-}(Component);
 
 /**
  * __Drawer__
@@ -194,12 +29,119 @@ 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,
-  packageVersion: packageVersion
-})(withAnalyticsEvents()(DrawerBase));
+export var 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 = canUseDOM ? document.querySelector('body') : undefined;
+  var handleClose = 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 = useCallback(function (evt) {
+    onKeyDown && onKeyDown(evt);
+    if (!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]);
+  useEffect(function () {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown, isOpen]);
+  var handleBlanketClick = 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 = 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.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, {
+    onClose: handleClose
+  })) : children));
+};
 export default Drawer;

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

@@ -1,81 +1,51 @@
-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; })(); }
-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
-var FocusLock = /*#__PURE__*/function (_Component) {
-  _inherits(FocusLock, _Component);
-  var _super = _createSuper(FocusLock);
-  function FocusLock() {
-    var _this;
-    _classCallCheck(this, FocusLock);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+/**
+ * __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;
+  useEffect(function () {
+    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.');
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getFocusTarget", function () {
-      var shouldReturnFocus = _this.props.shouldReturnFocus;
-      if (typeof shouldReturnFocus === 'boolean') {
-        return shouldReturnFocus;
-      }
-      return false;
-    });
-    _defineProperty(_assertThisInitialized(_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;
-  }
-  _createClass(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) {
-        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.');
-      }
-      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.createElement(ReactFocusLock, {
-        disabled: !isFocusLockEnabled,
-        autoFocus: !!autoFocusFirstElem,
-        returnFocus: this.getFocusTarget(),
-        onDeactivation: this.onDeactivation
-      }, /*#__PURE__*/React.createElement(ScrollLock, 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;
-}(Component);
-_defineProperty(FocusLock, "defaultProps", _objectSpread({}, defaultFocusLockSettings));
-export { FocusLock as default };
+  };
+  return /*#__PURE__*/React.createElement(ReactFocusLock, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: !!autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
+};
+export default FocusLock;

package/dist/types/components/index.d.ts

@@ -1,27 +1,5 @@
-import React, { Component } from 'react';
-import { type DrawerProps, type DrawerWidth } from './types';
-export declare class DrawerBase extends Component<DrawerProps, {
-    renderPortal: boolean;
-}> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-        width: DrawerWidth;
-    };
-    state: {
-        renderPortal: boolean;
-    };
-    body: HTMLBodyElement | null | undefined;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DrawerProps): void;
-    private handleBlanketClick;
-    private handleBackButtonClick;
-    private handleClose;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    render(): JSX.Element | null;
-}
+/// <reference types="react" />
+import { type DrawerProps } from './types';
 /**
  * __Drawer__
  *
@@ -31,10 +9,5 @@ export declare class DrawerBase extends Component<DrawerProps, {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
-    autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-    isFocusLockEnabled?: boolean | undefined;
-    shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 export default Drawer;

package/dist/types/components/primitives/focus-lock.d.ts

@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
+/// <reference types="react" />
 import { type FocusLockProps } from '../types';
-export default class FocusLock extends Component<FocusLockProps> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    };
-    componentDidMount(): void;
-    getFocusTarget: () => boolean;
-    onDeactivation: () => void;
-    render(): JSX.Element;
-}
+/**
+ * __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
+ */
+declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => JSX.Element;
+export default FocusLock;

package/dist/types/components/types.d.ts

@@ -1,6 +1,5 @@
 import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
 import { type CSSObject } from '@emotion/react';
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type Direction } from '@atlaskit/motion';
 export type Widths = {
     extended: {
@@ -129,7 +128,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, Draw
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
+export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -137,7 +136,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
     /**
      * Callback function called when the drawer is closed.
      */
-    onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
+    onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
     /**
      * Controls if the drawer is open or closed.
      */
@@ -147,7 +146,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
      * This is passed to the portal component.
      * Defaults to `unset`.
      */
-    zIndex?: number;
+    zIndex?: number | 'unset';
 };
 export interface FocusLockSettings {
     /**

package/dist/types-ts4.5/components/index.d.ts

@@ -1,27 +1,5 @@
-import React, { Component } from 'react';
-import { type DrawerProps, type DrawerWidth } from './types';
-export declare class DrawerBase extends Component<DrawerProps, {
-    renderPortal: boolean;
-}> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-        width: DrawerWidth;
-    };
-    state: {
-        renderPortal: boolean;
-    };
-    body: HTMLBodyElement | null | undefined;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DrawerProps): void;
-    private handleBlanketClick;
-    private handleBackButtonClick;
-    private handleClose;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    render(): JSX.Element | null;
-}
+/// <reference types="react" />
+import { type DrawerProps } from './types';
 /**
  * __Drawer__
  *
@@ -31,10 +9,5 @@ export declare class DrawerBase extends Component<DrawerProps, {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
-    autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-    isFocusLockEnabled?: boolean | undefined;
-    shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 export default Drawer;

package/dist/types-ts4.5/components/primitives/focus-lock.d.ts

@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
+/// <reference types="react" />
 import { type FocusLockProps } from '../types';
-export default class FocusLock extends Component<FocusLockProps> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    };
-    componentDidMount(): void;
-    getFocusTarget: () => boolean;
-    onDeactivation: () => void;
-    render(): JSX.Element;
-}
+/**
+ * __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
+ */
+declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => JSX.Element;
+export default FocusLock;

package/dist/types-ts4.5/components/types.d.ts

@@ -1,6 +1,5 @@
 import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
 import { type CSSObject } from '@emotion/react';
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type Direction } from '@atlaskit/motion';
 export type Widths = {
     extended: {
@@ -129,7 +128,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, Draw
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
+export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -137,7 +136,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
     /**
      * Callback function called when the drawer is closed.
      */
-    onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
+    onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
     /**
      * Controls if the drawer is open or closed.
      */
@@ -147,7 +146,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
      * This is passed to the portal component.
      * Defaults to `unset`.
      */
-    zIndex?: number;
+    zIndex?: number | 'unset';
 };
 export interface FocusLockSettings {
     /**