diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
index 2494df10..77c746b8 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@@ -38,6 +38,7 @@ To render an item, its recommended to use `MainMenu.Item`.
| Prop | Type | Required | Default | Description |
| --- | --- | :-: | :-: | --- |
| `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
+| `selected` | `boolean` | No | `false` | Whether item is active |
| `children` | `React.ReactNode` | Yes | - | The content of the menu item |
| `icon` | `JSX.Element` | No | - | The icon used in the menu item |
| `shortcut` | `string` | No | - | The shortcut to be shown for the menu item |
@@ -70,6 +71,7 @@ function App() {
| Prop | Type | Required | Default | Description |
| --- | --- | :-: | :-: | --- |
| `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
+| `selected` | `boolean` | No | `false` | Whether item is active |
| `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. |
| `children` | `React.ReactNode` | Yes | - | The content of the menu item |
| `icon` | `JSX.Element` | No | - | The icon used in the menu item |
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index e9483eac..47c8df46 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -318,6 +318,7 @@ export const ShapesSwitcher = ({
activeEmbeddable: null,
});
}}
+ selected={activeTool.type === "frame"}
/>
>
) : (
@@ -378,6 +380,7 @@ export const ShapesSwitcher = ({
icon={frameToolIcon}
shortcut={KEYS.F.toLocaleUpperCase()}
data-testid="toolbar-frame"
+ selected={activeTool.type === "frame"}
>
{t("toolBar.frame")}
@@ -394,6 +397,7 @@ export const ShapesSwitcher = ({
}}
icon={EmbedIcon}
data-testid="toolbar-embeddable"
+ selected={activeTool.type === "embeddable"}
>
{t("toolBar.embeddable")}
diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 6e628736..1df90fd4 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -59,6 +59,11 @@
height: 2.25rem;
}
+ &--selected {
+ background: var(--color-primary-light);
+ --icon-fill-color: var(--color-primary-darker);
+ }
+
&__text {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/components/dropdownMenu/DropdownMenuItem.tsx b/src/components/dropdownMenu/DropdownMenuItem.tsx
index 5532dbaa..93108a9f 100644
--- a/src/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItem.tsx
@@ -11,12 +11,14 @@ const DropdownMenuItem = ({
children,
shortcut,
className,
+ selected,
...rest
}: {
icon?: JSX.Element;
onSelect: (event: Event) => void;
children: React.ReactNode;
shortcut?: string;
+ selected?: boolean;
className?: string;
} & Omit, "onSelect">) => {
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -26,7 +28,7 @@ const DropdownMenuItem = ({
{...rest}
onClick={handleClick}
type="button"
- className={getDropdownMenuItemClassName(className)}
+ className={getDropdownMenuItemClassName(className, selected)}
title={rest.title ?? rest["aria-label"]}
>
diff --git a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
index 323f3109..795c5c79 100644
--- a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
@@ -3,15 +3,19 @@ import React from "react";
const DropdownMenuItemCustom = ({
children,
className = "",
+ selected,
...rest
}: {
children: React.ReactNode;
className?: string;
+ selected?: boolean;
} & React.HTMLAttributes) => {
return (
{children}
diff --git a/src/components/dropdownMenu/DropdownMenuItemLink.tsx b/src/components/dropdownMenu/DropdownMenuItemLink.tsx
index c93749ac..0dacaebf 100644
--- a/src/components/dropdownMenu/DropdownMenuItemLink.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemLink.tsx
@@ -12,6 +12,7 @@ const DropdownMenuItemLink = ({
children,
onSelect,
className = "",
+ selected,
...rest
}: {
href: string;
@@ -19,6 +20,7 @@ const DropdownMenuItemLink = ({
children: React.ReactNode;
shortcut?: string;
className?: string;
+ selected?: boolean;
onSelect?: (event: Event) => void;
} & React.AnchorHTMLAttributes) => {
const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -29,7 +31,7 @@ const DropdownMenuItemLink = ({
href={href}
target="_blank"
rel="noreferrer"
- className={getDropdownMenuItemClassName(className)}
+ className={getDropdownMenuItemClassName(className, selected)}
title={rest.title ?? rest["aria-label"]}
onClick={handleClick}
>
diff --git a/src/components/dropdownMenu/common.ts b/src/components/dropdownMenu/common.ts
index 9b5e7bfe..c5958458 100644
--- a/src/components/dropdownMenu/common.ts
+++ b/src/components/dropdownMenu/common.ts
@@ -6,8 +6,13 @@ export const DropdownMenuContentPropsContext = React.createContext<{
onSelect?: (event: Event) => void;
}>({});
-export const getDropdownMenuItemClassName = (className = "") => {
- return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+export const getDropdownMenuItemClassName = (
+ className = "",
+ selected = false,
+) => {
+ return `dropdown-menu-item dropdown-menu-item-base ${className} ${
+ selected ? "dropdown-menu-item--selected" : ""
+ }`.trim();
};
export const useHandleDropdownMenuItemClick = (
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index c3e8be9a..b852757d 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -11,6 +11,12 @@ The change should be grouped under one of the below section and must contain PR
Please add the latest change on the top under the correct section.
-->
+## Unreleased
+
+### Features
+
+- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078)
+
## 0.16.1 (2023-09-21)
## Excalidraw Library