@atlaskit/editor-toolbar 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-toolbar
 
+## 0.6.0
+
+### Minor Changes
+
+- [`51f3f2db61f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51f3f2db61f6e) -
+  Add ranks and keys for new collapsed text section component, add responsive container to
+  PrimaryToolbar export with new query selectors to hide empty elements, export types
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.5.1
+
+### Patch Changes
+
+- [`ef3b2dfa2f8a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef3b2dfa2f8a8) -
+  Internal changes to use radius tokens. No visual changes.
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -286,6 +286,18 @@ Object.defineProperty(exports, "RedoIcon", {
     return _RedoIcon.RedoIcon;
   }
 });
+Object.defineProperty(exports, "ResponsiveContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveContainer.ResponsiveContainer;
+  }
+});
+Object.defineProperty(exports, "Show", {
+  enumerable: true,
+  get: function get() {
+    return _Show.Show;
+  }
+});
 Object.defineProperty(exports, "ShowMoreHorizontalIcon", {
   enumerable: true,
   get: function get() {
@@ -448,6 +460,8 @@ var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
 var _ToolbarColorSwatch = require("./ui/ToolbarColorSwatch");
 var _ToolbarDropdownMenuContext = require("./ui/ToolbarDropdownMenuContext");
+var _ResponsiveContainer = require("./ui/ResponsiveContainer");
+var _Show = require("./ui/Show");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");

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

@@ -0,0 +1,12 @@
+._1bsb1osq{width:100%}
+._1bx91ule .show-above-lg, ._1ehg1ule .show-above-md, ._1onx1ule .show-above-sm, ._1xt01ule .show-above-xl{display:block}
+._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 toolbar-container (max-width: 1024px){._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}}
+@container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .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: 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: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -0,0 +1,71 @@
+/* ResponsiveContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-container-queries */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResponsiveContainer = void 0;
+require("./ResponsiveContainer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+};
+/**
+ * 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
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
+  var children = _ref.children,
+    reducedBreakpoints = _ref.reducedBreakpoints;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+  }, children);
+};

package/dist/cjs/ui/Show.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Show = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop */
+
+/**
+ * Generate a className based on the breakpoints provided.
+ *
+ * **Warning** - must much classnames defined in ResponsiveContainer.tsx
+ * @param above - The breakpoint to show the element above.
+ * @param below - The breakpoint to show the element below.
+ * @returns The className to apply to the element.
+ */
+var generateClassName = function generateClassName(above, below) {
+  if (above) {
+    return "show-above-".concat(above);
+  }
+  if (below) {
+    return "show-below-".concat(below);
+  }
+  return;
+};
+
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+var Show = exports.Show = function Show(_ref) {
+  var children = _ref.children,
+    above = _ref.above,
+    below = _ref.below;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: generateClassName(above, below)
+  }, children);
+};

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

@@ -1,10 +1,12 @@
 
-._2rkoi2wt{border-radius:6px}
+._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)}
+._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}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -1,4 +1,6 @@
 /* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -11,10 +13,13 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _ResponsiveContainer = require("./ResponsiveContainer");
 var styles = {
-  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg"
+  primaryToolbar: "_bfhkvuon _1tkezwfg",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -23,18 +28,27 @@ 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),
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
 };
-
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
 var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
-    label = _ref2.label;
+    label = _ref2.label,
+    reducedBreakpoints = _ref2.reducedBreakpoints;
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveContainer, {
+      reducedBreakpoints: reducedBreakpoints
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
+      role: "toolbar",
+      "aria-label": label
+    }, children));
+  }
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",

package/dist/cjs/ui/ToolbarButton.js

@@ -57,6 +57,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
       if (preventDefaultOnMouseDown) {
         event.preventDefault();
       }
-    }
+    },
+    "data-toolbar-component": "button"
   }, iconBefore, children);
 });

package/dist/cjs/ui/ToolbarButtonGroup.js

@@ -24,7 +24,8 @@ var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGrou
   var LastChild = items.at(-1);
   var middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.firstChild])
   }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {

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

@@ -1,2 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -10,7 +10,9 @@ exports.ToolbarDropdownMenu = void 0;
 require("./ToolbarDropdownMenu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _uiContext = require("../hooks/ui-context");
 var _ToolbarButton = require("./ToolbarButton");
@@ -18,7 +20,8 @@ var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   sectionMargin: "_1mou1b66",
-  firstSectionSeparator: "_18l8n7od"
+  firstSectionSeparator: "_18l8n7od",
+  scrollContainer: "_c71lnklw _18m91wug"
 };
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
@@ -76,13 +79,15 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     testId = _ref2.testId,
     label = _ref2.label,
     _ref2$hasSectionMargi = _ref2.hasSectionMargin,
-    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
+    _ref2$enableMaxHeight = _ref2.enableMaxHeight,
+    enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
   return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([hasSectionMargin && styles.sectionMargin, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
   }, children)));
 };

package/dist/cjs/ui/ToolbarSection.js

@@ -22,7 +22,8 @@ var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
     hasSeparator = _ref.hasSeparator;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.container),
-    testId: testId
+    testId: testId,
+    "data-toolbar-component": "section"
   }, hasSeparator && /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
   }), children);

package/dist/es2019/index.js

@@ -11,6 +11,8 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -0,0 +1,12 @@
+._1bsb1osq{width:100%}
+._1bx91ule .show-above-lg, ._1ehg1ule .show-above-md, ._1onx1ule .show-above-sm, ._1xt01ule .show-above-xl{display:block}
+._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 toolbar-container (max-width: 1024px){._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}}
+@container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .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: 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: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -0,0 +1,65 @@
+/* ResponsiveContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-container-queries */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+import "./ResponsiveContainer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+};
+/**
+ * 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
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+export const ResponsiveContainer = ({
+  children,
+  reducedBreakpoints
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+  }, children);
+};

package/dist/es2019/ui/Show.js

@@ -0,0 +1,36 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop */
+import React from 'react';
+/**
+ * Generate a className based on the breakpoints provided.
+ *
+ * **Warning** - must much classnames defined in ResponsiveContainer.tsx
+ * @param above - The breakpoint to show the element above.
+ * @param below - The breakpoint to show the element below.
+ * @returns The className to apply to the element.
+ */
+const generateClassName = (above, below) => {
+  if (above) {
+    return `show-above-${above}`;
+  }
+  if (below) {
+    return `show-below-${below}`;
+  }
+  return;
+};
+
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+export const Show = ({
+  children,
+  above,
+  below
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: generateClassName(above, below)
+  }, children);
+};

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

@@ -1,10 +1,12 @@
 
-._2rkoi2wt{border-radius:6px}
+._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)}
+._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}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -1,13 +1,18 @@
 /* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 import "./Toolbar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
 const styles = {
-  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg"
+  primaryToolbar: "_bfhkvuon _1tkezwfg",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -17,19 +22,28 @@ export const Toolbar = ({
   label
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar),
+    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
 };
-
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
 export const PrimaryToolbar = ({
   children,
-  label
+  label,
+  reducedBreakpoints
 }) => {
+  if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      reducedBreakpoints: reducedBreakpoints
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
+      role: "toolbar",
+      "aria-label": label
+    }, children));
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",

package/dist/es2019/ui/ToolbarButton.js

@@ -51,6 +51,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
       if (preventDefaultOnMouseDown) {
         event.preventDefault();
       }
-    }
+    },
+    "data-toolbar-component": "button"
   }, iconBefore, children);
 });

package/dist/es2019/ui/ToolbarButtonGroup.js

@@ -17,7 +17,8 @@ export const ToolbarButtonGroup = ({
   const LastChild = items.at(-1);
   const middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.firstChild])
   }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {

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

@@ -1,2 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -2,14 +2,17 @@
 import "./ToolbarDropdownMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
+import { cx } from '@compiled/react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 const styles = {
   sectionMargin: "_1mou1b66",
-  firstSectionSeparator: "_18l8n7od"
+  firstSectionSeparator: "_18l8n7od",
+  scrollContainer: "_c71lnklw _18m91wug"
 };
 const ToolbarDropdownMenuContent = ({
   iconBefore,
@@ -67,14 +70,15 @@ export const ToolbarDropdownMenu = ({
   isDisabled,
   testId,
   label,
-  hasSectionMargin = true
+  hasSectionMargin = true,
+  enableMaxHeight = false
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
   }, children)));
 };

package/dist/es2019/ui/ToolbarSection.js

@@ -15,7 +15,8 @@ export const ToolbarSection = ({
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.container),
-    testId: testId
+    testId: testId,
+    "data-toolbar-component": "section"
   }, hasSeparator && /*#__PURE__*/React.createElement("div", {
     className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
   }), children);

package/dist/esm/index.js

@@ -11,6 +11,8 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -0,0 +1,12 @@
+._1bsb1osq{width:100%}
+._1bx91ule .show-above-lg, ._1ehg1ule .show-above-md, ._1onx1ule .show-above-sm, ._1xt01ule .show-above-xl{display:block}
+._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 toolbar-container (max-width: 1024px){._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}}
+@container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .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: 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: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -0,0 +1,64 @@
+/* ResponsiveContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-container-queries */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+import "./ResponsiveContainer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
+  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
+  responsiveRulesReduced: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+};
+/**
+ * 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
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+export var ResponsiveContainer = function ResponsiveContainer(_ref) {
+  var children = _ref.children,
+    reducedBreakpoints = _ref.reducedBreakpoints;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+  }, children);
+};

package/dist/esm/ui/Show.js

@@ -0,0 +1,35 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop */
+import React from 'react';
+/**
+ * Generate a className based on the breakpoints provided.
+ *
+ * **Warning** - must much classnames defined in ResponsiveContainer.tsx
+ * @param above - The breakpoint to show the element above.
+ * @param below - The breakpoint to show the element below.
+ * @returns The className to apply to the element.
+ */
+var generateClassName = function generateClassName(above, below) {
+  if (above) {
+    return "show-above-".concat(above);
+  }
+  if (below) {
+    return "show-below-".concat(below);
+  }
+  return;
+};
+
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+export var Show = function Show(_ref) {
+  var children = _ref.children,
+    above = _ref.above,
+    below = _ref.below;
+  return /*#__PURE__*/React.createElement("div", {
+    className: generateClassName(above, below)
+  }, children);
+};

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

@@ -1,10 +1,12 @@
 
-._2rkoi2wt{border-radius:6px}
+._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)}
+._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}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._fy9oglyw [data-toolbar-component=section]:not(:has([data-toolbar-component=button])){display:none}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -1,13 +1,18 @@
 /* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 import "./Toolbar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
 var styles = {
-  toolbarBase: "_2rkoi2wt _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbarBase: "_2rko1qi0 _zulp1b66 _bfhkvuon _1e0c1txw _4cvr1h6o",
   toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
-  primaryToolbar: "_bfhkvuon _1tkezwfg"
+  primaryToolbar: "_bfhkvuon _1tkezwfg",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -16,18 +21,27 @@ export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar),
+    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
 };
-
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
 export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
   var children = _ref2.children,
-    label = _ref2.label;
+    label = _ref2.label,
+    reducedBreakpoints = _ref2.reducedBreakpoints;
+  if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ResponsiveContainer, {
+      reducedBreakpoints: reducedBreakpoints
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
+      role: "toolbar",
+      "aria-label": label
+    }, children));
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",

package/dist/esm/ui/ToolbarButton.js

@@ -49,6 +49,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       if (preventDefaultOnMouseDown) {
         event.preventDefault();
       }
-    }
+    },
+    "data-toolbar-component": "button"
   }, iconBefore, children);
 });

package/dist/esm/ui/ToolbarButtonGroup.js

@@ -16,7 +16,8 @@ export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
   var LastChild = items.at(-1);
   var middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.firstChild])
   }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {

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

@@ -1,2 +1,4 @@
 
-._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._1mou1b66{margin-block:var(--ds-space-050,4px)}._18l8n7od [data-section]:first-of-type{border-block-start:unset}
+._18m91wug{overflow-y:auto}
+._c71lnklw{max-height:20pc}

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -2,14 +2,17 @@
 import "./ToolbarDropdownMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
+import { cx } from '@compiled/react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 var styles = {
   sectionMargin: "_1mou1b66",
-  firstSectionSeparator: "_18l8n7od"
+  firstSectionSeparator: "_18l8n7od",
+  scrollContainer: "_c71lnklw _18m91wug"
 };
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
@@ -67,13 +70,15 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
     testId = _ref2.testId,
     label = _ref2.label,
     _ref2$hasSectionMargi = _ref2.hasSectionMargin,
-    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
+    _ref2$enableMaxHeight = _ref2.enableMaxHeight,
+    enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax([hasSectionMargin && styles.sectionMargin, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
   }, children)));
 };

package/dist/esm/ui/ToolbarSection.js

@@ -14,7 +14,8 @@ export var ToolbarSection = function ToolbarSection(_ref) {
     hasSeparator = _ref.hasSeparator;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.container),
-    testId: testId
+    testId: testId,
+    "data-toolbar-component": "section"
   }, hasSeparator && /*#__PURE__*/React.createElement("div", {
     className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
   }), children);

package/dist/types/index.d.ts

@@ -10,6 +10,8 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -0,0 +1,54 @@
+import React, { type ReactNode } from 'react';
+export type ResponsiveContainerProps = {
+    children: ReactNode;
+    /**
+     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     *
+     * Usages - for smaller editors such as comments
+     */
+    reducedBreakpoints?: boolean;
+};
+/**
+ * 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
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+import React, { type ReactNode } from 'react';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+type AboveProp = {
+    above: Breakpoint;
+    below?: never;
+};
+type BelowProp = {
+    above?: never;
+    below: Breakpoint;
+};
+type ShowProps = {
+    children: ReactNode;
+} & (AboveProp | BelowProp);
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+export declare const Show: ({ children, above, below }: ShowProps) => React.JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -12,8 +13,9 @@ type ToolbarProps = {
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+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 }: ToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

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

@@ -5,6 +5,10 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownMenuProps = {
     children?: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     /**
      * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
      */
@@ -14,5 +18,5 @@ type ToolbarDropdownMenuProps = {
     label?: string;
     testId?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

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

@@ -10,6 +10,8 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -0,0 +1,54 @@
+import React, { type ReactNode } from 'react';
+export type ResponsiveContainerProps = {
+    children: ReactNode;
+    /**
+     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     *
+     * Usages - for smaller editors such as comments
+     */
+    reducedBreakpoints?: boolean;
+};
+/**
+ * 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
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+import React, { type ReactNode } from 'react';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+type AboveProp = {
+    above: Breakpoint;
+    below?: never;
+};
+type BelowProp = {
+    above?: never;
+    below: Breakpoint;
+};
+type ShowProps = {
+    children: ReactNode;
+} & (AboveProp | BelowProp);
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+export declare const Show: ({ children, above, below }: ShowProps) => React.JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -12,8 +13,9 @@ type ToolbarProps = {
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+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 }: ToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

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

@@ -5,6 +5,10 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownMenuProps = {
     children?: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     /**
      * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
      */
@@ -14,5 +18,5 @@ type ToolbarDropdownMenuProps = {
     label?: string;
     testId?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -30,7 +30,7 @@
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.12.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^11.11.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",