@atlaskit/editor-toolbar 0.2.3 → 0.3.1

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ToolbarDropdownMenuContextValue {
+    openMenu: () => void;
+    closeMenu: () => void;
+    isOpen: boolean;
+}
+export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+interface ToolbarDropdownMenuProviderProps {
+    children: React.ReactNode;
+}
+export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
-    content: string;
+    content: React.ReactNode;
     children: React.ReactNode;
     position?: PositionType;
 };

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -162,16 +162,12 @@ export const ExampleManuallyComposedToolbar = () => {
 							<ToolbarButton
 								iconBefore={<AIChatIcon label="Ask Rovo" />}
 								onClick={onClick('Ask Rovo')}
-								groupLocation="start"
 								isDisabled={isRovoDisabled}
 							>
 								Ask Rovo
 							</ToolbarButton>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
@@ -380,16 +376,12 @@ export const ExampleManuallyComposedToolbar = () => {
 									formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
 									onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
 								)}
-								groupLocation="start"
 								isSelected={formatting.bold || formatting.italic}
 								isDisabled={formatting.italic ? isItalicDisabled : isBoldDisabled}
 								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<BoldIcon label="Bold" />}
@@ -471,7 +463,6 @@ export const ExampleManuallyComposedToolbar = () => {
 									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
 									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
 								)}
-								groupLocation="start"
 								isSelected={listOrAlignment !== 'none'}
 								isDisabled={
 									listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled
@@ -480,7 +471,6 @@ export const ExampleManuallyComposedToolbar = () => {
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
 							iconBefore={<MoreItemsIcon label="Lists, indentation and alignment" />}
-							groupLocation="end"
 						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.2.3",
+	"version": "0.3.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -36,10 +36,12 @@
 		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3"
+		"@compiled/react": "^0.18.3",
+		"chromatism": "^2.6.0"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0"
+		"react": "^18.2.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",

package/src/index.ts

@@ -9,8 +9,8 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
+export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
@@ -58,6 +58,8 @@ export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
 
-export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export { default as ColorPalette } from './ui/ColorPalette';
+
+export type { IconComponent } from './types';
 
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/src/types.ts

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

package/src/ui/ColorPalette/Color.tsx

@@ -0,0 +1,118 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback, memo } from 'react';
+
+import { css, jsx } from '@compiled/react';
+
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+
+import type { ColorProps } from './types';
+
+const buttonWrapperStyles = css({
+	borderColor: 'transparent',
+	borderStyle: 'solid',
+	borderWidth: '1px',
+	display: 'flex',
+	alignItems: 'center',
+	paddingTop: token('space.025', '2px'),
+	paddingRight: token('space.025', '2px'),
+	paddingBottom: token('space.025', '2px'),
+	paddingLeft: token('space.025', '2px'),
+	borderRadius: token('border.radius.100', '4px'),
+	'&:focus-within, &:focus, &:hover': {
+		borderColor: token('color.border'),
+	},
+});
+
+const buttonStyles = css({
+	height: token('space.300', '26px'),
+	width: token('space.300', '26px'),
+	backgroundColor: token('color.background.neutral'),
+	padding: 0,
+	borderRadius: token('border.radius.050', '4px'),
+	border: `1px solid ${token('color.border.inverse')}`,
+	cursor: 'pointer',
+	display: 'block',
+	position: 'relative',
+	'&:focus': {
+		outline: `2px solid ${token('color.border.focused')}`,
+		outlineOffset: token('space.025', '2px'),
+	},
+});
+
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export const Color = memo<ColorProps>(
+	({
+		autoFocus,
+		tabIndex,
+		value,
+		label,
+		isSelected,
+		borderColor,
+		checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
+		hexToPaletteColor,
+		decorator,
+		onClick,
+		onKeyDown,
+	}) => {
+		const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+
+		const handleMouseDown = useCallback((e: React.MouseEvent) => {
+			e.preventDefault();
+		}, []);
+
+		const handleClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.preventDefault();
+				onClick(value, label);
+			},
+			[onClick, value, label],
+		);
+
+		const handleKeyDown = useCallback(
+			(e: React.KeyboardEvent) => {
+				if (!onKeyDown) {
+					return;
+				}
+				e.preventDefault();
+				onKeyDown(value, label, e);
+			},
+			[onKeyDown, value, label],
+		);
+
+		return (
+			<Tooltip content={label}>
+				<span css={buttonWrapperStyles}>
+					<button
+						type="button"
+						css={buttonStyles}
+						aria-label={label}
+						role="radio"
+						aria-checked={isSelected}
+						onClick={handleClick}
+						onKeyDown={handleKeyDown}
+						onMouseDown={handleMouseDown}
+						tabIndex={tabIndex}
+						style={{
+							backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
+							border: `1px solid ${borderColor}`,
+						}}
+						autoFocus={autoFocus}
+					>
+						{!decorator && isSelected && (
+							<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
+						)}
+						{decorator}
+					</button>
+				</span>
+			</Tooltip>
+		);
+	},
+);

package/src/ui/ColorPalette/getColorMessage.ts

@@ -0,0 +1,27 @@
+import { type MessageDescriptor } from 'react-intl-next';
+
+/**
+ * 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
+ */
+export default function getColorMessage(
+	messages: Record<string | number, MessageDescriptor>,
+	color: string,
+): MessageDescriptor | undefined {
+	const message = messages[color as keyof typeof messages];
+
+	if (!message) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`Color palette does not have an internationalization message for color ${color.toUpperCase()}.
+You must add a message description to properly translate this color.
+Using current label as default message.
+This could have happened when someone changed the 'colorPalette' from 'adf-schema' without updating this file.
+`,
+		);
+	}
+
+	return message;
+}

package/src/ui/ColorPalette/index.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react';
+
+import chromatism from 'chromatism';
+import { useIntl } from 'react-intl-next';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token, useThemeObserver } from '@atlaskit/tokens';
+
+import { Color } from './Color';
+import getColorMessage from './getColorMessage';
+import type { ColorPaletteProps } from './types';
+import {
+	DEFAULT_COLOR_PICKER_COLUMNS,
+	getColorsPerRowFromPalette,
+	getTokenCSSVariableValue,
+} from './utils';
+
+const styles = cssMap({
+	paletteWrapper: {
+		display: 'flex',
+	},
+});
+
+/**
+ * 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: string, useIconToken: boolean): string {
+	const tokenVal = getTokenCSSVariableValue(color);
+	const colorValue = !!tokenVal ? tokenVal : color;
+
+	// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+	const contrastColor = ['#FFFFFF', '#42526E'].sort(
+		(a, b) => chromatism.difference(b, colorValue) - chromatism.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' ? token('color.icon.inverse') : token('color.icon');
+}
+
+/**
+ * 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
+ */
+const ColorPalette = ({
+	cols = DEFAULT_COLOR_PICKER_COLUMNS,
+	onClick,
+	onKeyDown,
+	selectedColor,
+	paletteOptions,
+}: ColorPaletteProps) => {
+	const { formatMessage } = useIntl();
+	const { palette, hexToPaletteColor, paletteColorTooltipMessages } = paletteOptions;
+
+	const { colorMode: tokenTheme } = useThemeObserver();
+	const useIconToken = !!hexToPaletteColor;
+
+	const colorsPerRow = useMemo(() => {
+		return getColorsPerRowFromPalette(palette, cols);
+	}, [palette, cols]);
+
+	return (
+		<>
+			{colorsPerRow.map((row) => (
+				<Box xcss={styles.paletteWrapper} key={`row-first-color-${row[0].value}`} role="radiogroup">
+					{row.map(({ value, label, border, message, decorator }) => {
+						let tooltipMessage = message;
+
+						// Override with theme-specific tooltip messages if provided
+						if (paletteColorTooltipMessages) {
+							if (tokenTheme === 'dark') {
+								tooltipMessage = getColorMessage(
+									paletteColorTooltipMessages.dark,
+									value.toUpperCase(),
+								);
+							}
+							if (tokenTheme === 'light') {
+								tooltipMessage = getColorMessage(
+									paletteColorTooltipMessages.light,
+									value.toUpperCase(),
+								);
+							}
+						}
+
+						return (
+							<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}
+							/>
+						);
+					})}
+				</Box>
+			))}
+		</>
+	);
+};
+
+export default ColorPalette;

package/src/ui/ColorPalette/types.ts

@@ -0,0 +1,96 @@
+import { type ReactElement } from 'react';
+
+import { type MessageDescriptor } from 'react-intl-next';
+
+/**
+ * Represents a single color in the palette
+ */
+export interface PaletteColor {
+	/** The color value (hex, token, etc.) */
+	value: string;
+	/** Display label for the color */
+	label: string;
+	/** Border color for the color swatch */
+	border: string;
+	/** Optional internationalization message */
+	message?: MessageDescriptor;
+	/** Optional decorator element to display instead of checkmark */
+	decorator?: ReactElement;
+}
+
+/**
+ * Array of palette colors
+ */
+export type Palette = Array<PaletteColor>;
+
+/**
+ * Tooltip messages for different themes
+ */
+export type PaletteTooltipMessages = {
+	dark: Record<string, MessageDescriptor>;
+	light: Record<string, MessageDescriptor>;
+};
+
+/**
+ * Configuration options for the color palette
+ */
+export interface PaletteOptions {
+	/** Array of colors to display */
+	palette: PaletteColor[];
+	/**
+	 * Function to convert hex codes to design system tokens
+	 * Different color palettes may use different mapping functions
+	 */
+	hexToPaletteColor?: (hexColor: string) => string | undefined;
+	/**
+	 * Tooltip messages for different color themes
+	 * Consumer determines which tooltip messages to use
+	 */
+	paletteColorTooltipMessages?: PaletteTooltipMessages;
+}
+
+/**
+ * Props for the main ColorPalette component
+ */
+export interface ColorPaletteProps {
+	/** Currently selected color value */
+	selectedColor: string | null;
+	/** Callback when a color is clicked */
+	onClick: (value: string, label: string) => void;
+	/** Optional callback for keyboard navigation */
+	onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+	/** Number of columns in the palette grid */
+	cols?: number;
+	/** Optional CSS class name */
+	className?: string;
+	/** Palette configuration options */
+	paletteOptions: PaletteOptions;
+}
+
+/**
+ * Props for individual color palette items
+ */
+export interface ColorProps {
+	/** The color value */
+	value: string;
+	/** Display label for accessibility */
+	label: string;
+	/** Tab index for keyboard navigation */
+	tabIndex?: number;
+	/** Whether this color is currently selected */
+	isSelected?: boolean;
+	/** Click handler */
+	onClick: (value: string, label: string) => void;
+	/** Keyboard event handler */
+	onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+	/** Border color for the swatch */
+	borderColor: string;
+	/** Color for the checkmark icon */
+	checkMarkColor?: string;
+	/** Whether to auto-focus this item */
+	autoFocus?: boolean;
+	/** Function to convert hex to palette color */
+	hexToPaletteColor?: (hexColor: string) => string | undefined;
+	/** Optional decorator element */
+	decorator?: ReactElement;
+}

package/src/ui/ColorPalette/utils.ts

@@ -0,0 +1,102 @@
+import type { PaletteColor } from './types';
+
+/**
+ * Default number of columns in the color picker
+ */
+export const 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
+ */
+export function getColorsPerRowFromPalette(
+	palette: PaletteColor[],
+	cols: number = DEFAULT_COLOR_PICKER_COLUMNS,
+): PaletteColor[][] {
+	return palette.reduce((resultArray: PaletteColor[][], item: PaletteColor, index: number) => {
+		const 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
+ */
+export function getSelectedRowAndColumn(
+	colorsPerRow: PaletteColor[][],
+	selectedColor: string | null,
+) {
+	let selectedRowIndex = -1;
+	let selectedColumnIndex = -1;
+
+	colorsPerRow.forEach((row, rowIndex) => {
+		row.forEach(({ value }, columnIndex) => {
+			if (value === selectedColor) {
+				selectedRowIndex = rowIndex;
+				selectedColumnIndex = columnIndex;
+			}
+		});
+	});
+
+	return {
+		selectedRowIndex,
+		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
+ */
+export function getSelectedRowAndColumnFromPalette(
+	palette: PaletteColor[],
+	selectedColor: string | null,
+	cols: number = DEFAULT_COLOR_PICKER_COLUMNS,
+) {
+	const 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
+ */
+export const getTokenCSSVariableValue = (variableExpression: string): string => {
+	// Match CSS variable pattern: var(--variable-name, fallback)
+	// Ignored via go/ees005
+	// eslint-disable-next-line require-unicode-regexp
+	const matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?/);
+	if (matcher) {
+		const variable = matcher[1].trim();
+		const 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
+		const value = window
+			.getComputedStyle(document.documentElement)
+			.getPropertyValue(variable)
+			.trim();
+
+		return value || fallback;
+	}
+
+	return '';
+};

package/src/ui/ToolbarButton.tsx

@@ -6,7 +6,6 @@ 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({
 	button: {
@@ -50,28 +49,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	groupStart: {
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		justifyContent: 'flex-end',
-		paddingLeft: token('space.075'),
-		paddingRight: token('space.025'),
-	},
-	groupMiddle: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		paddingLeft: token('space.050'),
-		paddingRight: token('space.050'),
-	},
-	groupEnd: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		justifyContent: 'flex-start',
-		paddingLeft: token('space.025'),
-		paddingRight: token('space.075'),
-	},
 });
 
 type ToolbarButtonProps = Partial<TriggerProps> & {
@@ -82,7 +59,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	testId?: string;
 	iconBefore: React.ReactNode;
-	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
 	label?: string;
@@ -102,7 +78,6 @@ export const ToolbarButton = forwardRef(
 			onBlur,
 			onFocus,
 			testId,
-			groupLocation,
 			isDisabled,
 			ariaKeyshortcuts,
 			label,
@@ -117,9 +92,6 @@ export const ToolbarButton = forwardRef(
 				xcss={cx(
 					styles.button,
 					isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
-					groupLocation === 'start' && styles.groupStart,
-					groupLocation === 'middle' && styles.groupMiddle,
-					groupLocation === 'end' && styles.groupEnd,
 				)}
 				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}