@atlaskit/editor-toolbar 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/hooks/ui-context.js +6 -2
- package/dist/es2019/hooks/ui-context.js +6 -2
- package/dist/esm/hooks/ui-context.js +6 -2
- package/dist/types/hooks/ui-context.d.ts +8 -6
- package/dist/types/ui/ColorPalette/types.d.ts +30 -30
- package/dist/types/ui/ToolbarButton.d.ts +5 -5
- package/dist/types/ui/ToolbarDropdownItem.d.ts +9 -9
- package/dist/types/ui/ToolbarDropdownMenu.d.ts +4 -4
- package/dist/types/ui/ToolbarDropdownMenuContext.d.ts +1 -1
- package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts +3 -3
- package/dist/types/ui/ToolbarSection.d.ts +1 -1
- package/dist/types/ui/ToolbarTooltip.d.ts +1 -1
- package/dist/types-ts4.5/hooks/ui-context.d.ts +8 -6
- package/dist/types-ts4.5/ui/ColorPalette/types.d.ts +30 -30
- package/dist/types-ts4.5/ui/ToolbarButton.d.ts +5 -5
- package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts +9 -9
- package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts +4 -4
- package/dist/types-ts4.5/ui/ToolbarDropdownMenuContext.d.ts +1 -1
- package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts +3 -3
- package/dist/types-ts4.5/ui/ToolbarSection.d.ts +1 -1
- package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts +1 -1
- package/package.json +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.3.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`bcc3b620154b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bcc3b620154b0) -
|
|
8
|
+
[ux] ED-28739 [Register] [Primary toolbar] Insert button
|
|
9
|
+
|
|
10
|
+
## 0.3.7
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`f0b0ea63f59bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b0ea63f59bc) -
|
|
15
|
+
[ux] ED-28803 Register Delete Button in block menu and add delete functionality and hover styles
|
|
16
|
+
- [`0fdcb6f2f96fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fdcb6f2f96fd) -
|
|
17
|
+
Sorted type and interface props to improve Atlaskit docs
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 0.3.6
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -29,13 +29,17 @@ var ToolbarUIProvider = exports.ToolbarUIProvider = function ToolbarUIProvider(_
|
|
|
29
29
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
30
30
|
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
31
31
|
isDisabled = _ref.isDisabled,
|
|
32
|
-
popupsMountPoint = _ref.popupsMountPoint
|
|
32
|
+
popupsMountPoint = _ref.popupsMountPoint,
|
|
33
|
+
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
34
|
+
popupsScrollableElement = _ref.popupsScrollableElement;
|
|
33
35
|
return /*#__PURE__*/_react.default.createElement(ToolbarUIContext.Provider, {
|
|
34
36
|
value: {
|
|
35
37
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
36
38
|
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
37
39
|
isDisabled: isDisabled,
|
|
38
|
-
popupsMountPoint: popupsMountPoint
|
|
40
|
+
popupsMountPoint: popupsMountPoint,
|
|
41
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
42
|
+
popupsScrollableElement: popupsScrollableElement
|
|
39
43
|
}
|
|
40
44
|
}, children);
|
|
41
45
|
};
|
|
@@ -21,14 +21,18 @@ export const ToolbarUIProvider = ({
|
|
|
21
21
|
onDropdownOpenChanged,
|
|
22
22
|
preventDefaultOnMouseDown,
|
|
23
23
|
isDisabled,
|
|
24
|
-
popupsMountPoint
|
|
24
|
+
popupsMountPoint,
|
|
25
|
+
popupsBoundariesElement,
|
|
26
|
+
popupsScrollableElement
|
|
25
27
|
}) => {
|
|
26
28
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
27
29
|
value: {
|
|
28
30
|
onDropdownOpenChanged,
|
|
29
31
|
preventDefaultOnMouseDown,
|
|
30
32
|
isDisabled,
|
|
31
|
-
popupsMountPoint
|
|
33
|
+
popupsMountPoint,
|
|
34
|
+
popupsBoundariesElement,
|
|
35
|
+
popupsScrollableElement
|
|
32
36
|
}
|
|
33
37
|
}, children);
|
|
34
38
|
};
|
|
@@ -21,13 +21,17 @@ export var ToolbarUIProvider = function ToolbarUIProvider(_ref) {
|
|
|
21
21
|
onDropdownOpenChanged = _ref.onDropdownOpenChanged,
|
|
22
22
|
preventDefaultOnMouseDown = _ref.preventDefaultOnMouseDown,
|
|
23
23
|
isDisabled = _ref.isDisabled,
|
|
24
|
-
popupsMountPoint = _ref.popupsMountPoint
|
|
24
|
+
popupsMountPoint = _ref.popupsMountPoint,
|
|
25
|
+
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
26
|
+
popupsScrollableElement = _ref.popupsScrollableElement;
|
|
25
27
|
return /*#__PURE__*/React.createElement(ToolbarUIContext.Provider, {
|
|
26
28
|
value: {
|
|
27
29
|
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
28
30
|
preventDefaultOnMouseDown: preventDefaultOnMouseDown,
|
|
29
31
|
isDisabled: isDisabled,
|
|
30
|
-
popupsMountPoint: popupsMountPoint
|
|
32
|
+
popupsMountPoint: popupsMountPoint,
|
|
33
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
34
|
+
popupsScrollableElement: popupsScrollableElement
|
|
31
35
|
}
|
|
32
36
|
}, children);
|
|
33
37
|
};
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
|
|
3
3
|
export type ToolbarUIContextType = {
|
|
4
|
+
/**
|
|
5
|
+
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
6
|
+
*/
|
|
7
|
+
isDisabled?: boolean;
|
|
4
8
|
/**
|
|
5
9
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
6
10
|
*
|
|
7
11
|
* If the dropdown was closed programmatically, the `event` parameter will be `null`.
|
|
8
12
|
*/
|
|
9
13
|
onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
|
|
14
|
+
popupsBoundariesElement?: HTMLElement;
|
|
15
|
+
popupsMountPoint?: HTMLElement;
|
|
16
|
+
popupsScrollableElement?: HTMLElement;
|
|
10
17
|
/**
|
|
11
18
|
* Whether to prevent default behavior on mouse down events on ToolbarButton.
|
|
12
19
|
*/
|
|
13
20
|
preventDefaultOnMouseDown?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
|
-
*/
|
|
17
|
-
isDisabled?: boolean;
|
|
18
|
-
popupsMountPoint?: HTMLElement;
|
|
19
21
|
};
|
|
20
22
|
/**
|
|
21
23
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -24,5 +26,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
24
26
|
type ToolbarUIProviderProps = {
|
|
25
27
|
children: React.ReactNode;
|
|
26
28
|
} & ToolbarUIContextType;
|
|
27
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
29
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
28
30
|
export {};
|
|
@@ -4,16 +4,16 @@ import { type MessageDescriptor } from 'react-intl-next';
|
|
|
4
4
|
* Represents a single color in the palette
|
|
5
5
|
*/
|
|
6
6
|
export interface PaletteColor {
|
|
7
|
-
/** The color value (hex, token, etc.) */
|
|
8
|
-
value: string;
|
|
9
|
-
/** Display label for the color */
|
|
10
|
-
label: string;
|
|
11
7
|
/** Border color for the color swatch */
|
|
12
8
|
border: string;
|
|
13
|
-
/** Optional internationalization message */
|
|
14
|
-
message?: MessageDescriptor;
|
|
15
9
|
/** Optional decorator element to display instead of checkmark */
|
|
16
10
|
decorator?: ReactElement;
|
|
11
|
+
/** Display label for the color */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Optional internationalization message */
|
|
14
|
+
message?: MessageDescriptor;
|
|
15
|
+
/** The color value (hex, token, etc.) */
|
|
16
|
+
value: string;
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* Array of palette colors
|
|
@@ -30,13 +30,13 @@ export type PaletteTooltipMessages = {
|
|
|
30
30
|
* Configuration options for the color palette
|
|
31
31
|
*/
|
|
32
32
|
export interface PaletteOptions {
|
|
33
|
-
/** Array of colors to display */
|
|
34
|
-
palette: PaletteColor[];
|
|
35
33
|
/**
|
|
36
34
|
* Function to convert hex codes to design system tokens
|
|
37
35
|
* Different color palettes may use different mapping functions
|
|
38
36
|
*/
|
|
39
37
|
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
38
|
+
/** Array of colors to display */
|
|
39
|
+
palette: PaletteColor[];
|
|
40
40
|
/**
|
|
41
41
|
* Tooltip messages for different color themes
|
|
42
42
|
* Consumer determines which tooltip messages to use
|
|
@@ -47,43 +47,43 @@ export interface PaletteOptions {
|
|
|
47
47
|
* Props for the main ColorPalette component
|
|
48
48
|
*/
|
|
49
49
|
export interface ColorPaletteProps {
|
|
50
|
-
/**
|
|
51
|
-
|
|
50
|
+
/** Optional CSS class name */
|
|
51
|
+
className?: string;
|
|
52
|
+
/** Number of columns in the palette grid */
|
|
53
|
+
cols?: number;
|
|
52
54
|
/** Callback when a color is clicked */
|
|
53
55
|
onClick: (value: string, label: string) => void;
|
|
54
56
|
/** Optional callback for keyboard navigation */
|
|
55
57
|
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
56
|
-
/** Number of columns in the palette grid */
|
|
57
|
-
cols?: number;
|
|
58
|
-
/** Optional CSS class name */
|
|
59
|
-
className?: string;
|
|
60
58
|
/** Palette configuration options */
|
|
61
59
|
paletteOptions: PaletteOptions;
|
|
60
|
+
/** Currently selected color value */
|
|
61
|
+
selectedColor: string | null;
|
|
62
62
|
}
|
|
63
63
|
/**
|
|
64
64
|
* Props for individual color palette items
|
|
65
65
|
*/
|
|
66
66
|
export interface ColorProps {
|
|
67
|
-
/**
|
|
68
|
-
|
|
69
|
-
/** Display label for accessibility */
|
|
70
|
-
label: string;
|
|
71
|
-
/** Tab index for keyboard navigation */
|
|
72
|
-
tabIndex?: number;
|
|
73
|
-
/** Whether this color is currently selected */
|
|
74
|
-
isSelected?: boolean;
|
|
75
|
-
/** Click handler */
|
|
76
|
-
onClick: (value: string, label: string) => void;
|
|
77
|
-
/** Keyboard event handler */
|
|
78
|
-
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
67
|
+
/** Whether to auto-focus this item */
|
|
68
|
+
autoFocus?: boolean;
|
|
79
69
|
/** Border color for the swatch */
|
|
80
70
|
borderColor: string;
|
|
81
71
|
/** Color for the checkmark icon */
|
|
82
72
|
checkMarkColor?: string;
|
|
83
|
-
/** Whether to auto-focus this item */
|
|
84
|
-
autoFocus?: boolean;
|
|
85
|
-
/** Function to convert hex to palette color */
|
|
86
|
-
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
87
73
|
/** Optional decorator element */
|
|
88
74
|
decorator?: ReactElement;
|
|
75
|
+
/** Function to convert hex to palette color */
|
|
76
|
+
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
77
|
+
/** Whether this color is currently selected */
|
|
78
|
+
isSelected?: boolean;
|
|
79
|
+
/** Display label for accessibility */
|
|
80
|
+
label: string;
|
|
81
|
+
/** Click handler */
|
|
82
|
+
onClick: (value: string, label: string) => void;
|
|
83
|
+
/** Keyboard event handler */
|
|
84
|
+
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
85
|
+
/** Tab index for keyboard navigation */
|
|
86
|
+
tabIndex?: number;
|
|
87
|
+
/** The color value */
|
|
88
|
+
value: string;
|
|
89
89
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
import { type TriggerProps } from '@atlaskit/popup';
|
|
3
3
|
type ToolbarButtonProps = Partial<TriggerProps> & {
|
|
4
|
+
ariaKeyshortcuts?: string;
|
|
4
5
|
children?: ReactNode;
|
|
6
|
+
iconBefore: React.ReactNode;
|
|
7
|
+
isDisabled?: boolean;
|
|
5
8
|
isSelected?: boolean;
|
|
6
|
-
|
|
9
|
+
label?: string;
|
|
7
10
|
onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
11
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
12
|
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
9
13
|
testId?: string;
|
|
10
|
-
iconBefore: React.ReactNode;
|
|
11
|
-
isDisabled?: boolean;
|
|
12
|
-
ariaKeyshortcuts?: string;
|
|
13
|
-
label?: string;
|
|
14
14
|
};
|
|
15
15
|
export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
16
16
|
export {};
|
|
@@ -2,23 +2,23 @@ import React, { type ReactNode, type Ref } from 'react';
|
|
|
2
2
|
import type { CustomItemComponentProps } from '@atlaskit/menu/types';
|
|
3
3
|
type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
|
|
4
4
|
export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
|
|
5
|
-
'aria-haspopup'?: boolean;
|
|
6
5
|
'aria-disabled'?: boolean;
|
|
7
|
-
'aria-
|
|
6
|
+
'aria-haspopup'?: boolean;
|
|
8
7
|
'aria-keyshortcuts'?: string;
|
|
8
|
+
'aria-pressed'?: boolean;
|
|
9
9
|
};
|
|
10
10
|
type ToolbarDropdownItemProps = {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
ariaKeyshortcuts?: string;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
13
|
elemAfter?: ReactNode;
|
|
14
|
+
elemBefore?: ReactNode;
|
|
15
|
+
hasNestedDropdownMenu?: boolean;
|
|
16
|
+
isDisabled?: boolean;
|
|
14
17
|
isSelected?: boolean;
|
|
15
|
-
|
|
18
|
+
onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
19
|
+
testId?: string;
|
|
16
20
|
textStyle?: TextStyle;
|
|
17
|
-
isDisabled?: boolean;
|
|
18
|
-
hasNestedDropdownMenu?: boolean;
|
|
19
21
|
triggerRef?: Ref<HTMLButtonElement>;
|
|
20
|
-
testId?: string;
|
|
21
|
-
ariaKeyshortcuts?: string;
|
|
22
22
|
};
|
|
23
23
|
export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
|
|
24
24
|
export {};
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import React, { type ReactNode } from 'react';
|
|
6
6
|
type ToolbarDropdownMenuProps = {
|
|
7
|
-
iconBefore: React.ReactNode;
|
|
8
7
|
children?: ReactNode;
|
|
9
|
-
isDisabled?: boolean;
|
|
10
|
-
testId?: string;
|
|
11
|
-
label?: string;
|
|
12
8
|
/**
|
|
13
9
|
* Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
|
|
14
10
|
*/
|
|
15
11
|
hasSectionMargin?: boolean;
|
|
12
|
+
iconBefore: React.ReactNode;
|
|
13
|
+
isDisabled?: boolean;
|
|
14
|
+
label?: string;
|
|
15
|
+
testId?: string;
|
|
16
16
|
};
|
|
17
17
|
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
18
18
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface ToolbarDropdownMenuContextValue {
|
|
3
|
-
openMenu: () => void;
|
|
4
3
|
closeMenu: () => void;
|
|
5
4
|
isOpen: boolean;
|
|
5
|
+
openMenu: () => void;
|
|
6
6
|
}
|
|
7
7
|
export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
|
|
8
8
|
interface ToolbarDropdownMenuProviderProps {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
type ToolbarNestedDropdownMenuProps = {
|
|
3
|
-
elemBefore: ReactNode;
|
|
4
|
-
elemAfter: ReactNode;
|
|
5
|
-
text?: string;
|
|
6
3
|
children?: ReactNode;
|
|
4
|
+
elemAfter: ReactNode;
|
|
5
|
+
elemBefore: ReactNode;
|
|
7
6
|
isDisabled?: boolean;
|
|
8
7
|
testId?: string;
|
|
8
|
+
text?: string;
|
|
9
9
|
};
|
|
10
10
|
export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
6
|
type ToolbarSectionProps = {
|
|
7
7
|
children?: ReactNode;
|
|
8
|
-
testId?: string;
|
|
9
8
|
/**
|
|
10
9
|
* Whether to add a separator at the start of the section
|
|
11
10
|
*/
|
|
12
11
|
hasSeparator?: boolean;
|
|
12
|
+
testId?: string;
|
|
13
13
|
};
|
|
14
14
|
export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
|
|
15
15
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PositionType } from '@atlaskit/tooltip';
|
|
3
3
|
type ToolbarTooltipProps = {
|
|
4
|
-
content: React.ReactNode;
|
|
5
4
|
children: React.ReactNode;
|
|
5
|
+
content: React.ReactNode;
|
|
6
6
|
position?: PositionType;
|
|
7
7
|
};
|
|
8
8
|
export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
|
|
3
3
|
export type ToolbarUIContextType = {
|
|
4
|
+
/**
|
|
5
|
+
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
6
|
+
*/
|
|
7
|
+
isDisabled?: boolean;
|
|
4
8
|
/**
|
|
5
9
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
6
10
|
*
|
|
7
11
|
* If the dropdown was closed programmatically, the `event` parameter will be `null`.
|
|
8
12
|
*/
|
|
9
13
|
onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
|
|
14
|
+
popupsBoundariesElement?: HTMLElement;
|
|
15
|
+
popupsMountPoint?: HTMLElement;
|
|
16
|
+
popupsScrollableElement?: HTMLElement;
|
|
10
17
|
/**
|
|
11
18
|
* Whether to prevent default behavior on mouse down events on ToolbarButton.
|
|
12
19
|
*/
|
|
13
20
|
preventDefaultOnMouseDown?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Indicates whether the toolbar is disabled when the editor is offline.
|
|
16
|
-
*/
|
|
17
|
-
isDisabled?: boolean;
|
|
18
|
-
popupsMountPoint?: HTMLElement;
|
|
19
21
|
};
|
|
20
22
|
/**
|
|
21
23
|
* Access consumer specific config and state within a toolbar component
|
|
@@ -24,5 +26,5 @@ export declare const useToolbarUI: () => ToolbarUIContextType;
|
|
|
24
26
|
type ToolbarUIProviderProps = {
|
|
25
27
|
children: React.ReactNode;
|
|
26
28
|
} & ToolbarUIContextType;
|
|
27
|
-
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
29
|
+
export declare const ToolbarUIProvider: ({ children, onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: ToolbarUIProviderProps) => React.JSX.Element;
|
|
28
30
|
export {};
|
|
@@ -4,16 +4,16 @@ import { type MessageDescriptor } from 'react-intl-next';
|
|
|
4
4
|
* Represents a single color in the palette
|
|
5
5
|
*/
|
|
6
6
|
export interface PaletteColor {
|
|
7
|
-
/** The color value (hex, token, etc.) */
|
|
8
|
-
value: string;
|
|
9
|
-
/** Display label for the color */
|
|
10
|
-
label: string;
|
|
11
7
|
/** Border color for the color swatch */
|
|
12
8
|
border: string;
|
|
13
|
-
/** Optional internationalization message */
|
|
14
|
-
message?: MessageDescriptor;
|
|
15
9
|
/** Optional decorator element to display instead of checkmark */
|
|
16
10
|
decorator?: ReactElement;
|
|
11
|
+
/** Display label for the color */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Optional internationalization message */
|
|
14
|
+
message?: MessageDescriptor;
|
|
15
|
+
/** The color value (hex, token, etc.) */
|
|
16
|
+
value: string;
|
|
17
17
|
}
|
|
18
18
|
/**
|
|
19
19
|
* Array of palette colors
|
|
@@ -30,13 +30,13 @@ export type PaletteTooltipMessages = {
|
|
|
30
30
|
* Configuration options for the color palette
|
|
31
31
|
*/
|
|
32
32
|
export interface PaletteOptions {
|
|
33
|
-
/** Array of colors to display */
|
|
34
|
-
palette: PaletteColor[];
|
|
35
33
|
/**
|
|
36
34
|
* Function to convert hex codes to design system tokens
|
|
37
35
|
* Different color palettes may use different mapping functions
|
|
38
36
|
*/
|
|
39
37
|
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
38
|
+
/** Array of colors to display */
|
|
39
|
+
palette: PaletteColor[];
|
|
40
40
|
/**
|
|
41
41
|
* Tooltip messages for different color themes
|
|
42
42
|
* Consumer determines which tooltip messages to use
|
|
@@ -47,43 +47,43 @@ export interface PaletteOptions {
|
|
|
47
47
|
* Props for the main ColorPalette component
|
|
48
48
|
*/
|
|
49
49
|
export interface ColorPaletteProps {
|
|
50
|
-
/**
|
|
51
|
-
|
|
50
|
+
/** Optional CSS class name */
|
|
51
|
+
className?: string;
|
|
52
|
+
/** Number of columns in the palette grid */
|
|
53
|
+
cols?: number;
|
|
52
54
|
/** Callback when a color is clicked */
|
|
53
55
|
onClick: (value: string, label: string) => void;
|
|
54
56
|
/** Optional callback for keyboard navigation */
|
|
55
57
|
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
56
|
-
/** Number of columns in the palette grid */
|
|
57
|
-
cols?: number;
|
|
58
|
-
/** Optional CSS class name */
|
|
59
|
-
className?: string;
|
|
60
58
|
/** Palette configuration options */
|
|
61
59
|
paletteOptions: PaletteOptions;
|
|
60
|
+
/** Currently selected color value */
|
|
61
|
+
selectedColor: string | null;
|
|
62
62
|
}
|
|
63
63
|
/**
|
|
64
64
|
* Props for individual color palette items
|
|
65
65
|
*/
|
|
66
66
|
export interface ColorProps {
|
|
67
|
-
/**
|
|
68
|
-
|
|
69
|
-
/** Display label for accessibility */
|
|
70
|
-
label: string;
|
|
71
|
-
/** Tab index for keyboard navigation */
|
|
72
|
-
tabIndex?: number;
|
|
73
|
-
/** Whether this color is currently selected */
|
|
74
|
-
isSelected?: boolean;
|
|
75
|
-
/** Click handler */
|
|
76
|
-
onClick: (value: string, label: string) => void;
|
|
77
|
-
/** Keyboard event handler */
|
|
78
|
-
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
67
|
+
/** Whether to auto-focus this item */
|
|
68
|
+
autoFocus?: boolean;
|
|
79
69
|
/** Border color for the swatch */
|
|
80
70
|
borderColor: string;
|
|
81
71
|
/** Color for the checkmark icon */
|
|
82
72
|
checkMarkColor?: string;
|
|
83
|
-
/** Whether to auto-focus this item */
|
|
84
|
-
autoFocus?: boolean;
|
|
85
|
-
/** Function to convert hex to palette color */
|
|
86
|
-
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
87
73
|
/** Optional decorator element */
|
|
88
74
|
decorator?: ReactElement;
|
|
75
|
+
/** Function to convert hex to palette color */
|
|
76
|
+
hexToPaletteColor?: (hexColor: string) => string | undefined;
|
|
77
|
+
/** Whether this color is currently selected */
|
|
78
|
+
isSelected?: boolean;
|
|
79
|
+
/** Display label for accessibility */
|
|
80
|
+
label: string;
|
|
81
|
+
/** Click handler */
|
|
82
|
+
onClick: (value: string, label: string) => void;
|
|
83
|
+
/** Keyboard event handler */
|
|
84
|
+
onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
|
|
85
|
+
/** Tab index for keyboard navigation */
|
|
86
|
+
tabIndex?: number;
|
|
87
|
+
/** The color value */
|
|
88
|
+
value: string;
|
|
89
89
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
import { type TriggerProps } from '@atlaskit/popup';
|
|
3
3
|
type ToolbarButtonProps = Partial<TriggerProps> & {
|
|
4
|
+
ariaKeyshortcuts?: string;
|
|
4
5
|
children?: ReactNode;
|
|
6
|
+
iconBefore: React.ReactNode;
|
|
7
|
+
isDisabled?: boolean;
|
|
5
8
|
isSelected?: boolean;
|
|
6
|
-
|
|
9
|
+
label?: string;
|
|
7
10
|
onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
11
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
12
|
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
9
13
|
testId?: string;
|
|
10
|
-
iconBefore: React.ReactNode;
|
|
11
|
-
isDisabled?: boolean;
|
|
12
|
-
ariaKeyshortcuts?: string;
|
|
13
|
-
label?: string;
|
|
14
14
|
};
|
|
15
15
|
export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
16
16
|
export {};
|
|
@@ -2,23 +2,23 @@ import React, { type ReactNode, type Ref } from 'react';
|
|
|
2
2
|
import type { CustomItemComponentProps } from '@atlaskit/menu/types';
|
|
3
3
|
type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
|
|
4
4
|
export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
|
|
5
|
-
'aria-haspopup'?: boolean;
|
|
6
5
|
'aria-disabled'?: boolean;
|
|
7
|
-
'aria-
|
|
6
|
+
'aria-haspopup'?: boolean;
|
|
8
7
|
'aria-keyshortcuts'?: string;
|
|
8
|
+
'aria-pressed'?: boolean;
|
|
9
9
|
};
|
|
10
10
|
type ToolbarDropdownItemProps = {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
ariaKeyshortcuts?: string;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
13
|
elemAfter?: ReactNode;
|
|
14
|
+
elemBefore?: ReactNode;
|
|
15
|
+
hasNestedDropdownMenu?: boolean;
|
|
16
|
+
isDisabled?: boolean;
|
|
14
17
|
isSelected?: boolean;
|
|
15
|
-
|
|
18
|
+
onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
19
|
+
testId?: string;
|
|
16
20
|
textStyle?: TextStyle;
|
|
17
|
-
isDisabled?: boolean;
|
|
18
|
-
hasNestedDropdownMenu?: boolean;
|
|
19
21
|
triggerRef?: Ref<HTMLButtonElement>;
|
|
20
|
-
testId?: string;
|
|
21
|
-
ariaKeyshortcuts?: string;
|
|
22
22
|
};
|
|
23
23
|
export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
|
|
24
24
|
export {};
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import React, { type ReactNode } from 'react';
|
|
6
6
|
type ToolbarDropdownMenuProps = {
|
|
7
|
-
iconBefore: React.ReactNode;
|
|
8
7
|
children?: ReactNode;
|
|
9
|
-
isDisabled?: boolean;
|
|
10
|
-
testId?: string;
|
|
11
|
-
label?: string;
|
|
12
8
|
/**
|
|
13
9
|
* Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
|
|
14
10
|
*/
|
|
15
11
|
hasSectionMargin?: boolean;
|
|
12
|
+
iconBefore: React.ReactNode;
|
|
13
|
+
isDisabled?: boolean;
|
|
14
|
+
label?: string;
|
|
15
|
+
testId?: string;
|
|
16
16
|
};
|
|
17
17
|
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
18
18
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface ToolbarDropdownMenuContextValue {
|
|
3
|
-
openMenu: () => void;
|
|
4
3
|
closeMenu: () => void;
|
|
5
4
|
isOpen: boolean;
|
|
5
|
+
openMenu: () => void;
|
|
6
6
|
}
|
|
7
7
|
export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
|
|
8
8
|
interface ToolbarDropdownMenuProviderProps {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
2
|
type ToolbarNestedDropdownMenuProps = {
|
|
3
|
-
elemBefore: ReactNode;
|
|
4
|
-
elemAfter: ReactNode;
|
|
5
|
-
text?: string;
|
|
6
3
|
children?: ReactNode;
|
|
4
|
+
elemAfter: ReactNode;
|
|
5
|
+
elemBefore: ReactNode;
|
|
7
6
|
isDisabled?: boolean;
|
|
8
7
|
testId?: string;
|
|
8
|
+
text?: string;
|
|
9
9
|
};
|
|
10
10
|
export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
import { type ReactNode } from 'react';
|
|
6
6
|
type ToolbarSectionProps = {
|
|
7
7
|
children?: ReactNode;
|
|
8
|
-
testId?: string;
|
|
9
8
|
/**
|
|
10
9
|
* Whether to add a separator at the start of the section
|
|
11
10
|
*/
|
|
12
11
|
hasSeparator?: boolean;
|
|
12
|
+
testId?: string;
|
|
13
13
|
};
|
|
14
14
|
export declare const ToolbarSection: ({ children, testId, hasSeparator }: ToolbarSectionProps) => JSX.Element;
|
|
15
15
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PositionType } from '@atlaskit/tooltip';
|
|
3
3
|
type ToolbarTooltipProps = {
|
|
4
|
-
content: React.ReactNode;
|
|
5
4
|
children: React.ReactNode;
|
|
5
|
+
content: React.ReactNode;
|
|
6
6
|
position?: PositionType;
|
|
7
7
|
};
|
|
8
8
|
export declare const ToolbarTooltip: ({ content, children, position }: ToolbarTooltipProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.3.
|
|
6
|
+
"version": "0.3.8",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"team": "Editor: Jenga",
|
|
@@ -47,7 +47,6 @@
|
|
|
47
47
|
"@af/integration-testing": "workspace:^",
|
|
48
48
|
"@af/visual-regression": "workspace:^",
|
|
49
49
|
"@atlaskit/ssr": "workspace:^",
|
|
50
|
-
"@atlaskit/visual-regression": "workspace:^",
|
|
51
50
|
"@testing-library/react": "^13.4.0",
|
|
52
51
|
"react-dom": "^18.2.0"
|
|
53
52
|
},
|