@atlaskit/editor-toolbar 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-toolbar
 
+## 0.2.0
+
+### Minor Changes
+
+- [#199353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199353)
+  [`22cab8325fc62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22cab8325fc62) -
+  [ux] [ED-28760] Fix editor lose focus and hence editing flow is interrupted. This is done for 2
+  components
+
+  - Dropdown
+    - Create context ToolbarUIContext for toolbar consumers to access consumer specific state and
+      callbacks
+    - Define onDropdownOpenChanged callback for selection toolbars so that editor regains focus
+      after dropdown is closed
+  - Button
+    - Call preventDefault on mouseDown to prevent button takes away focus
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`54098ba4cc83c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54098ba4cc83c) -
+  Add new PrimaryToolbar export which removes box shadows, export toolbar types
+
+## 0.1.1
+
+### Patch Changes
+
+- [`428e4e6ff8ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/428e4e6ff8ac9) -
+  ED-28683 remove textStyle option from ToolbarDropdownItem, apply this style from the children
+  instead
+- [#197017](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197017)
+  [`5ef01d09bada1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef01d09bada1) -
+  [ux] ED-28687 [Register] Text colour + highlight
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/hooks/ui-context.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarUI = exports.ToolbarUIProvider = void 0;
+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 ToolbarUIContext = /*#__PURE__*/(0, _react.createContext)({
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  preventDefaultOnMouseDown: false
+});
+
+/**
+ * Access consumer specific config and state within a toolbar component
+ */
+var useToolbarUI = exports.useToolbarUI = function useToolbarUI() {
+  var context = (0, _react.useContext)(ToolbarUIContext);
+  if (!context) {
+    throw new Error('useToolbarUI must be used within ToolbarUIContext');
+  }
+  return context;
+};
+var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_ref) {
+  var children = _ref.children,
+    onDropdownOpenChanged = _ref.onDropdownOpenChanged,
+    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown;
+  return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
+    value: {
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      preventDefaultOnMouseDown: preventDefaultOnMouseDown
+    }
+  }, children);
+};

package/dist/cjs/index.js

@@ -195,6 +195,12 @@ Object.defineProperty(exports, "PinnedIcon", {
     return _PinnedIcon.PinnedIcon;
   }
 });
+Object.defineProperty(exports, "PrimaryToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _Toolbar.PrimaryToolbar;
+  }
+});
 Object.defineProperty(exports, "QuoteIcon", {
   enumerable: true,
   get: function get() {
@@ -255,6 +261,12 @@ Object.defineProperty(exports, "ToolbarButtonGroup", {
     return _ToolbarButtonGroup.ToolbarButtonGroup;
   }
 });
+Object.defineProperty(exports, "ToolbarColorSwatch", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarColorSwatch.ToolbarColorSwatch;
+  }
+});
 Object.defineProperty(exports, "ToolbarDropdownDivider", {
   enumerable: true,
   get: function get() {
@@ -303,12 +315,24 @@ Object.defineProperty(exports, "ToolbarTooltip", {
     return _ToolbarTooltip.ToolbarTooltip;
   }
 });
+Object.defineProperty(exports, "ToolbarUIProvider", {
+  enumerable: true,
+  get: function get() {
+    return _uiContext.ToolbarUIProvider;
+  }
+});
 Object.defineProperty(exports, "UnderlineIcon", {
   enumerable: true,
   get: function get() {
     return _UnderlineIcon.UnderlineIcon;
   }
 });
+Object.defineProperty(exports, "useToolbarUI", {
+  enumerable: true,
+  get: function get() {
+    return _uiContext.useToolbarUI;
+  }
+});
 var _Toolbar = require("./ui/Toolbar");
 var _ToolbarButton = require("./ui/ToolbarButton");
 var _ToolbarButtonGroup = require("./ui/ToolbarButtonGroup");
@@ -320,6 +344,7 @@ var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
 var _ToolbarNestedDropdownMenu = require("./ui/ToolbarNestedDropdownMenu");
 var _ToolbarDropdownDivider = require("./ui/ToolbarDropdownDivider");
+var _ToolbarColorSwatch = require("./ui/ToolbarColorSwatch");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");
@@ -359,4 +384,5 @@ var _StrikeThroughIcon = require("./ui/icons/StrikeThroughIcon");
 var _CodeIcon = require("./ui/icons/CodeIcon");
 var _SubscriptIcon = require("./ui/icons/SubscriptIcon");
 var _SuperscriptIcon = require("./ui/icons/SuperscriptIcon");
-var _ShowMoreHorizontal = require("./ui/icons/ShowMoreHorizontal");
+var _ShowMoreHorizontal = require("./ui/icons/ShowMoreHorizontal");
+var _uiContext = require("./hooks/ui-context");

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

@@ -1,9 +1,13 @@
 
 ._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._1bsb184x{width:min-content}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
+._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/cjs/ui/Toolbar.js

@@ -5,19 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = void 0;
+exports.Toolbar = exports.PrimaryToolbar = void 0;
 require("./Toolbar.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
 };
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.toolbar,
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar),
+    role: "toolbar",
+    "aria-label": label
+  }, children);
+};
+
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
+  var children = _ref2.children,
+    label = _ref2.label;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
     "aria-label": label
   }, children);

package/dist/cjs/ui/ToolbarButton.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _uiContext = require("../hooks/ui-context");
 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 = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
@@ -37,6 +38,8 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
+  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
+    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),
@@ -51,6 +54,11 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onMouseDown: function onMouseDown(event) {
+      if (preventDefaultOnMouseDown) {
+        event.preventDefault();
+      }
+    }
   }, iconBefore, children);
 });

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

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -17,14 +17,7 @@ var styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
@@ -54,8 +47,6 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     elemAfter = _ref2.elemAfter,
     isSelected = _ref2.isSelected,
     children = _ref2.children,
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? 'normal' : _ref2$textStyle,
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
@@ -73,7 +64,5 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarDropdownMenu = void 0;
 var _react = _interopRequireDefault(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 iconBefore = _ref.iconBefore,
@@ -15,6 +16,8 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label;
+  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
+    onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
@@ -32,6 +35,7 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
         isDisabled: isDisabled,
         label: label
       });
-    }
+    },
+    onOpenChange: onDropdownOpenChanged
   }, children);
 };

package/dist/cjs/ui/ToolbarSection.js

@@ -14,8 +14,10 @@ var styles = {
   container: "_1e0c1txw _4cvr1h6o"
 };
 var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    testId: testId
   }, children);
 };

package/dist/es2019/hooks/ui-context.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+const ToolbarUIContext = /*#__PURE__*/createContext({
+  onDropdownOpenChanged: () => {},
+  preventDefaultOnMouseDown: false
+});
+
+/**
+ * Access consumer specific config and state within a toolbar component
+ */
+export const useToolbarUI = () => {
+  const context = useContext(ToolbarUIContext);
+  if (!context) {
+    throw new Error('useToolbarUI must be used within ToolbarUIContext');
+  }
+  return context;
+};
+export const ToolbarUIProvider = ({
+  children,
+  onDropdownOpenChanged,
+  preventDefaultOnMouseDown
+}) => {
+  return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
+    value: {
+      onDropdownOpenChanged,
+      preventDefaultOnMouseDown
+    }
+  }, children);
+};

package/dist/es2019/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
-export { Toolbar } from './ui/Toolbar';
+export { Toolbar, PrimaryToolbar } from './ui/Toolbar';
 export { ToolbarButton } from './ui/ToolbarButton';
 export { ToolbarButtonGroup } from './ui/ToolbarButtonGroup';
 export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -49,4 +50,5 @@ export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
-export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
+export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -1,9 +1,13 @@
 
 ._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._1bsb184x{width:min-content}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
+._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/es2019/ui/Toolbar.js

@@ -2,16 +2,36 @@
 import "./Toolbar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
 };
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 export const Toolbar = ({
   children,
   label
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.toolbar,
+    xcss: cx(styles.toolbarBase, styles.toolbar),
+    role: "toolbar",
+    "aria-label": label
+  }, children);
+};
+
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+export const PrimaryToolbar = ({
+  children,
+  label
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
     "aria-label": label
   }, children);

package/dist/es2019/ui/ToolbarButton.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { useToolbarUI } from '../hooks/ui-context';
 const styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
@@ -30,6 +31,9 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   ariaKeyshortcuts,
   label
 }, ref) => {
+  const {
+    preventDefaultOnMouseDown
+  } = 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),
@@ -44,6 +48,11 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onMouseDown: event => {
+      if (preventDefaultOnMouseDown) {
+        event.preventDefault();
+      }
+    }
   }, iconBefore, children);
 });

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

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -4,19 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   children,
@@ -45,7 +38,6 @@ export const ToolbarDropdownItem = ({
   elemAfter,
   isSelected,
   children,
-  textStyle = 'normal',
   isDisabled,
   hasNestedDropdownMenu,
   triggerRef,
@@ -63,6 +55,4 @@ export const ToolbarDropdownItem = ({
   ref: triggerRef,
   component: CustomDropdownMenuItemButton,
   testId: testId
-}, /*#__PURE__*/React.createElement(Box, {
-  xcss: styles[textStyle]
-}, children));
+}, children);

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
+import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 export const ToolbarDropdownMenu = ({
   iconBefore,
@@ -9,6 +10,9 @@ export const ToolbarDropdownMenu = ({
   testId,
   label
 }) => {
+  const {
+    onDropdownOpenChanged
+  } = useToolbarUI();
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
       ref: triggerProps.triggerRef,
@@ -24,6 +28,7 @@ export const ToolbarDropdownMenu = ({
       groupLocation: groupLocation,
       isDisabled: isDisabled,
       label: label
-    })
+    }),
+    onOpenChange: onDropdownOpenChanged
   }, children);
 };

package/dist/es2019/ui/ToolbarSection.js

@@ -7,9 +7,11 @@ const styles = {
   container: "_1e0c1txw _4cvr1h6o"
 };
 export const ToolbarSection = ({
-  children
+  children,
+  testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    testId: testId
   }, children);
 };

package/dist/esm/hooks/ui-context.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+var ToolbarUIContext = /*#__PURE__*/createContext({
+  onDropdownOpenChanged: function onDropdownOpenChanged() {},
+  preventDefaultOnMouseDown: false
+});
+
+/**
+ * Access consumer specific config and state within a toolbar component
+ */
+export var useToolbarUI = function useToolbarUI() {
+  var context = useContext(ToolbarUIContext);
+  if (!context) {
+    throw new Error('useToolbarUI must be used within ToolbarUIContext');
+  }
+  return context;
+};
+export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
+  var children = _ref.children,
+    onDropdownOpenChanged = _ref.onDropdownOpenChanged,
+    preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown;
+  return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
+    value: {
+      onDropdownOpenChanged: onDropdownOpenChanged,
+      preventDefaultOnMouseDown: preventDefaultOnMouseDown
+    }
+  }, children);
+};

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
-export { Toolbar } from './ui/Toolbar';
+export { Toolbar, PrimaryToolbar } from './ui/Toolbar';
 export { ToolbarButton } from './ui/ToolbarButton';
 export { ToolbarButtonGroup } from './ui/ToolbarButtonGroup';
 export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -49,4 +50,5 @@ export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
-export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
+export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -1,9 +1,13 @@
 
 ._2rkoi2wt{border-radius:6px}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
-._1bsb184x{width:min-content}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1e0c1txw{display:flex}
+._1tkezwfg{min-height:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/esm/ui/Toolbar.js

@@ -2,15 +2,34 @@
 import "./Toolbar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbarBase: "_2rkoi2wt _bfhkvuon _1e0c1txw _4cvr1h6o",
+  toolbar: "_4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  primaryToolbar: "_bfhkvuon _1tkezwfg _ca0q12x7 _n3td12x7 _19bvutpp _u5f3utpp"
 };
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.toolbar,
+    xcss: cx(styles.toolbarBase, styles.toolbar),
+    role: "toolbar",
+    "aria-label": label
+  }, children);
+};
+
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
+  var children = _ref2.children,
+    label = _ref2.label;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.primaryToolbar),
     role: "toolbar",
     "aria-label": label
   }, children);