@atlaskit/editor-toolbar 0.1.0 → 0.2.0

package/dist/esm/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';
 var styles = {
   button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
@@ -29,6 +30,8 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts,
     label = _ref.label;
+  var _useToolbarUI = useToolbarUI(),
+    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),
@@ -43,6 +46,11 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     testId: testId,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onMouseDown: function onMouseDown(event) {
+      if (preventDefaultOnMouseDown) {
+        event.preventDefault();
+      }
+    }
   }, iconBefore, children);
 });

package/dist/esm/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/esm/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';
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -46,8 +39,6 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     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,
@@ -65,7 +56,5 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/esm/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 var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
   var iconBefore = _ref.iconBefore,
@@ -8,6 +9,8 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label;
+  var _useToolbarUI = useToolbarUI(),
+    onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -25,6 +28,7 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         isDisabled: isDisabled,
         label: label
       });
-    }
+    },
+    onOpenChange: onDropdownOpenChanged
   }, children);
 };

package/dist/esm/ui/ToolbarSection.js

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

package/dist/types/hooks/ui-context.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+type ToolbarUIContextType = {
+    /**
+     * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
+     *
+     * If the dropdown was closed programmatically, the `event` parameter will be `null`.
+     */
+    onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
+    /**
+     * Whether to prevent default behavior on mouse down events on ToolbarButton.
+     */
+    preventDefaultOnMouseDown?: boolean;
+};
+/**
+ * Access consumer specific config and state within a toolbar component
+ */
+export declare const useToolbarUI: () => ToolbarUIContextType;
+type ToolbarUIProviderProps = {
+    children: React.ReactNode;
+} & ToolbarUIContextType;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -9,6 +9,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';
@@ -50,3 +51,4 @@ export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type NewCoreIconProps } from '@atlaskit/icon';
 export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

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

@@ -3,5 +3,12 @@ type ToolbarProps = {
     children?: ReactNode;
     label: string;
 };
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+export declare const PrimaryToolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 export {};

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ToolbarDropdownDivider: () => JSX.Element;

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

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
+    testId?: string;
 };
-export declare const ToolbarSection: ({ children }: ToolbarSectionProps) => React.JSX.Element;
+export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/hooks/ui-context.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+type ToolbarUIContextType = {
+    /**
+     * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
+     *
+     * If the dropdown was closed programmatically, the `event` parameter will be `null`.
+     */
+    onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
+    /**
+     * Whether to prevent default behavior on mouse down events on ToolbarButton.
+     */
+    preventDefaultOnMouseDown?: boolean;
+};
+/**
+ * Access consumer specific config and state within a toolbar component
+ */
+export declare const useToolbarUI: () => ToolbarUIContextType;
+type ToolbarUIProviderProps = {
+    children: React.ReactNode;
+} & ToolbarUIContextType;
+export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, }: ToolbarUIProviderProps) => React.JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-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';
@@ -9,6 +9,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';
@@ -50,3 +51,4 @@ export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type NewCoreIconProps } from '@atlaskit/icon';
 export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

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

@@ -3,5 +3,12 @@ type ToolbarProps = {
     children?: ReactNode;
     label: string;
 };
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+export declare const PrimaryToolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 export {};

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ToolbarDropdownDivider: () => JSX.Element;

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

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
+    testId?: string;
 };
-export declare const ToolbarSection: ({ children }: ToolbarSectionProps) => React.JSX.Element;
+export declare const ToolbarSection: ({ children, testId }: ToolbarSectionProps) => React.JSX.Element;
 export {};

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
@@ -52,6 +53,27 @@ import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
 import { useExampleToolbarState } from './useExampleToolbarState';
 
+const headingSizeStylesMap = cssMap({
+	xlarge: {
+		font: token('font.heading.xlarge'),
+	},
+	large: {
+		font: token('font.heading.large'),
+	},
+	medium: {
+		font: token('font.heading.medium'),
+	},
+	small: {
+		font: token('font.heading.small'),
+	},
+	xsmall: {
+		font: token('font.heading.xsmall'),
+	},
+	xxsmall: {
+		font: token('font.heading.xxsmall'),
+	},
+});
+
 export const ExampleManuallyComposedToolbar = () => {
 	const {
 		textStyle,
@@ -271,7 +293,6 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
 										onClick={onClick('Normal text', onSetTextStyle('normal'))}
 										isSelected={textStyle === 'normal'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥0"
 									>
 										Normal text
@@ -281,20 +302,18 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
 										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
 										isSelected={textStyle === 'heading1'}
-										textStyle="heading1"
 										ariaKeyshortcuts="⌘⌥1"
 									>
-										Heading 1
+										<Box xcss={headingSizeStylesMap.xlarge}>Heading 1</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingTwoIcon label="Heading Two" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
 										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
 										isSelected={textStyle === 'heading2'}
-										textStyle="heading2"
 										ariaKeyshortcuts="⌘⌥2"
 									>
-										Heading 2
+										<Box xcss={headingSizeStylesMap.large}>Heading 2</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingThreeIcon label="Heading Three" />}
@@ -304,44 +323,40 @@ export const ExampleManuallyComposedToolbar = () => {
 										textStyle="heading3"
 										ariaKeyshortcuts="⌘⌥3"
 									>
-										Heading 3
+										<Box xcss={headingSizeStylesMap.medium}>Heading 3</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFourIcon label="Heading Four" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
 										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
 										isSelected={textStyle === 'heading4'}
-										textStyle="heading4"
 										ariaKeyshortcuts="⌘⌥4"
 									>
-										Heading 4
+										<Box xcss={headingSizeStylesMap.small}>Heading 4</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFiveIcon label="Heading Five" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
 										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
 										isSelected={textStyle === 'heading5'}
-										textStyle="heading5"
 										ariaKeyshortcuts="⌘⌥5"
 									>
-										Heading 5
+										<Box xcss={headingSizeStylesMap.xsmall}>Heading 5</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingSixIcon label="Heading Six" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
 										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
 										isSelected={textStyle === 'heading6'}
-										textStyle="heading6"
 										ariaKeyshortcuts="⌘⌥6"
 									>
-										Heading 6
+										<Box xcss={headingSizeStylesMap.xxsmall}>Heading 6</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<QuoteIcon label="Quote" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
 										onClick={onClick('Quote', onSetTextStyle('quote'))}
 										isSelected={textStyle === 'quote'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥9"
 									>
 										Quote

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -28,7 +28,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/icon": "^27.11.0",
 		"@atlaskit/icon-lab": "^5.4.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",

package/src/hooks/ui-context.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from 'react';
+
+import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+
+type ToolbarUIContextType = {
+	/**
+	 * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
+	 *
+	 * If the dropdown was closed programmatically, the `event` parameter will be `null`.
+	 */
+	onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
+
+	/**
+	 * Whether to prevent default behavior on mouse down events on ToolbarButton.
+	 */
+	preventDefaultOnMouseDown?: boolean;
+};
+
+const ToolbarUIContext = createContext<ToolbarUIContextType>({
+	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;
+};
+
+type ToolbarUIProviderProps = {
+	children: React.ReactNode;
+} & ToolbarUIContextType;
+
+export const ToolbarUIProvider = ({
+	children,
+	onDropdownOpenChanged,
+	preventDefaultOnMouseDown,
+}: ToolbarUIProviderProps) => {
+	return (
+		<ToolbarUIContext.Provider value={{ onDropdownOpenChanged, preventDefaultOnMouseDown }}>
+			{children}
+		</ToolbarUIContext.Provider>
+	);
+};

package/src/index.ts

@@ -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';
@@ -53,3 +54,5 @@ export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
 export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+
+export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/src/ui/Toolbar.tsx

@@ -1,21 +1,30 @@
 import React, { type ReactNode } from 'react';
 
-import { cssMap } from '@atlaskit/css';
+import { cssMap, cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
-	toolbar: {
+	toolbarBase: {
 		backgroundColor: token('elevation.surface'),
-		paddingRight: token('space.050'),
-		paddingLeft: token('space.050'),
-		boxShadow: token('elevation.shadow.overlay'),
 		borderRadius: '6px',
-		height: '36px',
-		width: 'min-content',
 		display: 'flex',
 		alignItems: 'center',
 	},
+	toolbar: {
+		height: '36px',
+		paddingRight: token('space.050'),
+		paddingLeft: token('space.050'),
+		boxShadow: token('elevation.shadow.overlay'),
+	},
+	primaryToolbar: {
+		backgroundColor: token('elevation.surface'),
+		minHeight: '32px',
+		paddingTop: token('space.075'),
+		paddingBottom: token('space.075'),
+		paddingLeft: token('space.150'),
+		paddingRight: token('space.150'),
+	},
 });
 
 type ToolbarProps = {
@@ -23,9 +32,23 @@ type ToolbarProps = {
 	label: string;
 };
 
+/**
+ * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ */
 export const Toolbar = ({ children, label }: ToolbarProps) => {
 	return (
-		<Box xcss={styles.toolbar} role="toolbar" aria-label={label}>
+		<Box xcss={cx(styles.toolbarBase, styles.toolbar)} role="toolbar" aria-label={label}>
+			{children}
+		</Box>
+	);
+};
+
+/**
+ *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
+ */
+export const PrimaryToolbar = ({ children, label }: ToolbarProps) => {
+	return (
+		<Box xcss={cx(styles.toolbarBase, styles.primaryToolbar)} role="toolbar" aria-label={label}>
 			{children}
 		</Box>
 	);

package/src/ui/ToolbarButton.tsx

@@ -5,6 +5,7 @@ import { type TriggerProps } from '@atlaskit/popup';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
+import { useToolbarUI } from '../hooks/ui-context';
 import { type ToolbarButtonGroupLocation } from '../types';
 
 const styles = cssMap({
@@ -108,6 +109,8 @@ export const ToolbarButton = forwardRef(
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
+		const { preventDefaultOnMouseDown } = useToolbarUI();
+
 		return (
 			<Pressable
 				ref={ref}
@@ -130,6 +133,11 @@ export const ToolbarButton = forwardRef(
 				onFocus={onFocus}
 				testId={testId}
 				isDisabled={isDisabled}
+				onMouseDown={(event) => {
+					if (preventDefaultOnMouseDown) {
+						event.preventDefault();
+					}
+				}}
 			>
 				{iconBefore}
 				{children}

package/src/ui/ToolbarDropdownItem.tsx

@@ -3,7 +3,7 @@ import React, { type ReactNode, forwardRef, type Ref } from 'react';
 import { cssMap, cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 type TextStyle =
@@ -50,27 +50,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	normal: {
-		font: token('font.body'),
-	},
-	heading1: {
-		font: token('font.heading.xlarge'),
-	},
-	heading2: {
-		font: token('font.heading.large'),
-	},
-	heading3: {
-		font: token('font.heading.medium'),
-	},
-	heading4: {
-		font: token('font.heading.small'),
-	},
-	heading5: {
-		font: token('font.heading.xsmall'),
-	},
-	heading6: {
-		font: token('font.heading.xxsmall'),
-	},
 });
 
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
@@ -137,7 +116,6 @@ export const ToolbarDropdownItem = ({
 	elemAfter,
 	isSelected,
 	children,
-	textStyle = 'normal',
 	isDisabled,
 	hasNestedDropdownMenu,
 	triggerRef,
@@ -157,6 +135,6 @@ export const ToolbarDropdownItem = ({
 		component={CustomDropdownMenuItemButton}
 		testId={testId}
 	>
-		<Box xcss={styles[textStyle]}>{children}</Box>
+		{children}
 	</DropdownItem>
 );