@atlaskit/editor-toolbar 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-toolbar
 
+## 0.3.7
+
+### Patch Changes
+
+- [`f0b0ea63f59bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b0ea63f59bc) -
+  [ux] ED-28803 Register Delete Button in block menu and add delete functionality and hover styles
+- [`0fdcb6f2f96fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fdcb6f2f96fd) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
+## 0.3.6
+
+### Patch Changes
+
+- [`098cfbb01dc36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/098cfbb01dc36) -
+  Add missing npmignore files to remove unnecessary files from published package
+
 ## 0.3.5
 
 ### Patch Changes

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

@@ -1,21 +1,21 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 export type ToolbarUIContextType = {
+    /**
+     * Indicates whether the toolbar is disabled when the editor is offline.
+     */
+    isDisabled?: boolean;
     /**
      * 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;
+    popupsMountPoint?: HTMLElement;
     /**
      * Whether to prevent default behavior on mouse down events on ToolbarButton.
      */
     preventDefaultOnMouseDown?: boolean;
-    /**
-     * Indicates whether the toolbar is disabled when the editor is offline.
-     */
-    isDisabled?: boolean;
-    popupsMountPoint?: HTMLElement;
 };
 /**
  * Access consumer specific config and state within a toolbar component

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

@@ -4,16 +4,16 @@ 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;
+    /** Display label for the color */
+    label: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** The color value (hex, token, etc.) */
+    value: string;
 }
 /**
  * Array of palette colors
@@ -30,13 +30,13 @@ export type PaletteTooltipMessages = {
  * 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;
+    /** Array of colors to display */
+    palette: PaletteColor[];
     /**
      * Tooltip messages for different color themes
      * Consumer determines which tooltip messages to use
@@ -47,43 +47,43 @@ export interface PaletteOptions {
  * Props for the main ColorPalette component
  */
 export interface ColorPaletteProps {
-    /** Currently selected color value */
-    selectedColor: string | null;
+    /** Optional CSS class name */
+    className?: string;
+    /** Number of columns in the palette grid */
+    cols?: number;
     /** 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;
+    /** Currently selected color value */
+    selectedColor: string | null;
 }
 /**
  * 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;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
     /** 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;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Display label for accessibility */
+    label: string;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** The color value */
+    value: string;
 }

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

@@ -1,16 +1,16 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
 type ToolbarButtonProps = Partial<TriggerProps> & {
+    ariaKeyshortcuts?: string;
     children?: ReactNode;
+    iconBefore: React.ReactNode;
+    isDisabled?: boolean;
     isSelected?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    label?: string;
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
-    iconBefore: React.ReactNode;
-    isDisabled?: boolean;
-    ariaKeyshortcuts?: string;
-    label?: string;
 };
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -2,23 +2,23 @@ import React, { type ReactNode, type Ref } from 'react';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
 type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
-    'aria-haspopup'?: boolean;
     'aria-disabled'?: boolean;
-    'aria-pressed'?: boolean;
+    'aria-haspopup'?: boolean;
     'aria-keyshortcuts'?: string;
+    'aria-pressed'?: boolean;
 };
 type ToolbarDropdownItemProps = {
-    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    elemBefore?: ReactNode;
+    ariaKeyshortcuts?: string;
+    children?: React.ReactNode;
     elemAfter?: ReactNode;
+    elemBefore?: ReactNode;
+    hasNestedDropdownMenu?: boolean;
+    isDisabled?: boolean;
     isSelected?: boolean;
-    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    testId?: string;
     textStyle?: TextStyle;
-    isDisabled?: boolean;
-    hasNestedDropdownMenu?: boolean;
     triggerRef?: Ref<HTMLButtonElement>;
-    testId?: string;
-    ariaKeyshortcuts?: string;
 };
 export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

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

@@ -4,15 +4,15 @@
  */
 import React, { type ReactNode } from 'react';
 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;
+    iconBefore: React.ReactNode;
+    isDisabled?: boolean;
+    label?: string;
+    testId?: string;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 interface ToolbarDropdownMenuContextValue {
-    openMenu: () => void;
     closeMenu: () => void;
     isOpen: boolean;
+    openMenu: () => void;
 }
 export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
 interface ToolbarDropdownMenuProviderProps {

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

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
-    elemBefore: ReactNode;
-    elemAfter: ReactNode;
-    text?: string;
     children?: ReactNode;
+    elemAfter: ReactNode;
+    elemBefore: ReactNode;
     isDisabled?: boolean;
     testId?: string;
+    text?: string;
 };
 export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
 export {};

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

@@ -5,11 +5,11 @@
 import { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
-    testId?: string;
     /**
      * Whether to add a separator at the start of the section
      */
     hasSeparator?: boolean;
+    testId?: string;
 };
 export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
-    content: React.ReactNode;
     children: React.ReactNode;
+    content: React.ReactNode;
     position?: PositionType;
 };
 export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;

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

@@ -1,21 +1,21 @@
 import React from 'react';
 import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 export type ToolbarUIContextType = {
+    /**
+     * Indicates whether the toolbar is disabled when the editor is offline.
+     */
+    isDisabled?: boolean;
     /**
      * 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;
+    popupsMountPoint?: HTMLElement;
     /**
      * Whether to prevent default behavior on mouse down events on ToolbarButton.
      */
     preventDefaultOnMouseDown?: boolean;
-    /**
-     * Indicates whether the toolbar is disabled when the editor is offline.
-     */
-    isDisabled?: boolean;
-    popupsMountPoint?: HTMLElement;
 };
 /**
  * Access consumer specific config and state within a toolbar component

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

@@ -4,16 +4,16 @@ 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;
+    /** Display label for the color */
+    label: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** The color value (hex, token, etc.) */
+    value: string;
 }
 /**
  * Array of palette colors
@@ -30,13 +30,13 @@ export type PaletteTooltipMessages = {
  * 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;
+    /** Array of colors to display */
+    palette: PaletteColor[];
     /**
      * Tooltip messages for different color themes
      * Consumer determines which tooltip messages to use
@@ -47,43 +47,43 @@ export interface PaletteOptions {
  * Props for the main ColorPalette component
  */
 export interface ColorPaletteProps {
-    /** Currently selected color value */
-    selectedColor: string | null;
+    /** Optional CSS class name */
+    className?: string;
+    /** Number of columns in the palette grid */
+    cols?: number;
     /** 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;
+    /** Currently selected color value */
+    selectedColor: string | null;
 }
 /**
  * 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;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
     /** 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;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Display label for accessibility */
+    label: string;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** The color value */
+    value: string;
 }

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

@@ -1,16 +1,16 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
 type ToolbarButtonProps = Partial<TriggerProps> & {
+    ariaKeyshortcuts?: string;
     children?: ReactNode;
+    iconBefore: React.ReactNode;
+    isDisabled?: boolean;
     isSelected?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    label?: string;
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
-    iconBefore: React.ReactNode;
-    isDisabled?: boolean;
-    ariaKeyshortcuts?: string;
-    label?: string;
 };
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -2,23 +2,23 @@ import React, { type ReactNode, type Ref } from 'react';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
 type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
-    'aria-haspopup'?: boolean;
     'aria-disabled'?: boolean;
-    'aria-pressed'?: boolean;
+    'aria-haspopup'?: boolean;
     'aria-keyshortcuts'?: string;
+    'aria-pressed'?: boolean;
 };
 type ToolbarDropdownItemProps = {
-    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    elemBefore?: ReactNode;
+    ariaKeyshortcuts?: string;
+    children?: React.ReactNode;
     elemAfter?: ReactNode;
+    elemBefore?: ReactNode;
+    hasNestedDropdownMenu?: boolean;
+    isDisabled?: boolean;
     isSelected?: boolean;
-    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    testId?: string;
     textStyle?: TextStyle;
-    isDisabled?: boolean;
-    hasNestedDropdownMenu?: boolean;
     triggerRef?: Ref<HTMLButtonElement>;
-    testId?: string;
-    ariaKeyshortcuts?: string;
 };
 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/ToolbarDropdownMenu.d.ts

@@ -4,15 +4,15 @@
  */
 import React, { type ReactNode } from 'react';
 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;
+    iconBefore: React.ReactNode;
+    isDisabled?: boolean;
+    label?: string;
+    testId?: string;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 interface ToolbarDropdownMenuContextValue {
-    openMenu: () => void;
     closeMenu: () => void;
     isOpen: boolean;
+    openMenu: () => void;
 }
 export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
 interface ToolbarDropdownMenuProviderProps {

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

@@ -1,11 +1,11 @@
 import React, { type ReactNode } from 'react';
 type ToolbarNestedDropdownMenuProps = {
-    elemBefore: ReactNode;
-    elemAfter: ReactNode;
-    text?: string;
     children?: ReactNode;
+    elemAfter: ReactNode;
+    elemBefore: ReactNode;
     isDisabled?: boolean;
     testId?: string;
+    text?: string;
 };
 export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
 export {};

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

@@ -5,11 +5,11 @@
 import { type ReactNode } from 'react';
 type ToolbarSectionProps = {
     children?: ReactNode;
-    testId?: string;
     /**
      * Whether to add a separator at the start of the section
      */
     hasSeparator?: boolean;
+    testId?: string;
 };
 export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
-    content: React.ReactNode;
     children: React.ReactNode;
+    content: React.ReactNode;
     position?: PositionType;
 };
 export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.3.5",
+	"version": "0.3.7",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -47,7 +47,6 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0"
 	},

package/afm-cc/tsconfig.json

@@ -1,54 +0,0 @@
-{
-	"extends": "../../../../tsconfig.entry-points.confluence.json",
-	"compilerOptions": {
-		"declaration": true,
-		"target": "es5",
-		"composite": true,
-		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-toolbar",
-		"rootDir": "../"
-	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
-	"exclude": [
-		"../src/**/__tests__/*",
-		"../src/**/*.test.*",
-		"../src/**/test.*"
-	],
-	"references": [
-		{
-			"path": "../../../design-system/badge/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/button/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/css/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/popup/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
-		}
-	]
-}