diff --git a/.changeset/large-carrots-end.md b/.changeset/large-carrots-end.md new file mode 100644 index 00000000000..65e7a579fc1 --- /dev/null +++ b/.changeset/large-carrots-end.md @@ -0,0 +1,21 @@ +--- +"@salt-ds/ag-grid-theme": patch +--- + +- Fixed background color for custom editor component. +- Fixed header text being cropped in HD compact. Closes #3675. +- Fixed Country Symbol taller than expected in HD compact. This alters `--salt-size-base` token so Salt Button, form controls (Input, Dropdown, Combo Box) will be impacted as well. Closes #3775. +- Fixed group value not center aligned vertically. +- Updated ag grid menu styling to match closer to Salt Menu component. +- Updated floating filter column chooser item styles. Closes #3671. + +Note: We previously made a mistake on `rowHeight` recommendation when configurating AG Grid, which should be 1px more to account for border between row. +`useAgGridHelpers` example hook is updated to reflect this. + +| Density | Row height ([`rowHeight`](https://www.ag-grid.com/javascript-data-grid/row-height/)) | Header height ([`headerHeight`](https://www.ag-grid.com/javascript-data-grid/column-headers/#header-height)) | +| ------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| HD (Compact) | 21 | 20 | +| HD | 25 | 24 | +| MD | 37 | 36 | +| LD | 49 | 48 | +| TD | 61 | 60 | diff --git a/package.json b/package.json index d98224e54b2..fb1e3bcd31f 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "prettier:ci": "prettier --check .", "lint": "biome check", "lint:fix": "biome check --fix", + "lint:check:error": "biome check --diagnostic-level=error", "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme", "lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"", "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"", diff --git a/packages/ag-grid-theme/css/salt-ag-grid-theme.css b/packages/ag-grid-theme/css/salt-ag-grid-theme.css index 4cbeaf5c0bd..59ad11accdc 100644 --- a/packages/ag-grid-theme/css/salt-ag-grid-theme.css +++ b/packages/ag-grid-theme/css/salt-ag-grid-theme.css @@ -61,8 +61,13 @@ div[class*="ag-theme-salt"] { } div[class*="ag-theme-salt-compact"] { - --ag-row-height: var(--salt-size-base); - --ag-header-height: var(--salt-size-base); + /* + Ensures icon / country symbol renders correct height. + This also means we don't need to touch `--ag-row-height`, which would impact some internal ag grid height calculation like `--ag-internal-padded-row-height` vs `--ag-internal-calculated-line-height` + */ + --salt-size-base: 16px; + /* This is a deprecated token, until Salt Checkbox uses a new token, temparily pin it to HD size. */ + --salt-size-selectable: 12px; } div[class*="ag-theme-salt"] .ag-root-wrapper { @@ -155,13 +160,33 @@ div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible .ag-icon { color: var(--salt-actionable-secondary-foreground-active); } +div[class*="ag-theme-salt"] .ag-cell-label-container { + /* row height is base size + 50 spacing on top/bottom */ + padding: var(--salt-spacing-50) 0; +} + +div[class*="ag-theme-salt"] .ag-list-item:hover, +div[class*="ag-theme-salt"] .ag-virtual-list-item:hover { + background-color: var(--salt-selectable-background-hover); + cursor: pointer; +} + +div[class*="ag-theme-salt"] .ag-label-align-right .ag-label { + margin-inline-start: var(--salt-spacing-100); + margin-inline-end: 0; +} + /* MENU */ div[class*="ag-theme-salt"] .ag-menu { - padding: var(--salt-spacing-100); + padding: 0; border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected); } +div[class*="ag-theme-salt"] .ag-tabs { + padding: var(--salt-spacing-100); +} + div[class*="ag-theme-salt"] .ag-popup-child:not(.ag-tooltip-custom) { box-shadow: var(--salt-overlayable-shadow-popout); } @@ -187,8 +212,9 @@ div[class*="ag-theme-salt"] .ag-menu-option { height: calc(var(--salt-size-base) + var(--salt-spacing-100)); } -div[class*="ag-theme-salt"] .ag-menu-option-icon { - padding: 0 var(--salt-spacing-100); +div[class*="ag-theme-salt"] .ag-menu-option-icon, +div[class*="ag-theme-salt"] .ag-compact-menu-option-icon { + padding-inline-start: var(--salt-spacing-100); } div[class*="ag-theme-salt"] .ag-tab { @@ -236,6 +262,16 @@ div[class*="ag-theme-salt"] .ag-cell { padding-right: var(--salt-spacing-100); } +/* This is not restricted to `.editable-cell`, so any custom editor would get the same background treatment */ +div[class*="ag-theme-salt"] .ag-cell-inline-editing:focus-within { + background: var(--salt-container-primary-background); +} + +/* This makes sure custom cell editor would start from no padding. Built-in ag grid editor's padding is added below. */ +div[class*="ag-theme-salt"] .ag-cell-inline-editing { + padding: 0; +} + div[class*="ag-theme-salt"] .editable-cell, div[class*="ag-theme-salt"] .editable-numeric-cell { outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-editable-borderColor); @@ -286,14 +322,6 @@ div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing:before { z-index: 2; } -div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing { - padding: 0; -} - -div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing:focus-within { - background: var(--salt-container-primary-background); -} - div[class*="ag-theme-salt"] .editable-numeric-cell input, div[class*="ag-theme-salt"] input[class^="ag-"][type="number"] { padding: 0 var(--salt-spacing-100); diff --git a/packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx b/packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx new file mode 100644 index 00000000000..d0e6688f983 --- /dev/null +++ b/packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx @@ -0,0 +1,88 @@ +import { Dropdown, type DropdownProps, Option } from "@salt-ds/core"; +import type { ICellEditorParams } from "ag-grid-community"; +import { + type KeyboardEvent, + type SyntheticEvent, + forwardRef, + useCallback, + useEffect, + useImperativeHandle, + useRef, + useState, +} from "react"; + +export type GridCellValue = string | boolean | number; + +export interface DropdownEditorParams extends ICellEditorParams { + source?: Array; + dropdownProps?: Partial>; +} + +export const DropdownEditor = forwardRef((props: DropdownEditorParams, ref) => { + const { value: initialValue, source = [], dropdownProps } = props; + const [value, setValue] = useState(initialValue); + + const buttonRef = useRef(null); + + const onSelect = useCallback( + (_event: SyntheticEvent, selectedValue: Array) => { + setValue(selectedValue[0]); + + // hack to make selection actually record the edit. + // timeout is necessary because otherwise the grid stops editing + // before the useImperativeHandle getValue returns the new value state + setTimeout(() => { + props.api?.stopEditing(); + }, 100); + }, + [props.api], + ); + + const onEscapeKeyPressed = useCallback( + (e: KeyboardEvent) => { + if (e.key === "Escape") { + props.api?.stopEditing(); + } + }, + [props.api], + ); + + useEffect(() => { + buttonRef.current?.focus(); + }, []); + + useImperativeHandle(ref, () => ({ getValue: (): typeof value => value })); + + return ( + +
{ + if (!elem) return; + // current element -> list container -> list box that matters + ( + (elem.parentElement as HTMLElement).parentElement as HTMLElement + ).className += " ag-custom-component-popup"; // https://www.ag-grid.com/react-data-grid/component-filter/#custom-filters-containing-a-popup-element + }} + > + {source.map((item) => ( +
+ + ); +}); diff --git a/packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx b/packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx new file mode 100644 index 00000000000..0681cba2e5e --- /dev/null +++ b/packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx @@ -0,0 +1,23 @@ +import { countryMetaMap } from "@salt-ds/countries"; +import type { CustomCellRendererProps } from "ag-grid-react"; + +export const FlagRenderer = (props: CustomCellRendererProps) => { + const isoCode = props.value as keyof typeof countryMetaMap; + return ( +
+ +
+ ); +}; diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts new file mode 100644 index 00000000000..5b25a1a76ce --- /dev/null +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts @@ -0,0 +1,65 @@ +import type { ColDef } from "ag-grid-community"; +import { DropdownEditor } from "./cell-editors/DropdownEditor"; +import { FlagRenderer } from "./cell-renderers/FlagRenderer"; + +const dataGridExampleColumnsHdCompact: ColDef[] = [ + { + headerName: "", + field: "on", + width: 70, + flex: 1, + checkboxSelection: true, + headerCheckboxSelection: true, + pinned: "left", + suppressHeaderMenuButton: true, + resizable: false, + suppressColumnsToolPanel: true, + }, + { + headerName: "Name", + field: "name", + filterParams: { + buttons: ["reset", "apply"], + }, + editable: false, + }, + { + headerName: "Code", + field: "code", + }, + { + headerName: "Capital", + field: "capital", + filter: "agSetColumnFilter", + }, + { + headerName: "Population", + type: "numericColumn", + field: "population", + filter: "agNumberColumnFilter", + editable: true, + cellClass: ["editable-cell"], + }, + { + headerName: "Date", + field: "date", + filter: "agDateColumnFilter", + }, + { + headerName: "Rating", + field: "rating", + // Not using `editable-cell` as it doesn't work with Dropdown focus style + editable: true, + cellEditor: "DropdownEditor", + cellEditorParams: { + source: [10, 20, 30, 40, 50, 60], + }, + }, + { + headerName: "Flag", + field: "country", + cellRenderer: FlagRenderer, + initialWidth: 80, + }, +]; +export default dataGridExampleColumnsHdCompact; diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts index 8b2cc1ad9ec..9335acc583e 100644 --- a/packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts @@ -6,6 +6,7 @@ const dataGridExampleData = [ rating: 10, population: 8446790, date: "29/07/2004", + country: "US", }, { name: "Alaska", @@ -14,6 +15,7 @@ const dataGridExampleData = [ rating: 20, population: 5492139, date: "20/05/2009", + country: "US", }, { name: "Arizona", @@ -22,6 +24,7 @@ const dataGridExampleData = [ rating: 30, population: 806007, date: "23/02/2020", + country: "US", }, { name: "Arkansas", @@ -30,6 +33,7 @@ const dataGridExampleData = [ rating: 40, population: 59453, date: "19/02/1999", + country: "US", }, { name: "California", @@ -38,6 +42,7 @@ const dataGridExampleData = [ rating: 10, population: 8319396, date: "29/04/1967", + country: "US", }, { name: "Colorado", @@ -46,6 +51,7 @@ const dataGridExampleData = [ rating: 10, population: 8822592, date: "19/02/1944", + country: "US", }, { name: "Connecticut", @@ -54,6 +60,7 @@ const dataGridExampleData = [ rating: 10, population: 2465263, date: "30/03/2015", + country: "US", }, { name: "Delaware", @@ -62,6 +69,7 @@ const dataGridExampleData = [ rating: 10, population: 3075357, date: "04/03/1949", + country: "US", }, { name: "Florida", @@ -70,6 +78,7 @@ const dataGridExampleData = [ rating: 10, population: 7597316, date: "03/10/2005", + country: "US", }, { name: "Georgia", @@ -78,6 +87,7 @@ const dataGridExampleData = [ rating: 10, population: 7271180, date: "16/02/1998", + country: "US", }, { name: "Hawaii", @@ -86,6 +96,7 @@ const dataGridExampleData = [ rating: 10, population: 8534120, date: "17/02/2005", + country: "US", }, { name: "Idaho", @@ -94,6 +105,7 @@ const dataGridExampleData = [ rating: 10, population: 5806269, date: "19/02/2007", + country: "US", }, { name: "Illinois", @@ -102,6 +114,7 @@ const dataGridExampleData = [ rating: 10, population: 525951, date: "08/11/2022", + country: "US", }, { name: "Indiana", @@ -110,6 +123,7 @@ const dataGridExampleData = [ rating: 10, population: 5220228, date: "19/02/1920", + country: "US", }, { name: "Iowa", @@ -118,6 +132,7 @@ const dataGridExampleData = [ rating: 10, population: 333600, date: "31/05/2020", + country: "US", }, { name: "Kansas", @@ -126,6 +141,7 @@ const dataGridExampleData = [ rating: 10, population: 170082, date: "28/02/1999", + country: "US", }, { name: "Kentucky", @@ -134,6 +150,7 @@ const dataGridExampleData = [ rating: 10, population: 1359657, date: "19/02/1920", + country: "US", }, { name: "Louisiana", @@ -142,6 +159,7 @@ const dataGridExampleData = [ rating: 10, population: 9267793, date: "17/02/1970", + country: "US", }, { name: "Maine", @@ -150,6 +168,7 @@ const dataGridExampleData = [ rating: 10, population: 7366792, date: "13/02/2000", + country: "US", }, { name: "Maryland", @@ -158,6 +177,7 @@ const dataGridExampleData = [ rating: 10, population: 2474500, date: "18/11/1902", + country: "US", }, { name: "Massachusetts", @@ -166,6 +186,7 @@ const dataGridExampleData = [ rating: 10, population: 7858200, date: "19/02/1902", + country: "US", }, { name: "Michigan", @@ -174,6 +195,7 @@ const dataGridExampleData = [ rating: 10, population: 4036589, date: "19/02/2002", + country: "US", }, { name: "Minnesota", @@ -182,6 +204,7 @@ const dataGridExampleData = [ rating: 10, population: 490080, date: "19/02/1920", + country: "US", }, { name: "Mississippi", @@ -190,6 +213,7 @@ const dataGridExampleData = [ rating: 10, population: 2021576, date: "19/02/1920", + country: "US", }, { name: "Missouri", @@ -198,6 +222,7 @@ const dataGridExampleData = [ rating: 10, population: 3511147, date: "19/02/1920", + country: "US", }, { name: "Montana", @@ -206,6 +231,7 @@ const dataGridExampleData = [ rating: 10, population: 2856628, date: "19/05/0520", + country: "US", }, { name: "Nebraska", @@ -214,6 +240,7 @@ const dataGridExampleData = [ rating: 10, population: 9584904, date: "05/02/0520", + country: "US", }, { name: "Nevada", @@ -222,6 +249,7 @@ const dataGridExampleData = [ rating: 10, population: 489695, date: "05/02/2002", + country: "US", }, { name: "New Hampshire", @@ -230,6 +258,7 @@ const dataGridExampleData = [ rating: 10, population: 8819049, date: "19/02/2002", + country: "US", }, { name: "New Jersey", @@ -238,6 +267,7 @@ const dataGridExampleData = [ rating: 10, population: 2500770, date: "19/02/2002", + country: "US", }, { name: "New Mexico", @@ -246,6 +276,7 @@ const dataGridExampleData = [ rating: 10, population: 536205, date: "19/02/2002", + country: "US", }, { name: "New York", @@ -254,6 +285,7 @@ const dataGridExampleData = [ rating: 10, population: 5248173, date: "19/02/1920", + country: "US", }, { name: "North Carolina", @@ -262,6 +294,7 @@ const dataGridExampleData = [ rating: 10, population: 1452619, date: "10/02/1020", + country: "US", }, { name: "North Dakota", @@ -270,6 +303,7 @@ const dataGridExampleData = [ rating: 10, population: 8890392, date: "19/02/1920", + country: "US", }, { name: "Ohio", @@ -278,6 +312,7 @@ const dataGridExampleData = [ rating: 10, population: 5968829, date: "19/02/1920", + country: "US", }, { name: "Oklahoma", @@ -286,6 +321,7 @@ const dataGridExampleData = [ rating: 10, population: 9044655, date: "21/02/1950", + country: "US", }, { name: "Oregon", @@ -294,6 +330,7 @@ const dataGridExampleData = [ rating: 10, population: 8054969, date: "12/10/1920", + country: "US", }, { name: "Pennsylvania", @@ -302,6 +339,7 @@ const dataGridExampleData = [ rating: 10, population: 1359410, date: "19/02/1920", + country: "US", }, { name: "Rhode Island", @@ -310,6 +348,7 @@ const dataGridExampleData = [ rating: 10, population: 4473590, date: "19/02/1920", + country: "US", }, { name: "South Carolina", @@ -318,6 +357,7 @@ const dataGridExampleData = [ rating: 10, population: 6527907, date: "19/02/1920", + country: "US", }, { name: "South Dakota", @@ -326,6 +366,7 @@ const dataGridExampleData = [ rating: 10, population: 3152416, date: "19/02/1920", + country: "US", }, { name: "Tennessee", @@ -334,6 +375,7 @@ const dataGridExampleData = [ rating: 10, population: 9717114, date: "19/02/1920", + country: "US", }, { name: "Texas", @@ -342,6 +384,7 @@ const dataGridExampleData = [ rating: 10, population: 6552290, date: "19/02/1920", + country: "US", }, { name: "Utah", @@ -350,6 +393,7 @@ const dataGridExampleData = [ rating: 10, population: 2815416, date: "19/02/1920", + country: "US", }, { name: "Vermont", @@ -358,6 +402,7 @@ const dataGridExampleData = [ rating: 10, population: 2845360, date: "19/02/1920", + country: "US", }, { name: "Virginia", @@ -366,6 +411,7 @@ const dataGridExampleData = [ rating: 10, population: 4919143, date: "20/02/1920", + country: "US", }, { name: "Washington", @@ -374,6 +420,7 @@ const dataGridExampleData = [ rating: 10, population: 4614717, date: "22/02/2009", + country: "US", }, { name: "West Virginia", @@ -382,6 +429,7 @@ const dataGridExampleData = [ rating: 10, population: 6413104, date: "19/11/2002", + country: "US", }, { name: "Wisconsin", @@ -390,6 +438,7 @@ const dataGridExampleData = [ rating: 10, population: 3934168, date: "01/08/2005", + country: "US", }, { name: "Wyoming", @@ -398,6 +447,7 @@ const dataGridExampleData = [ rating: 10, population: 901078, date: "01/01/2000", + country: "US", }, ]; diff --git a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts index bc592e88599..2745b2d289a 100644 --- a/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts +++ b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts @@ -45,20 +45,20 @@ export function useAgGridHelpers({ const mode = modeProp ?? contextMode; const density = densityProp ?? contextDensity; - const [rowHeight, listItemHeight] = useMemo(() => { + const [rowHeight, headerRowHeight] = useMemo(() => { switch (density) { case compact && "high": - return [20, 20]; + return [21, 20]; case "high": - return [24, 24]; // 20 + 4 + return [25, 24]; // 20 + 4 + [1 (border)] case "medium": - return [36, 36]; // 28 + 8 + return [37, 36]; // 28 + 8 + [1 (border)] case "low": - return [48, 48]; // 36 + 12 + return [49, 48]; // 36 + 12 + [1 (border)] case "touch": - return [60, 60]; // 44 + 16 + return [61, 60]; // 44 + 16 + [1 (border)] default: - return [24, 24]; + return [25, 24]; } }, [density, compact]); @@ -81,14 +81,14 @@ export function useAgGridHelpers({ agGridProps: { onGridReady, rowHeight, - headerHeight: rowHeight, + headerHeight: headerRowHeight, suppressMenuHide: true, defaultColDef: { filter: true, resizable: true, sortable: true, filterParams: { - cellHeight: listItemHeight, + cellHeight: rowHeight, }, }, }, diff --git a/packages/ag-grid-theme/src/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx index 40d8941a85f..0149397e670 100644 --- a/packages/ag-grid-theme/src/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx @@ -1,6 +1,7 @@ import { SaltProvider, SaltProviderNext, useTheme } from "@salt-ds/core"; import { AgGridReact, type AgGridReactProps } from "ag-grid-react"; -import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; +import { DropdownEditor } from "../dependencies/cell-editors/DropdownEditor"; +import dataGridExampleColumnsHdCompact from "../dependencies/dataGridExampleColumnsHdCompact"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -29,7 +30,7 @@ const HDCompact = (props: AgGridReactProps) => {
{ } }); }} + components={{ + DropdownEditor, + }} />
diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx index 87d59cc7aaa..993ef7d7023 100644 --- a/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx +++ b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx @@ -3,6 +3,8 @@ import { AgGridReact } from "ag-grid-react"; import "ag-grid-community/styles/ag-grid.css"; import "../salt-ag-theme.css"; +import "@salt-ds/countries/saltSharpCountries.css"; + export default { title: "Ag Grid/Ag Grid Theme", component: AgGridReact, diff --git a/packages/core/src/list-control/ListControlState.ts b/packages/core/src/list-control/ListControlState.ts index 96ab47bc251..4f5610dbb92 100644 --- a/packages/core/src/list-control/ListControlState.ts +++ b/packages/core/src/list-control/ListControlState.ts @@ -54,7 +54,7 @@ export type ListControlProps = { }; export function defaultValueToString(item: Item): string { - return typeof item === "string" ? item : ""; + return String(item); } export function useListControl(props: ListControlProps) { diff --git a/site/src/examples/ag-grid-theme/Default.tsx b/site/src/examples/ag-grid-theme/Default.tsx index 702218f4fc0..a9597e63c83 100644 --- a/site/src/examples/ag-grid-theme/Default.tsx +++ b/site/src/examples/ag-grid-theme/Default.tsx @@ -35,15 +35,15 @@ export const Default = (): ReactElement => { const rowHeight = useMemo(() => { switch (density) { case "high": - return 24; + return 25; case "medium": - return 36; + return 37; case "low": - return 48; + return 49; case "touch": - return 60; + return 61; default: - return 20; + return 25; } }, [density]); diff --git a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts index 2d4ee199b0e..3d1de51077d 100644 --- a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts +++ b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts @@ -23,20 +23,21 @@ export function useAgGridHelpers(compact = false): { const density = useDensity(); const { mode } = useTheme(); - const [rowHeight, listItemHeight] = useMemo(() => { + // Row height is 1px more than header row, to count for border between rows + const [rowHeight, headerRowHeight] = useMemo(() => { switch (density) { case compact && "high": - return [20, 20]; + return [21, 20]; case "high": - return [24, 24]; + return [25, 24]; case "medium": - return [36, 36]; + return [37, 36]; case "low": - return [48, 48]; + return [49, 48]; case "touch": - return [60, 60]; + return [61, 60]; default: - return [20, 24]; + return [25, 24]; } }, [density, compact]); @@ -58,14 +59,14 @@ export function useAgGridHelpers(compact = false): { agGridProps: { onGridReady, rowHeight, - headerHeight: rowHeight, + headerHeight: headerRowHeight, suppressMenuHide: true, defaultColDef: { filter: true, resizable: true, sortable: true, filterParams: { - cellHeight: listItemHeight, + cellHeight: rowHeight, }, }, },