@atlaskit/editor-toolbar 0.12.1 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-toolbar
 
+## 0.14.0
+
+### Minor Changes
+
+- [`872bd8d576773`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/872bd8d576773) -
+  [ux] ED-29272 Add missing tooltip and shortcut for TextColorDropdownMenu
+
+## 0.13.0
+
+### Minor Changes
+
+- [`351022ab9c347`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/351022ab9c347) -
+  [ux] [ED-29060] add toolbar separators after the AI sections in the inline toolbars behind
+  platform_editor_toolbar_aifc_patch_6
+
+### Patch Changes
+
+- [`7011f9be6a430`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7011f9be6a430) -
+  [ux] EDITOR-1653 add create synced block item to the block menu
+- [`84e969325af68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/84e969325af68) -
+  ED-29469 Comment editor in live-doc squishes before going to next breakpoint
+- Updated dependencies
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -304,6 +304,12 @@ Object.defineProperty(exports, "ResponsiveContainer", {
     return _ResponsiveContainer.ResponsiveContainer;
   }
 });
+Object.defineProperty(exports, "SeparatorPosition", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarSection.SeparatorPosition;
+  }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function get() {
@@ -334,6 +340,12 @@ Object.defineProperty(exports, "SuperscriptIcon", {
     return _SuperscriptIcon.SuperscriptIcon;
   }
 });
+Object.defineProperty(exports, "SyncBlocksIcon", {
+  enumerable: true,
+  get: function get() {
+    return _SyncBlocksIcon.SyncBlocksIcon;
+  }
+});
 Object.defineProperty(exports, "TableIcon", {
   enumerable: true,
   get: function get() {
@@ -544,6 +556,7 @@ var _RedoIcon = require("./ui/icons/RedoIcon");
 var _HistoryIcon = require("./ui/icons/HistoryIcon");
 var _LoomIcon = require("./ui/icons/LoomIcon");
 var _PlusIcon = require("./ui/icons/PlusIcon");
+var _SyncBlocksIcon = require("./ui/icons/SyncBlocksIcon");
 var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
 var _utils = require("./ui/ColorPalette/utils");
 var _uiContext = require("./hooks/ui-context");

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

@@ -18,6 +18,7 @@
 @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: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -14,10 +14,12 @@ 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 styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
@@ -67,7 +69,7 @@ var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveConta
   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)
+    xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);
 };
 

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

@@ -5,6 +5,7 @@
 ._18shglyw [class*=show-above-]: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}
+._1mj714no[data-toolbar-type=inline] [data-toolbar-component=separator]{height:36px}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
@@ -12,4 +13,5 @@
 ._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)}
+._z5m7glyw [data-toolbar-component=section]:not(:has(~[data-toolbar-component=section])) [data-toolbar-component=separator]{display:none}
 ._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}

package/dist/cjs/ui/Toolbar.js

@@ -23,7 +23,9 @@ var styles = {
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
-  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
+  toolbarSeparator: "_1mj714no",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw",
+  hiddenSelectorsPatch: "_z5m7glyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -37,10 +39,11 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref) {
     testId = _ref.testId;
   var isResponsiveEnabled = (0, _expValEquals.expValEquals)('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   var toolbar = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.toolbarSeparator, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.hiddenSelectorsPatch),
     role: "toolbar",
     "aria-label": label,
-    testId: testId
+    testId: testId,
+    "data-toolbar-type": (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'inline' : undefined
   }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_ViewEventEmitter.ViewEventEmitter, {
     actionSubject: _ViewEventEmitter.ACTION_SUBJECT.TOOLBAR,
     actionSubjectId: actionSubjectId
@@ -85,12 +88,14 @@ var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
       role: "toolbar",
-      "aria-label": label
+      "aria-label": label,
+      "data-toolbar-type": (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
     }, children));
   }
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
-    "aria-label": label
+    "aria-label": label,
+    "data-toolbar-type": (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
   }, children);
 };

package/dist/cjs/ui/ToolbarDropdownMenuContext.js

@@ -14,21 +14,31 @@ var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = function useToolba
   return (0, _react.useContext)(ToolbarDropdownMenuContext);
 };
 var ToolbarDropdownMenuProvider = exports.ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    isOpenInternal = _useState2[0],
+    setIsOpenInternal = _useState2[1];
   var openMenu = function openMenu() {
-    return setIsOpen(true);
+    if (setIsOpen !== undefined) {
+      setIsOpen(true);
+    } else {
+      setIsOpenInternal(true);
+    }
   };
   var closeMenu = function closeMenu() {
-    setIsOpen(false);
+    if (setIsOpen !== undefined) {
+      setIsOpen(false);
+    } else {
+      setIsOpenInternal(false);
+    }
   };
   var contextValue = {
     openMenu: openMenu,
     closeMenu: closeMenu,
-    isOpen: isOpen
+    isOpen: isOpen !== undefined ? isOpen : isOpenInternal
   };
   return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContext.Provider, {
     value: contextValue

package/dist/cjs/ui/ToolbarSection.js

@@ -5,22 +5,40 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarSection = void 0;
+exports.ToolbarSection = exports.SeparatorPosition = void 0;
 require("./ToolbarSection.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+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 SeparatorPosition = exports.SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
+  SeparatorPosition["START"] = "start";
+  SeparatorPosition["END"] = "end";
+  return SeparatorPosition;
+}({});
 var styles = {
   container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
 var separator = null;
+var ToolbarSeparator = function ToolbarSeparator() {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-toolbar-component": "separator",
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  });
+};
 var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     hasSeparator = _ref.hasSeparator;
-  return /*#__PURE__*/React.createElement(_compiled.Box, {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.container),
+    testId: testId,
+    "data-toolbar-component": "section"
+  }, hasSeparator === SeparatorPosition.START && /*#__PURE__*/React.createElement(ToolbarSeparator, null), children, hasSeparator === SeparatorPosition.END && /*#__PURE__*/React.createElement(ToolbarSeparator, null)) : /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.container),
     testId: testId,
     "data-toolbar-component": "section"

package/dist/cjs/ui/icons/SyncBlocksIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SyncBlocksIcon", {
+  enumerable: true,
+  get: function get() {
+    return _sync.default;
+  }
+});
+var _sync = _interopRequireDefault(require("@atlaskit/icon-lab/core/sync"));

package/dist/es2019/index.js

@@ -8,7 +8,7 @@ export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardNavigationProvider } from './ui/ToolbarKeyboardNavigationProvider';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
-export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider } from './ui/ToolbarDropdownMenuContext';
@@ -71,6 +71,7 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
 export { PlusIcon } from './ui/icons/PlusIcon';
+export { SyncBlocksIcon } from './ui/icons/SyncBlocksIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -18,6 +18,7 @@
 @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: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -7,10 +7,12 @@ 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';
 const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
@@ -61,7 +63,7 @@ export const ResponsiveContainer = ({
   reducedBreakpoints
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules)
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);
 };
 

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

@@ -5,6 +5,7 @@
 ._18shglyw [class*=show-above-]: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}
+._1mj714no[data-toolbar-type=inline] [data-toolbar-component=separator]{height:36px}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
@@ -12,4 +13,5 @@
 ._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)}
+._z5m7glyw [data-toolbar-component=section]:not(:has(~[data-toolbar-component=section])) [data-toolbar-component=separator]{display:none}
 ._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}

package/dist/es2019/ui/Toolbar.js

@@ -16,7 +16,9 @@ const styles = {
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
-  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
+  toolbarSeparator: "_1mj714no",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw",
+  hiddenSelectorsPatch: "_z5m7glyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -31,10 +33,11 @@ export const Toolbar = ({
 }) => {
   const isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   const toolbar = /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors, expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.toolbarSeparator, expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.hiddenSelectorsPatch),
     role: "toolbar",
     "aria-label": label,
-    testId: testId
+    testId: testId,
+    "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'inline' : undefined
   }, expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ViewEventEmitter, {
     actionSubject: ACTION_SUBJECT.TOOLBAR,
     actionSubjectId: actionSubjectId
@@ -83,12 +86,14 @@ export const PrimaryToolbar = ({
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
       role: "toolbar",
-      "aria-label": label
+      "aria-label": label,
+      "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
     }, children));
   }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
-    "aria-label": label
+    "aria-label": label,
+    "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
   }, children);
 };

package/dist/es2019/ui/ToolbarDropdownMenuContext.js

@@ -4,17 +4,29 @@ export const useToolbarDropdownMenu = () => {
   return useContext(ToolbarDropdownMenuContext);
 };
 export const ToolbarDropdownMenuProvider = ({
-  children
+  children,
+  isOpen,
+  setIsOpen
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const openMenu = () => setIsOpen(true);
+  const [isOpenInternal, setIsOpenInternal] = useState(false);
+  const openMenu = () => {
+    if (setIsOpen !== undefined) {
+      setIsOpen(true);
+    } else {
+      setIsOpenInternal(true);
+    }
+  };
   const closeMenu = () => {
-    setIsOpen(false);
+    if (setIsOpen !== undefined) {
+      setIsOpen(false);
+    } else {
+      setIsOpenInternal(false);
+    }
   };
   const contextValue = {
     openMenu,
     closeMenu,
-    isOpen
+    isOpen: isOpen !== undefined ? isOpen : isOpenInternal
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
     value: contextValue

package/dist/es2019/ui/ToolbarSection.js

@@ -4,16 +4,34 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export let SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
+  SeparatorPosition["START"] = "start";
+  SeparatorPosition["END"] = "end";
+  return SeparatorPosition;
+}({});
 const styles = {
   container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
 const separator = null;
+const ToolbarSeparator = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-toolbar-component": "separator",
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  });
+};
 export const ToolbarSection = ({
   children,
   testId,
   hasSeparator
 }) => {
-  return /*#__PURE__*/React.createElement(Box, {
+  return expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.container),
+    testId: testId,
+    "data-toolbar-component": "section"
+  }, hasSeparator === SeparatorPosition.START && /*#__PURE__*/React.createElement(ToolbarSeparator, null), children, hasSeparator === SeparatorPosition.END && /*#__PURE__*/React.createElement(ToolbarSeparator, null)) : /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.container),
     testId: testId,
     "data-toolbar-component": "section"

package/dist/es2019/ui/icons/SyncBlocksIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as SyncBlocksIcon } from '@atlaskit/icon-lab/core/sync';

package/dist/esm/index.js

@@ -8,7 +8,7 @@ export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardNavigationProvider } from './ui/ToolbarKeyboardNavigationProvider';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
-export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider } from './ui/ToolbarDropdownMenuContext';
@@ -71,6 +71,7 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
 export { PlusIcon } from './ui/icons/PlusIcon';
+export { SyncBlocksIcon } from './ui/icons/SyncBlocksIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -18,6 +18,7 @@
 @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: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
 @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
 @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -7,10 +7,12 @@ 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';
 var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
+  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
   responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
@@ -60,7 +62,7 @@ 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)
+    xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
   }, children);
 };
 

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

@@ -5,6 +5,7 @@
 ._18shglyw [class*=show-above-]: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}
+._1mj714no[data-toolbar-type=inline] [data-toolbar-component=separator]{height:36px}
 ._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
@@ -12,4 +13,5 @@
 ._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)}
+._z5m7glyw [data-toolbar-component=section]:not(:has(~[data-toolbar-component=section])) [data-toolbar-component=separator]{display:none}
 ._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}

package/dist/esm/ui/Toolbar.js

@@ -16,7 +16,9 @@ var styles = {
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
   toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
-  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
+  toolbarSeparator: "_1mj714no",
+  hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw",
+  hiddenSelectorsPatch: "_z5m7glyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
@@ -30,10 +32,11 @@ export var Toolbar = function Toolbar(_ref) {
     testId = _ref.testId;
   var isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
   var toolbar = /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors, expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.toolbarSeparator, expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.hiddenSelectorsPatch),
     role: "toolbar",
     "aria-label": label,
-    testId: testId
+    testId: testId,
+    "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'inline' : undefined
   }, expValEquals('platform_editor_toolbar_aifc_toolbar_analytic', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ViewEventEmitter, {
     actionSubject: ACTION_SUBJECT.TOOLBAR,
     actionSubjectId: actionSubjectId
@@ -78,12 +81,14 @@ export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
     }, /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
       role: "toolbar",
-      "aria-label": label
+      "aria-label": label,
+      "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
     }, children));
   }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
-    "aria-label": label
+    "aria-label": label,
+    "data-toolbar-type": expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? 'primary' : undefined
   }, children);
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -5,21 +5,31 @@ export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
   return useContext(ToolbarDropdownMenuContext);
 };
 export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    isOpenInternal = _useState2[0],
+    setIsOpenInternal = _useState2[1];
   var openMenu = function openMenu() {
-    return setIsOpen(true);
+    if (setIsOpen !== undefined) {
+      setIsOpen(true);
+    } else {
+      setIsOpenInternal(true);
+    }
   };
   var closeMenu = function closeMenu() {
-    setIsOpen(false);
+    if (setIsOpen !== undefined) {
+      setIsOpen(false);
+    } else {
+      setIsOpenInternal(false);
+    }
   };
   var contextValue = {
     openMenu: openMenu,
     closeMenu: closeMenu,
-    isOpen: isOpen
+    isOpen: isOpen !== undefined ? isOpen : isOpenInternal
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
     value: contextValue

package/dist/esm/ui/ToolbarSection.js

@@ -4,15 +4,33 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
+  SeparatorPosition["START"] = "start";
+  SeparatorPosition["END"] = "end";
+  return SeparatorPosition;
+}({});
 var styles = {
   container: "_zulp1b66 _1e0c1txw _4cvr1h6o"
 };
 var separator = null;
+var ToolbarSeparator = function ToolbarSeparator() {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-toolbar-component": "separator",
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhkmuej"])
+  });
+};
 export var ToolbarSection = function ToolbarSection(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
     hasSeparator = _ref.hasSeparator;
-  return /*#__PURE__*/React.createElement(Box, {
+  return expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.container),
+    testId: testId,
+    "data-toolbar-component": "section"
+  }, hasSeparator === SeparatorPosition.START && /*#__PURE__*/React.createElement(ToolbarSeparator, null), children, hasSeparator === SeparatorPosition.END && /*#__PURE__*/React.createElement(ToolbarSeparator, null)) : /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.container),
     testId: testId,
     "data-toolbar-component": "section"

package/dist/esm/ui/icons/SyncBlocksIcon.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as SyncBlocksIcon } from '@atlaskit/icon-lab/core/sync';

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardNavigationProvider } from './ui/ToolbarKeyboardNavigationProvider';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
-export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
@@ -70,6 +70,7 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
 export { PlusIcon } from './ui/icons/PlusIcon';
+export { SyncBlocksIcon } from './ui/icons/SyncBlocksIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent, ToolbarKeyboardNavigationProviderConfig } from './types';

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

@@ -7,6 +7,8 @@ interface ToolbarDropdownMenuContextValue {
 export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
+    isOpen?: boolean;
+    setIsOpen?: (isOpen: boolean) => void;
 }
-export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenuProvider: ({ children, isOpen, setIsOpen, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
 export {};

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

@@ -3,12 +3,16 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+export declare enum SeparatorPosition {
+    START = "start",
+    END = "end"
+}
 type ToolbarSectionProps = {
     children?: ReactNode;
     /**
-     * Whether to add a separator at the start of the section
+     * Whether to add a separator at the start or end of the section
      */
-    hasSeparator?: boolean;
+    hasSeparator?: SeparatorPosition | boolean;
     testId?: string;
 };
 export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;

package/dist/types/ui/icons/SyncBlocksIcon.d.ts

@@ -0,0 +1 @@
+export { default as SyncBlocksIcon } from '@atlaskit/icon-lab/core/sync';

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

@@ -7,7 +7,7 @@ export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardNavigationProvider } from './ui/ToolbarKeyboardNavigationProvider';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
-export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarSection, SeparatorPosition } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
@@ -70,6 +70,7 @@ export { RedoIcon } from './ui/icons/RedoIcon';
 export { HistoryIcon } from './ui/icons/HistoryIcon';
 export { LoomIcon } from './ui/icons/LoomIcon';
 export { PlusIcon } from './ui/icons/PlusIcon';
+export { SyncBlocksIcon } from './ui/icons/SyncBlocksIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
 export { getContrastingBackgroundColor } from './ui/ColorPalette/utils';
 export type { IconComponent, ToolbarKeyboardNavigationProviderConfig } from './types';

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

@@ -7,6 +7,8 @@ interface ToolbarDropdownMenuContextValue {
 export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
+    isOpen?: boolean;
+    setIsOpen?: (isOpen: boolean) => void;
 }
-export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenuProvider: ({ children, isOpen, setIsOpen, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
 export {};

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

@@ -3,12 +3,16 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+export declare enum SeparatorPosition {
+    START = "start",
+    END = "end"
+}
 type ToolbarSectionProps = {
     children?: ReactNode;
     /**
-     * Whether to add a separator at the start of the section
+     * Whether to add a separator at the start or end of the section
      */
-    hasSeparator?: boolean;
+    hasSeparator?: SeparatorPosition | boolean;
     testId?: string;
 };
 export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;

package/dist/types-ts4.5/ui/icons/SyncBlocksIcon.d.ts

@@ -0,0 +1 @@
+export { default as SyncBlocksIcon } from '@atlaskit/icon-lab/core/sync';

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.12.1",
+	"version": "0.14.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -25,8 +25,8 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^28.3.0",
-		"@atlaskit/icon-lab": "^5.8.0",
+		"@atlaskit/icon": "^28.4.0",
+		"@atlaskit/icon-lab": "^5.9.0",
 		"@atlaskit/logo": "^19.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",