@atlaskit/editor-toolbar 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-toolbar
 
+## 0.3.1
+
+### Patch Changes
+
+- [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
+  [ux] [ED-28473] minor UI updates for editor-toolbar
+
+  - Use ADS ButtonGroup for ToolbarButtonGroup
+  - Remove groupLocation prop and use CSS instead
+  - Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and
+    title
+  - Support ReactNode as content for ToolbarTooltip and add missing shortcuts in tooltips
+  - Center Icons for split buttons and make chevron icon 24px wide
+  - Align dropdown menu UI with current editor design
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -304,12 +304,6 @@ Object.defineProperty(exports, "ToolbarColorSwatch", {
     return _ToolbarColorSwatch.ToolbarColorSwatch;
   }
 });
-Object.defineProperty(exports, "ToolbarDropdownDivider", {
-  enumerable: true,
-  get: function get() {
-    return _ToolbarDropdownDivider.ToolbarDropdownDivider;
-  }
-});
 Object.defineProperty(exports, "ToolbarDropdownItem", {
   enumerable: true,
   get: function get() {
@@ -386,7 +380,6 @@ var _ToolbarNestedDropdownMenu = require("./ui/ToolbarNestedDropdownMenu");
 var _ToolbarKeyboardShortcutHint = require("./ui/ToolbarKeyboardShortcutHint");
 var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
-var _ToolbarDropdownDivider = require("./ui/ToolbarDropdownDivider");
 var _ToolbarColorSwatch = require("./ui/ToolbarColorSwatch");
 var _ToolbarDropdownMenuContext = require("./ui/ToolbarDropdownMenuContext");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");

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

@@ -1,31 +1,19 @@
 
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._13liidpf{border-top-left-radius:0}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
-._1bah1y6m{justify-content:flex-start}
-._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1o0zidpf{border-bottom-right-radius:0}
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
-._mrkbidpf{border-bottom-left-radius:0}
 ._o5721q9c{white-space:nowrap}
-._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
 ._1ah3idpf:focus-visible{outline-offset:0}
 ._g0pbkb7n:focus-visible{z-index:1}
 ._oh03h2mm:focus-visible{position:relative}

package/dist/cjs/ui/ToolbarButton.js

@@ -17,10 +17,7 @@ var styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
-  groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
-  groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var iconBefore = _ref.iconBefore,
@@ -34,7 +31,6 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     testId = _ref.testId,
-    groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
@@ -42,7 +38,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown;
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
-    xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
+    xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,

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

@@ -1 +1,7 @@
-._1e0c1txw{display:flex}
+
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
+._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._1jiyidpf button{border-bottom-left-radius:0}
+._t1diidpf button{border-top-right-radius:0}
+._u6eridpf button{border-bottom-right-radius:0}
+._xk07idpf button{border-top-left-radius:0}

package/dist/cjs/ui/ToolbarButtonGroup.js

@@ -1,21 +1,33 @@
 /* ToolbarButtonGroup.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarButtonGroup = void 0;
 require("./ToolbarButtonGroup.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
+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 = {
-  container: "_1e0c1txw"
+  container: "_1e0c1txw",
+  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  var items = _react.Children.toArray(children);
+  var FirstChild = items.at(0);
+  var LastChild = items.at(-1);
+  var middleChildren = items.slice(1, -1);
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.container
-  }, children);
+  }, 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", {
+    className: (0, _runtime.ax)([styles.lastChild])
+  }, LastChild)));
 };

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

@@ -1,13 +1,15 @@
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1tke14no{min-height:36px}
+._1ul9163w{min-width:230px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -14,7 +14,7 @@ var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 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: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
+  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

package/dist/cjs/ui/ToolbarDropdownItemSection.js

@@ -1,4 +1,3 @@
-/* ToolbarDropdownItemSection.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarDropdownItemSection = void 0;
-require("./ToolbarDropdownItemSection.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var styles = {
-  container: "_1e0c1txw _2lx21bp4"
-};
+var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var ToolbarDropdownItemSection = exports.ToolbarDropdownItemSection = function ToolbarDropdownItemSection(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.container
+  var children = _ref.children,
+    hasSeparator = _ref.hasSeparator,
+    title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
+    hasSeparator: hasSeparator,
+    title: title
   }, children);
 };

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

@@ -0,0 +1 @@
+._1mou1b66{margin-block:var(--ds-space-050,4px)}

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -1,3 +1,4 @@
+/* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarDropdownMenu = void 0;
+require("./ToolbarDropdownMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _uiContext = require("../hooks/ui-context");
 var _ToolbarButton = require("./ToolbarButton");
 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"
+};
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
-    groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
@@ -54,7 +59,6 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
-        groupLocation: groupLocation,
         isDisabled: isDisabled,
         label: label
       });
@@ -65,16 +69,18 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
 };
 var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
   var iconBefore = _ref2.iconBefore,
-    groupLocation = _ref2.groupLocation,
     children = _ref2.children,
     isDisabled = _ref2.isDisabled,
     testId = _ref2.testId,
-    label = _ref2.label;
+    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,
-    groupLocation: groupLocation,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([hasSectionMargin && styles.sectionMargin])
+  }, children)));
 };

package/dist/es2019/index.js

@@ -9,7 +9,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

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

@@ -1,31 +1,19 @@
 
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._13liidpf{border-top-left-radius:0}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
-._1bah1y6m{justify-content:flex-start}
-._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1o0zidpf{border-bottom-right-radius:0}
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
-._mrkbidpf{border-bottom-left-radius:0}
 ._o5721q9c{white-space:nowrap}
-._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
 ._1ah3idpf:focus-visible{outline-offset:0}
 ._g0pbkb7n:focus-visible{z-index:1}
 ._oh03h2mm:focus-visible{position:relative}

package/dist/es2019/ui/ToolbarButton.js

@@ -9,10 +9,7 @@ const styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
-  groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
-  groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 export const ToolbarButton = /*#__PURE__*/forwardRef(({
   iconBefore,
@@ -26,7 +23,6 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   onBlur,
   onFocus,
   testId,
-  groupLocation,
   isDisabled,
   ariaKeyshortcuts,
   label
@@ -36,7 +32,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   } = useToolbarUI();
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
-    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
+    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,

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

@@ -1 +1,7 @@
-._1e0c1txw{display:flex}
+
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
+._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._1jiyidpf button{border-bottom-left-radius:0}
+._t1diidpf button{border-top-right-radius:0}
+._u6eridpf button{border-bottom-right-radius:0}
+._xk07idpf button{border-top-left-radius:0}

package/dist/es2019/ui/ToolbarButtonGroup.js

@@ -1,15 +1,26 @@
 /* ToolbarButtonGroup.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarButtonGroup.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import { Children, Fragment } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  container: "_1e0c1txw"
+  container: "_1e0c1txw",
+  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 export const ToolbarButtonGroup = ({
   children
 }) => {
+  const items = Children.toArray(children);
+  const FirstChild = items.at(0);
+  const LastChild = items.at(-1);
+  const middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.container
-  }, children);
+  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.firstChild])
+  }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.lastChild])
+  }, LastChild)));
 };

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

@@ -1,13 +1,15 @@
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1tke14no{min-height:36px}
+._1ul9163w{min-width:230px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
+  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"

package/dist/es2019/ui/ToolbarDropdownItemSection.js

@@ -1,15 +1,12 @@
-/* ToolbarDropdownItemSection.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownItemSection.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-const styles = {
-  container: "_1e0c1txw _2lx21bp4"
-};
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 export const ToolbarDropdownItemSection = ({
-  children
+  children,
+  hasSeparator,
+  title
 }) => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+  return /*#__PURE__*/React.createElement(DropdownItemGroup, {
+    hasSeparator: hasSeparator,
+    title: title
   }, children);
 };

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

@@ -0,0 +1 @@
+._1mou1b66{margin-block:var(--ds-space-050,4px)}

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -1,11 +1,16 @@
+/* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarDropdownMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+const styles = {
+  sectionMargin: "_1mou1b66"
+};
 const ToolbarDropdownMenuContent = ({
   iconBefore,
-  groupLocation,
   children,
   isDisabled,
   testId,
@@ -47,7 +52,6 @@ const ToolbarDropdownMenuContent = ({
       onFocus: triggerProps.onFocus,
       testId: testId,
       iconBefore: iconBefore,
-      groupLocation: groupLocation,
       isDisabled: isDisabled,
       label: label
     }),
@@ -57,17 +61,18 @@ const ToolbarDropdownMenuContent = ({
 };
 export const ToolbarDropdownMenu = ({
   iconBefore,
-  groupLocation,
   children,
   isDisabled,
   testId,
-  label
+  label,
+  hasSectionMargin = true
 }) => {
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
     iconBefore: iconBefore,
-    groupLocation: groupLocation,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([hasSectionMargin && styles.sectionMargin])
+  }, children)));
 };

package/dist/esm/index.js

@@ -9,7 +9,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';

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

@@ -1,31 +1,19 @@
 
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
-._zulp12x7{gap:var(--ds-space-075,6px)}._13liidpf{border-top-left-radius:0}
-._19bv12x7{padding-left:var(--ds-space-075,6px)}
-._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
-._1bah1y6m{justify-content:flex-start}
-._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._1o0zidpf{border-bottom-right-radius:0}
 ._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
-._mrkbidpf{border-bottom-left-radius:0}
 ._o5721q9c{white-space:nowrap}
-._qrwqidpf{border-top-right-radius:0}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f312x7{padding-right:var(--ds-space-075,6px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
 ._1ah3idpf:focus-visible{outline-offset:0}
 ._g0pbkb7n:focus-visible{z-index:1}
 ._oh03h2mm:focus-visible{position:relative}

package/dist/esm/ui/ToolbarButton.js

@@ -9,10 +9,7 @@ var styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
-  groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
-  groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var iconBefore = _ref.iconBefore,
@@ -26,7 +23,6 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     testId = _ref.testId,
-    groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
@@ -34,7 +30,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown;
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
-    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
+    xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
     "aria-pressed": isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,

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

@@ -1 +1,7 @@
-._1e0c1txw{display:flex}
+
+._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
+._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
+._1jiyidpf button{border-bottom-left-radius:0}
+._t1diidpf button{border-top-right-radius:0}
+._u6eridpf button{border-bottom-right-radius:0}
+._xk07idpf button{border-top-left-radius:0}

package/dist/esm/ui/ToolbarButtonGroup.js

@@ -1,14 +1,25 @@
 /* ToolbarButtonGroup.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarButtonGroup.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import { Children, Fragment } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  container: "_1e0c1txw"
+  container: "_1e0c1txw",
+  firstChild: "_fb251b66 _t1diidpf _u6eridpf",
+  lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
 };
 export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
   var children = _ref.children;
+  var items = Children.toArray(children);
+  var FirstChild = items.at(0);
+  var LastChild = items.at(-1);
+  var middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.container
-  }, children);
+  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.firstChild])
+  }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.lastChild])
+  }, LastChild)));
 };

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

@@ -1,13 +1,15 @@
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
 ._1tke14no{min-height:36px}
+._1ul9163w{min-width:230px}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._kqswh2mm{position:relative}
 ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
 ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
 ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
+  toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"