[form-builder] Improve ArrayInput edit modals

sanity-io · Oct 6, 2020 · 838467b · 838467b
1 parent eb10d2b
commit 838467b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/packages/@sanity/form-builder/src/@types/parts.d.ts b/packages/@sanity/form-builder/src/@types/parts.d.ts
@@ -1,4 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function, class-methods-use-this, no-undef*/
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable import/export */
+/* eslint-disable no-undef */
 
 declare module 'part:@sanity/components/avatar' {
   export * from '@sanity/components/src/avatar'
@@ -68,6 +71,10 @@ declare module 'part:@sanity/components/tooltip' {
   export * from '@sanity/components/src/tooltip'
 }
 
+declare module 'part:@sanity/components/dialogs/popover' {
+  export {default} from '@sanity/components/src/dialogs/PopoverDialog'
+}
+
 declare module 'config:@sanity/form-builder'
 declare module 'all:part:@sanity/form-builder/input/image/asset-source'
 

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.css b/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.css
@@ -25,15 +25,6 @@
   composes: inner;
 }
 
-.popupAnchor {
-  position: absolute;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  background-color: var(--selectable-item-color-highlighted);
-}
-
 .editRootFold {
   position: relative;
   width: calc(100% + var(--medium-padding) * 2);

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.tsx b/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.tsx
@@ -8,7 +8,7 @@ import Button from 'part:@sanity/components/buttons/default'
 import IntentButton from 'part:@sanity/components/buttons/intent'
 import DefaultDialog from 'part:@sanity/components/dialogs/default'
 import FullscreenDialog from 'part:@sanity/components/dialogs/fullscreen'
-import Popover from 'part:@sanity/components/dialogs/popover'
+import PopoverDialog from 'part:@sanity/components/dialogs/popover'
 import EditItemFold from 'part:@sanity/components/edititem/fold'
 import {createDragHandle} from 'part:@sanity/components/lists/sortable'
 import ValidationStatus from 'part:@sanity/components/validation/status'
@@ -51,6 +51,8 @@ interface ArrayInputListItemProps {
 export class ArrayInputListItem extends React.PureComponent<ArrayInputListItemProps> {
   _focusArea: HTMLDivElement | null
 
+  innerElement: HTMLDivElement | null
+
   static defaultProps = {
     level: 0,
     markers: []
@@ -203,17 +205,16 @@ export class ArrayInputListItem extends React.PureComponent<ArrayInputListItemPr
 
     if (options.editModal === 'popover') {
       return (
-        <div className={styles.popupAnchor}>
-          <Popover
-            title={title}
-            onClose={this.handleEditStop}
-            onEscape={this.handleEditStop}
-            onClickOutside={this.handleEditStop}
-            placement="auto"
-          >
-            <PresenceOverlay margins={[0, 0, 1, 0]}>{content}</PresenceOverlay>
-          </Popover>
-        </div>
+        <PopoverDialog
+          title={title}
+          onClose={this.handleEditStop}
+          onEscape={this.handleEditStop}
+          onClickOutside={this.handleEditStop}
+          placement="auto"
+          referenceElement={this.innerElement}
+        >
+          <PresenceOverlay margins={[0, 0, 1, 0]}>{content}</PresenceOverlay>
+        </PopoverDialog>
       )
     }
 
@@ -224,6 +225,10 @@ export class ArrayInputListItem extends React.PureComponent<ArrayInputListItemPr
     )
   }
 
+  setInnerElement = (el: HTMLDivElement | null) => {
+    this.innerElement = el
+  }
+
   renderItem() {
     const {value, markers, type, readOnly, presence, focusPath} = this.props
     const options = type.options || {}
@@ -247,7 +252,7 @@ export class ArrayInputListItem extends React.PureComponent<ArrayInputListItemPr
     return (
       <ChangeIndicatorScope path={[{_key: value._key}]}>
         <ContextProvidedChangeIndicator compareDeep disabled={hasItemFocus}>
-          <div className={styles.inner}>
+          <div className={styles.inner} ref={this.setInnerElement}>
             {isSortable && <DragHandle />}
 
             <div