diff --git a/packages/cells/src/cells/date-picker-cell.tsx b/packages/cells/src/cells/date-picker-cell.tsx index 8d657879e..362f28117 100644 --- a/packages/cells/src/cells/date-picker-cell.tsx +++ b/packages/cells/src/cells/date-picker-cell.tsx @@ -140,9 +140,9 @@ const renderer: CustomRenderer = { drawTextCell(args, displayDate, cell.contentAlign); return true; }, - measure: (ctx, cell) => { + measure: (ctx, cell, theme) => { const { displayDate } = cell.data; - return ctx.measureText(displayDate).width + 16; + return ctx.measureText(displayDate).width + theme.cellHorizontalPadding * 2; }, provideEditor: () => ({ editor: Editor, diff --git a/packages/cells/src/cells/dropdown-cell.tsx b/packages/cells/src/cells/dropdown-cell.tsx index 92546daf8..edbdd92b7 100644 --- a/packages/cells/src/cells/dropdown-cell.tsx +++ b/packages/cells/src/cells/dropdown-cell.tsx @@ -1,3 +1,8 @@ +import * as React from "react"; + +import { styled } from "@linaria/react"; +import Select, { type MenuProps, components } from "react-select"; + import { type CustomCell, type ProvideEditorCallback, @@ -7,9 +12,6 @@ import { GridCellKind, TextCellEntry, } from "@glideapps/glide-data-grid"; -import { styled } from "@linaria/react"; -import * as React from "react"; -import Select, { type MenuProps, components } from "react-select"; interface CustomMenuProps extends MenuProps {} @@ -105,10 +107,17 @@ const Editor: ReturnType> = p => { border: 0, boxShadow: "none", }), - option: base => ({ + option: (base, { isFocused }) => ({ ...base, fontSize: theme.editorFontSize, fontFamily: theme.fontFamily, + cursor: isFocused ? "pointer" : undefined, + paddingLeft: theme.cellHorizontalPadding, + paddingRight: theme.cellHorizontalPadding, + ":active": { + ...base[":active"], + color: theme.accentFg, + }, // Add some content in case the option is empty // so that the option height can be calculated correctly ":empty::after": { @@ -196,13 +205,9 @@ const renderer: CustomRenderer = { } return true; }, - measure: (ctx, cell) => { + measure: (ctx, cell, theme) => { const { value } = cell.data; - if (value) { - return ctx.measureText(value).width + 16; - } else { - return 16; - } + return (value ? ctx.measureText(value).width : 0) + theme.cellHorizontalPadding * 2; }, provideEditor: () => ({ editor: Editor, diff --git a/packages/core/src/cells/number-cell.tsx b/packages/core/src/cells/number-cell.tsx index f926ffa33..304f6dce9 100644 --- a/packages/core/src/cells/number-cell.tsx +++ b/packages/core/src/cells/number-cell.tsx @@ -16,7 +16,7 @@ export const numberCellRenderer: InternalCellRenderer = { useLabel: true, drawPrep: prepTextCell, draw: a => drawTextCell(a, a.cell.displayData, a.cell.contentAlign), - measure: (ctx, cell) => ctx.measureText(cell.displayData).width + 16, + measure: (ctx, cell, theme) => ctx.measureText(cell.displayData).width + theme.cellHorizontalPadding * 2, onDelete: c => ({ ...c, data: undefined, diff --git a/packages/core/src/cells/row-id-cell.tsx b/packages/core/src/cells/row-id-cell.tsx index c0513233d..bba6cefef 100644 --- a/packages/core/src/cells/row-id-cell.tsx +++ b/packages/core/src/cells/row-id-cell.tsx @@ -11,7 +11,7 @@ export const rowIDCellRenderer: InternalCellRenderer = { needsHoverPosition: false, drawPrep: (a, b) => prepTextCell(a, b, a.theme.textLight), draw: a => drawTextCell(a, a.cell.data, a.cell.contentAlign), - measure: (ctx, cell) => ctx.measureText(cell.data).width + 16, + measure: (ctx, cell, theme) => ctx.measureText(cell.data).width + theme.cellHorizontalPadding * 2, // eslint-disable-next-line react/display-name provideEditor: () => p => { const { isHighlighted, onChange, value, validatedSelection } = p;