@atlaskit/editor-common 78.17.1 → 78.18.0

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -5,109 +5,86 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
-import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
+import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
 import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
 import { ViewMore } from '../ViewMore';
 import CategoryList from './CategoryList';
 import ElementList from './ElementList/ElementList';
 import ElementSearch from './ElementSearch';
-const wrapper = css`
-  width: 100%;
-  max-height: inherit;
-  overflow: hidden;
-`;
-const baseBrowserContainerStyles = css`
-  display: flex;
-  height: 100%;
-  /** Needed for Safari to work with current css.
-  * 100% heights wont work and
-  * will default to auto if one of the containers doesn't have a specified height in pixels.
-  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
-  */
-
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-
-  /* stylelint-disable-next-line */
-  min-height: -webkit-fill-available;
-`;
-const mobileElementBrowserContainer = css`
-  ${baseBrowserContainerStyles};
-  flex-direction: column;
-`;
-const elementBrowserContainer = css`
-  ${baseBrowserContainerStyles};
-  flex-direction: row;
-`;
-const baseSidebarStyles = css`
-  display: flex;
-  flex-direction: column;
-
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const mobileSideBar = css`
-  ${baseSidebarStyles};
-  flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0
-    ${"var(--ds-space-150, 12px)"};
-`;
-const mobileSideBarShowCategories = css`
-  flex: 0 0 auto;
-`;
-const sideBar = css`
-  ${baseSidebarStyles};
-  flex: 0 0 'auto';
-`;
-const sideBarShowCategories = css`
-  ${baseSidebarStyles};
-  flex: 0 0 ${SIDEBAR_WIDTH};
-`;
-const sidebarHeading = css`
-  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
-  display: inline-flex;
-  align-items: center;
-  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
-  font-weight: 700;
-`;
-const mobileMainContent = css`
-  flex: 1 1 auto;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  height: 100%;
-`;
-const mainContent = css`
-  ${mobileMainContent}
-  margin-left: ${GRID_SIZE * 2}px;
-  // Needed for safari
-  height: auto;
-`;
-const searchContainer = css`
-  padding-bottom: ${GRID_SIZE * 2}px;
-`;
-const mobileCategoryListWrapper = css`
-  display: flex;
-  overflow-x: auto;
-
-  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
-  min-height: ${GRID_SIZE * 4}px;
-
-  overflow: -moz-scrollbars-none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-`;
-const categoryListWrapper = css`
-  ${mobileCategoryListWrapper}
-  padding: 0;
-  margin-top: ${GRID_SIZE * 3}px;
-  flex-direction: column;
-`;
+const wrapper = css({
+  width: '100%',
+  maxHeight: 'inherit',
+  overflow: 'hidden'
+});
+const baseBrowserContainerStyles = css({
+  display: 'flex',
+  height: '100%',
+  minHeight: '-webkit-fill-available'
+});
+const mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
+  flexDirection: 'column'
+});
+const elementBrowserContainer = css(baseBrowserContainerStyles, {
+  flexDirection: 'row'
+});
+const baseSidebarStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflowX: 'auto',
+  overflowY: 'hidden'
+});
+const mobileSideBar = css(baseSidebarStyles, {
+  flex: `0 0 ${INLINE_SIDEBAR_HEIGHT}`,
+  padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-150, 12px)"}`
+});
+const mobileSideBarShowCategories = css({
+  flex: '0 0 auto'
+});
+const sideBar = css(baseSidebarStyles, {
+  flex: "0 0 'auto'"
+});
+const sideBarShowCategories = css(baseSidebarStyles, {
+  flex: `0 0 ${SIDEBAR_WIDTH}`
+});
+const sidebarHeading = css({
+  flex: `0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT}`,
+  display: 'inline-flex',
+  alignItems: 'center',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  fontWeight: 700
+});
+const mobileMainContent = css({
+  flex: '1 1 auto',
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto',
+  height: '100%'
+});
+const mainContent = css(mobileMainContent, {
+  marginLeft: "var(--ds-space-200, 16px)",
+  height: 'auto'
+});
+const searchContainer = css({
+  paddingBottom: "var(--ds-space-200, 16px)"
+});
+const mobileCategoryListWrapper = css({
+  display: 'flex',
+  overflowX: 'auto',
+  padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
+  minHeight: `${GRID_SIZE * 4}px`,
+  overflow: '-moz-scrollbars-none',
+  '::-webkit-scrollbar': {
+    display: 'none'
+  },
+  scrollbarWidth: 'none',
+  MsOverflowStyle: 'none'
+});
+const categoryListWrapper = css(mobileCategoryListWrapper, {
+  padding: 0,
+  marginTop: "var(--ds-space-200, 24px)",
+  flexDirection: 'column'
+});
 function StatelessElementBrowser(props) {
   const {
     items,
@@ -296,12 +273,15 @@ function DesktopBrowser({
     css: showCategories ? sideBarShowCategories : sideBar
   }, jsx("h2", {
     css: sidebarHeading,
-    "data-testid": "sidebar-heading"
+    "data-testid": "sidebar-heading",
+    id: "sidebar-heading"
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
   })), jsx("nav", {
+    role: "tablist",
+    "aria-labelledby": "sidebar-heading",
     css: categoryListWrapper
   }, jsx(CategoryList, {
     categories: categories,
@@ -312,7 +292,9 @@ function DesktopBrowser({
     css: mainContent,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
-  }, showSearch && jsx("div", {
+  }, showSearch &&
+  // eslint-disable-next-line
+  jsx("div", {
     css: searchContainer
   }, jsx(ElementSearch, {
     onSearch: onSearch,

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -162,18 +162,23 @@ const widthPluginKey = {
   }
 };
 const ExtensionDeprecated = props => {
-  return jsx(WithPluginState, {
-    editorView: props.view,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: ({
-      widthState
-    }) => jsx(ExtensionWithPluginState, _extends({
-      widthState: widthState
-    }, props))
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    jsx(WithPluginState, {
+      editorView: props.view,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: ({
+        widthState
+      }) => jsx(ExtensionWithPluginState, _extends({
+        widthState: widthState
+      }, props))
+    })
+  );
 };
+
 /**
  * End workaround
  */

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -188,17 +188,21 @@ const widthPluginKey = {
   }
 };
 const MultiBodiedExtensionDeprecated = props => {
-  return jsx(WithPluginState, {
-    editorView: props.editorView,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: ({
-      widthState
-    }) => jsx(MultiBodiedExtensionWithWidth, _extends({
-      widthState: widthState
-    }, props))
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    jsx(WithPluginState, {
+      editorView: props.editorView,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: ({
+        widthState
+      }) => jsx(MultiBodiedExtensionWithWidth, _extends({
+        widthState: widthState
+      }, props))
+    })
+  );
 };
 /**
  * End workaround

package/dist/es2019/hooks/useSharedPluginState.js

@@ -91,8 +91,13 @@ export function useSharedPluginState(injectionApi, plugins) {
   // Create a memoized object containing the named plugins
   const namedExternalPlugins = useMemo(() => pluginNames.reduce((acc, pluginName) => ({
     ...acc,
+    // @ts-expect-error - Implicit conversion of a 'symbol' to a 'string' will fail at runtime. Consider wrapping this expression in 'String(...)'
+    // This error was introduced after upgrading to TypeScript 5
     [`${pluginName}State`]: injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]
   }), {}), [injectionApi, pluginNames]);
+
+  // @ts-expect-error - Type '`${K}State`' is not assignable to type '`${K}State`'. Two different types with this name exist, but they are unrelated.
+  // This error was introduced after upgrading to TypeScript 5
   return useSharedPluginStateInternal(namedExternalPlugins);
 }
 function useSharedPluginStateInternal(externalPlugins) {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.17.1";
+const packageVersion = "78.18.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.17.1";
+const packageVersion = "78.18.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/element-browser/components/CategoryList.js

@@ -45,7 +45,6 @@ function CategoryListItem(_ref2) {
   var ref = useFocus(focus);
   var onClick = useCallback(function () {
     onSelectCategory(category);
-
     /**
      * When user double clicks on same category, focus on first item.
      */
@@ -85,13 +84,18 @@ function CategoryListItem(_ref2) {
     }, rest);
   }, [category.name, selectedCategory]);
   return jsx("div", {
-    css: buttonWrapper
+    css: buttonWrapper,
+    role: "presentation"
   }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
     onFocus: onFocus,
     theme: getTheme,
+    role: "tab",
+    "aria-selected": selectedCategory === category.name ? 'true' : 'false',
+    "aria-controls": "browse-category-".concat(category.name, "-tab"),
+    id: "browse-category--".concat(category.name, "-button"),
     ref: ref,
     testId: "element-browser-category-item"
   }, category.title));

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -103,16 +103,20 @@ function ElementList(_ref) {
       }, props)));
     };
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
-  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
+    css: elementItemsWrapper,
+    "data-testid": "element-items",
+    id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
+    "aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
+    role: "tabpanel",
+    tabIndex: items.length === 0 ? 0 : undefined
+  }, !items.length ? emptyStateHandler ? emptyStateHandler({
     mode: mode,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
   }) : jsx(EmptyState, {
     onExternalLinkClick: onExternalLinkClick
-  }) : jsx("div", {
-    css: elementItemsWrapper,
-    "data-testid": "element-items"
-  }, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
+  }) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, function (_ref3) {
     var height = _ref3.height;
@@ -258,7 +262,7 @@ var elementItemWrapper = css({
     button: {
       height: '75px',
       alignItems: 'flex-start',
-      padding: "var(--ds-space-150, 12px)"
+      padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
     }
   }
 });

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -1,35 +1,91 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 /** @jsx jsx */
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
-import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
+import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
 import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
 import { ViewMore } from '../ViewMore';
 import CategoryList from './CategoryList';
 import ElementList from './ElementList/ElementList';
 import ElementSearch from './ElementSearch';
-var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
-var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
-var mobileElementBrowserContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
-var elementBrowserContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
-var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-var mobileSideBarShowCategories = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
-var sideBar = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
-var sideBarShowCategories = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, SIDEBAR_WIDTH);
-var sidebarHeading = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT);
-var mobileMainContent = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
-var mainContent = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, GRID_SIZE * 2);
-var searchContainer = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding-bottom: ", "px;\n"])), GRID_SIZE * 2);
-var mobileCategoryListWrapper = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), GRID_SIZE, GRID_SIZE * 2, GRID_SIZE * 4);
-var categoryListWrapper = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, GRID_SIZE * 3);
+var wrapper = css({
+  width: '100%',
+  maxHeight: 'inherit',
+  overflow: 'hidden'
+});
+var baseBrowserContainerStyles = css({
+  display: 'flex',
+  height: '100%',
+  minHeight: '-webkit-fill-available'
+});
+var mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
+  flexDirection: 'column'
+});
+var elementBrowserContainer = css(baseBrowserContainerStyles, {
+  flexDirection: 'row'
+});
+var baseSidebarStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflowX: 'auto',
+  overflowY: 'hidden'
+});
+var mobileSideBar = css(baseSidebarStyles, {
+  flex: "0 0 ".concat(INLINE_SIDEBAR_HEIGHT),
+  padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-150, 12px)")
+});
+var mobileSideBarShowCategories = css({
+  flex: '0 0 auto'
+});
+var sideBar = css(baseSidebarStyles, {
+  flex: "0 0 'auto'"
+});
+var sideBarShowCategories = css(baseSidebarStyles, {
+  flex: "0 0 ".concat(SIDEBAR_WIDTH)
+});
+var sidebarHeading = css({
+  flex: "0 0 ".concat(SIDEBAR_HEADING_WRAPPER_HEIGHT),
+  display: 'inline-flex',
+  alignItems: 'center',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  fontWeight: 700
+});
+var mobileMainContent = css({
+  flex: '1 1 auto',
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto',
+  height: '100%'
+});
+var mainContent = css(mobileMainContent, {
+  marginLeft: "var(--ds-space-200, 16px)",
+  height: 'auto'
+});
+var searchContainer = css({
+  paddingBottom: "var(--ds-space-200, 16px)"
+});
+var mobileCategoryListWrapper = css({
+  display: 'flex',
+  overflowX: 'auto',
+  padding: "var(--ds-space-200, 8px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"),
+  minHeight: "".concat(GRID_SIZE * 4, "px"),
+  overflow: '-moz-scrollbars-none',
+  '::-webkit-scrollbar': {
+    display: 'none'
+  },
+  scrollbarWidth: 'none',
+  MsOverflowStyle: 'none'
+});
+var categoryListWrapper = css(mobileCategoryListWrapper, {
+  padding: 0,
+  marginTop: "var(--ds-space-200, 24px)",
+  flexDirection: 'column'
+});
 function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
@@ -215,12 +271,15 @@ function DesktopBrowser(_ref2) {
     css: showCategories ? sideBarShowCategories : sideBar
   }, jsx("h2", {
     css: sidebarHeading,
-    "data-testid": "sidebar-heading"
+    "data-testid": "sidebar-heading",
+    id: "sidebar-heading"
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
   })), jsx("nav", {
+    role: "tablist",
+    "aria-labelledby": "sidebar-heading",
     css: categoryListWrapper
   }, jsx(CategoryList, {
     categories: categories,
@@ -231,7 +290,9 @@ function DesktopBrowser(_ref2) {
     css: mainContent,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
-  }, showSearch && jsx("div", {
+  }, showSearch &&
+  // eslint-disable-next-line
+  jsx("div", {
     css: searchContainer
   }, jsx(ElementSearch, {
     onSearch: onSearch,

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -156,19 +156,24 @@ var widthPluginKey = {
   }
 };
 var ExtensionDeprecated = function ExtensionDeprecated(props) {
-  return jsx(WithPluginState, {
-    editorView: props.view,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: function render(_ref) {
-      var widthState = _ref.widthState;
-      return jsx(ExtensionWithPluginState, _extends({
-        widthState: widthState
-      }, props));
-    }
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    jsx(WithPluginState, {
+      editorView: props.view,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: function render(_ref) {
+        var widthState = _ref.widthState;
+        return jsx(ExtensionWithPluginState, _extends({
+          widthState: widthState
+        }, props));
+      }
+    })
+  );
 };
+
 /**
  * End workaround
  */

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -188,18 +188,22 @@ var widthPluginKey = {
   }
 };
 var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
-  return jsx(WithPluginState, {
-    editorView: props.editorView,
-    plugins: {
-      widthState: widthPluginKey
-    },
-    render: function render(_ref2) {
-      var widthState = _ref2.widthState;
-      return jsx(MultiBodiedExtensionWithWidth, _extends({
-        widthState: widthState
-      }, props));
-    }
-  });
+  return (
+    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
+    // This error was introduced after upgrading to TypeScript 5
+    jsx(WithPluginState, {
+      editorView: props.editorView,
+      plugins: {
+        widthState: widthPluginKey
+      },
+      render: function render(_ref2) {
+        var widthState = _ref2.widthState;
+        return jsx(MultiBodiedExtensionWithWidth, _extends({
+          widthState: widthState
+        }, props));
+      }
+    })
+  );
 };
 /**
  * End workaround

package/dist/esm/hooks/useSharedPluginState.js

@@ -102,6 +102,9 @@ export function useSharedPluginState(injectionApi, plugins) {
       return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, "".concat(pluginName, "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]));
     }, {});
   }, [injectionApi, pluginNames]);
+
+  // @ts-expect-error - Type '`${K}State`' is not assignable to type '`${K}State`'. Two different types with this name exist, but they are unrelated.
+  // This error was introduced after upgrading to TypeScript 5
   return useSharedPluginStateInternal(namedExternalPlugins);
 }
 function useSharedPluginStateInternal(externalPlugins) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.17.1";
+var packageVersion = "78.18.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.17.1";
+var packageVersion = "78.18.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/analytics/types/enums.d.ts

@@ -174,8 +174,8 @@ export declare enum INPUT_METHOD {
 }
 export declare enum TRIGGER_METHOD {
     BUTTON = "button",
-    KEYBOARD = "keyboard",
-    SHORTCUT = "shortcut",
+    KEYBOARD = "keyboard",// single key, e.g. Esc, Enter
+    SHORTCUT = "shortcut",// combination of keys, e.g. Mod + F
     TOOLBAR = "toolbar"
 }
 export declare enum ACTION_SUBJECT {

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

@@ -1,4 +1,6 @@
+/// <reference path="../../../../../../typings/events.d.ts" />
 /// <reference types="node" />
+/// <reference types="node/events" />
 import { EventEmitter } from 'events';
 export type UpdateEvent = 'create' | 'delete' | 'resolve' | 'unresolve' | 'setselectedannotation';
 export type VisibilityEvent = 'setvisibility';