refactor(form-builder): update PTE ActionMenu with refactored `Coll…

…apseMenu`
sanity-io · Feb 16, 2022 · 6f167f2 · 6f167f2
1 parent 5d31566
commit 6f167f2
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/ActionMenu.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/ActionMenu.tsx
@@ -1,6 +1,6 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {CollapseMenu, CollapseMenuButton, CollapseMenuButtonProps} from '@sanity/base/components'
-import {Button, PopoverProps} from '@sanity/ui'
+import {CollapseMenuButton, CollapseMenu} from '@sanity/base/components'
+import {Button, ButtonProps, PopoverProps} from '@sanity/ui'
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {PTEToolbarAction, PTEToolbarActionGroup} from './types'
@@ -9,8 +9,8 @@ import {getActionIcon} from './helpers'
 
 const CollapseMenuMemo = memo(CollapseMenu)
 
-const MENU_POPOVER_PROPS: PopoverProps = {constrainSize: true}
-const COLLAPSE_BUTTON_PROPS: CollapseMenuButtonProps = {padding: 2, mode: 'bleed'}
+const MENU_POPOVER_PROPS: PopoverProps = {constrainSize: true, portal: true}
+const COLLAPSE_BUTTON_PROPS: ButtonProps = {padding: 2, mode: 'bleed'}
 
 interface ActionMenuProps {
   disabled: boolean
@@ -61,14 +61,15 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
         return (
           <CollapseMenuButton
             disabled={disabled || annotationDisabled}
-            buttonProps={COLLAPSE_BUTTON_PROPS}
+            {...COLLAPSE_BUTTON_PROPS}
             dividerBefore={action.firstInGroup}
             icon={getActionIcon(action, active)}
             key={action.key}
             // eslint-disable-next-line react/jsx-no-bind
             onClick={() => action.handle(active)}
             selected={active}
             text={action.title || action.key}
+            tooltipText={action.title || action.key}
             tooltipProps={{
               disabled: disabled || annotationDisabled,
               placement: isFullscreen ? 'bottom' : 'top',
@@ -80,19 +81,21 @@ export const ActionMenu = memo(function ActionMenu(props: ActionMenuProps) {
     [actions, activeKeys, disabled, isEmptyTextBlock, isFullscreen]
   )
 
-  const menuButton = useMemo(
-    () => <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} disabled={disabled} />,
+  const menuButtonProps = useMemo(
+    () => ({
+      button: <Button icon={EllipsisVerticalIcon} mode="bleed" padding={2} disabled={disabled} />,
+      popover: MENU_POPOVER_PROPS,
+    }),
     [disabled]
   )
 
   return (
     <CollapseMenuMemo
       collapsed={collapsed}
+      disableRestoreFocusOnClose
       gap={1}
-      menuButton={menuButton}
-      menuPopoverProps={MENU_POPOVER_PROPS}
+      menuButtonProps={menuButtonProps}
       onMenuClose={handleMenuClose}
-      disableRestoreFocusOnClose
     >
       {children}
     </CollapseMenuMemo>