@atlaskit/editor-toolbar 0.2.3 → 0.3.0

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
-export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
     groupLocation = _ref.groupLocation,
     children = _ref.children,
@@ -11,6 +12,23 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
+  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
+    closeMenu = _useToolbarDropdownMe.closeMenu,
+    isOpen = _useToolbarDropdownMe.isOpen,
+    openMenu = _useToolbarDropdownMe.openMenu;
+  var handleOpenChange = useCallback(function (args) {
+    onDropdownOpenChanged(args);
+    if (!args.isOpen) {
+      closeMenu();
+    }
+  }, [closeMenu, onDropdownOpenChanged]);
+  var handleClick = useCallback(function () {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, openMenu, isOpen]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -20,7 +38,10 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         "aria-haspopup": triggerProps['aria-haspopup'],
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          handleClick();
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
@@ -29,6 +50,22 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         label: label
       });
     },
-    onOpenChange: onDropdownOpenChanged
+    onOpenChange: handleOpenChange,
+    isOpen: isOpen
   }, children);
+};
+export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
+  var iconBefore = _ref2.iconBefore,
+    groupLocation = _ref2.groupLocation,
+    children = _ref2.children,
+    isDisabled = _ref2.isDisabled,
+    testId = _ref2.testId,
+    label = _ref2.label;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+    iconBefore: iconBefore,
+    groupLocation: groupLocation,
+    isDisabled: isDisabled,
+    testId: testId,
+    label: label
+  }, children));
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useState } from 'react';
+var ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
+export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+  var context = useContext(ToolbarDropdownMenuContext);
+  if (!context) {
+    throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+  }
+  return context;
+};
+export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var openMenu = function openMenu() {
+    return setIsOpen(true);
+  };
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+  var contextValue = {
+    openMenu: openMenu,
+    closeMenu: closeMenu,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
+    value: contextValue
+  }, children);
+};

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ 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';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +56,6 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+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;

package/dist/types/ui/ColorPalette/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * 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
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

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

@@ -0,0 +1,89 @@
+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/dist/types/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare 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 declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * 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 declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * 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 declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * 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 declare const getTokenCSSVariableValue: (variableExpression: string) => string;

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
@@ -7,6 +8,8 @@ type ToolbarDropdownMenuProps = {
     isDisabled?: boolean;
     testId?: string;
     label?: string;
+    isOpen?: boolean;
+    onOpenChange?: (args: OnOpenChangeArgs) => void;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types/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/index.d.ts

@@ -10,6 +10,7 @@ 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';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +56,6 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types-ts4.5/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types-ts4.5/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+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;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * 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
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

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

@@ -0,0 +1,89 @@
+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/dist/types-ts4.5/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare 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 declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * 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 declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * 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 declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * 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 declare const getTokenCSSVariableValue: (variableExpression: string) => string;

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

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
@@ -7,6 +8,8 @@ type ToolbarDropdownMenuProps = {
     isDisabled?: boolean;
     testId?: string;
     label?: string;
+    isOpen?: boolean;
+    onOpenChange?: (args: OnOpenChangeArgs) => void;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

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/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.2.3",
+	"version": "0.3.0",
 	"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

@@ -11,6 +11,7 @@ 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 +59,8 @@ export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
 
+export { default as ColorPalette } from './ui/ColorPalette';
+
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
 
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';