@atlaskit/editor-toolbar 0.5.1 → 0.6.1

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/ToolbarDropdownItem.js

@@ -6,6 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 const styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -48,8 +49,14 @@ export const ToolbarDropdownItem = ({
   target,
   rel
 }) => {
+  const parentContext = useToolbarDropdownMenuNew();
   return /*#__PURE__*/React.createElement(DropdownItem, {
-    onClick: onClick,
+    onClick: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? e => {
+      if (!hasNestedDropdownMenu) {
+        parentContext === null || parentContext === void 0 ? void 0 : parentContext.closeMenu();
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    } : onClick,
     elemBefore: elemBefore,
     elemAfter: elemAfter,
     isSelected: isSelected,

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,
@@ -21,24 +24,20 @@ const ToolbarDropdownMenuContent = ({
   const {
     onDropdownOpenChanged
   } = useToolbarUI();
-  const {
-    closeMenu,
-    isOpen,
-    openMenu
-  } = useToolbarDropdownMenu();
+  const menuContext = useToolbarDropdownMenu();
   const handleOpenChange = useCallback(args => {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   const handleClick = useCallback(() => {
-    if (!isOpen) {
-      openMenu();
+    if (!(menuContext !== null && menuContext !== void 0 && menuContext.isOpen)) {
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.openMenu();
     } else {
-      closeMenu();
+      menuContext === null || menuContext === void 0 ? void 0 : menuContext.closeMenu();
     }
-  }, [closeMenu, openMenu, isOpen]);
+  }, [menuContext]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
       ref: triggerProps.triggerRef,
@@ -58,7 +57,7 @@ const ToolbarDropdownMenuContent = ({
       label: label
     }),
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 export const ToolbarDropdownMenu = ({
@@ -67,14 +66,26 @@ 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])
-  }, children)));
+  if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
+    }, children));
+  } else {
+    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])
+    }, children)));
+  }
 };

package/dist/es2019/ui/ToolbarDropdownMenuContext.js

@@ -1,12 +1,18 @@
 import React, { createContext, useContext, useState } from 'react';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
-export const useToolbarDropdownMenu = () => {
+export const useToolbarDropdownMenuOld = () => {
   const context = useContext(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+export const useToolbarDropdownMenuNew = () => {
+  return useContext(ToolbarDropdownMenuContext);
+};
+export const useToolbarDropdownMenu = conditionalHooksFactory(() => expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true), useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 export const ToolbarDropdownMenuProvider = ({
   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

@@ -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/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 @@
 
 ._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: "_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/ToolbarDropdownItem.js

@@ -6,6 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { useToolbarDropdownMenuNew } from './ToolbarDropdownMenuContext';
 var styles = {
   toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -48,8 +49,14 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     href = _ref2.href,
     target = _ref2.target,
     rel = _ref2.rel;
+  var parentContext = useToolbarDropdownMenuNew();
   return /*#__PURE__*/React.createElement(DropdownItem, {
-    onClick: onClick,
+    onClick: 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/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,
@@ -19,23 +22,20 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
-  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
-    closeMenu = _useToolbarDropdownMe.closeMenu,
-    isOpen = _useToolbarDropdownMe.isOpen,
-    openMenu = _useToolbarDropdownMe.openMenu;
+  var menuContext = useToolbarDropdownMenu();
   var handleOpenChange = useCallback(function (args) {
     onDropdownOpenChanged(args);
     if (!args.isOpen) {
-      closeMenu();
+      menuContext === null || menuContext === void 0 || menuContext.closeMenu();
     }
-  }, [closeMenu, onDropdownOpenChanged]);
+  }, [menuContext, onDropdownOpenChanged]);
   var handleClick = 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.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -57,7 +57,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
       });
     },
     onOpenChange: handleOpenChange,
-    isOpen: isOpen
+    isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
   }, children);
 };
 export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
@@ -67,13 +67,26 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
     testId = _ref2.testId,
     label = _ref2.label,
     _ref2$hasSectionMargi = _ref2.hasSectionMargin,
-    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
-  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])
-  }, children)));
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
+    _ref2$enableMaxHeight = _ref2.enableMaxHeight,
+    enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight;
+  if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+      iconBefore: iconBefore,
+      isDisabled: isDisabled,
+      testId: testId,
+      label: label
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
+    }, children));
+  } else {
+    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])
+    }, children)));
+  }
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -1,13 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { createContext, useContext, useState } from 'react';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
-export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+export var useToolbarDropdownMenuOld = function useToolbarDropdownMenuOld() {
   var context = useContext(ToolbarDropdownMenuContext);
   if (!context) {
     throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
   }
   return context;
 };
+export var useToolbarDropdownMenuNew = function useToolbarDropdownMenuNew() {
+  return useContext(ToolbarDropdownMenuContext);
+};
+export var useToolbarDropdownMenu = conditionalHooksFactory(function () {
+  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true);
+}, useToolbarDropdownMenuNew, useToolbarDropdownMenuOld);
 export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
   var children = _ref.children;
   var _useState = useState(false),

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

@@ -9,7 +9,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/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 {};