diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx index 3a91ea67a..59fde418e 100644 --- a/packages/core/src/data-editor/data-editor.tsx +++ b/packages/core/src/data-editor/data-editor.tsx @@ -620,6 +620,8 @@ export interface DataEditorProps extends Props, Pick` --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` 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; diff --git a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx index 9ba26ce68..28850bcbc 100644 --- a/packages/core/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx +++ b/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 theme, id, cell, + bloom, validateCell, getCellRenderer, provideEditor, @@ -207,6 +209,9 @@ const DataGridOverlayEditor: React.FunctionComponent classWrap += " gdg-pad"; } + const bloomX = bloom?.[0] ?? 1; + const bloomY = bloom?.[1] ?? 1; + return createPortal( 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}>
{editor}