@atlaskit/editor-toolbar 0.3.5 → 0.3.7

package/src/ui/ColorPalette/utils.ts

@@ -1,102 +0,0 @@
-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/Toolbar.tsx

@@ -1,57 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import { cssMap, cx } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	toolbarBase: {
-		backgroundColor: token('elevation.surface'),
-		borderRadius: '6px',
-		display: 'flex',
-		alignItems: 'center',
-		gap: token('space.050'),
-	},
-	toolbar: {
-		height: '36px',
-		paddingRight: token('space.050'),
-		paddingLeft: token('space.050'),
-		boxShadow: token('elevation.shadow.overlay'),
-	},
-	primaryToolbar: {
-		backgroundColor: token('elevation.surface'),
-		minHeight: '32px',
-	},
-});
-
-type ToolbarProps = {
-	children?: ReactNode;
-	/**
-	 * aria-label for the toolbar (No localisation needed as it won't be read by screen readers).
-	 *
-	 * use case: query select the toolbar to position floating toolbar
-	 */
-	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={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

@@ -1,120 +0,0 @@
-import React, { forwardRef, type ReactNode, type Ref } from 'react';
-
-import { cssMap, cx } from '@atlaskit/css';
-import { type TriggerProps } from '@atlaskit/popup';
-import { Pressable } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-import { useToolbarUI } from '../hooks/ui-context';
-
-const styles = cssMap({
-	button: {
-		display: 'flex',
-		gap: token('space.075'),
-		backgroundColor: token('color.background.neutral.subtle'),
-		whiteSpace: 'nowrap',
-		alignItems: 'center',
-		justifyContent: 'center',
-		borderRadius: token('border.radius.100'),
-		minHeight: '28px',
-		color: token('color.text.subtle'),
-		fontWeight: token('font.weight.medium'),
-		paddingLeft: token('space.100'),
-		paddingRight: token('space.100'),
-		'&:focus-visible': {
-			outlineOffset: '0',
-			zIndex: 1,
-			position: 'relative',
-		},
-	},
-	enabled: {
-		'&:hover': {
-			backgroundColor: token('color.background.neutral.subtle.hovered'),
-		},
-		'&:active': {
-			backgroundColor: token('color.background.neutral.subtle.pressed'),
-		},
-	},
-	disabled: {
-		color: token('color.text.disabled'),
-		cursor: 'not-allowed',
-	},
-	selected: {
-		backgroundColor: token('color.background.selected'),
-		color: token('color.text.selected'),
-		'&:hover': {
-			backgroundColor: token('color.background.selected.hovered'),
-		},
-		'&:active': {
-			backgroundColor: token('color.background.selected.pressed'),
-		},
-	},
-});
-
-type ToolbarButtonProps = Partial<TriggerProps> & {
-	children?: ReactNode;
-	isSelected?: boolean;
-	onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-	onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-	testId?: string;
-	iconBefore: React.ReactNode;
-	isDisabled?: boolean;
-	ariaKeyshortcuts?: string;
-	label?: string;
-};
-
-export const ToolbarButton = forwardRef(
-	(
-		{
-			iconBefore,
-			children,
-			onClick,
-			isSelected,
-			'aria-expanded': ariaExpanded,
-			'aria-haspopup': ariaHasPopup,
-			'aria-controls': ariaControls,
-			'data-ds--level': dataDsLevel,
-			onBlur,
-			onFocus,
-			testId,
-			isDisabled,
-			ariaKeyshortcuts,
-			label,
-		}: ToolbarButtonProps,
-		ref: Ref<HTMLButtonElement>,
-	) => {
-		const { preventDefaultOnMouseDown, isDisabled: ctxDisabled } = useToolbarUI();
-		const disabled = Boolean(ctxDisabled || isDisabled);
-
-		return (
-			<Pressable
-				ref={ref}
-				xcss={cx(
-					styles.button,
-					disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
-				)}
-				aria-pressed={isSelected}
-				aria-expanded={ariaExpanded}
-				aria-haspopup={ariaHasPopup}
-				aria-controls={ariaControls}
-				aria-keyshortcuts={ariaKeyshortcuts}
-				aria-label={label}
-				data-ds--level={dataDsLevel}
-				onClick={onClick}
-				onBlur={onBlur}
-				onFocus={onFocus}
-				testId={testId}
-				isDisabled={disabled}
-				onMouseDown={(event) => {
-					if (preventDefaultOnMouseDown) {
-						event.preventDefault();
-					}
-				}}
-			>
-				{iconBefore}
-				{children}
-			</Pressable>
-		);
-	},
-);

package/src/ui/ToolbarButtonGroup.tsx

@@ -1,57 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Children, Fragment, type ReactNode } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	container: {
-		display: 'flex',
-	},
-	firstChild: {
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-		button: {
-			borderTopRightRadius: 0,
-			borderBottomRightRadius: 0,
-			paddingInline: token('space.075'),
-		},
-	},
-	lastChild: {
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-		button: {
-			borderTopLeftRadius: 0,
-			borderBottomLeftRadius: 0,
-			paddingInline: token('space.075'),
-		},
-	},
-});
-
-type ToolbarButtonGroupProps = {
-	children?: ReactNode;
-};
-
-export const ToolbarButtonGroup = ({ children }: ToolbarButtonGroupProps) => {
-	const items = Children.toArray(children);
-	const FirstChild = items.at(0);
-	const LastChild = items.at(-1);
-	const middleChildren = items.slice(1, -1);
-
-	return (
-		<Box xcss={styles.container}>
-			{items.length <= 1 ? (
-				children
-			) : (
-				<Fragment>
-					<div css={styles.firstChild}>{FirstChild}</div>
-					{middleChildren}
-					<div css={styles.lastChild}>{LastChild}</div>
-				</Fragment>
-			)}
-		</Box>
-	);
-};

package/src/ui/ToolbarColorSwatch.tsx

@@ -1,37 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-type ToolbarColorSwatchProps = {
-	children?: ReactNode;
-	highlightColor?: string;
-};
-
-const styles = cssMap({
-	colorSwatch: {
-		display: 'flex',
-		justifyContent: 'center',
-		alignItems: 'center',
-		border: `${token('border.width')} solid ${token('color.border')}`,
-		borderRadius: token('border.radius.100'),
-		width: '20px',
-		height: '20px',
-		marginLeft: token('space.negative.050'),
-		marginRight: token('space.negative.050'),
-	},
-});
-
-export const ToolbarColorSwatch = ({ children, highlightColor }: ToolbarColorSwatchProps) => {
-	return (
-		<Box
-			xcss={styles.colorSwatch}
-			style={{
-				backgroundColor: highlightColor,
-			}}
-		>
-			{children}
-		</Box>
-	);
-};

package/src/ui/ToolbarDropdownItem.tsx

@@ -1,142 +0,0 @@
-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 { Pressable } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-type TextStyle =
-	| 'normal'
-	| 'heading1'
-	| 'heading2'
-	| 'heading3'
-	| 'heading4'
-	| 'heading5'
-	| 'heading6';
-
-const styles = cssMap({
-	toolbarDropdownItem: {
-		display: 'flex',
-		position: 'relative',
-		backgroundColor: token('color.background.neutral.subtle'),
-		width: '100%',
-		minHeight: '36px',
-		minWidth: '230px',
-		paddingInline: token('space.200'),
-		paddingBlock: token('space.100'),
-		'&:focus-visible': {
-			outlineOffset: token('space.negative.025'),
-			borderRadius: token('border.radius'),
-		},
-	},
-	enabled: {
-		'&:hover': {
-			backgroundColor: token('color.background.neutral.subtle.hovered'),
-		},
-		'&:active': {
-			backgroundColor: token('color.background.neutral.subtle.pressed'),
-		},
-	},
-	disabled: {
-		color: token('color.text.disabled'),
-		cursor: 'not-allowed',
-	},
-	selected: {
-		backgroundColor: token('color.background.selected'),
-		color: token('color.text.selected'),
-		'&:hover': {
-			backgroundColor: token('color.background.selected.hovered'),
-		},
-		'&:active': {
-			backgroundColor: token('color.background.selected.pressed'),
-		},
-	},
-});
-
-export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
-	'aria-haspopup'?: boolean;
-	'aria-disabled'?: boolean;
-	'aria-pressed'?: boolean;
-	'aria-keyshortcuts'?: string;
-};
-
-const CustomDropdownMenuItemButton = forwardRef<
-	HTMLButtonElement,
-	CustomDropdownMenuItemButtonProps
->(
-	(
-		{
-			children,
-			'data-testid': testId,
-			'aria-haspopup': ariaHasPopup,
-			'aria-disabled': ariaDisabled,
-			'aria-pressed': ariaPressed,
-			'aria-keyshortcuts': ariaKeyshortcuts,
-			onClick,
-			tabIndex,
-		},
-		ref,
-	) => (
-		<Pressable
-			testId={testId}
-			xcss={cx(
-				styles.toolbarDropdownItem,
-				ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled,
-			)}
-			onClick={onClick}
-			tabIndex={tabIndex}
-			aria-haspopup={ariaHasPopup}
-			aria-expanded={ariaHasPopup ? (ariaPressed ? true : false) : undefined}
-			aria-pressed={ariaPressed}
-			aria-disabled={ariaDisabled}
-			aria-keyshortcuts={ariaKeyshortcuts}
-			ref={ref}
-		>
-			{children}
-		</Pressable>
-	),
-);
-
-type ToolbarDropdownItemProps = {
-	onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-	elemBefore?: ReactNode;
-	elemAfter?: ReactNode;
-	isSelected?: boolean;
-	children?: React.ReactNode;
-	textStyle?: TextStyle;
-	isDisabled?: boolean;
-	hasNestedDropdownMenu?: boolean;
-	triggerRef?: Ref<HTMLButtonElement>;
-	testId?: string;
-	ariaKeyshortcuts?: string;
-};
-
-export const ToolbarDropdownItem = ({
-	onClick,
-	elemBefore,
-	elemAfter,
-	isSelected,
-	children,
-	isDisabled,
-	hasNestedDropdownMenu,
-	triggerRef,
-	testId,
-	ariaKeyshortcuts,
-}: ToolbarDropdownItemProps) => (
-	<DropdownItem
-		onClick={onClick}
-		elemBefore={elemBefore}
-		elemAfter={elemAfter}
-		isSelected={isSelected}
-		isDisabled={isDisabled}
-		aria-haspopup={hasNestedDropdownMenu}
-		aria-pressed={isSelected}
-		aria-keyshortcuts={ariaKeyshortcuts}
-		ref={triggerRef}
-		component={CustomDropdownMenuItemButton}
-		testId={testId}
-	>
-		{children}
-	</DropdownItem>
-);

package/src/ui/ToolbarDropdownItemSection.tsx

@@ -1,21 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
-
-type ToolbarDropdownItemSectionProps = {
-	children?: ReactNode;
-	hasSeparator?: boolean;
-	title?: string;
-};
-
-export const ToolbarDropdownItemSection = ({
-	children,
-	hasSeparator,
-	title,
-}: ToolbarDropdownItemSectionProps) => {
-	return (
-		<DropdownItemGroup hasSeparator={hasSeparator} title={title}>
-			{children}
-		</DropdownItemGroup>
-	);
-};

package/src/ui/ToolbarDropdownMenu.tsx

@@ -1,112 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { type ReactNode, useCallback } from 'react';
-
-import { jsx, cssMap } from '@compiled/react';
-
-import DropdownMenu, { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-import { token } from '@atlaskit/tokens';
-
-import { useToolbarUI } from '../hooks/ui-context';
-
-import { ToolbarButton } from './ToolbarButton';
-import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
-
-const styles = cssMap({
-	sectionMargin: {
-		marginBlock: token('space.050'),
-	},
-});
-
-type ToolbarDropdownMenuProps = {
-	iconBefore: React.ReactNode;
-	children?: ReactNode;
-	isDisabled?: boolean;
-	testId?: string;
-	label?: string;
-	/**
-	 * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
-	 */
-	hasSectionMargin?: boolean;
-};
-
-const ToolbarDropdownMenuContent = ({
-	iconBefore,
-	children,
-	isDisabled,
-	testId,
-	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>
-			trigger={(triggerProps) => (
-				<ToolbarButton
-					ref={triggerProps.triggerRef}
-					isSelected={triggerProps.isSelected}
-					aria-expanded={triggerProps['aria-expanded']}
-					aria-haspopup={triggerProps['aria-haspopup']}
-					aria-controls={triggerProps['aria-controls']}
-					onBlur={triggerProps.onBlur}
-					onClick={(e) => {
-						handleClick();
-						triggerProps.onClick && triggerProps.onClick(e);
-					}}
-					onFocus={triggerProps.onFocus}
-					testId={testId}
-					iconBefore={iconBefore}
-					isDisabled={isDisabled}
-					label={label}
-				/>
-			)}
-			onOpenChange={handleOpenChange}
-			isOpen={isOpen}
-		>
-			{children}
-		</DropdownMenu>
-	);
-};
-
-export const ToolbarDropdownMenu = ({
-	iconBefore,
-	children,
-	isDisabled,
-	testId,
-	label,
-	hasSectionMargin = true,
-}: ToolbarDropdownMenuProps) => {
-	return (
-		<ToolbarDropdownMenuProvider>
-			<ToolbarDropdownMenuContent
-				iconBefore={iconBefore}
-				isDisabled={isDisabled}
-				testId={testId}
-				label={label}
-			>
-				<div css={hasSectionMargin && styles.sectionMargin}>{children}</div>
-			</ToolbarDropdownMenuContent>
-		</ToolbarDropdownMenuProvider>
-	);
-};

package/src/ui/ToolbarDropdownMenuContext.tsx

@@ -1,44 +0,0 @@
-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>
-	);
-};

package/src/ui/ToolbarKeyboardShortcutHint.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import Badge from '@atlaskit/badge';
-
-type ToolbarKeyboardShortcutHintProps = {
-	shortcut: string;
-};
-
-export const ToolbarKeyboardShortcutHint = ({ shortcut }: ToolbarKeyboardShortcutHintProps) => {
-	return <Badge>{shortcut}</Badge>;
-};