fix: renamed folder MainMenu->main-menu and support rest props (#6103)

* renamed folder MainMenu -> main-menu

* rename ariaLabel -> aria-label and dataTestId -> data-testid

* allow rest props

* fix

* lint

* add ts check

* ts for div

* fix

* fix

* fix

src/components/LayerUI.tsx

@@ -50,7 +50,7 @@ import WelcomeScreen from "./welcome-screen/WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
-import MainMenu from "./mainMenu/MainMenu";
+import MainMenu from "./main-menu/MainMenu";
 
 interface LayerUIProps {
   actionManager: ActionManager;

src/components/LibraryMenuHeaderContent.tsx

@@ -193,7 +193,7 @@ export const LibraryMenuHeader: React.FC<{
             <DropdownMenu.Item
               onSelect={onLibraryImport}
               icon={LoadIcon}
-              dataTestId="lib-dropdown--load"
+              data-testid="lib-dropdown--load"
             >
               {t("buttons.load")}
             </DropdownMenu.Item>
@@ -202,7 +202,7 @@ export const LibraryMenuHeader: React.FC<{
             <DropdownMenu.Item
               onSelect={onLibraryExport}
               icon={ExportIcon}
-              dataTestId="lib-dropdown--export"
+              data-testid="lib-dropdown--export"
             >
               {t("buttons.export")}
             </DropdownMenu.Item>
@@ -219,7 +219,7 @@ export const LibraryMenuHeader: React.FC<{
             <DropdownMenu.Item
               icon={publishIcon}
               onSelect={() => setShowPublishLibraryDialog(true)}
-              dataTestId="lib-dropdown--remove"
+              data-testid="lib-dropdown--remove"
             >
               {t("buttons.publishLibrary")}
             </DropdownMenu.Item>

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -9,30 +9,23 @@ const DropdownMenuItem = ({
   icon,
   onSelect,
   children,
-  dataTestId,
   shortcut,
   className,
-  style,
+  ...rest
-  ariaLabel,
 }: {
   icon?: JSX.Element;
   onSelect: () => void;
   children: React.ReactNode;
-  dataTestId?: string;
   shortcut?: string;
   className?: string;
-  style?: React.CSSProperties;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  ariaLabel?: string;
-}) => {
   return (
     <button
-      aria-label={ariaLabel}
+      {...rest}
       onClick={onSelect}
-      data-testid={dataTestId}
-      title={ariaLabel}
       type="button"
       className={getDrodownMenuItemClassName(className)}
-      style={style}
+      title={rest.title ?? rest["aria-label"]}
     >
       <MenuItemContent icon={icon} shortcut={shortcut}>
         {children}

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -1,19 +1,17 @@
+import React from "react";
+
 const DropdownMenuItemCustom = ({
   children,
   className = "",
-  style,
+  ...rest
-  dataTestId,
 }: {
   children: React.ReactNode;
   className?: string;
-  style?: React.CSSProperties;
+} & React.HTMLAttributes<HTMLDivElement>) => {
-  dataTestId?: string;
-}) => {
   return (
     <div
+      {...rest}
       className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
-      style={style}
-      data-testid={dataTestId}
     >
       {children}
     </div>

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -3,33 +3,26 @@ import React from "react";
 import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
 const DropdownMenuItemLink = ({
   icon,
-  dataTestId,
   shortcut,
   href,
   children,
   className = "",
-  style,
+  ...rest
-  ariaLabel,
 }: {
   icon?: JSX.Element;
   children: React.ReactNode;
-  dataTestId?: string;
   shortcut?: string;
   className?: string;
   href: string;
-  style?: React.CSSProperties;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  ariaLabel?: string;
-}) => {
   return (
     <a
+      {...rest}
       href={href}
       target="_blank"
       rel="noreferrer"
       className={getDrodownMenuItemClassName(className)}
-      style={style}
+      title={rest.title ?? rest["aria-label"]}
-      data-testid={dataTestId}
-      title={ariaLabel}
-      aria-label={ariaLabel}
     >
       <MenuItemContent icon={icon} shortcut={shortcut}>
         {children}

src/components/main-menu/DefaultItems.tsx

@@ -46,9 +46,9 @@ export const LoadScene = () => {
     <DropdownMenuItem
       icon={LoadIcon}
       onSelect={() => actionManager.executeAction(actionLoadScene)}
-      dataTestId="load-button"
+      data-testid="load-button"
       shortcut={getShortcutFromShortcutName("loadScene")}
-      ariaLabel={t("buttons.load")}
+      aria-label={t("buttons.load")}
     >
       {t("buttons.load")}
     </DropdownMenuItem>
@@ -69,10 +69,10 @@ export const SaveToActiveFile = () => {
   return (
     <DropdownMenuItem
       shortcut={getShortcutFromShortcutName("saveScene")}
-      dataTestId="save-button"
+      data-testid="save-button"
       onSelect={() => actionManager.executeAction(actionSaveToActiveFile)}
       icon={save}
-      ariaLabel={`${t("buttons.save")}`}
+      aria-label={`${t("buttons.save")}`}
     >{`${t("buttons.save")}`}</DropdownMenuItem>
   );
 };
@@ -86,10 +86,10 @@ export const SaveAsImage = () => {
   return (
     <DropdownMenuItem
       icon={ExportImageIcon}
-      dataTestId="image-export-button"
+      data-testid="image-export-button"
       onSelect={() => setAppState({ openDialog: "imageExport" })}
       shortcut={getShortcutFromShortcutName("imageExport")}
-      ariaLabel={t("buttons.exportImage")}
+      aria-label={t("buttons.exportImage")}
     >
       {t("buttons.exportImage")}
     </DropdownMenuItem>
@@ -106,11 +106,11 @@ export const Help = () => {
 
   return (
     <DropdownMenuItem
-      dataTestId="help-menu-item"
+      data-testid="help-menu-item"
       icon={HelpIcon}
       onSelect={() => actionManager.executeAction(actionShortcuts)}
       shortcut="?"
-      ariaLabel={t("helpDialog.title")}
+      aria-label={t("helpDialog.title")}
     >
       {t("helpDialog.title")}
     </DropdownMenuItem>
@@ -136,8 +136,8 @@ export const ClearCanvas = () => {
       <DropdownMenuItem
         icon={TrashIcon}
         onSelect={toggleDialog}
-        dataTestId="clear-canvas-button"
+        data-testid="clear-canvas-button"
-        ariaLabel={t("buttons.clearReset")}
+        aria-label={t("buttons.clearReset")}
       >
         {t("buttons.clearReset")}
       </DropdownMenuItem>
@@ -175,9 +175,9 @@ export const ToggleTheme = () => {
         return actionManager.executeAction(actionToggleTheme);
       }}
       icon={appState.theme === "dark" ? SunIcon : MoonIcon}
-      dataTestId="toggle-dark-mode"
+      data-testid="toggle-dark-mode"
       shortcut={getShortcutFromShortcutName("toggleTheme")}
-      ariaLabel={
+      aria-label={
         appState.theme === "dark"
           ? t("buttons.lightMode")
           : t("buttons.darkMode")
@@ -222,8 +222,8 @@ export const Export = () => {
       onSelect={() => {
         setAppState({ openDialog: "jsonExport" });
       }}
-      dataTestId="json-export-button"
+      data-testid="json-export-button"
-      ariaLabel={t("buttons.export")}
+      aria-label={t("buttons.export")}
     >
       {t("buttons.export")}
     </DropdownMenuItem>
@@ -236,21 +236,21 @@ export const Socials = () => (
     <DropdownMenuItemLink
       icon={GithubIcon}
       href="https://github.com/excalidraw/excalidraw"
-      ariaLabel="GitHub"
+      aria-label="GitHub"
     >
       GitHub
     </DropdownMenuItemLink>
     <DropdownMenuItemLink
       icon={DiscordIcon}
       href="https://discord.gg/UexuTaE"
-      ariaLabel="Discord"
+      aria-label="Discord"
     >
       Discord
     </DropdownMenuItemLink>
     <DropdownMenuItemLink
       icon={TwitterIcon}
       href="https://twitter.com/excalidraw"
-      ariaLabel="Twitter"
+      aria-label="Twitter"
     >
       Twitter
     </DropdownMenuItemLink>
@@ -270,7 +270,7 @@ export const LiveCollaboration = ({
   const appState = useExcalidrawAppState();
   return (
     <DropdownMenuItem
-      dataTestId="collab-button"
+      data-testid="collab-button"
       icon={UsersIcon}
       className={clsx({
         "active-collab": isCollaborating,

src/packages/excalidraw/README.md

@@ -479,14 +479,10 @@ Use this component to render a menu item.
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `onSelect` | `Function` | Yes |  | The handler is triggered when the item is selected. |
+| `onSelect` | `Function` | Yes | `undefined` | The handler is triggered when the item is selected. |
-| `children` | `React.ReactNode` | Yes |  | The content of the menu item |
+| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `icon` | `JSX.Element` | No |  | The icon used in the menu item |
+| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
 | `shortcut` | `string` | No |  | The keyboard shortcut (label-only, does not affect behavior) |
-| `className` | `string` | No |  | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No |  | The inline styles to be added to the menu item |
-| `ariaLabel` | `string` |  | No | The `aria-label` to be added to the item for accessibility |
-| `dataTestId` | `string` |  | No | The `data-testid` to be added to the item. |
 
 **MainMenu.ItemLink**
 
@@ -510,14 +506,10 @@ const App = () => (
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `href` | `string` | Yes |  | The `href` attribute to be added to the `anchor` element. |
+| `href` | `string` | Yes | `undefined` | The `href` attribute to be added to the `anchor` element. |
-| `children` | `React.ReactNode` | Yes |  | The content of the menu item |
+| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `icon` | `JSX.Element` | No |  | The icon used in the menu item |
+| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
 | `shortcut` | `string` | No |  | The keyboard shortcut (label-only, does not affect behavior) |
-| `className` | `string` | No | "" | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No |  | The inline styles to be added to the menu item |
-| `ariaLabel` | `string` | No |  | The `aria-label` to be added to the item for accessibility |
-| `dataTestId` | `string` | No |  | The `data-testid` to be added to the item. |
 
 **MainMenu.ItemCustom**
 
@@ -547,9 +539,6 @@ const App = () => (
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `className` | `string` | No | "" | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
-| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
 
 **MainMenu.DefaultItems**
 
@@ -595,10 +584,7 @@ const App = () => (
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `MenuItem Group` |
+| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `MainMenu.Group` |
-| `title` | `string` | No | `undefined` | The `title` for the grouped items |
-| `className` | `string` | No | "" | The `classname` to be added to the group |
-| `style` | `React.CSsSProperties` | No | `undefined` | The inline `styles` to be added to the group |
 
 ### WelcomeScreen
 

src/packages/excalidraw/index.tsx

@@ -12,7 +12,7 @@ import { DEFAULT_UI_OPTIONS } from "../../constants";
 import { Provider } from "jotai";
 import { jotaiScope, jotaiStore } from "../../jotai";
 import Footer from "../../components/footer/FooterCenter";
-import MainMenu from "../../components/mainMenu/MainMenu";
+import MainMenu from "../../components/main-menu/MainMenu";
 import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
 
 const ExcalidrawBase = (props: ExcalidrawProps) => {