@atlaskit/editor-toolbar 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-toolbar
 
+## 1.9.1
+
+### Patch Changes
+
+- [`a58a80f7cd055`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a58a80f7cd055) -
+  [ux] increase fullpage editor toolbar viewpoint widths for lg and xl
+
+## 1.9.0
+
+### Minor Changes
+
+- [`450368a4cccf5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/450368a4cccf5) -
+  Support optional shouldIgnoreCloseEvent prop in ToolbarNestedDropdownMenu.
+
+### Patch Changes
+
+- [`4f322a101cf47`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f322a101cf47) -
+  Adds a disabledWithoutInteractionLogic prop to the toolbar to selectively enable some buttons
+  before editor interaction
+- Updated dependencies
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/cjs/hooks/ui-context.js

@@ -11,6 +11,7 @@ var ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
+  disabledWithoutInteractionLogic: false,
   popupsMountPoint: undefined,
   fireAnalyticsEvent: undefined,
   keyboardNavigation: undefined
@@ -31,6 +32,7 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
     preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
     isDisabled = _ref.isDisabled,
+    disabledWithoutInteractionLogic = _ref.disabledWithoutInteractionLogic,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
@@ -42,6 +44,7 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
       onDropdownOpenChanged: onDropdownOpenChanged,
       preventDefaultOnMouseDown: preventDefaultOnMouseDown,
       isDisabled: isDisabled,
+      disabledWithoutInteractionLogic: disabledWithoutInteractionLogic,
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,

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

@@ -18,6 +18,8 @@
 @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: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 1125px){._1nfkglyw .show-above-lg{display:none}._wne21ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 1231px){._aw2dglyw .show-above-xl{display:none}._1gtx1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
@@ -37,6 +39,8 @@
 @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
 @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
+@container toolbar-container (min-width: 1126px) and (max-width: 1231px){._1mri1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 1232px){._17b71ule .show-only-xl{display:block}}
 @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
@@ -55,6 +59,7 @@
 @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 722px) and (max-width: 1125px){._gbo31ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -19,6 +19,7 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
+  fullpageUpdated: "_1nfkglyw _wne21ule _aw2dglyw _1gtx1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _1mri1ule _17b71ule _1btx1ule _gbo31ule",
   reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
@@ -41,6 +42,7 @@ var presetStyleMap = {
   'confluence-comment': styles.confluenceComment
 };
 var updatedPresetStyleMap = {
+  fullpage: styles.fullpageUpdated,
   'jira-issue': styles.jiraIssueUpdated,
   'jsm-comment': styles.jsmCommentUpdated
 };
@@ -90,7 +92,12 @@ var updatedPresetStyleMap = {
 var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
     breakpointPreset = _ref.breakpointPreset;
-  var isUpdatedConfig = (0, _expValEquals.expValEquals)('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  var isUpdatedConfig = function () {
+    if (breakpointPreset === 'fullpage') {
+      return (0, _expValEquals.expValEquals)('platform_editor_ai_improve_formatting_toolbar', 'isEnabled', true);
+    }
+    return (0, _expValEquals.expValEquals)('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  }();
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
   }, children);

package/dist/cjs/ui/ToolbarButton.js

@@ -35,11 +35,14 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ignoreInteractionDisabled = _ref.ignoreInteractionDisabled;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
-    ctxDisabled = _useToolbarUI.isDisabled;
-  var disabled = Boolean(ctxDisabled || isDisabled);
+    ctxDisabled = _useToolbarUI.isDisabled,
+    disabledWithoutInteractionLogic = _useToolbarUI.disabledWithoutInteractionLogic;
+  // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
+  var disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
     xcss: (0, _css.cx)(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),

package/dist/cjs/ui/ToolbarNestedDropdownMenu.js

@@ -35,11 +35,13 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
     _onClick = _ref.onClick,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldTitleWrap = _ref.shouldTitleWrap,
     tooltipContent = _ref.tooltipContent,
     dataExtensionItemKey = _ref['data-extension-item-key'];
   return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
     shouldFitContainer: shouldFitContainer,
+    shouldIgnoreCloseEvent: (0, _platformFeatureFlags.fg)('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
     placement: "right-start",
     testId: dropdownTestId
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/es2019/hooks/ui-context.js

@@ -3,6 +3,7 @@ const ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: () => {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
+  disabledWithoutInteractionLogic: false,
   popupsMountPoint: undefined,
   fireAnalyticsEvent: undefined,
   keyboardNavigation: undefined
@@ -23,6 +24,7 @@ export const ToolbarUIProvider = ({
   onDropdownOpenChanged,
   preventDefaultOnMouseDown,
   isDisabled,
+  disabledWithoutInteractionLogic,
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
@@ -35,6 +37,7 @@ export const ToolbarUIProvider = ({
       onDropdownOpenChanged,
       preventDefaultOnMouseDown,
       isDisabled,
+      disabledWithoutInteractionLogic,
       popupsMountPoint,
       popupsBoundariesElement,
       popupsScrollableElement,

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

@@ -18,6 +18,8 @@
 @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: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 1125px){._1nfkglyw .show-above-lg{display:none}._wne21ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 1231px){._aw2dglyw .show-above-xl{display:none}._1gtx1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
@@ -37,6 +39,8 @@
 @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
 @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
+@container toolbar-container (min-width: 1126px) and (max-width: 1231px){._1mri1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 1232px){._17b71ule .show-only-xl{display:block}}
 @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
@@ -55,6 +59,7 @@
 @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 722px) and (max-width: 1125px){._gbo31ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -12,6 +12,7 @@ const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
+  fullpageUpdated: "_1nfkglyw _wne21ule _aw2dglyw _1gtx1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _1mri1ule _17b71ule _1btx1ule _gbo31ule",
   reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
@@ -34,6 +35,7 @@ const presetStyleMap = {
   'confluence-comment': styles.confluenceComment
 };
 const updatedPresetStyleMap = {
+  fullpage: styles.fullpageUpdated,
   'jira-issue': styles.jiraIssueUpdated,
   'jsm-comment': styles.jsmCommentUpdated
 };
@@ -84,7 +86,12 @@ export const ResponsiveContainer = ({
   children,
   breakpointPreset
 }) => {
-  const isUpdatedConfig = expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  const isUpdatedConfig = (() => {
+    if (breakpointPreset === 'fullpage') {
+      return expValEquals('platform_editor_ai_improve_formatting_toolbar', 'isEnabled', true);
+    }
+    return expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  })();
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
   }, children);

package/dist/es2019/ui/ToolbarButton.js

@@ -27,13 +27,16 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   isDisabled,
   ariaKeyshortcuts,
   label,
-  interactionName
+  interactionName,
+  ignoreInteractionDisabled
 }, ref) => {
   const {
     preventDefaultOnMouseDown,
-    isDisabled: ctxDisabled
+    isDisabled: ctxDisabled,
+    disabledWithoutInteractionLogic
   } = useToolbarUI();
-  const disabled = Boolean(ctxDisabled || isDisabled);
+  // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
+  const disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),

package/dist/es2019/ui/ToolbarNestedDropdownMenu.js

@@ -24,12 +24,14 @@ export const ToolbarNestedDropdownMenu = ({
   enableMaxHeight = false,
   onClick,
   shouldFitContainer = false,
+  shouldIgnoreCloseEvent,
   shouldTitleWrap,
   tooltipContent,
   'data-extension-item-key': dataExtensionItemKey
 }) => {
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     shouldFitContainer: shouldFitContainer,
+    shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
     placement: "right-start",
     testId: dropdownTestId
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/esm/hooks/ui-context.js

@@ -3,6 +3,7 @@ var ToolbarUIContext = /*#__PURE__*/createContext({
   onDropdownOpenChanged: function onDropdownOpenChanged() {},
   preventDefaultOnMouseDown: false,
   isDisabled: false,
+  disabledWithoutInteractionLogic: false,
   popupsMountPoint: undefined,
   fireAnalyticsEvent: undefined,
   keyboardNavigation: undefined
@@ -23,6 +24,7 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
     onDropdownOpenChanged = _ref.onDropdownOpenChanged,
     preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
     isDisabled = _ref.isDisabled,
+    disabledWithoutInteractionLogic = _ref.disabledWithoutInteractionLogic,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
@@ -34,6 +36,7 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
       onDropdownOpenChanged: onDropdownOpenChanged,
       preventDefaultOnMouseDown: preventDefaultOnMouseDown,
       isDisabled: isDisabled,
+      disabledWithoutInteractionLogic: disabledWithoutInteractionLogic,
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,

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

@@ -18,6 +18,8 @@
 @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: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
+@container toolbar-container (max-width: 1125px){._1nfkglyw .show-above-lg{display:none}._wne21ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 1231px){._aw2dglyw .show-above-xl{display:none}._1gtx1ule .show-below-xl{display:block}}
 @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
@@ -37,6 +39,8 @@
 @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
 @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
+@container toolbar-container (min-width: 1126px) and (max-width: 1231px){._1mri1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 1232px){._17b71ule .show-only-xl{display:block}}
 @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
 @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
@@ -55,6 +59,7 @@
 @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
 @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
+@container toolbar-container (min-width: 722px) and (max-width: 1125px){._gbo31ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
 @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -12,6 +12,7 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
   fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
+  fullpageUpdated: "_1nfkglyw _wne21ule _aw2dglyw _1gtx1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _1mri1ule _17b71ule _1btx1ule _gbo31ule",
   reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
   jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
@@ -34,6 +35,7 @@ var presetStyleMap = {
   'confluence-comment': styles.confluenceComment
 };
 var updatedPresetStyleMap = {
+  fullpage: styles.fullpageUpdated,
   'jira-issue': styles.jiraIssueUpdated,
   'jsm-comment': styles.jsmCommentUpdated
 };
@@ -83,7 +85,12 @@ var updatedPresetStyleMap = {
 export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
     breakpointPreset = _ref.breakpointPreset;
-  var isUpdatedConfig = expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  var isUpdatedConfig = function () {
+    if (breakpointPreset === 'fullpage') {
+      return expValEquals('platform_editor_ai_improve_formatting_toolbar', 'isEnabled', true);
+    }
+    return expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
+  }();
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
   }, children);

package/dist/esm/ui/ToolbarButton.js

@@ -27,11 +27,14 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ignoreInteractionDisabled = _ref.ignoreInteractionDisabled;
   var _useToolbarUI = useToolbarUI(),
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown,
-    ctxDisabled = _useToolbarUI.isDisabled;
-  var disabled = Boolean(ctxDisabled || isDisabled);
+    ctxDisabled = _useToolbarUI.isDisabled,
+    disabledWithoutInteractionLogic = _useToolbarUI.disabledWithoutInteractionLogic;
+  // When ignoreInteractionDisabled=true, only use the disabled state without the interaction check
+  var disabled = Boolean((ignoreInteractionDisabled ? disabledWithoutInteractionLogic : ctxDisabled) || isDisabled);
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),

package/dist/esm/ui/ToolbarNestedDropdownMenu.js

@@ -26,11 +26,13 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
     _onClick = _ref.onClick,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldTitleWrap = _ref.shouldTitleWrap,
     tooltipContent = _ref.tooltipContent,
     dataExtensionItemKey = _ref['data-extension-item-key'];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     shouldFitContainer: shouldFitContainer,
+    shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreCloseEvent : undefined,
     placement: "right-start",
     testId: dropdownTestId
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/types/hooks/ui-context.d.ts

@@ -9,6 +9,12 @@ type AnalyticsEventPayload = {
 };
 type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
 export type ToolbarUIContextType = {
+    /**
+     * True only when the toolbar is disabled from isDisabled.
+     * Excludes disabling under platform_editor_default_toolbar_state, where buttons are
+     * disabled by default until the user interacts with the editor.
+     */
+    disabledWithoutInteractionLogic?: boolean;
     fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Indicates whether the toolbar is disabled when the editor is offline.
@@ -39,5 +45,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, disabledWithoutInteractionLogic, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ export type ResponsiveContainerProps = {
      * Selects the breakpoint preset for the responsive container.
      *
      * Available presets:
-     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences (updated to 410, 476, 1126, 1232 when platform_editor_ai_improve_formatting_toolbar is enabled)
      * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
      * - 'jira-issue': (280, 420, 650, 1024) - Jira issue view and similar contexts
      * - 'jsm-comment': (365, 500, 630, 1024) - JSM comment editor with canned responses button

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

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

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     'data-extension-item-key'?: string;
@@ -15,12 +15,13 @@ type ToolbarNestedDropdownMenuProps = {
      */
     enableMaxHeight?: boolean;
     isDisabled?: boolean;
-    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
     shouldFitContainer?: boolean;
+    shouldIgnoreCloseEvent?: (event: Event | MouseEvent | KeyboardEvent) => boolean;
     shouldTitleWrap?: boolean;
     testId?: string;
     text?: string;
     tooltipContent?: ReactNode;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldIgnoreCloseEvent, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/hooks/ui-context.d.ts

@@ -9,6 +9,12 @@ type AnalyticsEventPayload = {
 };
 type FireAnalyticsEvent = (payload: AnalyticsEventPayload) => void | undefined;
 export type ToolbarUIContextType = {
+    /**
+     * True only when the toolbar is disabled from isDisabled.
+     * Excludes disabling under platform_editor_default_toolbar_state, where buttons are
+     * disabled by default until the user interacts with the editor.
+     */
+    disabledWithoutInteractionLogic?: boolean;
     fireAnalyticsEvent?: FireAnalyticsEvent;
     /**
      * Indicates whether the toolbar is disabled when the editor is offline.
@@ -39,5 +45,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
 type ToolbarUIProviderProps = {
     children: React.ReactNode;
 } & ToolbarUIContextType;
-export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, disabledWithoutInteractionLogic, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, fireAnalyticsEvent, keyboardNavigation, }: ToolbarUIProviderProps) => React.JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ export type ResponsiveContainerProps = {
      * Selects the breakpoint preset for the responsive container.
      *
      * Available presets:
-     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences (updated to 410, 476, 1126, 1232 when platform_editor_ai_improve_formatting_toolbar is enabled)
      * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
      * - 'jira-issue': (280, 420, 650, 1024) - Jira issue view and similar contexts
      * - 'jsm-comment': (365, 500, 630, 1024) - JSM comment editor with canned responses button

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

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

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     'data-extension-item-key'?: string;
@@ -15,12 +15,13 @@ type ToolbarNestedDropdownMenuProps = {
      */
     enableMaxHeight?: boolean;
     isDisabled?: boolean;
-    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
     shouldFitContainer?: boolean;
+    shouldIgnoreCloseEvent?: (event: Event | MouseEvent | KeyboardEvent) => boolean;
     shouldTitleWrap?: boolean;
     testId?: string;
     text?: string;
     tooltipContent?: ReactNode;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldIgnoreCloseEvent, shouldTitleWrap, tooltipContent, "data-extension-item-key": dataExtensionItemKey, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "1.8.1",
+	"version": "1.9.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"react-compiler": {
@@ -31,11 +31,11 @@
 		"@atlaskit/badge": "^18.6.0",
 		"@atlaskit/browser-apis": "^0.0.2",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/dropdown-menu": "^16.9.0",
+		"@atlaskit/dropdown-menu": "^16.10.0",
 		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/icon-lab": "^6.12.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.22.0",
+		"@atlaskit/popup": "^4.23.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/tmp-editor-statsig": "^85.0.0",
 		"@atlaskit/tokens": "^13.1.0",