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

…apseMenu`
sanity-io · Feb 16, 2022 · b675e1a · b675e1a
1 parent 6f167f2
commit b675e1a
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/InsertMenu.tsx b/packages/@sanity/form-builder/src/inputs/PortableText/toolbar/InsertMenu.tsx
@@ -1,5 +1,5 @@
 import React, {memo, useCallback, useMemo} from 'react'
-import {CollapseMenu, CollapseMenuButton, CollapseMenuButtonProps} from '@sanity/base/components'
+import {CollapseMenu, CollapseMenuButton} from '@sanity/base/components'
 import {AddIcon} from '@sanity/icons'
 import {Button, PopoverProps} from '@sanity/ui'
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
@@ -8,9 +8,7 @@ import {useFeatures, useFocusBlock} from './hooks'
 
 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}
 interface InsertMenuProps {
   disabled: boolean
   items: BlockItem[]
@@ -37,38 +35,41 @@ export const InsertMenu = memo(function InsertMenu(props: InsertMenuProps) {
       return (
         <CollapseMenuButton
           aria-label={`Insert ${title}${item.inline ? ' (inline)' : ' (block)'}`}
-          buttonProps={COLLAPSE_BUTTON_PROPS}
-          collapseText={false}
+          padding={2}
+          mode="bleed"
           disabled={disabled || (isVoidFocus && item.inline === true)}
           icon={item.icon}
           key={item.key}
           // eslint-disable-next-line react/jsx-no-bind, react/jsx-handler-names
           onClick={item.handle}
           text={title}
+          tooltipText={`Insert ${title}`}
           tooltipProps={{
             disabled,
             placement: isFullscreen ? 'bottom' : 'top',
             portal: 'default',
-            text: `Insert ${title}`,
           }}
         />
       )
     })
   }, [items, disabled, isVoidFocus, isFullscreen])
 
-  const menuButton = useMemo(
-    () => <Button icon={AddIcon} mode="bleed" padding={2} disabled={disabled} />,
+  const menuButtonProps = useMemo(
+    () => ({
+      button: <Button icon={AddIcon} mode="bleed" padding={2} disabled={disabled} />,
+      popover: MENU_POPOVER_PROPS,
+    }),
     [disabled]
   )
 
   return (
     <CollapseMenuMemo
       collapsed={collapsed}
+      collapseText={false}
+      disableRestoreFocusOnClose
       gap={1}
-      menuButton={menuButton}
-      menuPopoverProps={MENU_POPOVER_PROPS}
+      menuButtonProps={menuButtonProps}
       onMenuClose={handleMenuClose}
-      disableRestoreFocusOnClose
     >
       {children}
     </CollapseMenuMemo>