@atlaskit/editor-toolbar 0.2.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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
+
+- [`4d47716053c75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d47716053c75) -
+  [ux] ED-28799 Migrate ColorPalette component to editor-toolbar
+  - Add DropdownMenu Context to be able to manage opening/closing state of the dropdown in menu item
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -123,6 +124,12 @@ Object.defineProperty(exports, "CodeIcon", {
     return _CodeIcon.CodeIcon;
   }
 });
+Object.defineProperty(exports, "ColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _ColorPalette.default;
+  }
+});
 Object.defineProperty(exports, "CommentIcon", {
   enumerable: true,
   get: function get() {
@@ -297,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() {
@@ -357,6 +358,12 @@ Object.defineProperty(exports, "UnderlineIcon", {
     return _UnderlineIcon.UnderlineIcon;
   }
 });
+Object.defineProperty(exports, "useToolbarDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarDropdownMenuContext.useToolbarDropdownMenu;
+  }
+});
 Object.defineProperty(exports, "useToolbarUI", {
   enumerable: true,
   get: function get() {
@@ -373,8 +380,8 @@ 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");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");
@@ -420,4 +427,5 @@ var _AlignTextCenterIcon = require("./ui/icons/AlignTextCenterIcon");
 var _AlignTextRightIcon = require("./ui/icons/AlignTextRightIcon");
 var _IndentIcon = require("./ui/icons/IndentIcon");
 var _OutdentIcon = require("./ui/icons/OutdentIcon");
+var _ColorPalette = _interopRequireDefault(require("./ui/ColorPalette"));
 var _uiContext = require("./hooks/ui-context");

package/dist/cjs/ui/ColorPalette/Color.compiled.css

@@ -0,0 +1,25 @@
+
+._19itcf40{border:var(--_1wr0y6w)}
+._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._19bvidpf{padding-left:0}
+._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._1bsbcr4y{width:var(--ds-space-300,26px)}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._4cvr1h6o{align-items:center}
+._4t3icr4y{height:var(--ds-space-300,26px)}
+._80omtlke{cursor:pointer}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qidpf{padding-top:0}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._u5f3idpf{padding-right:0}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}
+._y2mv12j9:focus{outline:var(--_toyvsf)}
+._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}

package/dist/cjs/ui/ColorPalette/Color.js

@@ -0,0 +1,76 @@
+/* Color.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.Color = void 0;
+require("./Color.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+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 buttonWrapperStyles = null;
+var buttonStyles = null;
+
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var autoFocus = _ref.autoFocus,
+    tabIndex = _ref.tabIndex,
+    value = _ref.value,
+    label = _ref.label,
+    isSelected = _ref.isSelected,
+    borderColor = _ref.borderColor,
+    _ref$checkMarkColor = _ref.checkMarkColor,
+    checkMarkColor = _ref$checkMarkColor === void 0 ? "var(--ds-icon-inverse, #FFFFFF)" : _ref$checkMarkColor,
+    hexToPaletteColor = _ref.hexToPaletteColor,
+    decorator = _ref.decorator,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
+  var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    onClick(value, label);
+  }, [onClick, value, label]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (!onKeyDown) {
+      return;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  }, [onKeyDown, value, label]);
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: label
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMouseDown,
+    tabIndex: tabIndex,
+    autoFocus: autoFocus,
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    style: {
+      backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
+      border: "1px solid ".concat(borderColor),
+      "--_1wr0y6w": (0, _runtime.ix)("1px solid ".concat("var(--ds-border-inverse, #FFFFFF)")),
+      "--_toyvsf": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
+    LEGACY_primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+});

package/dist/cjs/ui/ColorPalette/getColorMessage.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getColorMessage;
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+function getColorMessage(messages, color) {
+  var message = messages[color];
+  if (!message) {
+    // eslint-disable-next-line no-console
+    console.warn("Color palette does not have an internationalization message for color ".concat(color.toUpperCase(), ".\nYou must add a message description to properly translate this color.\nUsing current label as default message.\nThis could have happened when someone changed the 'colorPalette' from 'adf-schema' without updating this file.\n"));
+  }
+  return message;
+}

package/dist/cjs/ui/ColorPalette/index.compiled.css

@@ -0,0 +1 @@
+._1e0c1txw{display:flex}

package/dist/cjs/ui/ColorPalette/index.js

@@ -0,0 +1,118 @@
+/* index.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.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _chromatism = _interopRequireDefault(require("chromatism"));
+var _reactIntlNext = require("react-intl-next");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tokens = require("@atlaskit/tokens");
+var _Color = require("./Color");
+var _getColorMessage = _interopRequireDefault(require("./getColorMessage"));
+var _utils = require("./utils");
+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 = {
+  paletteWrapper: "_1e0c1txw"
+};
+
+/**
+ * For a given color pick the color from a list of colors with
+ * the highest contrast
+ *
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
+ * @return Highest contrast color in pool
+ */
+function getCheckMarkColor(color, useIconToken) {
+  var tokenVal = (0, _utils.getTokenCSSVariableValue)(color);
+  var colorValue = !!tokenVal ? tokenVal : color;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  var contrastColor = ['#FFFFFF', '#42526E'].sort(function (a, b) {
+    return _chromatism.default.difference(b, colorValue) - _chromatism.default.difference(a, colorValue);
+  })[0];
+  if (!useIconToken) {
+    return contrastColor;
+  }
+
+  // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+}
+
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+var ColorPalette = function ColorPalette(_ref) {
+  var _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    selectedColor = _ref.selectedColor,
+    paletteOptions = _ref.paletteOptions;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var palette = paletteOptions.palette,
+    hexToPaletteColor = paletteOptions.hexToPaletteColor,
+    paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    tokenTheme = _useThemeObserver.colorMode;
+  var useIconToken = !!hexToPaletteColor;
+  var colorsPerRow = (0, _react.useMemo)(function () {
+    return (0, _utils.getColorsPerRowFromPalette)(palette, cols);
+  }, [palette, cols]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.paletteWrapper,
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref2) {
+      var value = _ref2.value,
+        label = _ref2.label,
+        border = _ref2.border,
+        message = _ref2.message,
+        decorator = _ref2.decorator;
+      var tooltipMessage = message;
+
+      // Override with theme-specific tooltip messages if provided
+      if (paletteColorTooltipMessages) {
+        if (tokenTheme === 'dark') {
+          tooltipMessage = (0, _getColorMessage.default)(paletteColorTooltipMessages.dark, value.toUpperCase());
+        }
+        if (tokenTheme === 'light') {
+          tooltipMessage = (0, _getColorMessage.default)(paletteColorTooltipMessages.light, value.toUpperCase());
+        }
+      }
+      return /*#__PURE__*/_react.default.createElement(_Color.Color, {
+        key: value,
+        value: value,
+        borderColor: border,
+        label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        isSelected: value === selectedColor,
+        checkMarkColor: getCheckMarkColor(value, useIconToken),
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator
+      });
+    }));
+  }));
+};
+var _default = exports.default = ColorPalette;

package/dist/cjs/ui/ColorPalette/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/ColorPalette/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_COLOR_PICKER_COLUMNS = void 0;
+exports.getColorsPerRowFromPalette = getColorsPerRowFromPalette;
+exports.getSelectedRowAndColumn = getSelectedRowAndColumn;
+exports.getSelectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette;
+exports.getTokenCSSVariableValue = void 0;
+/**
+ * Default number of columns in the color picker
+ */
+var DEFAULT_COLOR_PICKER_COLUMNS = exports.DEFAULT_COLOR_PICKER_COLUMNS = 7;
+
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+function getColorsPerRowFromPalette(palette) {
+  var cols = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_PICKER_COLUMNS;
+  return palette.reduce(function (resultArray, item, index) {
+    var chunkIndex = Math.floor(index / cols);
+    resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
+
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
+  var selectedRowIndex = -1;
+  var selectedColumnIndex = -1;
+  colorsPerRow.forEach(function (row, rowIndex) {
+    row.forEach(function (_ref, columnIndex) {
+      var value = _ref.value;
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex: selectedRowIndex,
+    selectedColumnIndex: selectedColumnIndex
+  };
+}
+
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+function getSelectedRowAndColumnFromPalette(palette, selectedColor) {
+  var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
+  var colorsPerRow = getColorsPerRowFromPalette(palette, cols);
+  return getSelectedRowAndColumn(colorsPerRow, selectedColor);
+}
+
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+var getTokenCSSVariableValue = exports.getTokenCSSVariableValue = function getTokenCSSVariableValue(variableExpression) {
+  // Match CSS variable pattern: var(--variable-name, fallback)
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  var matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?/);
+  if (matcher) {
+    var variable = matcher[1].trim();
+    var fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+
+    // Return fallback if we're in a server environment
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+
+    // Get the computed value from the document
+    var value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};

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)}