refactor: menu component props and toolbar menu item colors [skip e2e]

packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -140,7 +140,6 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
         </>
       )}
       <Menu
-        isOpen={application.accountMenuController.show}
         a11yLabel="General account menu"
         closeMenu={closeMenu}
         initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -11,13 +11,11 @@ import MenuSection from '@/Components/Menu/MenuSection'
 
 type Props = {
   mainApplicationGroup: WebApplicationGroup
-  isOpen: boolean
   hideWorkspaceOptions?: boolean
 }
 
 const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
   mainApplicationGroup,
-  isOpen,
   hideWorkspaceOptions = false,
 }: Props) => {
   const application = useApplication()
@@ -71,7 +69,7 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
   }, [mainApplicationGroup])
 
   return (
-    <Menu a11yLabel="Workspace switcher menu" className="focus:shadow-none" isOpen={isOpen}>
+    <Menu a11yLabel="Workspace switcher menu" className="focus:shadow-none">
       <MenuSection>
         {applicationDescriptors.map((descriptor) => (
           <WorkspaceMenuItem

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -38,7 +38,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
         side="right"
         togglePopover={toggleMenu}
       >
-        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} isOpen={isOpen} />
+        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} />
       </Popover>
     </>
   )

packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

@@ -33,11 +33,7 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
         side="right"
         togglePopover={toggleMenu}
       >
-        <WorkspaceSwitcherMenu
+        <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} hideWorkspaceOptions={true} />
-          mainApplicationGroup={mainApplicationGroup}
-          isOpen={isOpen}
-          hideWorkspaceOptions={true}
-        />
       </Popover>
     </div>
   )

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx

@@ -83,7 +83,6 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
       >
         <ChangeEditorMenu
           application={application}
-          isVisible={isOpen}
           note={note}
           setDisableClickOutside={setIsClickOutsideDisabled}
           closeMenu={() => {

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -29,7 +29,6 @@ import MenuSection from '../Menu/MenuSection'
 type ChangeEditorMenuProps = {
   application: WebApplication
   closeMenu: () => void
-  isVisible: boolean
   note: SNNote | undefined
   onSelect?: (component: UIFeature<EditorFeatureDescription | IframeComponentFeatureDescription>) => void
   setDisableClickOutside?: (value: boolean) => void
@@ -40,7 +39,6 @@ const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace
 const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   application,
   closeMenu,
-  isVisible,
   note,
   onSelect,
   setDisableClickOutside,
@@ -208,7 +206,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
   return (
     <>
-      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
+      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu">
         {groups
           .filter((group) => group.items && group.items.length)
           .map((group) => {

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx

@@ -132,7 +132,7 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }
 
   return (
     <>
-      <Menu isOpen={true} a11yLabel="Change note type">
+      <Menu a11yLabel="Change note type">
         {groupsWithItems.map((group) => (
           <MenuSection key={getGroupId(group)}>
             {group.items.map((item) => {

packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx

@@ -328,7 +328,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro
         />
       </div>
     ) : (
-      <Menu a11yLabel="User account menu" isOpen={true}>
+      <Menu a11yLabel="User account menu">
         <MenuItem onClick={activateRegisterPane}>
           <Icon type="user" className="mr-2 h-6 w-6 text-neutral md:h-5 md:w-5" />
           Create free account
@@ -343,7 +343,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro
 
   return (
     <div className="bg-contrast p-3">
-      <Menu a11yLabel="Extension menu" isOpen={true} className="rounded border border-border bg-default">
+      <Menu a11yLabel="Extension menu" className="rounded border border-border bg-default">
         {hasSelection && (
           <MenuItem
             className="border-b border-border"
@@ -449,7 +449,7 @@ const ClipperView = ({ applicationGroup }: { applicationGroup: WebApplicationGro
           <div className={classNames('flex items-center border-t border-border', hasSyncError && 'text-danger')}>
             {isSyncing && (
               <>
-                <Spinner className="w-4 h-4 mx-2.5" />
+                <Spinner className="mx-2.5 h-4 w-4" />
                 <div className="flex-grow py-2 text-sm font-semibold text-info">Syncing...</div>
               </>
             )}

packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx

@@ -79,7 +79,7 @@ const AddItemMenuButton = ({
           align="center"
           className="py-2"
         >
-          <Menu a11yLabel={'test'} isOpen={isMenuOpen}>
+          <Menu a11yLabel={'test'}>
             <MenuItem
               onClick={() => {
                 addNewItem()

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -125,7 +125,6 @@ const ContentListHeader = ({
             <DisplayOptionsMenu
               application={application}
               isFilesSmartView={isFilesSmartView}
-              isOpen={showDisplayOptionsMenu}
               selectedTag={selectedTag}
               paneController={paneController}
             />

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -82,7 +82,6 @@ const TabButton: FunctionComponent<{
 
 const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   application,
-  isOpen,
   isFilesSmartView,
   selectedTag,
   paneController,
@@ -283,7 +282,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
   const shouldHideNonApplicableOptions = isTableViewEnabled && !isMobileScreen
 
   return (
-    <Menu className="text-sm" a11yLabel="Notes list options menu" isOpen={isOpen}>
+    <Menu className="text-sm" a11yLabel="Notes list options menu">
       <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Preferences for</div>
       <div className={classNames('mt-1.5 flex w-full justify-between px-3', !controlsDisabled && 'mb-3')}>
         <div className="flex items-center gap-1.5">

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenuProps.tsx

@@ -10,7 +10,6 @@ export type DisplayOptionsMenuPositionProps = {
 export type DisplayOptionsMenuProps = {
   application: WebApplication
   selectedTag: AnyTag
-  isOpen: boolean
   isFilesSmartView: boolean
   paneController: PaneController
 }

packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx

@@ -75,7 +75,7 @@ const ContextMenuCell = ({ items }: { items: DecryptedItemInterface[] }) => {
         align="start"
         className="py-2"
       >
-        <Menu a11yLabel="File context menu" isOpen={contextMenuVisible}>
+        <Menu a11yLabel="File context menu">
           {allItemsAreFiles && (
             <FileMenuOptions
               closeMenu={() => {
@@ -366,7 +366,7 @@ const ContentTableView = ({ application, items }: Props) => {
           className="py-2"
         >
           {contextMenuItem instanceof FileItem && (
-            <Menu a11yLabel="File context menu" isOpen={true}>
+            <Menu a11yLabel="File context menu">
               <FileMenuOptions
                 closeMenu={closeContextMenu}
                 shouldShowRenameOption={false}
@@ -376,7 +376,7 @@ const ContentTableView = ({ application, items }: Props) => {
             </Menu>
           )}
           {contextMenuItem instanceof SNNote && (
-            <Menu className="select-none" a11yLabel="Note context menu" isOpen={true}>
+            <Menu className="select-none" a11yLabel="Note context menu">
               <NotesOptions notes={[contextMenuItem]} closeMenu={closeContextMenu} />
             </Menu>
           )}

packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx

@@ -24,7 +24,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, i
       align="start"
       className="md:pb-2"
     >
-      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
+      <Menu a11yLabel="File context menu">
         <FileMenuOptions
           selectedFiles={selectedFiles}
           closeMenu={() => setShowFileContextMenu(false)}

packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx

@@ -26,7 +26,7 @@ const FilesOptionsPanel = ({ itemListController }: Props) => {
         open={isOpen}
         className="md:pb-2"
       >
-        <Menu a11yLabel="File options panel" isOpen={isOpen}>
+        <Menu a11yLabel="File options panel">
           <FileMenuOptions
             selectedFiles={itemListController.selectedFiles}
             closeMenu={() => {

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -224,7 +224,7 @@ const FilePreviewModal = observer(({ application }: Props) => {
               className="md:pb-2"
               overrideZIndex="z-modal"
             >
-              <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
+              <Menu a11yLabel="File context menu">
                 <FileMenuOptions
                   selectedFiles={[currentFile]}
                   closeMenu={closeOptionsMenu}

packages/web/src/javascripts/Components/Menu/Menu.tsx

@@ -14,7 +14,6 @@ import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/u
 interface MenuProps extends ComponentPropsWithoutRef<'menu'> {
   a11yLabel: string
   closeMenu?: () => void
-  isOpen: boolean
   initialFocus?: number
   shouldAutoFocus?: boolean
 }

packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx

@@ -29,7 +29,7 @@ const NotesContextMenu = () => {
       open={contextMenuOpen}
       togglePopover={closeMenu}
     >
-      <Menu className="select-none" a11yLabel="Note context menu" isOpen={contextMenuOpen}>
+      <Menu className="select-none" a11yLabel="Note context menu">
         <NotesOptions
           notes={application.notesController.selectedNotes}
           requestDisableClickOutside={handleDisableClickOutsideRequest}

packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx

@@ -77,7 +77,7 @@ const AddTagOption: FunctionComponent<Props> = ({
         className="py-2"
         overrideZIndex="z-modal"
       >
-        <Menu a11yLabel="Tag selection menu" isOpen={isOpen} className="!px-0">
+        <Menu a11yLabel="Tag selection menu" className="!px-0">
           {navigationController.tags.map((tag) => (
             <MenuItem
               key={tag.uuid}

packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx

@@ -68,7 +68,6 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         <ChangeEditorMenu
           application={application}
           note={note}
-          isVisible={isOpen}
           closeMenu={() => {
             setIsOpen(false)
           }}

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -367,7 +367,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
               }}
               className="md:py-1"
             >
-              <Menu a11yLabel={'Super note export menu'} isOpen={isSuperExportMenuOpen}>
+              <Menu a11yLabel={'Super note export menu'}>
                 <MenuSection>
                   <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}>
                     <Icon type="code" className={iconClass} />

packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx

@@ -39,7 +39,7 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) =>
         open={isOpen}
         className="select-none"
       >
-        <Menu a11yLabel="Note options menu" isOpen={isOpen}>
+        <Menu a11yLabel="Note options menu">
           <NotesOptions
             notes={notesController.selectedNotes}
             requestDisableClickOutside={handleDisableClickOutsideRequest}

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -115,7 +115,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
   }, [deactivateAnyNonLayerableTheme])
 
   return (
-    <Menu a11yLabel="Quick settings menu" isOpen>
+    <Menu a11yLabel="Quick settings menu">
       {editorStackComponents.length > 0 && (
         <MenuSection title="Tools">
           {editorStackComponents.map((component) => (

packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx

@@ -390,7 +390,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, cellMerge }:
     (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
 
   return (
-    <Menu className="dropdown !px-0" ref={dropDownRef} a11yLabel="Table actions menu" isOpen>
+    <Menu className="dropdown !px-0" ref={dropDownRef} a11yLabel="Table actions menu">
       {mergeCellButton}
       {!!mergeCellButton && <MenuItemSeparator />}
       <MenuItem onClick={() => insertTableRowAtSelection(false)}>

packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx

@@ -159,7 +159,7 @@ interface ToolbarMenuItemProps extends Omit<MenuItemProps, 'children'> {
 const ToolbarMenuItem = ({ name, iconName, active, ...props }: ToolbarMenuItemProps) => {
   return (
     <MenuItem
-      className={classNames('overflow-hidden md:py-2', active ? '!bg-info text-info-contrast' : 'hover:bg-contrast')}
+      className={classNames('overflow-hidden md:py-2', active ? '!bg-info !text-info-contrast' : 'hover:bg-contrast')}
       {...props}
     >
       <Icon type={iconName} className="-mt-px mr-2.5 flex-shrink-0" />
@@ -628,7 +628,7 @@ const ToolbarPlugin = () => {
             }
 
             return (
-              <Menu a11yLabel="Table of contents" isOpen className="!px-0">
+              <Menu a11yLabel="Table of contents" className="!px-0">
                 {tableOfContents.map(([key, text, tag]) => {
                   const level = parseInt(tag.slice(1)) || 1
                   if (level > 3) {
@@ -674,12 +674,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
       >
-        <Menu
+        <Menu a11yLabel="Text formatting options" className="!px-0" onClick={() => setIsTextFormatMenuOpen(false)}>
-          a11yLabel="Text formatting options"
-          isOpen
-          className="!px-0"
-          onClick={() => setIsTextFormatMenuOpen(false)}
-        >
           <ToolbarMenuItem
             name="Highlight"
             iconName="draw"
@@ -718,7 +713,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
       >
-        <Menu a11yLabel="Text style" isOpen className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
+        <Menu a11yLabel="Text style" className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
           <ToolbarMenuItem
             name="Normal"
             iconName="paragraph"
@@ -789,7 +784,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
       >
-        <Menu a11yLabel="Alignment" isOpen className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
+        <Menu a11yLabel="Alignment" className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
           <ToolbarMenuItem
             name="Left align"
             iconName="align-left"
@@ -828,7 +823,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
       >
-        <Menu a11yLabel="Insert" isOpen className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
+        <Menu a11yLabel="Insert" className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
           <ToolbarMenuItem
             name="Table"
             iconName="table"

packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx

@@ -71,7 +71,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
       togglePopover={() => navigationController.setContextMenuOpen(!contextMenuOpen)}
       className="py-2"
     >
-      <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
+      <Menu a11yLabel="Tag context menu">
         <IconPicker
           key={'icon-picker'}
           onIconChange={handleIconChange}

packages/web/src/javascripts/Components/VaultSelectionMenu/ManyVaultSelectionMenu.tsx

@@ -36,7 +36,7 @@ const ManyVaultSelectionMenu: FunctionComponent = () => {
   )
 
   return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
       {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
       {vaults.map((vault) => (
         <VaultSelectMenuItemWithOptions vault={vault} key={vault.uuid}>

packages/web/src/javascripts/Components/VaultSelectionMenu/SingleVaultSelectionMenu.tsx

@@ -32,7 +32,7 @@ const SingleVaultSelectionMenu: FunctionComponent = () => {
   )
 
   return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
       {!vaults.length && <div className="py-1 text-center">No vaults found</div>}
       {vaults.map((vault) => (
         <VaultSelectMenuItemWithOptions vault={vault} key={vault.uuid}>

packages/web/src/javascripts/Components/VaultSelectionMenu/VaultOptionsMenu.tsx

@@ -24,7 +24,7 @@ const VaultOptionsMenu = ({ vault }: Props) => {
 
   return (
     <>
-      <Menu a11yLabel="Vault options menu" isOpen>
+      <Menu a11yLabel="Vault options menu">
         <MenuItem onClick={openEditModal}>
           <Icon type="pencil-filled" className="mr-2" />
           Edit vault

packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx

@@ -28,7 +28,7 @@ const VaultSelectionMenu = () => {
   }
 
   return (
-    <Menu a11yLabel="Vault selection menu" isOpen>
+    <Menu a11yLabel="Vault selection menu">
       <RadioButtonGroup
         items={[
           { label: 'Multiple', value: 'many' },

packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx

@@ -57,7 +57,7 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
   const singleItemVault = items.length === 1 ? application.vaults.getItemVault(items[0]) : undefined
 
   return (
-    <Menu a11yLabel="Vault selection menu" isOpen={true}>
+    <Menu a11yLabel="Vault selection menu">
       {doSomeItemsBelongToVault && (
         <MenuItem
           onClick={() => {