@atlaskit/drawer 7.14.3 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

package/dist/cjs/components/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DrawerBase = void 0;
+exports.default = exports.Drawer = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _exenv = require("exenv");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -15,44 +15,24 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 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 _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 */
 
-var packageName = "@atlaskit/drawer";
-var packageVersion = "7.14.3";
-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);
-};
-
 // 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);
 };
 
 /**
- * __Drawer base__
+ * __Drawer__
  *
  * A drawer is a panel that slides in from the left side of the screen.
  *
@@ -60,7 +40,7 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
+var Drawer = exports.Drawer = function Drawer(_ref2) {
   var _ref2$width = _ref2.width,
     width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
     isOpen = _ref2.isOpen,
@@ -71,7 +51,6 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
     _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,
@@ -88,37 +67,59 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
     titleId = _ref2.titleId,
     enterFrom = _ref2.enterFrom;
   var body = _exenv.canUseDOM ? document.querySelector('body') : undefined;
-  var handleClose = (0, _react.useCallback)(function (event, trigger) {
-    var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
-    if (onClose) {
-      onClose(event, analyticsEvent);
+  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'
     }
-  }, [createAnalyticsEvent, onClose]);
-  (0, _react.useEffect)(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      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) {
-          handleClose(event, 'escKey');
-        }
-      }
-      if (onKeyDown) {
-        onKeyDown(event);
+  });
+  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);
     };
-  }, [handleClose, isOpen, onKeyDown]);
-  var handleBlanketClick = function handleBlanketClick(event) {
-    handleClose(event, 'blanket');
-  };
-  var handleBackButtonClick = function handleBackButtonClick(event) {
-    handleClose(event, 'backButton');
-  };
+  }, [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;
   }
@@ -151,23 +152,7 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
   }, 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, {
-    createAnalyticsEvent: createAnalyticsEvent,
-    handleClose: handleClose
+    onClose: handleClose
   })) : children));
 };
-
-/**
- * __Drawer__
- *
- * A drawer is a panel that slides in from the left side of the screen.
- *
- * - [Examples](https://atlassian.design/components/drawer/examples)
- * - [Code](https://atlassian.design/components/drawer/code)
- * - [Usage](https://atlassian.design/components/drawer/usage)
- */
-var Drawer = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'drawer',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)()(DrawerBase));
 var _default = exports.default = Drawer;

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

@@ -11,7 +11,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 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 _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__
  *

package/dist/es2019/components/index.js

@@ -1,46 +1,28 @@
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 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 Blanket from './blanket';
 import DrawerPrimitive from './primitives';
-const packageName = "@atlaskit/drawer";
-const packageVersion = "7.14.3";
-const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
-  action: 'dismissed',
-  actionSubject: 'drawer',
-  attributes: {
-    componentName: 'drawer',
-    packageName,
-    packageVersion,
-    trigger
-  }
-})(createAnalyticsEvent);
-
 // escape close manager for layering
 const EscapeCloseManager = ({
-  createAnalyticsEvent,
-  handleClose
+  onClose
 }) => {
-  const onClose = React.useCallback(event => {
-    if (handleClose) {
-      const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
-      handleClose(event, analyticsEvent);
-    }
-  }, [handleClose, createAnalyticsEvent]);
+  // wrap so that we can cast the event to a React.KeyboardEvent
+  const handleClose = useCallback(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);
 };
 
 /**
- * __Drawer base__
+ * __Drawer__
  *
  * A drawer is a panel that slides in from the left side of the screen.
  *
@@ -48,14 +30,13 @@ const EscapeCloseManager = ({
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-export const DrawerBase = ({
+export const Drawer = ({
   width = 'narrow',
   isOpen,
   isFocusLockEnabled = true,
   shouldReturnFocus = true,
   autoFocusFirstElem = true,
   onKeyDown,
-  createAnalyticsEvent,
   onClose,
   testId,
   children,
@@ -73,37 +54,53 @@ export const DrawerBase = ({
   enterFrom
 }) => {
   const body = canUseDOM ? document.querySelector('body') : undefined;
-  const handleClose = useCallback((event, trigger) => {
-    const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
-    if (onClose) {
-      onClose(event, analyticsEvent);
+  const handleClose = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'escKey'
     }
-  }, [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) {
-          handleClose(event, 'escKey');
-        }
-      }
-      if (onKeyDown) {
-        onKeyDown(event);
+  });
+  const handleKeyDown = useCallback(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(() => {
     if (isOpen) {
       window.addEventListener('keydown', handleKeyDown);
     }
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [handleClose, isOpen, onKeyDown]);
-  const handleBlanketClick = event => {
-    handleClose(event, 'blanket');
-  };
-  const handleBackButtonClick = event => {
-    handleClose(event, 'backButton');
-  };
+  }, [handleKeyDown, isOpen]);
+  const handleBlanketClick = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'blanket'
+    }
+  });
+  const handleBackButtonClick = usePlatformLeafEventHandler({
+    fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
+    action: 'dismissed',
+    componentName: 'drawer',
+    packageName: "@atlaskit/drawer",
+    packageVersion: "8.0.0",
+    analyticsData: {
+      trigger: 'backButton'
+    }
+  });
   if (!body) {
     return null;
   }
@@ -136,23 +133,7 @@ export const DrawerBase = ({
   }, 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
+    onClose: handleClose
   })) : children));
 };
-
-/**
- * __Drawer__
- *
- * A drawer is a panel that slides in from the left side of the screen.
- *
- * - [Examples](https://atlassian.design/components/drawer/examples)
- * - [Code](https://atlassian.design/components/drawer/code)
- * - [Usage](https://atlassian.design/components/drawer/usage)
- */
-const Drawer = withAnalyticsContext({
-  componentName: 'drawer',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents()(DrawerBase));
 export default Drawer;

package/dist/esm/components/index.js

@@ -1,47 +1,27 @@
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 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 Blanket from './blanket';
 import DrawerPrimitive from './primitives';
-var packageName = "@atlaskit/drawer";
-var packageVersion = "7.14.3";
-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);
 };
 
 /**
- * __Drawer base__
+ * __Drawer__
  *
  * A drawer is a panel that slides in from the left side of the screen.
  *
@@ -49,7 +29,7 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-export var DrawerBase = function DrawerBase(_ref2) {
+export var Drawer = function Drawer(_ref2) {
   var _ref2$width = _ref2.width,
     width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
     isOpen = _ref2.isOpen,
@@ -60,7 +40,6 @@ export var DrawerBase = function DrawerBase(_ref2) {
     _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,
@@ -77,37 +56,59 @@ export var DrawerBase = function DrawerBase(_ref2) {
     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);
+  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'
     }
-  }, [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) {
-          handleClose(event, 'escKey');
-        }
-      }
-      if (onKeyDown) {
-        onKeyDown(event);
+  });
+  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);
     };
-  }, [handleClose, isOpen, onKeyDown]);
-  var handleBlanketClick = function handleBlanketClick(event) {
-    handleClose(event, 'blanket');
-  };
-  var handleBackButtonClick = function handleBackButtonClick(event) {
-    handleClose(event, 'backButton');
-  };
+  }, [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;
   }
@@ -140,23 +141,7 @@ export var DrawerBase = function DrawerBase(_ref2) {
   }, 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
+    onClose: handleClose
   })) : children));
 };
-
-/**
- * __Drawer__
- *
- * A drawer is a panel that slides in from the left side of the screen.
- *
- * - [Examples](https://atlassian.design/components/drawer/examples)
- * - [Code](https://atlassian.design/components/drawer/code)
- * - [Usage](https://atlassian.design/components/drawer/usage)
- */
-var Drawer = withAnalyticsContext({
-  componentName: 'drawer',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents()(DrawerBase));
 export default Drawer;

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

@@ -1,15 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { type DrawerProps } from './types';
-/**
- * __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 declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 /**
  * __Drawer__
  *
@@ -19,10 +9,5 @@ export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldRet
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
-    onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
-    onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
-    isOpen: boolean;
-    zIndex?: number | "unset" | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | 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/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.
      */

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

@@ -1,15 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { type DrawerProps } from './types';
-/**
- * __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 declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 /**
  * __Drawer__
  *
@@ -19,10 +9,5 @@ export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldRet
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
-    onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
-    onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
-    isOpen: boolean;
-    zIndex?: number | "unset" | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | 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/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.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.14.3",
+	"version": "8.0.0",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/blanket": "^13.3.0",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/icon": "^22.16.0",
+		"@atlaskit/icon": "^22.17.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",