readability: fixes a few minor annoyances when reading code | chore: update deps (jbetancur#1379)

Author: jbetancur

apps/docs/package-lock.json

@@ -19,6 +19,10 @@
 	color-scheme: var(--rdt-color-scheme, light);
 	/* Sort icon scales with the theme's icon size */
 	--rdt-sort-icon-size: calc(var(--rdt-icon-size, 18px) * 0.8);
+	/* Expander open/close animation length. Mirrors EXPAND_DURATION in
+	   constants.ts, which keeps the closing row mounted for exactly this long
+	   before unmounting it — keep the two in sync. */
+	--rdt-expand-duration: 220ms;
 }
 
 .rdt_tableDisabled {
@@ -1619,11 +1623,11 @@
 /* Expander row — grid-row trick gives a true height animation without JS measurement */
 .rdt_expanderRowAnimated {
 	display: grid;
-	animation: rdt_expandIn 0.22s cubic-bezier(0.2, 0, 0, 1) forwards;
+	animation: rdt_expandIn var(--rdt-expand-duration, 220ms) cubic-bezier(0.2, 0, 0, 1) forwards;
 }
 
 .rdt_expanderRowClosing {
-	animation: rdt_expandOut 0.22s cubic-bezier(0.2, 0, 0, 1) forwards;
+	animation: rdt_expandOut var(--rdt-expand-duration, 220ms) cubic-bezier(0.2, 0, 0, 1) forwards;
 }
 
 @keyframes rdt_expandIn {
@@ -1671,6 +1675,4 @@
 	.rdt_spinner {
 		animation: none !important;
 	}
-
-	/* Column reorder FLIP animations are skipped via JS matchMedia check */
 }

package-lock.json

@@ -4,6 +4,7 @@ import type { FilterState, FilterCondition, FilterOperator, FilterType, Localiza
 
 type ColumnFilterOptions = NonNullable<Localization['filter']>;
 import { emptyFilterState, isFilterActive } from '../hooks/useColumnFilter';
+import FilterIcon from '../icons/FilterIcon';
 
 type OperatorOption = { value: FilterOperator; label: string; noInput?: boolean; twoInputs?: boolean };
 
@@ -39,13 +40,14 @@ const DEFAULT_DATE_OPERATORS: OperatorOption[] = [
 	{ value: 'notBlank', label: 'Not blank', noInput: true },
 ];
 
+function baseOperators(filterType: FilterType): OperatorOption[] {
+	if (filterType === 'number') return DEFAULT_NUMBER_OPERATORS;
+	if (filterType === 'date' || filterType === 'datetime' || filterType === 'time') return DEFAULT_DATE_OPERATORS;
+	return DEFAULT_TEXT_OPERATORS;
+}
+
 function operatorsFor(filterType: FilterType, overrides?: ColumnFilterOptions['operators']): OperatorOption[] {
-	const base =
-		filterType === 'number'
-			? DEFAULT_NUMBER_OPERATORS
-			: filterType === 'date' || filterType === 'datetime' || filterType === 'time'
-				? DEFAULT_DATE_OPERATORS
-				: DEFAULT_TEXT_OPERATORS;
+	const base = baseOperators(filterType);
 	if (!overrides) return base;
 	return base.map(op => (overrides[op.value] ? { ...op, label: overrides[op.value]! } : op));
 }
@@ -54,6 +56,14 @@ function defaultOperator(filterType: FilterType): FilterOperator {
 	return filterType === 'text' ? 'contains' : 'equals';
 }
 
+function inputTypeFor(filterType: FilterType): string {
+	if (filterType === 'number') return 'number';
+	if (filterType === 'date') return 'date';
+	if (filterType === 'datetime') return 'datetime-local';
+	if (filterType === 'time') return 'time';
+	return 'text';
+}
+
 function emptyCondition(filterType: FilterType): FilterCondition {
 	return { operator: defaultOperator(filterType) };
 }
@@ -75,16 +85,7 @@ type ConditionRowProps = {
 function ConditionRow({ condition, filterType, options, onChange, onRemove }: ConditionRowProps): JSX.Element {
 	const operators = operatorsFor(filterType, options.operators);
 	const selected = operators.find(o => o.value === condition.operator) ?? operators[0];
-	const inputType =
-		filterType === 'number'
-			? 'number'
-			: filterType === 'date'
-				? 'date'
-				: filterType === 'datetime'
-					? 'datetime-local'
-					: filterType === 'time'
-						? 'time'
-						: 'text';
+	const inputType = inputTypeFor(filterType);
 	// Time inputs default to minute precision; step=1 exposes a seconds field so
 	// logs can be filtered to the second.
 	const inputStep = filterType === 'time' ? 1 : undefined;
@@ -301,9 +302,7 @@ export default function ColumnFilter({
 					toggleOpen();
 				}}
 			>
-				<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
-					<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
-				</svg>
+				<FilterIcon />
 				{isActive && <span className="rdt_filterDot" />}
 			</button>
 

src/DataTable.css

@@ -38,6 +38,12 @@ import useSortFlipAnimation from '../hooks/useSortFlipAnimation';
 import useContextMenu from '../hooks/useContextMenu';
 import ContextMenu from './ContextMenu';
 
+function getHeadSepClass(headerSeparator: boolean | 'subtle' | 'full'): string | undefined {
+	if (headerSeparator === false) return undefined;
+	if (headerSeparator === 'full') return 'rdt_headSeparatorFull';
+	return 'rdt_headSeparator';
+}
+
 function DataTableInner<T>(props: TableProps<T>, ref: React.ForwardedRef<DataTableHandle>): JSX.Element {
 	const {
 		data = defaultProps.data,
@@ -516,12 +522,7 @@ function DataTableInner<T>(props: TableProps<T>, ref: React.ForwardedRef<DataTab
 	const effectiveHeaderSep = headerSeparator !== undefined ? headerSeparator : (themeObj.headerSeparator ?? true);
 	const sepClass =
 		effectiveColumnSep === 'full' ? 'rdt_colSeparatorFull' : effectiveColumnSep ? 'rdt_colSeparator' : undefined;
-	const headSepClass =
-		effectiveHeaderSep === false
-			? undefined
-			: effectiveHeaderSep === 'full'
-				? 'rdt_headSeparatorFull'
-				: 'rdt_headSeparator';
+	const headSepClass = getHeadSepClass(effectiveHeaderSep);
 
 	return (
 		<StylesContext.Provider value={tableStyles}>

src/components/ColumnFilter.tsx

@@ -10,6 +10,14 @@ type ResponsiveWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
 	$animateRows?: boolean;
 };
 
+// fixedHeader needs a scroll container even when responsive is off — maxHeight
+// without overflow lets rows spill over whatever renders below the table.
+function getScrollClass($fixedHeader?: boolean, $responsive?: boolean): string | undefined {
+	if ($fixedHeader) return 'rdt_responsiveWrapperFixed';
+	if ($responsive) return 'rdt_responsiveWrapperScroll';
+	return undefined;
+}
+
 const ResponsiveWrapper = React.forwardRef<HTMLDivElement, ResponsiveWrapperProps>(function ResponsiveWrapper(
 	{
 		$responsive,
@@ -24,13 +32,7 @@ const ResponsiveWrapper = React.forwardRef<HTMLDivElement, ResponsiveWrapperProp
 	ref,
 ) {
 	const customStyles = useStyles();
-	// fixedHeader needs a scroll container even when responsive is off — maxHeight
-	// without overflow lets rows spill over whatever renders below the table.
-	const scrollClass = $fixedHeader
-		? 'rdt_responsiveWrapperFixed'
-		: $responsive
-			? 'rdt_responsiveWrapperScroll'
-			: undefined;
+	const scrollClass = getScrollClass($fixedHeader, $responsive);
 	return (
 		<div
 			ref={ref}

src/components/DataTable.tsx

@@ -3,6 +3,7 @@ import '../DataTable.css';
 import { useStyles } from '../context/StylesContext';
 import { CellExtended } from './Cell';
 import NativeSortIcon from '../icons/NativeSortIcon';
+import MenuIcon from '../icons/MenuIcon';
 import ColumnFilter from './ColumnFilter';
 import { equalizeId, getPinnedCellMeta } from '../util';
 import type { PinnedOffsets } from '../util';
@@ -16,6 +17,16 @@ import type { SortingSlice } from '../hooks/useSorting';
 
 type FilterLocalization = NonNullable<Localization['filter']>;
 
+function getAriaSort(
+	disableSort: boolean,
+	sortActive: boolean,
+	columnSortDirection: SortOrder,
+): React.AriaAttributes['aria-sort'] {
+	if (disableSort) return undefined;
+	if (!sortActive) return 'none';
+	return columnSortDirection === SortOrder.ASC ? 'ascending' : 'descending';
+}
+
 type TableColProps<T> = {
 	column: TableColumn<T>;
 	disabled: boolean;
@@ -146,6 +157,7 @@ function TableCol<T>({
 
 	const sortActive = !!(column.sortable && sortIndex !== -1);
 	const disableSort = !column.sortable || disabled;
+	const ariaSort = getAriaSort(disableSort, sortActive, columnSortDirection);
 	const isNavActive = !!cellNavigation && activeCell?.row === -1 && activeCell?.col === navCol;
 	// With cellNavigation the whole grid is one Tab stop (roving tabindex); otherwise
 	// only sortable headers are tabbable.
@@ -228,15 +240,7 @@ function TableCol<T>({
 						.join(' ')}
 					onClick={!disableSort ? handleClick : undefined}
 					onKeyDown={!disableSort ? handleKeyDown : undefined}
-					aria-sort={
-						!disableSort
-							? sortActive
-								? columnSortDirection === SortOrder.ASC
-									? 'ascending'
-									: 'descending'
-								: 'none'
-							: undefined
-					}
+					aria-sort={ariaSort}
 				>
 					{!disableSort && customSortIconRight && renderCustomSortIcon()}
 					{!disableSort && nativeSortIconRight && renderNativeSortIcon(sortActive)}
@@ -283,9 +287,7 @@ function TableCol<T>({
 					}}
 					onPointerDown={e => e.stopPropagation()}
 				>
-					<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
-						<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-					</svg>
+					<MenuIcon />
 				</button>
 			)}
 			{onResizeStart && column.id != null && (

src/components/ResponsiveWrapper.tsx

@@ -7,6 +7,7 @@ import TableCellCheckbox from './TableCellCheckbox';
 import TableCellExpander from './TableCellExpander';
 import ExpanderRow from './ExpanderRow';
 import RightPinSpacer from './RightPinSpacer';
+import MenuIcon from '../icons/MenuIcon';
 import { prop, equalizeId, getConditionalStyle, getFirstRightPinnedId, getPrefixColCount, isEven } from '../util';
 import { STOP_PROP_TAG } from '../constants';
 import useRowExpander from '../hooks/useRowExpander';
@@ -279,9 +280,7 @@ function Row<T>({
 								rowMenu.onMenuButtonClick(row, rowIndex, e);
 							}}
 						>
-							<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
-								<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-							</svg>
+							<MenuIcon />
 						</button>
 					</div>
 				)}

src/components/TableCol.tsx

@@ -9,6 +9,14 @@ export const STOP_PROP_TAG = 'allowRowEvents';
  */
 export const SYSTEM_COL_WIDTH = 48;
 
+/**
+ * Duration (in ms) of the expander row open/close animation. The close handler
+ * keeps the row mounted for this long so the exit animation can finish before
+ * unmount. Mirrored in DataTable.css as --rdt-expand-duration, which drives the
+ * rdt_expandIn / rdt_expandOut animations — keep the two in sync.
+ */
+export const EXPAND_DURATION = 220;
+
 export enum Direction {
 	LTR = 'ltr',
 	RTL = 'rtl',

src/components/TableRow.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-const EXPAND_DURATION = 220;
+import { EXPAND_DURATION } from '../constants';
 
 type ExpanderState = { expanded: boolean; mounted: boolean; closing: boolean };
 type ExpanderAction = { type: 'open' } | { type: 'close' } | { type: 'unmount' } | { type: 'sync'; value: boolean };