@atlaskit/editor-toolbar 0.8.5 → 0.8.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-toolbar
 
+## 0.8.7
+
+### Patch Changes
+
+- [`08039ab948fd7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08039ab948fd7) -
+  [ux] [ED-28824] add optional props to support confluence renderer toolbar implementation
+- Updated dependencies
+
+## 0.8.6
+
+### Patch Changes
+
+- [`345a4e1939d12`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/345a4e1939d12) -
+  [ux] [ED-28733] Add responsiveness support for selection toolbar
+- Updated dependencies
+
 ## 0.8.5
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -136,6 +136,12 @@ Object.defineProperty(exports, "CommentIcon", {
     return _CommentIcon.CommentIcon;
   }
 });
+Object.defineProperty(exports, "DefineIcon", {
+  enumerable: true,
+  get: function get() {
+    return _DefineIcon.DefineIcon;
+  }
+});
 Object.defineProperty(exports, "EmojiIcon", {
   enumerable: true,
   get: function get() {
@@ -268,6 +274,12 @@ Object.defineProperty(exports, "PinnedIcon", {
     return _PinnedIcon.PinnedIcon;
   }
 });
+Object.defineProperty(exports, "PlusIcon", {
+  enumerable: true,
+  get: function get() {
+    return _PlusIcon.PlusIcon;
+  }
+});
 Object.defineProperty(exports, "PrimaryToolbar", {
   enumerable: true,
   get: function get() {
@@ -485,6 +497,7 @@ var _AddIcon = require("./ui/icons/AddIcon");
 var _AppsIcon = require("./ui/icons/AppsIcon");
 var _BoldIcon = require("./ui/icons/BoldIcon");
 var _CommentIcon = require("./ui/icons/CommentIcon");
+var _DefineIcon = require("./ui/icons/DefineIcon");
 var _HeadingFiveIcon = require("./ui/icons/HeadingFiveIcon");
 var _HeadingFourIcon = require("./ui/icons/HeadingFourIcon");
 var _HeadingOneIcon = require("./ui/icons/HeadingOneIcon");
@@ -523,6 +536,7 @@ var _UndoIcon = require("./ui/icons/UndoIcon");
 var _RedoIcon = require("./ui/icons/RedoIcon");
 var _HistoryIcon = require("./ui/icons/HistoryIcon");
 var _LoomIcon = require("./ui/icons/LoomIcon");
+var _PlusIcon = require("./ui/icons/PlusIcon");
 var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
 var _utils = require("./ui/ColorPalette/utils");
 var _uiContext = require("./hooks/ui-context");

package/dist/cjs/ui/ResponsiveContainer.compiled.css

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResponsiveContainer = void 0;
+exports.ResponsiveWrapper = exports.ResponsiveContainer = void 0;
 require("./ResponsiveContainer.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
@@ -19,7 +19,8 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -70,4 +71,14 @@ var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveConta
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+var ResponsiveWrapper = exports.ResponsiveWrapper = function ResponsiveWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

package/dist/cjs/ui/Toolbar.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/cjs/ui/Toolbar.js

@@ -18,20 +18,29 @@ var _ResponsiveContainer = require("./ResponsiveContainer");
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  var isResponsiveEnabled = (0, _expValEquals.expValEquals)('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  var toolbar = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

package/dist/cjs/ui/ToolbarButton.js

@@ -33,7 +33,8 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     testId = _ref.testId,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
-    label = _ref.label;
+    label = _ref.label,
+    interactionName = _ref.interactionName;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
     ctxDisabled = _useToolbarUI.isDisabled;
@@ -58,6 +59,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
         event.preventDefault();
       }
     },
-    "data-toolbar-component": "button"
+    "data-toolbar-component": "button",
+    interactionName: interactionName
   }, iconBefore, children);
 });

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -52,6 +52,8 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
+    _ref2$shouldTitleWrap = _ref2.shouldTitleWrap,
+    shouldTitleWrap = _ref2$shouldTitleWrap === void 0 ? true : _ref2$shouldTitleWrap,
     testId = _ref2.testId,
     ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
     href = _ref2.href,
@@ -78,6 +80,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     rel: rel,
     component: href && (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
     testId: testId,
-    "data-toolbar-component": "menu-item"
+    "data-toolbar-component": "menu-item",
+    shouldTitleWrap: shouldTitleWrap
   }, children);
 };

package/dist/cjs/ui/ToolbarDropdownItemSection.js

@@ -10,10 +10,12 @@ var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var ToolbarDropdownItemSection = exports.ToolbarDropdownItemSection = function ToolbarDropdownItemSection(_ref) {
   var children = _ref.children,
     hasSeparator = _ref.hasSeparator,
-    title = _ref.title;
+    title = _ref.title,
+    testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
     hasSeparator: hasSeparator,
     title: title,
-    "data-toolbar-component": "menu-section"
+    "data-toolbar-component": "menu-section",
+    testId: testId
   }, children);
 };

package/dist/cjs/ui/ToolbarTooltip.js

@@ -11,9 +11,11 @@ var ToolbarTooltip = exports.ToolbarTooltip = function ToolbarTooltip(_ref) {
   var content = _ref.content,
     children = _ref.children,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    delay = _ref.delay;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: content,
-    position: position
+    position: position,
+    delay: delay
   }, children);
 };

package/dist/cjs/ui/icons/DefineIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DefineIcon", {
+  enumerable: true,
+  get: function get() {
+    return _informationCircle.default;
+  }
+});
+var _informationCircle = _interopRequireDefault(require("@atlaskit/icon/core/information-circle"));

package/dist/cjs/ui/icons/PlusIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PlusIcon", {
+  enumerable: true,
+  get: function get() {
+    return _plusSquare.default;
+  }
+});
+var _plusSquare = _interopRequireDefault(require("@atlaskit/icon/core/plus-square"));

package/dist/es2019/index.js

@@ -30,6 +30,7 @@ export { AddIcon } from './ui/icons/AddIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';
+export { DefineIcon } from './ui/icons/DefineIcon';
 export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
 export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
 export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
@@ -68,6 +69,7 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
+export { PlusIcon } from './ui/icons/PlusIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/es2019/ui/ResponsiveContainer.compiled.css

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -12,7 +12,8 @@ const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -64,4 +65,15 @@ export const ResponsiveContainer = ({
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export const ResponsiveWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

package/dist/es2019/ui/Toolbar.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/es2019/ui/Toolbar.js

@@ -7,25 +7,34 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
 const styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export const Toolbar = ({
   children,
   label
 }) => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  const isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  const toolbar = /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

package/dist/es2019/ui/ToolbarButton.js

@@ -25,7 +25,8 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   testId,
   isDisabled,
   ariaKeyshortcuts,
-  label
+  label,
+  interactionName
 }, ref) => {
   const {
     preventDefaultOnMouseDown,
@@ -52,6 +53,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
         event.preventDefault();
       }
     },
-    "data-toolbar-component": "button"
+    "data-toolbar-component": "button",
+    interactionName: interactionName
   }, iconBefore, children);
 });

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -43,6 +43,7 @@ export const ToolbarDropdownItem = ({
   isDisabled,
   hasNestedDropdownMenu,
   triggerRef,
+  shouldTitleWrap = true,
   testId,
   ariaKeyshortcuts,
   href,
@@ -70,6 +71,7 @@ export const ToolbarDropdownItem = ({
     rel: rel,
     component: href && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
     testId: testId,
-    "data-toolbar-component": "menu-item"
+    "data-toolbar-component": "menu-item",
+    shouldTitleWrap: shouldTitleWrap
   }, children);
 };

package/dist/es2019/ui/ToolbarDropdownItemSection.js

@@ -3,11 +3,13 @@ import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 export const ToolbarDropdownItemSection = ({
   children,
   hasSeparator,
-  title
+  title,
+  testId
 }) => {
   return /*#__PURE__*/React.createElement(DropdownItemGroup, {
     hasSeparator: hasSeparator,
     title: title,
-    "data-toolbar-component": "menu-section"
+    "data-toolbar-component": "menu-section",
+    testId: testId
   }, children);
 };

package/dist/es2019/ui/ToolbarTooltip.js

@@ -3,10 +3,12 @@ import Tooltip from '@atlaskit/tooltip';
 export const ToolbarTooltip = ({
   content,
   children,
-  position = 'top'
+  position = 'top',
+  delay
 }) => {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
-    position: position
+    position: position,
+    delay: delay
   }, children);
 };

package/dist/es2019/ui/icons/DefineIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as DefineIcon } from '@atlaskit/icon/core/information-circle';

package/dist/es2019/ui/icons/PlusIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as PlusIcon } from '@atlaskit/icon/core/plus-square';

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export { AddIcon } from './ui/icons/AddIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';
+export { DefineIcon } from './ui/icons/DefineIcon';
 export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
 export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
 export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
@@ -68,6 +69,7 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
+export { PlusIcon } from './ui/icons/PlusIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/esm/ui/ResponsiveContainer.compiled.css

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -12,7 +12,8 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -63,4 +64,14 @@ export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export var ResponsiveWrapper = function ResponsiveWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

package/dist/esm/ui/Toolbar.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/esm/ui/Toolbar.js

@@ -7,24 +7,33 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  var isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  var toolbar = /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

package/dist/esm/ui/ToolbarButton.js

@@ -25,7 +25,8 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
-    label = _ref.label;
+    label = _ref.label,
+    interactionName = _ref.interactionName;
   var _useToolbarUI = useToolbarUI(),
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
     ctxDisabled = _useToolbarUI.isDisabled;
@@ -50,6 +51,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
         event.preventDefault();
       }
     },
-    "data-toolbar-component": "button"
+    "data-toolbar-component": "button",
+    interactionName: interactionName
   }, iconBefore, children);
 });

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -44,6 +44,8 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
+    _ref2$shouldTitleWrap = _ref2.shouldTitleWrap,
+    shouldTitleWrap = _ref2$shouldTitleWrap === void 0 ? true : _ref2$shouldTitleWrap,
     testId = _ref2.testId,
     ariaKeyshortcuts = _ref2.ariaKeyshortcuts,
     href = _ref2.href,
@@ -70,6 +72,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     rel: rel,
     component: href && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) ? undefined : CustomDropdownMenuItemButton,
     testId: testId,
-    "data-toolbar-component": "menu-item"
+    "data-toolbar-component": "menu-item",
+    shouldTitleWrap: shouldTitleWrap
   }, children);
 };

package/dist/esm/ui/ToolbarDropdownItemSection.js

@@ -3,10 +3,12 @@ import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 export var ToolbarDropdownItemSection = function ToolbarDropdownItemSection(_ref) {
   var children = _ref.children,
     hasSeparator = _ref.hasSeparator,
-    title = _ref.title;
+    title = _ref.title,
+    testId = _ref.testId;
   return /*#__PURE__*/React.createElement(DropdownItemGroup, {
     hasSeparator: hasSeparator,
     title: title,
-    "data-toolbar-component": "menu-section"
+    "data-toolbar-component": "menu-section",
+    testId: testId
   }, children);
 };

package/dist/esm/ui/ToolbarTooltip.js

@@ -4,9 +4,11 @@ export var ToolbarTooltip = function ToolbarTooltip(_ref) {
   var content = _ref.content,
     children = _ref.children,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    delay = _ref.delay;
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
-    position: position
+    position: position,
+    delay: delay
   }, children);
 };

package/dist/esm/ui/icons/DefineIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as DefineIcon } from '@atlaskit/icon/core/information-circle';

package/dist/esm/ui/icons/PlusIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as PlusIcon } from '@atlaskit/icon/core/plus-square';

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ export { AddIcon } from './ui/icons/AddIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';
+export { DefineIcon } from './ui/icons/DefineIcon';
 export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
 export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
 export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
@@ -67,6 +68,7 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
+export { PlusIcon } from './ui/icons/PlusIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';

package/dist/types/ui/ResponsiveContainer.d.ts

@@ -52,3 +52,9 @@ export type ResponsiveContainerProps = {
  * @returns A Box component with container query styles applied
  */
 export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export declare const ResponsiveWrapper: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/types/ui/Toolbar.d.ts

@@ -11,6 +11,8 @@ type ToolbarProps = {
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;

package/dist/types/ui/ToolbarButton.d.ts

@@ -4,6 +4,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     ariaKeyshortcuts?: string;
     children?: ReactNode;
     iconBefore: React.ReactNode;
+    interactionName?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     label?: string;

package/dist/types/ui/ToolbarDropdownItem.d.ts

@@ -18,10 +18,11 @@ type ToolbarDropdownItemProps = {
     isSelected?: boolean;
     onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     rel?: string;
+    shouldTitleWrap?: boolean;
     target?: string;
     testId?: string;
     textStyle?: TextStyle;
     triggerRef?: Ref<HTMLButtonElement>;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownItemSection.d.ts

@@ -2,7 +2,8 @@ import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
     hasSeparator?: boolean;
+    testId?: string;
     title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, testId, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarTooltip.d.ts

@@ -3,7 +3,8 @@ import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
     children: React.ReactNode;
     content: React.ReactNode;
+    delay?: number;
     position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position, delay }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/DefineIcon.d.ts

@@ -0,0 +1 @@
+export { default as DefineIcon } from '@atlaskit/icon/core/information-circle';

package/dist/types/ui/icons/PlusIcon.d.ts

@@ -0,0 +1 @@
+export { default as PlusIcon } from '@atlaskit/icon/core/plus-square';

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

@@ -29,6 +29,7 @@ export { AddIcon } from './ui/icons/AddIcon';
 export { AppsIcon } from './ui/icons/AppsIcon';
 export { BoldIcon } from './ui/icons/BoldIcon';
 export { CommentIcon } from './ui/icons/CommentIcon';
+export { DefineIcon } from './ui/icons/DefineIcon';
 export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
 export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
 export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
@@ -67,6 +68,7 @@ export { UndoIcon } from './ui/icons/UndoIcon';
 export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
+export { PlusIcon } from './ui/icons/PlusIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent } from './types';

package/dist/types-ts4.5/ui/ResponsiveContainer.d.ts

@@ -52,3 +52,9 @@ export type ResponsiveContainerProps = {
  * @returns A Box component with container query styles applied
  */
 export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export declare const ResponsiveWrapper: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -11,6 +11,8 @@ type ToolbarProps = {
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;

package/dist/types-ts4.5/ui/ToolbarButton.d.ts

@@ -4,6 +4,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     ariaKeyshortcuts?: string;
     children?: ReactNode;
     iconBefore: React.ReactNode;
+    interactionName?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     label?: string;

package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts

@@ -18,10 +18,11 @@ type ToolbarDropdownItemProps = {
     isSelected?: boolean;
     onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
     rel?: string;
+    shouldTitleWrap?: boolean;
     target?: string;
     testId?: string;
     textStyle?: TextStyle;
     triggerRef?: Ref<HTMLButtonElement>;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownItemSection.d.ts

@@ -2,7 +2,8 @@ import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
     hasSeparator?: boolean;
+    testId?: string;
     title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, testId, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts

@@ -3,7 +3,8 @@ import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
     children: React.ReactNode;
     content: React.ReactNode;
+    delay?: number;
     position?: PositionType;
 };
-export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
+export declare const ToolbarTooltip: ({ content, children, position, delay }: ToolbarTooltipProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/DefineIcon.d.ts

@@ -0,0 +1 @@
+export { default as DefineIcon } from '@atlaskit/icon/core/information-circle';

package/dist/types-ts4.5/ui/icons/PlusIcon.d.ts

@@ -0,0 +1 @@
+export { default as PlusIcon } from '@atlaskit/icon/core/plus-square';

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.8.5",
+	"version": "0.8.7",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -31,7 +31,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/tmp-editor-statsig": "^12.10.0",
+		"@atlaskit/tmp-editor-statsig": "^12.18.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",