@atlaskit/editor-toolbar 0.17.4 → 0.17.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-toolbar
 
+## 0.17.6
+
+### Patch Changes
+
+- [`fd59b4b1d712d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd59b4b1d712d) -
+  [ux] ED-29573 Improve JSM comment responsiveness
+
+## 0.17.5
+
+### Patch Changes
+
+- [`8263f21e34dff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8263f21e34dff) -
+  [ux] ED-29646 Implement ResponsiveContainer breakpoint preset system
+
 ## 0.17.4
 
 ### Patch Changes

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

@@ -14,11 +14,14 @@
 @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){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 320px){._1jfeglyw._1jfeglyw .show-above-sm{display:none}._5rhr1ule._5rhr1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 460px){._1uedglyw._1uedglyw .show-above-md{display:none}._r2zg1ule._r2zg1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 590px){._1amcglyw._1amcglyw .show-above-lg{display:none}._1ya51ule._1ya51ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .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}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -13,15 +13,35 @@ require("./ResponsiveContainer.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_1jfeglyw _5rhr1ule _1uedglyw _r2zg1ule _1amcglyw _1ya51ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+var presetStyleMap = {
+  fullpage: styles.fullpage,
+  reduced: styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -62,12 +82,21 @@ var styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
+    breakpointPreset = _ref.breakpointPreset,
     reducedBreakpoints = _ref.reducedBreakpoints;
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: (0, _css.cx)(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

package/dist/cjs/ui/Toolbar.js

@@ -80,9 +80,11 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref) {
 var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
     label = _ref2.label,
+    breakpointPreset = _ref2.breakpointPreset,
     reducedBreakpoints = _ref2.reducedBreakpoints;
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

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

@@ -14,11 +14,14 @@
 @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){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 320px){._1jfeglyw._1jfeglyw .show-above-sm{display:none}._5rhr1ule._5rhr1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 460px){._1uedglyw._1uedglyw .show-above-md{display:none}._r2zg1ule._r2zg1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 590px){._1amcglyw._1amcglyw .show-above-lg{display:none}._1ya51ule._1ya51ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .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}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -6,15 +6,35 @@ import "./ResponsiveContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_1jfeglyw _5rhr1ule _1uedglyw _r2zg1ule _1amcglyw _1ya51ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+const presetStyleMap = {
+  fullpage: styles.fullpage,
+  reduced: styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -55,13 +75,22 @@ const styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 export const ResponsiveContainer = ({
   children,
+  breakpointPreset,
   reducedBreakpoints
 }) => {
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

package/dist/es2019/ui/Toolbar.js

@@ -77,10 +77,12 @@ export const Toolbar = ({
 export const PrimaryToolbar = ({
   children,
   label,
+  breakpointPreset,
   reducedBreakpoints
 }) => {
   if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

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

@@ -14,11 +14,14 @@
 @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){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 320px){._1jfeglyw._1jfeglyw .show-above-sm{display:none}._5rhr1ule._5rhr1ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
+@container toolbar-container (max-width: 460px){._1uedglyw._1uedglyw .show-above-md{display:none}._r2zg1ule._r2zg1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{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: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 590px){._1amcglyw._1amcglyw .show-above-lg{display:none}._1ya51ule._1ya51ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .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}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -6,15 +6,35 @@ import "./ResponsiveContainer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  fullpage: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  reduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jiraIssue: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  jsmComment: "_1jfeglyw _5rhr1ule _1uedglyw _r2zg1ule _1amcglyw _1ya51ule _19x4glyw _qck01ule",
+  confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
   responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
+
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+
+// Map preset names to camelCase style keys
+var presetStyleMap = {
+  fullpage: styles.fullpage,
+  reduced: styles.reduced,
+  'jira-issue': styles.jiraIssue,
+  'jsm-comment': styles.jsmComment,
+  'confluence-comment': styles.confluenceComment
+};
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -55,12 +75,21 @@ var styles = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
 export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   var children = _ref.children,
+    breakpointPreset = _ref.breakpointPreset,
     reducedBreakpoints = _ref.reducedBreakpoints;
+  // Use new preset-based logic when preset is provided and feature gate is enabled
+  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
+    }, children);
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);

package/dist/esm/ui/Toolbar.js

@@ -73,9 +73,11 @@ export var Toolbar = function Toolbar(_ref) {
 export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
     label = _ref2.label,
+    breakpointPreset = _ref2.breakpointPreset,
     reducedBreakpoints = _ref2.reducedBreakpoints;
   if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
     return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      breakpointPreset: breakpointPreset,
       reducedBreakpoints: reducedBreakpoints
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),

package/dist/types/index.d.ts

@@ -11,7 +11,7 @@ export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
-export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { ResponsiveContainer, type BreakpointPreset } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';

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

@@ -1,9 +1,26 @@
 import React, { type ReactNode } from 'react';
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+export type BreakpointPreset = 'fullpage' | 'reduced' | 'jira-issue' | 'jsm-comment' | 'confluence-comment';
 export type ResponsiveContainerProps = {
-    children: ReactNode;
     /**
-     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     * Selects the breakpoint preset for the responsive container.
+     *
+     * Available presets:
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
+     * - 'jira-issue': (210, 408, 575, 1024) - Jira issue view and similar contexts
+     * - 'jsm-comment': (210, 408, 550, 1024) - JSM comment editor with canned responses button
+     * - 'confluence-comment': (210, 408, 648, 1024) - Confluence comment editor and inline contexts
      *
+     * @default 'fullpage'
+     */
+    breakpointPreset?: BreakpointPreset;
+    children: ReactNode;
+    /**
+     * Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
      * Usages - for smaller editors such as comments
      */
     reducedBreakpoints?: boolean;
@@ -48,10 +65,12 @@ export type ResponsiveContainerProps = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
-export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+export declare const ResponsiveContainer: ({ children, breakpointPreset, reducedBreakpoints, }: ResponsiveContainerProps) => React.JSX.Element;
 /**
  * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
  */

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

@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, breakpointPreset, reducedBreakpoints, }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

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

@@ -11,7 +11,7 @@ export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
-export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { ResponsiveContainer, type BreakpointPreset } from './ui/ResponsiveContainer';
 export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';

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

@@ -1,9 +1,26 @@
 import React, { type ReactNode } from 'react';
+/**
+ * Breakpoint preset names for ResponsiveContainer.
+ * Each preset defines a specific set of breakpoints optimized for different use cases.
+ */
+export type BreakpointPreset = 'fullpage' | 'reduced' | 'jira-issue' | 'jsm-comment' | 'confluence-comment';
 export type ResponsiveContainerProps = {
-    children: ReactNode;
     /**
-     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     * Selects the breakpoint preset for the responsive container.
+     *
+     * Available presets:
+     * - 'fullpage': (410, 476, 768, 1024) - Editor full-page experiences
+     * - 'reduced': (210, 408, 575, 1024) - Default compact toolbars, constrained layouts
+     * - 'jira-issue': (210, 408, 575, 1024) - Jira issue view and similar contexts
+     * - 'jsm-comment': (210, 408, 550, 1024) - JSM comment editor with canned responses button
+     * - 'confluence-comment': (210, 408, 648, 1024) - Confluence comment editor and inline contexts
      *
+     * @default 'fullpage'
+     */
+    breakpointPreset?: BreakpointPreset;
+    children: ReactNode;
+    /**
+     * Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
      * Usages - for smaller editors such as comments
      */
     reducedBreakpoints?: boolean;
@@ -48,10 +65,12 @@ export type ResponsiveContainerProps = {
  * </ResponsiveContainer>
  * ```
  *
- * @param children - React nodes to render within the responsive container context
+ * @param preset - Selects the breakpoint preset for the responsive container
+ *
+ * @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
  * @returns A Box component with container query styles applied
  */
-export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+export declare const ResponsiveContainer: ({ children, breakpointPreset, reducedBreakpoints, }: ResponsiveContainerProps) => React.JSX.Element;
 /**
  * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
  */

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

@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, breakpointPreset, reducedBreakpoints, }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.17.4",
+	"version": "0.17.6",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -33,9 +33,9 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tmp-editor-statsig": "^13.35.0",
+		"@atlaskit/tmp-editor-statsig": "^13.38.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tooltip": "^20.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"chromatism": "^2.6.0"
@@ -89,6 +89,9 @@
 	"platform-feature-flags": {
 		"platform_editor_toolbar_aifc_patch_7": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_aifc_responsive_improve": {
+			"type": "boolean"
 		}
 	}
 }