@azrico/reactgrid 1.4.1 → 1.5.1

package/src/example.tsx

@@ -1,178 +1,184 @@
-export * from './views/DataGrid';
-
-import AzGrid from './views/DataGrid';
-import React from 'react';
-import './themes/azgrid-theme.css';
-import './themes/example-palettes.css';
-
-const columns = [
-	{
-		name: 'name',
-		title: 'Name',
-		defaultFlex: 1,
-	},
-	{
-		name: 'job',
-		title: 'Job',
-		type: 'combo',
-		items: ['None', 'Engineer', 'Doctor'],
-		defaultFlex: 1,
-	},
-	{
-		name: 'age',
-		title: 'Age',
-		type: 'number',
-		defaultFlex: 1,
-	},
-];
-
-const editableColumns = ['job', 'age'];
-
-function getData(delta: any, max = 200) {
-	const fd: any[] = [];
-	for (let index = 0; index < max; index++) {
-		const currentObject = {
-			__table_id: String(index),
-			name: 'user-' + index,
-			age: 5 + index,
-			job: 'None',
-		};
-		if (delta[index] && typeof delta[index] === 'object') {
-			for (const key in delta[index]) {
-				currentObject[key] = delta[index][key];
-			}
-		}
-
-		const childrows: any[] = [];
-		if (index % 5 == 0) {
-			const sub_selfid = 's' + index;
-			childrows.push({
-				__table_id: sub_selfid,
-				__parent__table_id: String(index),
-				name: 'sub-' + index,
-				age: 20,
-			});
-		}
-
-		currentObject['__children'] = childrows;
-		fd.push(currentObject);
-	}
-	return fd;
-}
-
-export function ExampleGrid() {
-	const [ds_reset, set_ds_reset] = React.useState(0);
-	const [delta, set_delta] = React.useState({});
-	const [delayed_reload, set_delayed_reload] = React.useState(false);
-
-	const dataSource = React.useMemo(() => getData(delta), []);
-	// const dataSource = React.useCallback(
-	// 	async (dt) => {
-	// 		//console.log('Start loading');
-	// 		return await new Promise((resolve) => {
-	// 			setTimeout(() => {
-	// 				resolve(getData(delta));
-	// 			}, 1000);
-	// 		});
-	// 	},
-	// 	[ds_reset, delta]
-	// );
-	// const details_dataSource = React.useCallback(
-	// 	async (dt) => {
-	// 		//console.log('Start loading');
-	// 		return await new Promise((resolve) => {
-	// 			setTimeout(() => {
-	// 				resolve(getData(delta, 5));
-	// 			}, 1000);
-	// 		});
-	// 	},
-	// 	[ds_reset, delta]
-	// );
-
-	function onEditComplete(params) {
-		const { value, columnId, rowId, ...rest } = params;
-		let new_rd = delta[rowId];
-		if (!new_rd) new_rd = {};
-		new_rd[columnId] = value;
-		set_delta((d) => {
-			return { ...d, [rowId]: new_rd };
-		});
-	}
-
-	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
-		console.log('dbl', rowdata?.data || rowdata);
-		alert('dbl: ' + index);
-	}, []);
-	const onRowClick = React.useCallback((index: number, rowdata: any) => {
-		console.log('click:', rowdata?.data || rowdata);
-	}, []);
-
-	React.useEffect(() => {
-		setTimeout(() => {
-			set_delayed_reload(true);
-		}, 2000);
-	}, []);
-	const customColumns = React.useMemo(() => {
-		if (!delayed_reload) return [];
-		return [{ name: 'name', render: (r) => r.value + '^' }];
-	}, [delayed_reload]);
-
-	const contextMenuItems = React.useCallback((product: any) => {
-		return [
-			{
-				type: 'text',
-				content: product.name,
-			},
-		];
-	}, []);
-
-	return (
-		<div style={{ display: 'grid', gap: 20, height: '100%', overflow: 'auto' }}>
-			{['light', 'dark', 'deco'].map((theme) => (
-				<section key={theme} className={theme === 'deco' ? 'azgrid-example-deco' : undefined} style={{ height: 360, display: 'flex', flexDirection: 'column' }}>
-					<h3>{theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`}</h3>
-					<AzGrid
-						theme={theme}
-						delayedSize
-						// details_dataSource={details_dataSource}
-						dataSource={dataSource}
-						details_columns={columns}
-						onRowClick={onRowClick}
-						onRowDoubleClick={onRowDoubleClick}
-						allowChildRows
-						// onSelectionChange={onSelectionChange}
-						// selected={selected}
-						contextMenuItems={contextMenuItems as any}
-						customColumns={customColumns}
-						columns={columns}
-						editableColumns={editableColumns}
-						editable={true}
-						onEditComplete={onEditComplete}
-						advancedFilterFields={['name']}
-						// leftColumns={leftColumns}
-						gridOptions={
-							{
-								defaultFilterValue: [{ name: 'name', operator: 'contains', type: 'string', value: '' }],
-								pagination: 'local',
-								defaultLimit: 10,
-								pageSizes: [10, 25, 50],
-								checkboxColumn: true,
-								multiSelect: true,
-								// defaultFilterValue: filterValue,
-								// remoteFilter: false,
-								// multiSelect: true,
-								// pagination: 'local',
-								// defaultLimit: 100,
-								// limit: 100,
-								// pageSizes: [100],
-								// rowIndexColumn: true,
-								// checkboxColumn: true,
-							}
-						}
-					/>
-				</section>
-			))}
-		</div>
-	);
-}
-export default ExampleGrid;
+export * from './views/DataGrid';
+
+import AzGrid from './views/DataGrid';
+import React from 'react';
+import './themes/azgrid-theme.css';
+import './themes/example-palettes.css';
+
+const columns = [
+	{
+		name: 'name',
+		title: 'Name',
+		defaultFlex: 1,
+	},
+	{
+		name: 'job',
+		title: 'Job',
+		type: 'combo',
+		items: ['None', 'Engineer', 'Doctor'],
+		defaultFlex: 1,
+	},
+	{
+		name: 'age',
+		title: 'Age',
+		type: 'number',
+		defaultFlex: 1,
+		ariaLabel: (value: any) => `${value} years`,
+	},
+];
+
+const editableColumns = ['job', 'age'];
+
+function getData(delta: any, max = 200) {
+	const fd: any[] = [];
+	for (let index = 0; index < max; index++) {
+		const currentObject = {
+			__table_id: String(index),
+			name: 'user-' + index,
+			age: 5 + index,
+			job: 'None',
+		};
+		if (delta[index] && typeof delta[index] === 'object') {
+			for (const key in delta[index]) {
+				currentObject[key] = delta[index][key];
+			}
+		}
+
+		const childrows: any[] = [];
+		if (index % 5 == 0) {
+			const sub_selfid = 's' + index;
+			childrows.push({
+				__table_id: sub_selfid,
+				__parent__table_id: String(index),
+				name: 'sub-' + index,
+				age: 20,
+			});
+		}
+
+		currentObject['__children'] = childrows;
+		fd.push(currentObject);
+	}
+	return fd;
+}
+
+export function ExampleGrid() {
+	const [ds_reset, set_ds_reset] = React.useState(0);
+	const [delta, set_delta] = React.useState({});
+	const [delayed_reload, set_delayed_reload] = React.useState(false);
+
+	const dataSource = React.useMemo(() => getData(delta), []);
+	// const dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
+	// const details_dataSource = React.useCallback(
+	// 	async (dt) => {
+	// 		//console.log('Start loading');
+	// 		return await new Promise((resolve) => {
+	// 			setTimeout(() => {
+	// 				resolve(getData(delta, 5));
+	// 			}, 1000);
+	// 		});
+	// 	},
+	// 	[ds_reset, delta]
+	// );
+
+	function onEditComplete(params) {
+		const { value, columnId, rowId, ...rest } = params;
+		let new_rd = delta[rowId];
+		if (!new_rd) new_rd = {};
+		new_rd[columnId] = value;
+		set_delta((d) => {
+			return { ...d, [rowId]: new_rd };
+		});
+	}
+
+	const onRowDoubleClick = React.useCallback((index: number, rowdata: any) => {
+		console.log('dbl', rowdata?.data || rowdata);
+		alert('dbl: ' + index);
+	}, []);
+	const onRowClick = React.useCallback((index: number, rowdata: any) => {
+		console.log('click:', rowdata?.data || rowdata);
+	}, []);
+
+	React.useEffect(() => {
+		setTimeout(() => {
+			set_delayed_reload(true);
+		}, 2000);
+	}, []);
+	const customColumns = React.useMemo(() => {
+		if (!delayed_reload) return [];
+		return [{ name: 'name', render: (r) => r.value + '^' }];
+	}, [delayed_reload]);
+
+	const contextMenuItems = React.useCallback((product: any) => {
+		return [
+			{
+				type: 'text',
+				content: product.name,
+			},
+		];
+	}, []);
+
+	return (
+		<div style={{ display: 'grid', gap: 20, height: '100%', overflow: 'auto' }}>
+			{['light', 'dark', 'deco'].map((theme) => (
+				<section key={theme} className={theme === 'deco' ? 'azgrid-example-deco' : undefined} style={{ height: 360, display: 'flex', flexDirection: 'column' }}>
+					<h3>{theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`}</h3>
+					<AzGrid
+						theme={theme}
+						ariaLabel={`Users (${theme})`}
+						delayedSize
+						// details_dataSource={details_dataSource}
+						dataSource={dataSource}
+						details_columns={columns}
+						onRowClick={onRowClick}
+						onRowDoubleClick={onRowDoubleClick}
+						allowChildRows
+						// onSelectionChange={onSelectionChange}
+						// selected={selected}
+						contextMenuItems={contextMenuItems as any}
+						customColumns={customColumns}
+						columns={columns}
+						editableColumns={editableColumns}
+						editable={true}
+						onEditComplete={onEditComplete}
+						advancedFilterFields={['name']}
+						// leftColumns={leftColumns}
+						gridOptions={
+							{
+								defaultFilterValue: [{ name: 'name', operator: 'contains', type: 'string', value: '' }],
+								pagination: 'local',
+								defaultLimit: 10,
+								pageSizes: [10, 25, 50],
+								checkboxColumn: true,
+								multiSelect: true,
+								// consumer onRenderRow runs after the internal one
+								onRenderRow: (rowProps: any) => {
+									rowProps['data-example-row'] = 'true';
+								},
+								// defaultFilterValue: filterValue,
+								// remoteFilter: false,
+								// multiSelect: true,
+								// pagination: 'local',
+								// defaultLimit: 100,
+								// limit: 100,
+								// pageSizes: [100],
+								// rowIndexColumn: true,
+								// checkboxColumn: true,
+							}
+						}
+					/>
+				</section>
+			))}
+		</div>
+	);
+}
+export default ExampleGrid;

package/src/func/func_a11y.ts

@@ -0,0 +1,159 @@
+import { GridType } from '../types/types';
+
+/*
+ * Accessibility helpers.
+ * Inovua's grid renders anonymous divs, so we fill in ARIA grid semantics here.
+ * Cell/header DOM attributes go through the column's cellDOMProps/headerDOMProps
+ * (attributes set on cellProps inside onRender are not forwarded to the DOM).
+ */
+
+export type ColumnA11yOptions = {
+	/** role of body cells, e.g. 'gridcell' or 'rowheader' */
+	role?: string;
+	/** grid level editable flag, columns are readonly when the grid isn't editable */
+	gridEditable?: boolean;
+	/** false skips aria-readonly (for interactive special columns like the checkbox column) */
+	markReadonly?: boolean;
+};
+
+function set_default(target: any, key: string, value: any) {
+	if (target[key] === undefined && value !== undefined && value !== null) target[key] = value;
+}
+function resolve_dom_props(src: any, cellProps: any) {
+	const res = typeof src === 'function' ? src(cellProps) : src;
+	return res ? { ...res } : {};
+}
+function get_sort_dir(sortInfo: any) {
+	if (!sortInfo || !sortInfo.dir) return 'none';
+	return sortInfo.dir > 0 ? 'ascending' : 'descending';
+}
+function is_cell_readonly(cellProps: any, gridEditable: boolean) {
+	if (!gridEditable) return true;
+	const editable = cellProps.computedEditable;
+	//function editables are decided per edit, we can't know it here
+	if (typeof editable === 'function') return false;
+	return !editable;
+}
+
+/**
+ * wraps column dom props to add ARIA attributes,
+ * consumer's cellDOMProps/headerDOMProps run first and win over ours
+ * @param col
+ * @param options
+ * @returns a new column object
+ */
+export function apply_column_a11y<T extends Record<string, any>>(
+	col: T,
+	options: ColumnA11yOptions = {}
+): T {
+	const { role = 'gridcell', gridEditable = false, markReadonly = true } = options;
+	const consumerCellDOMProps = col.cellDOMProps;
+	const consumerHeaderDOMProps = col.headerDOMProps;
+	const ariaLabel = col.ariaLabel;
+
+	return {
+		...col,
+		cellDOMProps: (cellProps: any) => {
+			const res = resolve_dom_props(consumerCellDOMProps, cellProps);
+			set_default(res, 'role', role);
+			set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
+			set_default(res, 'data-column', cellProps.name || cellProps.id);
+			if (markReadonly && is_cell_readonly(cellProps, gridEditable))
+				set_default(res, 'aria-readonly', 'true');
+
+			const data = cellProps.data;
+			if (typeof ariaLabel === 'function' && data && !data.__group && !data.__summary)
+				set_default(res, 'aria-label', ariaLabel(cellProps.value, data));
+			return res;
+		},
+		headerDOMProps: (cellProps: any) => {
+			const res = resolve_dom_props(consumerHeaderDOMProps, cellProps);
+			set_default(res, 'role', 'columnheader');
+			set_default(res, 'aria-colindex', cellProps.computedVisibleIndex + 1);
+			if (cellProps.computedSortable)
+				set_default(res, 'aria-sort', get_sort_dir(cellProps.computedSortInfo));
+			return res;
+		},
+	};
+}
+
+/**
+ * adds ARIA attributes to a row, called from onRenderRow
+ * @param rowProps
+ * @param selectionEnabled
+ */
+export function apply_row_a11y(rowProps: any, selectionEnabled: boolean) {
+	//filler rows (showEmptyRows) are not data rows
+	if (rowProps.empty) return;
+	const index = rowProps.remoteRowIndex ?? rowProps.realIndex ?? 0;
+	rowProps['role'] = 'row';
+	rowProps['aria-rowindex'] = index + 2; // 1-based, header row is 1
+	if (selectionEnabled) rowProps['aria-selected'] = rowProps.selected ? 'true' : 'false';
+}
+
+function set_attr(el: Element, key: string, value: any) {
+	if (value === undefined || value === null || value === '') {
+		if (el.hasAttribute(key)) el.removeAttribute(key);
+		return;
+	}
+	const str = String(value);
+	if (el.getAttribute(key) !== str) el.setAttribute(key, str);
+}
+
+/**
+ * total number of data rows, uses the datasource count when paginated
+ * so the real size is reported, not just the visible page
+ * @param grid
+ */
+export function get_grid_row_count(grid: GridType): number {
+	const g = grid as any;
+	const rendered = Array.isArray(g.data) ? g.data.length : 0;
+	if (!g.computedPagination) return rendered;
+	const offset = g.computedLivePagination ? 0 : g.computedSkip || 0;
+	return Math.max(g.paginationCount || 0, offset + rendered);
+}
+
+export type RootA11yOptions = { ariaLabel?: string; editable?: boolean };
+
+/**
+ * root element of the grid, null when it isn't mounted
+ * @param grid computed props of the grid
+ */
+export function get_grid_root(grid: GridType | null | undefined): Element | null {
+	return (grid as any)?.getDOMNode?.() || null;
+}
+
+/**
+ * key of the values apply_root_a11y writes, used to skip applying when nothing changed
+ * @param grid computed props of the grid
+ * @param options
+ */
+export function get_root_a11y_key(grid: GridType | null | undefined, options: RootA11yOptions) {
+	const g = grid as any;
+	if (!g) return '';
+	return [
+		get_grid_row_count(g),
+		(g.visibleColumns || []).length,
+		options.ariaLabel ?? '',
+		options.editable ? 1 : 0,
+	].join('|');
+}
+
+/**
+ * sets ARIA attributes on the grid root element
+ * inovua doesn't forward props to its root, so this is applied on the DOM node
+ * @param grid computed props of the grid
+ * @param options
+ * @returns the element the attributes were applied to, null when the grid isn't mounted
+ */
+export function apply_root_a11y(grid: GridType | null | undefined, options: RootA11yOptions) {
+	const g = grid as any;
+	const el = get_grid_root(g);
+	if (!el) return null;
+	set_attr(el, 'role', 'grid');
+	set_attr(el, 'aria-rowcount', get_grid_row_count(g) + 1);
+	set_attr(el, 'aria-colcount', (g.visibleColumns || []).length);
+	set_attr(el, 'aria-label', options.ariaLabel);
+	set_attr(el, 'aria-readonly', options.editable ? undefined : 'true');
+	return el;
+}