@atlaskit/editor-toolbar 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-toolbar
 
+## 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
+
+- [#201259](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/201259)
+  [`1de5dd69e269d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1de5dd69e269d) -
+  [ux] [EDITOR-1064] Added ai commands on the new selection toolbar platform
+
 ## 0.2.2
 
 ### 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() {
@@ -357,6 +364,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() {
@@ -375,6 +388,7 @@ 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 +434,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/ToolbarDropdownMenu.js

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarDropdownMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _uiContext = require("../hooks/ui-context");
 var _ToolbarButton = require("./ToolbarButton");
-var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
+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 ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
     groupLocation = _ref.groupLocation,
     children = _ref.children,
@@ -18,6 +21,23 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     label = _ref.label;
   var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
+  var _useToolbarDropdownMe = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)(),
+    closeMenu = _useToolbarDropdownMe.closeMenu,
+    isOpen = _useToolbarDropdownMe.isOpen,
+    openMenu = _useToolbarDropdownMe.openMenu;
+  var handleOpenChange = (0, _react.useCallback)(function (args) {
+    onDropdownOpenChanged(args);
+    if (!args.isOpen) {
+      closeMenu();
+    }
+  }, [closeMenu, onDropdownOpenChanged]);
+  var handleClick = (0, _react.useCallback)(function () {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, openMenu, isOpen]);
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
@@ -27,7 +47,10 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
         "aria-haspopup": triggerProps['aria-haspopup'],
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          handleClick();
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
@@ -36,6 +59,22 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
         label: label
       });
     },
-    onOpenChange: onDropdownOpenChanged
+    onOpenChange: handleOpenChange,
+    isOpen: isOpen
   }, children);
+};
+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;
+  return /*#__PURE__*/_react.default.createElement(_ToolbarDropdownMenuContext.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
+    iconBefore: iconBefore,
+    groupLocation: groupLocation,
+    isDisabled: isDisabled,
+    testId: testId,
+    label: label
+  }, children));
 };

package/dist/cjs/ui/ToolbarDropdownMenuContext.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarDropdownMenu = exports.ToolbarDropdownMenuProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ToolbarDropdownMenuContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useToolbarDropdownMenu = exports.useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+  var context = (0, _react.useContext)(ToolbarDropdownMenuContext);
+  if (!context) {
+    throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+  }
+  return context;
+};
+var ToolbarDropdownMenuProvider = exports.ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var openMenu = function openMenu() {
+    return setIsOpen(true);
+  };
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+  var contextValue = {
+    openMenu: openMenu,
+    closeMenu: closeMenu,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContext.Provider, {
+    value: contextValue
+  }, children);
+};

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

@@ -1,27 +1,39 @@
 /* AIChatIcon.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.AIChatIcon = void 0;
 require("./AIChatIcon.compiled.css");
+var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
-var _logo = require("@atlaskit/logo");
-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 = {
-  small: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
+  container: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
 };
-var AIChatIcon = exports.AIChatIcon = function AIChatIcon(_ref) {
+var ROVO_SVG_PATH = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path d=\"M5.4905 0.135176C5.80591 -0.0450587 6.19311 -0.0450584 6.50852 0.135176L10.8688 2.62676C11.1885 2.80943 11.3857 3.14937 11.3857 3.51754V8.48246C11.3857 8.85063 11.1885 9.19057 10.8688 9.37324L6.50852 11.8648C6.19311 12.0451 5.80591 12.0451 5.4905 11.8648L1.13022 9.37324C0.810557 9.19057 0.613281 8.85063 0.613281 8.48246V3.51754C0.613281 3.14937 0.810557 2.80943 1.13022 2.62676L5.4905 0.135176Z\" fill=\"#BF63F3\"/>\n\t\t<mask id=\"mask0_7293_80230\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"12\" height=\"12\">\n\t\t\t<path d=\"M5.49147 0.135176C5.80688 -0.0450587 6.19409 -0.0450584 6.5095 0.135176L10.8698 2.62676C11.1894 2.80943 11.3867 3.14937 11.3867 3.51754V8.48246C11.3867 8.85063 11.1894 9.19057 10.8698 9.37324L6.5095 11.8648C6.19409 12.0451 5.80688 12.0451 5.49147 11.8648L1.13119 9.37324C0.811533 9.19057 0.614258 8.85063 0.614258 8.48246V3.51754C0.614258 3.14937 0.811533 2.80943 1.13119 2.62676L5.49147 0.135176Z\" fill=\"#BF63F3\"/>\n\t\t</mask>\n\t\t<g mask=\"url(#mask0_7293_80230)\">\n\t\t\t<path d=\"M1.16288 17.7949C1.88804 16.4071 2.9469 15.3192 4.34131 14.5785C5.73572 13.8378 7.35499 13.5206 8.99441 13.7092L0.174767 -2.55519C-1.28774 -2.29055 -2.70974 -1.80225 -4.07832 -1.07526C-5.44691 -0.348264 -6.62375 0.522036 -7.64571 1.5465L1.16656 17.7973L1.16288 17.7949Z\" fill=\"#82B536\"/>\n\t\t\t<path d=\"M6.2482 7.95377C3.81481 8.96062 1.95638 10.6236 1.88069 12.9253C1.88069 12.9253 1.88199 12.9371 1.88076 12.9428C1.87578 13.1139 1.87896 13.2868 1.89469 13.4633C1.89533 13.4648 1.89596 13.4663 1.89659 13.4678C1.91139 13.6465 1.93718 13.8294 1.97333 14.0151C1.98259 14.0588 1.99625 14.1041 2.00551 14.1478C2.03868 14.296 2.07186 14.4442 2.11979 14.5968C2.18327 14.7994 2.25711 15.0047 2.3457 15.2144C2.50959 15.6024 2.70185 15.9488 2.90932 16.2571C3.18552 16.6673 3.48842 17.0101 3.79015 17.2936C3.86597 17.3643 3.94053 17.432 4.01695 17.4954C4.37212 17.7357 4.89091 18.0543 5.7602 18.4584C6.328 18.7233 7.04924 19.025 7.97282 19.3662C8.7114 18.2422 10.0629 17.368 11.3277 16.3888C12.3263 15.6149 13.2681 14.7764 13.805 13.6971C14.2974 12.7085 14.3102 11.4765 13.7704 10.1986C12.4194 7.00012 9.42898 6.63591 6.2507 7.95097L6.2482 7.95377Z\" fill=\"#FCA700\"/>\n\t\t\t<path d=\"M11.6634 -7.61136L-2.81461 -5.02797C-2.81461 -5.02797 -1.3238 1.52224 -4.55981 7.48526C-4.11672 7.5189 -3.66847 7.5392 -3.21522 7.53288C5.12023 7.41664 11.7808 0.635945 11.6634 -7.61401L11.6634 -7.61136Z\" fill=\"#1868DB\"/>\n\t\t</g>\n\t\t<path d=\"M5.67239 2.71364C5.90711 2.58408 6.19359 2.58646 6.42641 2.72078L8.69144 4.02848C8.92849 4.16524 9.07522 4.41898 9.07522 4.69232V7.30776C9.07522 7.58218 8.92938 7.83479 8.69162 7.97148L6.98899 8.95449C6.99272 8.94401 6.99627 8.93347 6.99965 8.92286C7.03126 8.82487 7.04801 8.72132 7.04801 8.61548V6.00004C7.04801 5.64073 6.8569 5.3094 6.54519 5.13016L5.27598 4.39771V3.3846C5.27598 3.30477 5.28833 3.22678 5.31168 3.15296C5.3691 2.97429 5.49122 2.81962 5.65828 2.72306L5.65879 2.72277C5.66358 2.72001 5.66814 2.71694 5.67239 2.71364Z\" fill=\"white\"/>\n\t\t<path d=\"M5.09599 3.04811L3.39336 4.03112C3.1556 4.1678 3.00977 4.42042 3.00977 4.69484V7.31028C3.00977 7.58362 3.15646 7.83734 3.39352 7.9741L5.65857 9.28182C5.89139 9.41612 6.17789 9.41851 6.4126 9.28896C6.41685 9.28566 6.42137 9.28261 6.42616 9.27985C6.59341 9.18336 6.71572 9.02863 6.77323 8.84989C6.79663 8.77599 6.809 8.69792 6.809 8.618V7.60489L5.53987 6.87249C5.22822 6.69323 5.03697 6.36183 5.03697 6.00256V3.38712C5.03697 3.28142 5.05368 3.17802 5.0852 3.08015C5.08862 3.0694 5.09222 3.05872 5.09599 3.04811Z\" fill=\"white\"/>\n\t</svg>";
+var RovoLogoSVG = function RovoLogoSVG(_ref) {
   var label = _ref.label,
     testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.small
-  }, /*#__PURE__*/_react.default.createElement(_logo.RovoIcon, {
+  return /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": label,
+    "data-testid": testId
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: ROVO_SVG_PATH
+    },
+    className: (0, _runtime.ax)([styles.container])
+  });
+};
+var AIChatIcon = exports.AIChatIcon = function AIChatIcon(_ref2) {
+  var label = _ref2.label,
+    testId = _ref2.testId;
+  return /*#__PURE__*/React.createElement(RovoLogoSVG, {
     label: label,
-    testId: testId,
-    size: "xxsmall"
-  }));
+    testId: testId
+  });
 };

package/dist/es2019/index.js

@@ -11,6 +11,7 @@ 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';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -56,4 +57,5 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -0,0 +1,25 @@
+
+._19itv4vr{border:1px solid var(--ds-border-inverse,#fff)}
+._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)}
+._y2mvugt7:focus{outline:2px solid var(--ds-border-focused,#388bff)}
+._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}