@atlaskit/editor-toolbar 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-toolbar
 
+## 0.0.3
+
+### Patch Changes
+
+- [#192616](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192616)
+  [`b97ca8e19b601`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b97ca8e19b601) -
+  [ED-28595] add aria-attributes to toolbar button and toolbar dropdown item
+- Updated dependencies
+
+## 0.0.2
+
+### Patch Changes
+
+- [#189216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189216)
+  [`b4ba899b6cf55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4ba899b6cf55) -
+  [ux] ED-28546 add nested flyouts to ui primitive library
+- Updated dependencies
+
 ## 0.0.1
 
 ### Patch Changes

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -7,10 +7,19 @@ import { token } from '@atlaskit/tokens';
 import { ColorIndicatorWrapper } from '../../../src/ui/ColorIndicatorWrapper';
 import { AddIcon } from '../../../src/ui/icons/AddIcon';
 import { AIAdjustLengthIcon } from '../../../src/ui/icons/AIAdjustLengthIcon';
+import { AICasualIcon } from '../../../src/ui/icons/AICasualIcon';
+import { AIChangeToneIcon } from '../../../src/ui/icons/AIChangeToneIcon';
 import { AIChatIcon } from '../../../src/ui/icons/AIChatIcon';
 import { AICommandIcon } from '../../../src/ui/icons/AICommandIcon';
+import { AIHeartIcon } from '../../../src/ui/icons/AIHeartIcon';
+import { AILenghtenIcon } from '../../../src/ui/icons/AILengthenIcon';
+import { AIBriefcaseIcon } from '../../../src/ui/icons/AIProfessionalIcon';
+import { AIShortenIcon } from '../../../src/ui/icons/AIShortenIcon';
+import { AISpellcheckIcon } from '../../../src/ui/icons/AISpellcheckIcon';
+import { AITranslateIcon } from '../../../src/ui/icons/AITranslateIcon';
 import { AppsIcon } from '../../../src/ui/icons/AppsIcon';
 import { BoldIcon } from '../../../src/ui/icons/BoldIcon';
+import { ClearFormattingIcon } from '../../../src/ui/icons/ClearFormattingIcon';
 import { CommentIcon } from '../../../src/ui/icons/CommentIcon';
 import { HeadingFiveIcon } from '../../../src/ui/icons/HeadingFiveIcon';
 import { HeadingFourIcon } from '../../../src/ui/icons/HeadingFourIcon';
@@ -23,6 +32,7 @@ import { LinkIcon } from '../../../src/ui/icons/LinkIcon';
 import { ListBulletedIcon } from '../../../src/ui/icons/ListBulletedIcon';
 import { ListNumberedIcon } from '../../../src/ui/icons/ListNumberedIcon';
 import { MoreItemsIcon } from '../../../src/ui/icons/MoreItemsIcon';
+import { NestedDropdownRightIcon } from '../../../src/ui/icons/NestedDropdownRightIcon';
 import { PinIcon } from '../../../src/ui/icons/PinIcon';
 import { PinnedIcon } from '../../../src/ui/icons/PinnedIcon';
 import { QuoteIcon } from '../../../src/ui/icons/QuoteIcon';
@@ -32,9 +42,12 @@ import { Toolbar } from '../../../src/ui/Toolbar';
 import { ToolbarButton } from '../../../src/ui/ToolbarButton';
 import { ToolbarButtonGroup } from '../../../src/ui/ToolbarButtonGroup';
 import { ToolbarDivider } from '../../../src/ui/ToolbarDivider';
+import { ToolbarDropdownDivider } from '../../../src/ui/ToolbarDropdownDivider';
 import { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
+import { ToolbarDropdownItemSection } from '../../../src/ui/ToolbarDropdownItemSection';
 import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
 import { ToolbarKeyboardShortcutHint } from '../../../src/ui/ToolbarKeyboardShortcutHint';
+import { ToolbarNestedDropdownMenu } from '../../../src/ui/ToolbarNestedDropdownMenu';
 import { ToolbarSection } from '../../../src/ui/ToolbarSection';
 import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
@@ -57,67 +70,67 @@ export const ExampleManuallyComposedToolbar = () => {
 	const [isRovoDisabled, setIsRovoDisabled] = useState(false);
 	const toggleRovoButton = () => {
 		setIsRovoDisabled(!isRovoDisabled);
-	}
+	};
 
 	const [isAdjustLengthDisabled, setIsAdjustLengthDisabled] = useState(false);
 	const toggleAdjustLengthButton = () => {
 		setIsAdjustLengthDisabled(!isAdjustLengthDisabled);
-	}
+	};
 
 	const [isTextStylesDisabled, setIsTextStylesDisabled] = useState(false);
 	const toggleTextStylesButton = () => {
 		setIsTextStylesDisabled(!isTextStylesDisabled);
-	}
+	};
 
 	const [isImproveWritingDisabled, setIsImproveWritingDisabled] = useState(false);
 	const toggleImproveWritingButton = () => {
 		setIsImproveWritingDisabled(!isImproveWritingDisabled);
-	}
+	};
 
 	const [isBoldDisabled, setIsBoldDisabled] = useState(false);
 	const toggleBoldStyle = () => {
 		setIsBoldDisabled(!isBoldDisabled);
-	}
+	};
 
 	const [isItalicDisabled, setIsItalicDisabled] = useState(false);
 	const toggleItalicStyle = () => {
 		setIsItalicDisabled(!isItalicDisabled);
-	}
+	};
 
 	const [isTextColorDisabled, setIsTextColorDisabled] = useState(false);
 	const toggleTextColorButton = () => {
 		setIsTextColorDisabled(!isTextColorDisabled);
-	}
+	};
 
 	const [isBulletedListDisabled, setIsBulletedListDisabled] = useState(false);
 	const toggleBulletedListButton = () => {
 		setIsBulletedListDisabled(!isBulletedListDisabled);
-	}
+	};
 
 	const [isNumberedListDisabled, setIsNumberedListDisabled] = useState(false);
 	const toggleNumberedListButton = () => {
 		setIsNumberedListDisabled(!isNumberedListDisabled);
-	}
+	};
 
 	const [isLinkDisabled, setIsLinkDisabled] = useState(false);
 	const toggleLinkButton = () => {
 		setIsLinkDisabled(!isLinkDisabled);
-	}
+	};
 
 	const [isCommentDisabled, setIsCommentDisabled] = useState(false);
 	const toggleCommentButton = () => {
 		setIsCommentDisabled(!isCommentDisabled);
-	}
+	};
 
 	const [isCreateJiraWorkItemDisabled, setIsCreateJiraWorkItemDisabled] = useState(false);
 	const toggleCreateJiraWorkItemButton = () => {
 		setIsCreateJiraWorkItemDisabled(!isCreateJiraWorkItemDisabled);
-	}
+	};
 
 	const [isAppsAndExtensionsDisabled, setIsAppsAndExtensionsDisabled] = useState(false);
 	const toggleAppsAndExtensionsButton = () => {
 		setIsAppsAndExtensionsDisabled(!isAppsAndExtensionsDisabled);
-	}
+	};
 
 	return (
 		<>
@@ -136,16 +149,89 @@ export const ExampleManuallyComposedToolbar = () => {
 							</ToolbarButton>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
-							<ToolbarDropdownItem
-								elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
-								onClick={onClick('Adjust length')}
-								isDisabled={isAdjustLengthDisabled}
-							>
-								Adjust length
-							</ToolbarDropdownItem>
+							<ToolbarDropdownItemSection>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
+									text="Adjust length"
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'} />}
+									isDisabled={isAdjustLengthDisabled}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AIShortenIcon label="Make shorter" />}
+											onClick={onClick('Make shorter')}
+										>
+											Make shorter
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AILenghtenIcon label="Make longer" />}
+											onClick={onClick('Make longer')}
+										>
+											Make longer
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AIChangeToneIcon label="Change tone" />}
+									text="Change tone"
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'} />}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AIBriefcaseIcon label="More professional" />}
+											onClick={onClick('More professional')}
+										>
+											More professional
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AICasualIcon label="More casual" />}
+											onClick={onClick('More casual')}
+										>
+											More casual
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AIHeartIcon label="More empathetic" />}
+											onClick={onClick('More empathetic')}
+										>
+											More empathetic
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+								<ToolbarDropdownItem
+									elemBefore={<AISpellcheckIcon label="Fix spelling and grammar" />}
+									onClick={onClick('Fix spelling and grammar')}
+								>
+									Fix spelling and grammar
+								</ToolbarDropdownItem>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AITranslateIcon label="Translate" />}
+									text="Translate"
+									elemAfter={<NestedDropdownRightIcon label={'Choose language option'} />}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 1" />}
+											onClick={onClick('Language 1')}
+										>
+											Language 1
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 2" />}
+											onClick={onClick('More casual')}
+										>
+											Language 2
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 3" />}
+											onClick={onClick('Language 3')}
+										>
+											Language 3
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
-
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Improve writing">
 							<ToolbarButton
@@ -182,78 +268,88 @@ export const ExampleManuallyComposedToolbar = () => {
 								label="Text styles"
 								isDisabled={isTextStylesDisabled}
 							>
-								<ToolbarDropdownItem
-									elemBefore={<TextIcon label="Normal text" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
-									onClick={onClick('Normal text', onSetTextStyle('normal'))}
-									isSelected={textStyle === 'normal'}
-									textStyle="normal"
-								>
-									Normal text
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingOneIcon label="Heading One" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
-									onClick={onClick('Heading one', onSetTextStyle('heading1'))}
-									isSelected={textStyle === 'heading1'}
-									textStyle="heading1"
-								>
-									Heading 1
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingTwoIcon label="Heading Two" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
-									onClick={onClick('Heading two', onSetTextStyle('heading2'))}
-									isSelected={textStyle === 'heading2'}
-									textStyle="heading2"
-								>
-									Heading 2
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingThreeIcon label="Heading Three" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥3" />}
-									onClick={onClick('Heading three', onSetTextStyle('heading3'))}
-									isSelected={textStyle === 'heading3'}
-									textStyle="heading3"
-								>
-									Heading 3
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingFourIcon label="Heading Four" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
-									onClick={onClick('Heading four', onSetTextStyle('heading4'))}
-									isSelected={textStyle === 'heading4'}
-									textStyle="heading4"
-								>
-									Heading 4
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingFiveIcon label="Heading Five" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
-									onClick={onClick('Heading five', onSetTextStyle('heading5'))}
-									isSelected={textStyle === 'heading5'}
-									textStyle="heading5"
-								>
-									Heading 5
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<HeadingSixIcon label="Heading Six" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
-									onClick={onClick('Heading six', onSetTextStyle('heading6'))}
-									isSelected={textStyle === 'heading6'}
-									textStyle="heading6"
-								>
-									Heading 6
-								</ToolbarDropdownItem>
-								<ToolbarDropdownItem
-									elemBefore={<QuoteIcon label="Quote" />}
-									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
-									onClick={onClick('Quote', onSetTextStyle('quote'))}
-									isSelected={textStyle === 'quote'}
-									textStyle="normal"
-								>
-									Quote
-								</ToolbarDropdownItem>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+										elemBefore={<TextIcon label="Normal text" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
+										onClick={onClick('Normal text', onSetTextStyle('normal'))}
+										isSelected={textStyle === 'normal'}
+										textStyle="normal"
+										ariaKeyshortcuts="⌘⌥0"
+									>
+										Normal text
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingOneIcon label="Heading One" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
+										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
+										isSelected={textStyle === 'heading1'}
+										textStyle="heading1"
+										ariaKeyshortcuts="⌘⌥1"
+									>
+										Heading 1
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingTwoIcon label="Heading Two" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
+										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
+										isSelected={textStyle === 'heading2'}
+										textStyle="heading2"
+										ariaKeyshortcuts="⌘⌥2"
+									>
+										Heading 2
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingThreeIcon label="Heading Three" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥3" />}
+										onClick={onClick('Heading three', onSetTextStyle('heading3'))}
+										isSelected={textStyle === 'heading3'}
+										textStyle="heading3"
+										ariaKeyshortcuts="⌘⌥3"
+									>
+										Heading 3
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingFourIcon label="Heading Four" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
+										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
+										isSelected={textStyle === 'heading4'}
+										textStyle="heading4"
+										ariaKeyshortcuts="⌘⌥4"
+									>
+										Heading 4
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingFiveIcon label="Heading Five" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
+										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
+										isSelected={textStyle === 'heading5'}
+										textStyle="heading5"
+										ariaKeyshortcuts="⌘⌥5"
+									>
+										Heading 5
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingSixIcon label="Heading Six" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
+										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
+										isSelected={textStyle === 'heading6'}
+										textStyle="heading6"
+										ariaKeyshortcuts="⌘⌥6"
+									>
+										Heading 6
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<QuoteIcon label="Quote" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
+										onClick={onClick('Quote', onSetTextStyle('quote'))}
+										isSelected={textStyle === 'quote'}
+										textStyle="normal"
+										ariaKeyshortcuts="⌘⌥9"
+									>
+										Quote
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
 							</ToolbarDropdownMenu>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
@@ -270,27 +366,43 @@ export const ExampleManuallyComposedToolbar = () => {
 								groupLocation="start"
 								isSelected={formatting.bold || formatting.italic}
 								isDisabled={formatting.italic ? isItalicDisabled : isBoldDisabled}
+								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
-							<ToolbarDropdownItem
-								elemBefore={<BoldIcon label="Bold" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
-								onClick={onClick('Bold', onToggleFormatting('bold'))}
-								isSelected={formatting.bold}
-								isDisabled={isBoldDisabled}
-							>
-								Bold
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<ItalicIcon label="Italic" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
-								onClick={onClick('Italic', onToggleFormatting('italic'))}
-								isSelected={formatting.italic}
-								isDisabled={isItalicDisabled}
-							>
-								Italic
-							</ToolbarDropdownItem>
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
+									elemBefore={<BoldIcon label="Bold" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
+									onClick={onClick('Bold', onToggleFormatting('bold'))}
+									isSelected={formatting.bold}
+									isDisabled={isBoldDisabled}
+									ariaKeyshortcuts="⌘B"
+								>
+									Bold
+								</ToolbarDropdownItem>
+								<ToolbarDropdownItem
+									elemBefore={<ItalicIcon label="Italic" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
+									onClick={onClick('Italic', onToggleFormatting('italic'))}
+									isSelected={formatting.italic}
+									isDisabled={isItalicDisabled}
+									ariaKeyshortcuts="⌘I"
+								>
+									Italic
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
+							<ToolbarDropdownDivider />
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
+									elemBefore={<ClearFormattingIcon label="Clear formatting" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘\" />}
+									onClick={onClick('Clear formatting')}
+									ariaKeyshortcuts="⌘\"
+								>
+									Clear formatting
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
 
@@ -312,18 +424,22 @@ export const ExampleManuallyComposedToolbar = () => {
 								label="Text color"
 								isDisabled={isTextColorDisabled}
 							>
-								<ToolbarDropdownItem
-									elemBefore={<TextIcon label="Text color" />}
-									onClick={onClick('Text color')}
-								>
-									Text color
-								</ToolbarDropdownItem>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+										elemBefore={<TextIcon label="Text color" />}
+										onClick={onClick('Text color')}
+									>
+										Text color
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
 							</ToolbarDropdownMenu>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 
 					<ToolbarButtonGroup>
-						<ToolbarTooltip content={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}>
+						<ToolbarTooltip
+							content={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+						>
 							<ToolbarButton
 								icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
 								label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
@@ -333,7 +449,9 @@ export const ExampleManuallyComposedToolbar = () => {
 								)}
 								groupLocation="start"
 								isSelected={listOrAlignment !== 'none'}
-								isDisabled={listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled}
+								isDisabled={
+									listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled
+								}
 							/>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
@@ -341,24 +459,28 @@ export const ExampleManuallyComposedToolbar = () => {
 							label="Lists, indentation and alignment"
 							groupLocation="end"
 						>
-							<ToolbarDropdownItem
-								elemBefore={<ListBulletedIcon label="Bulleted list" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
-								onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
-								isSelected={listOrAlignment === 'bulleted'}
-								isDisabled={isBulletedListDisabled}
-							>
-								Bulleted list
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<ListNumberedIcon label="Numbered list" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
-								onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
-								isSelected={listOrAlignment === 'numbered'}
-								isDisabled={isNumberedListDisabled}
-							>
-								Numbered list
-							</ToolbarDropdownItem>
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
+									elemBefore={<ListBulletedIcon label="Bulleted list" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
+									onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
+									isSelected={listOrAlignment === 'bulleted'}
+									isDisabled={isBulletedListDisabled}
+									ariaKeyshortcuts="⌘⇧8"
+								>
+									Bulleted list
+								</ToolbarDropdownItem>
+								<ToolbarDropdownItem
+									elemBefore={<ListNumberedIcon label="Numbered list" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
+									onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
+									isSelected={listOrAlignment === 'numbered'}
+									isDisabled={isNumberedListDisabled}
+									ariaKeyshortcuts="⌘⇧7"
+								>
+									Numbered list
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
@@ -368,7 +490,12 @@ export const ExampleManuallyComposedToolbar = () => {
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Link">
-							<ToolbarButton icon={LinkIcon} label="Link" onClick={onClick('Link')} isDisabled={isLinkDisabled} />
+							<ToolbarButton
+								icon={LinkIcon}
+								label="Link"
+								onClick={onClick('Link')}
+								isDisabled={isLinkDisabled}
+							/>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
@@ -378,7 +505,12 @@ export const ExampleManuallyComposedToolbar = () => {
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Comment">
-							<ToolbarButton icon={CommentIcon} label="Comment" onClick={onClick('Comment')} isDisabled={isCommentDisabled} />
+							<ToolbarButton
+								icon={CommentIcon}
+								label="Comment"
+								onClick={onClick('Comment')}
+								isDisabled={isCommentDisabled}
+							/>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
@@ -388,14 +520,20 @@ export const ExampleManuallyComposedToolbar = () => {
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Apps and extensions">
-							<ToolbarDropdownMenu icon={AppsIcon} label="Apps and extensions" isDisabled={isAppsAndExtensionsDisabled}>
-								<ToolbarDropdownItem
-									elemBefore={<AddIcon label="Create Jira work item" />}
-									onClick={onClick('Create Jira work item')}
-									isDisabled={isCreateJiraWorkItemDisabled}
-								>
-									Create Jira work item
-								</ToolbarDropdownItem>
+							<ToolbarDropdownMenu
+								icon={AppsIcon}
+								label="Apps and extensions"
+								isDisabled={isAppsAndExtensionsDisabled}
+							>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+										elemBefore={<AddIcon label="Create Jira work item" />}
+										onClick={onClick('Create Jira work item')}
+										isDisabled={isCreateJiraWorkItemDisabled}
+									>
+										Create Jira work item
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
 							</ToolbarDropdownMenu>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
@@ -405,7 +543,9 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarTooltip content={pinning === 'pinned' ? 'Unpin the toolbar' : 'Pin the toolbar at the top'}>
+						<ToolbarTooltip
+							content={pinning === 'pinned' ? 'Unpin the toolbar' : 'Pin the toolbar at the top'}
+						>
 							<ToolbarButton
 								icon={pinning === 'pinned' ? PinnedIcon : PinIcon}
 								label={pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar'}

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor"
@@ -24,16 +24,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/badge": "^18.1.0",
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/dropdown-menu": "^16.2.0",
-		"@atlaskit/icon": "^27.5.0",
+		"@atlaskit/dropdown-menu": "^16.3.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/icon-lab": "^5.2.0",
-		"@atlaskit/logo": "^19.5.0",
+		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/tokens": "^5.6.0",
-		"@atlaskit/tooltip": "^20.3.0",
+		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},

package/src/ui/ToolbarButton.tsx

@@ -89,6 +89,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	icon: IconComponent;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
+	ariaKeyshortcuts?: string;
 };
 
 export const ToolbarButton = forwardRef(
@@ -108,10 +109,15 @@ export const ToolbarButton = forwardRef(
 			testId,
 			groupLocation,
 			isDisabled,
+			ariaKeyshortcuts,
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
-		const iconColor = isDisabled ? ICON_COLOR.disabled : isSelected ? ICON_COLOR.selected : ICON_COLOR.default;
+		const iconColor = isDisabled
+			? ICON_COLOR.disabled
+			: isSelected
+				? ICON_COLOR.selected
+				: ICON_COLOR.default;
 		return (
 			<Pressable
 				ref={ref}
@@ -122,9 +128,11 @@ export const ToolbarButton = forwardRef(
 					groupLocation === 'middle' && styles.groupMiddle,
 					groupLocation === 'end' && styles.groupEnd,
 				)}
+				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}
 				aria-haspopup={ariaHasPopup}
 				aria-controls={ariaControls}
+				aria-keyshortcuts={ariaKeyshortcuts}
 				data-ds--level={dataDsLevel}
 				onClick={onClick}
 				onBlur={onBlur}
@@ -132,11 +140,7 @@ export const ToolbarButton = forwardRef(
 				testId={testId}
 				isDisabled={isDisabled}
 			>
-				<IconComponent
-					label={label}
-					size="medium"
-					color={iconColor}
-				/>
+				<IconComponent label={label} size="medium" color={iconColor} />
 				{children}
 			</Pressable>
 		);

package/src/ui/ToolbarDropdownDivider.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	divider: {
+		borderBottomColor: token('color.border'),
+		borderBottomStyle: 'solid',
+		borderBottomWidth: token('border.width'),
+	},
+});
+
+export const ToolbarDropdownDivider = () => {
+	return <Box xcss={styles.divider} />;
+};

package/src/ui/ToolbarDropdownItem.tsx

@@ -1,7 +1,8 @@
-import React, { type ReactNode } from 'react';
+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 { Box, Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
@@ -72,14 +73,62 @@ const styles = cssMap({
 	},
 });
 
+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: () => void;
+	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 = ({
@@ -90,42 +139,24 @@ export const ToolbarDropdownItem = ({
 	children,
 	textStyle = 'normal',
 	isDisabled,
-}: ToolbarDropdownItemProps) => {
-	return (
-		<DropdownItem
-			onClick={onClick}
-			elemBefore={elemBefore}
-			elemAfter={elemAfter}
-			isSelected={isSelected}
-			component={({
-				children,
-				'data-testid': testId,
-				draggable,
-				onClick,
-				onDragStart,
-				onMouseDown,
-				ref,
-				tabIndex,
-			}) => (
-				<Pressable
-					testId={testId}
-					xcss={cx(
-						styles.toolbarDropdownItem,
-						isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
-					)}
-					isDisabled={isDisabled}
-					draggable={draggable}
-					onClick={onClick}
-					onDragStart={onDragStart}
-					onMouseDown={onMouseDown}
-					tabIndex={tabIndex}
-					ref={ref}
-				>
-					{children}
-				</Pressable>
-			)}
-		>
-			<Box xcss={styles[textStyle]}>{children}</Box>
-		</DropdownItem>
-	);
-};
+	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}
+	>
+		<Box xcss={styles[textStyle]}>{children}</Box>
+	</DropdownItem>
+);

package/src/ui/ToolbarDropdownItemSection.tsx

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+
+const styles = cssMap({
+	container: {
+		display: 'flex',
+		flexDirection: 'column',
+	},
+});
+
+type ToolbarDropdownItemSectionProps = {
+	children?: ReactNode;
+};
+
+export const ToolbarDropdownItemSection = ({ children }: ToolbarDropdownItemSectionProps) => {
+	return <Box xcss={styles.container}>{children}</Box>;
+};

package/src/ui/ToolbarNestedDropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React, { type ReactNode } from 'react';
+
+import DropdownMenu from '@atlaskit/dropdown-menu';
+
+import { ToolbarDropdownItem } from './ToolbarDropdownItem';
+
+type ToolbarNestedDropdownMenuProps = {
+	elemBefore: ReactNode;
+	elemAfter: ReactNode;
+	text?: string;
+	children?: ReactNode;
+	isDisabled?: boolean;
+};
+
+export const ToolbarNestedDropdownMenu = ({
+	elemBefore,
+	text,
+	elemAfter,
+	children,
+	isDisabled,
+}: ToolbarNestedDropdownMenuProps) => {
+	return (
+		<DropdownMenu<HTMLButtonElement>
+			placement="right-start"
+			trigger={(triggerProps) => (
+				<ToolbarDropdownItem
+					elemBefore={elemBefore}
+					elemAfter={elemAfter}
+					isSelected={triggerProps.isSelected}
+					onClick={triggerProps.onClick}
+					testId={triggerProps.testId}
+					triggerRef={triggerProps.triggerRef}
+					hasNestedDropdownMenu={true}
+					isDisabled={isDisabled}
+				>
+					{text}
+				</ToolbarDropdownItem>
+			)}
+		>
+			{children}
+		</DropdownMenu>
+	);
+};

package/src/ui/ToolbarTooltip.tsx

@@ -3,14 +3,10 @@ import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 
 type ToolbarTooltipProps = {
-    content: string;
-    children: React.ReactNode;
+	content: string;
+	children: React.ReactNode;
 };
 
 export const ToolbarTooltip = ({ content, children }: ToolbarTooltipProps) => {
-    return (
-        <Tooltip content={content}>
-            {children}
-        </Tooltip>
-    );
-};
+	return <Tooltip content={content}>{children}</Tooltip>;
+};

package/src/ui/icons/AICasualIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AICasualIcon } from '@atlaskit/icon/core/emoji-casual';

package/src/ui/icons/AIChangeToneIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIChangeToneIcon } from '@atlaskit/icon-lab/core/ai-generative-chapters';

package/src/ui/icons/AIHeartIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIHeartIcon } from '@atlaskit/icon/core/heart';

package/src/ui/icons/AILengthenIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AILenghtenIcon } from '@atlaskit/icon-lab/core/text-lengthen';

package/src/ui/icons/AIProfessionalIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIBriefcaseIcon } from '@atlaskit/icon/core/briefcase';

package/src/ui/icons/AIShortenIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIShortenIcon } from '@atlaskit/icon/core/text-shorten';

package/src/ui/icons/AISpellcheckIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AISpellcheckIcon } from '@atlaskit/icon/core/text-spellcheck';

package/src/ui/icons/AITranslateIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AITranslateIcon } from '@atlaskit/icon/core/translate';

package/src/ui/icons/ClearFormattingIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as ClearFormattingIcon } from '@atlaskit/icon/core/table-cell-clear';

package/src/ui/icons/NestedDropdownRightIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon/core/chevron-right';
+
+import { type IconComponent } from '../../types';
+
+export const NestedDropdownRightIcon: IconComponent = ({
+	label,
+	testId,
+	color,
+	shouldRecommendSmallIcon,
+	spacing,
+}) => (
+	<Icon
+		label={label}
+		testId={testId}
+		color={color}
+		shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+		spacing={spacing}
+		size="small"
+	/>
+);

package/tsconfig.app.json

@@ -49,6 +49,9 @@
 		{
 			"path": "../../design-system/logo/tsconfig.app.json"
 		},
+		{
+			"path": "../../design-system/menu/tsconfig.app.json"
+		},
 		{
 			"path": "../../design-system/popup/tsconfig.app.json"
 		},