@atlaskit/editor-toolbar 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-toolbar
 
+## 0.6.1
+
+### Patch Changes
+
+- [`36e649e4988d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36e649e4988d3) -
+  [ux] ED-29072 close all menus on nested menu item clicked
+- Updated dependencies
+
+## 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

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() {
@@ -376,6 +388,12 @@ Object.defineProperty(exports, "ToolbarDropdownMenu", {
     return _ToolbarDropdownMenu.ToolbarDropdownMenu;
   }
 });
+Object.defineProperty(exports, "ToolbarDropdownMenuProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider;
+  }
+});
 Object.defineProperty(exports, "ToolbarKeyboardShortcutHint", {
   enumerable: true,
   get: function get() {
@@ -448,6 +466,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 @@
 
 ._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: "_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/ToolbarDropdownItem.js

@@ -13,6 +13,7 @@ var _css = require("@atlaskit/css");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+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 = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
@@ -56,8 +57,14 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     href = _ref2.href,
     target = _ref2.target,
     rel = _ref2.rel;
+  var parentContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenuNew)();
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
-    onClick: onClick,
+    onClick: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? function (e) {
+      if (!hasNestedDropdownMenu) {
+        parentContext === null || parentContext === void 0 || parentContext.closeMenu();
+      }
+      onClick === null || onClick === void 0 || onClick(e);
+    } : onClick,
     elemBefore: elemBefore,
     elemAfter: elemAfter,
     isSelected: isSelected,

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,
@@ -28,23 +31,20 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
     label = _ref.label;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
-  var _useToolbarDropdownMe = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)(),
-    closeMenu = _useToolbarDropdownMe.closeMenu,
-    isOpen = _useToolbarDropdownMe.isOpen,
-    openMenu = _useToolbarDropdownMe.openMenu;
+  var menuContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
   var handleOpenChange = (0, _react.useCallback)(function (args) {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   var handleClick = (0, _react.useCallback)(function () {
-    if (!isOpen) {
-      openMenu();
+    if (!(menuContext !== null && menuContext !== void 0 && menuContext.isOpen)) {
+      menuContext === null || menuContext === void 0 || menuContext.openMenu();
     } else {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, openMenu, isOpen]);
+  }, [menuContext]);
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
@@ -66,7 +66,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
       });
     },
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
@@ -76,13 +76,26 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     testId = _ref2.testId,
     label = _ref2.label,
     _ref2$hasSectionMargi = _ref2.hasSectionMargin,
-    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
-  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])
-  }, children)));
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
+    _ref2$enableMaxHeight = _ref2.enableMaxHeight,
+    enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__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));
+  } else {
+    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])
+    }, children)));
+  }
 };

package/dist/cjs/ui/ToolbarDropdownMenuContext.js

@@ -5,18 +5,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToolbarDropdownMenu = exports.ToolbarDropdownMenuProvider = void 0;
+exports.useToolbarDropdownMenuOld = exports.useToolbarDropdownMenuNew = exports.useToolbarDropdownMenu = exports.ToolbarDropdownMenuProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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 ToolbarDropdownMenuContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+var useToolbarDropdownMenuOld = exports.useToolbarDropdownMenuOld = function useToolbarDropdownMenuOld() {
   var context = (0, _react.useContext)(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+var useToolbarDropdownMenuNew = exports.useToolbarDropdownMenuNew = function useToolbarDropdownMenuNew() {
+  return (0, _react.useContext)(ToolbarDropdownMenuContext);
+};
+var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true);
+}, useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 var ToolbarDropdownMenuProvider = exports.ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
   var children = _ref.children;
   var _useState = (0, _react.useState)(false),

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

@@ -10,7 +10,9 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider } 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 @@
 
 ._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: "_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",