@atlaskit/editor-toolbar 0.2.3 → 0.3.0

package/src/ui/ColorPalette/Color.tsx

@@ -0,0 +1,110 @@
+/**
+ * @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/ToolbarDropdownMenu.tsx

@@ -1,11 +1,12 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, useCallback } from 'react';
 
-import DropdownMenu from '@atlaskit/dropdown-menu';
+import DropdownMenu, { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 
 import { useToolbarUI } from '../hooks/ui-context';
 import { type ToolbarButtonGroupLocation } from '../types';
 
 import { ToolbarButton } from './ToolbarButton';
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
 
 type ToolbarDropdownMenuProps = {
 	iconBefore: React.ReactNode;
@@ -14,9 +15,11 @@ type ToolbarDropdownMenuProps = {
 	isDisabled?: boolean;
 	testId?: string;
 	label?: string;
+	isOpen?: boolean;
+	onOpenChange?: (args: OnOpenChangeArgs) => void;
 };
 
-export const ToolbarDropdownMenu = ({
+const ToolbarDropdownMenuContent = ({
 	iconBefore,
 	groupLocation,
 	children,
@@ -25,6 +28,22 @@ export const ToolbarDropdownMenu = ({
 	label,
 }: ToolbarDropdownMenuProps) => {
 	const { onDropdownOpenChanged } = useToolbarUI();
+	const { closeMenu, isOpen, openMenu } = useToolbarDropdownMenu();
+
+	const handleOpenChange = useCallback((args: OnOpenChangeArgs) => {
+		onDropdownOpenChanged(args);
+		if (!args.isOpen) {
+			closeMenu();
+		}
+	}, [closeMenu, onDropdownOpenChanged]);
+
+	const handleClick = useCallback(() => {
+		if (!isOpen) {
+			openMenu();
+		} else {
+			closeMenu();
+		}
+	}, [closeMenu, openMenu, isOpen]);
 
 	return (
 		<DropdownMenu<HTMLButtonElement>
@@ -36,7 +55,10 @@ export const ToolbarDropdownMenu = ({
 					aria-haspopup={triggerProps['aria-haspopup']}
 					aria-controls={triggerProps['aria-controls']}
 					onBlur={triggerProps.onBlur}
-					onClick={triggerProps.onClick}
+					onClick={(e) => {
+						handleClick();
+						triggerProps.onClick && triggerProps.onClick(e);
+					}}
 					onFocus={triggerProps.onFocus}
 					testId={testId}
 					iconBefore={iconBefore}
@@ -45,9 +67,33 @@ export const ToolbarDropdownMenu = ({
 					label={label}
 				/>
 			)}
-			onOpenChange={onDropdownOpenChanged}
+			onOpenChange={handleOpenChange}
+			isOpen={isOpen}
 		>
 			{children}
 		</DropdownMenu>
 	);
 };
+
+export const ToolbarDropdownMenu = ({
+	iconBefore,
+	groupLocation,
+	children,
+	isDisabled,
+	testId,
+	label,
+}: ToolbarDropdownMenuProps) => {
+	return (
+		<ToolbarDropdownMenuProvider>
+			<ToolbarDropdownMenuContent
+				iconBefore={iconBefore}
+				groupLocation={groupLocation}
+				isDisabled={isDisabled}
+				testId={testId}
+				label={label}
+			>
+				{children}
+			</ToolbarDropdownMenuContent>
+		</ToolbarDropdownMenuProvider>
+	);
+};

package/src/ui/ToolbarDropdownMenuContext.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface ToolbarDropdownMenuContextValue {
+	openMenu: () => void;
+	closeMenu: () => void;
+	isOpen: boolean;
+}
+
+const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(undefined);
+
+export const useToolbarDropdownMenu = () => {
+	const context = useContext(ToolbarDropdownMenuContext);
+	if (!context) {
+		throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+	}
+	return context;
+};
+
+interface ToolbarDropdownMenuProviderProps {
+	children: React.ReactNode;
+}
+
+export const ToolbarDropdownMenuProvider = ({
+	children,
+}: ToolbarDropdownMenuProviderProps) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const openMenu = () => setIsOpen(true);
+	const closeMenu = () => {
+		setIsOpen(false);
+	};
+
+	const contextValue: ToolbarDropdownMenuContextValue = {
+		openMenu,
+		closeMenu,
+		isOpen,
+	};
+
+	return (
+		<ToolbarDropdownMenuContext.Provider value={contextValue}>
+			{children}
+		</ToolbarDropdownMenuContext.Provider>
+	);
+};