Add support for a configurable editor bloom (#885)

Author: jassmith

packages/core/src/data-editor/data-editor.tsx

@@ -628,6 +628,8 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      * Controls if focus will trap inside the data grid when doing tab and caret navigation.
      */
     readonly trapFocus?: boolean;
+
+    readonly editorBloom?: readonly [number, number];
 }
 
 type ScrollToFn = (
@@ -722,6 +724,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         coercePasteValue,
         drawHeader: drawHeaderIn,
         drawCell: drawCellIn,
+        editorBloom,
         onHeaderClicked,
         onColumnProposeMove,
         spanRangeBehavior = "default",
@@ -3953,6 +3956,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                         <DataGridOverlayEditor
                             {...overlay}
                             validateCell={validateCell}
+                            bloom={editorBloom}
                             id={overlayID}
                             getCellRenderer={getCellRenderer}
                             className={experimental?.isSubGrid === true ? "click-outside-ignore" : undefined}

packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx

@@ -16,10 +16,10 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
 
     --overlay-top: ${p => p.targetY}px;
 
-    left: ${p => p.targetX - 1}px;
-    top: ${p => p.targetY - 1}px;
-    min-width: ${p => p.targetWidth + 2}px;
-    min-height: ${p => p.targetHeight + 2}px;
+    left: ${p => p.targetX}px;
+    top: ${p => p.targetY}px;
+    min-width: ${p => p.targetWidth}px;
+    min-height: ${p => p.targetHeight}px;
     width: max-content;
     max-width: 400px;
     max-height: calc(100vh - ${p => p.targetY + 10}px);
@@ -41,7 +41,9 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
         border-radius: 2px;
         background-color: var(--gdg-bg-cell);
 
-        box-shadow: 0 0 0 1px var(--gdg-accent-color), 0px 0px 1px rgba(62, 65, 86, 0.4),
+        box-shadow:
+            0 0 0 1px var(--gdg-accent-color),
+            0px 0px 1px rgba(62, 65, 86, 0.4),
             0px 6px 12px rgba(62, 65, 86, 0.15);
 
         animation: glide_fade_in 60ms 1;

packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx

@@ -29,6 +29,7 @@ interface DataGridOverlayEditorProps {
     readonly className?: string;
     readonly id: string;
     readonly initialValue?: string;
+    readonly bloom?: readonly [number, number];
     readonly theme: Theme;
     readonly onFinishEditing: (newCell: GridCell | undefined, movement: readonly [-1 | 0 | 1, -1 | 0 | 1]) => void;
     readonly forceEditMode: boolean;
@@ -59,6 +60,7 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
         theme,
         id,
         cell,
+        bloom,
         validateCell,
         getCellRenderer,
         provideEditor,
@@ -207,6 +209,9 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
         classWrap += " gdg-pad";
     }
 
+    const bloomX = bloom?.[0] ?? 1;
+    const bloomY = bloom?.[1] ?? 1;
+
     return createPortal(
         <ThemeContext.Provider value={theme}>
             <ClickOutsideContainer
@@ -220,10 +225,10 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
                     className={classWrap}
                     style={styleOverride}
                     as={useLabel === true ? "label" : undefined}
-                    targetX={target.x}
-                    targetY={target.y}
-                    targetWidth={target.width}
-                    targetHeight={target.height}>
+                    targetX={target.x - bloomX}
+                    targetY={target.y - bloomY}
+                    targetWidth={target.width + bloomX * 2}
+                    targetHeight={target.height + bloomY * 2}>
                     <div className="gdg-clip-region" onKeyDown={onKeyDown}>
                         {editor}
                     </div>