@azrico/reactgrid 1.4.0 → 1.5.1

package/README.md

@@ -1,198 +1,164 @@
-**DISCLAIMER :**
-DO NOT USE THIS PACKAGE FOR ANY REASON
-THIS IS A PRIVATE PACKAGE
-
-## Grid themes
-
-`AzGrid` always uses Inovua's `default-light` base for layout and icons. Its
-token stylesheet is optional and shipped in `dist/src/themes`. Import it once
-in your host's entry point to enable the variable theme; without it the grid
-uses Inovua's default-light appearance. The old dark/amber theme stylesheets
-are no longer imported by the package.
-Use `theme="light"` (default), `theme="dark"`, or any custom name such as
-`theme="deco"`. The actual grid root and its surrounding scope receive
-`azgrid-theme-<name>`. `theme` takes precedence over the deprecated `dark` boolean;
-`dark={true}` still selects dark and `dark={false}` selects light.
-`gridOptions.theme` is ignored to keep one consistent base for layout.
-
-Set public `--azgrid-*` variables on `:root`, a wrapper, or the theme class.
-Different wrappers can theme multiple grids independently. Neutral light/dark
-presets set only internal `--azgrid-preset-*` fallbacks, so grid defaults
-never mask variables inherited from your wrapper. Custom names use light
-fallbacks for unspecified tokens; set the complete palette for a custom dark theme.
-No daisyUI dependency or variables are required.
-
-```tsx
-import { AzGrid } from '@azrico/reactgrid';
-import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
-
-<div className="my-grid">
-  <AzGrid theme="light" columns={columns} dataSource={rows} />
-</div>
-```
-
-```css
-.my-grid {
-  --azgrid-accent: #345b93;
-  --azgrid-header-bg: #edf2f8;
-  --azgrid-row-bg-hover: #e4ecf7;
-}
-```
-
-### Public variables
-
-Every use has a neutral preset fallback. Values can be any valid CSS value for
-the indicated property. Fallbacks expressed using another token follow host
-overrides of that token. `--azgrid-preset-*` variables are internal implementation
-details and should not be overridden.
-
-<!-- azgrid-tokens -->
-| Variable | Controls | Light / dark fallback |
-| --- | --- | --- |
-| `--azgrid-bg` | Grid background | `#fff` / `#313943` |
-| `--azgrid-fg` | Grid text | `#555e68` / `#c5cae9` |
-| `--azgrid-border` | Grid border and separators | `#e4e3e2` / `#4f575f` |
-| `--azgrid-font-family` | Grid and control font family | `'Nunito Sans', 'Iran Sans', sans-serif` |
-| `--azgrid-radius` | Grid, input and menu corner radius | `0` |
-| `--azgrid-accent` | Focus indicators, sort arrows, checkboxes and selection handles | `#7986cb` / `#caae53` |
-| `--azgrid-transparent` | Transparent structural surfaces | `transparent` |
-| `--azgrid-muted-fg` | Disabled text and secondary icons | `#99a1aa` / `#9ca6b0` |
-| `--azgrid-shadow-color` | Menu and input shadow colour | `rgba(0, 0, 0, .2)` / `rgba(0, 0, 0, .4)` |
-| `--azgrid-header-bg` | Header and grouped header background | `#fff` / `#3b444f` |
-| `--azgrid-header-fg` | Header text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-header-border` | Header separators | `var(--azgrid-border, var(--azgrid-preset-border))` |
-| `--azgrid-header-font-size` | Header font size | `14px` |
-| `--azgrid-header-text-transform` | Header text transform | `none` |
-| `--azgrid-header-letter-spacing` | Header letter spacing | `normal` |
-| `--azgrid-header-font-weight` | Header font weight | `500` |
-| `--azgrid-row-bg-even` | Even and non-zebra rows | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-row-bg-odd` | Odd rows | `#fafafa` / `#353e48` |
-| `--azgrid-row-bg-hover` | Hovered rows and cells | `#ebedf7` / `#454f5b` |
-| `--azgrid-row-fg-hover` | Hovered row text | `var(--azgrid-fg, var(--azgrid-preset-fg))` / `#ececec` |
-| `--azgrid-row-bg-selected` | Selected rows and cells | `#dce0f2` / `#655c3e` |
-| `--azgrid-row-fg-selected` | Selected row text | `var(--azgrid-fg, var(--azgrid-preset-fg))` / `#fff` |
-| `--azgrid-row-bg-active` | Active rows | `#ebedf7` / `#4f575f` |
-| `--azgrid-cell-border` | Cell borders | `rgba(1, 1, 1, .1)` / `#4f575f` |
-| `--azgrid-cell-border-width` | Cell border width | `0.1px` |
-| `--azgrid-cell-padding` | Ordinary data cell padding; expand/reorder tools keep their layout | `0 8px` |
-| `--azgrid-filter-bg` | Filter row and input background, also editors and search | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-filter-fg` | Filter input and editor text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-filter-border` | Filter input borders | `var(--azgrid-border, var(--azgrid-preset-border))` |
-| `--azgrid-filter-placeholder` | Input placeholder text | `var(--azgrid-muted-fg, var(--azgrid-preset-muted-fg))` |
-| `--azgrid-filter-focus-ring` | Focused input border and ring | `var(--azgrid-accent, var(--azgrid-preset-accent))` |
-| `--azgrid-pagination-bg` | Pagination toolbar, page number and page size controls | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-pagination-fg` | Pagination text and icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-pagination-border` | Pagination control borders | `var(--azgrid-border, var(--azgrid-preset-border))` |
-| `--azgrid-menu-bg` | Column, filter, context, select menus and date pickers | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-menu-fg` | Menu text and icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-menu-border` | Menu borders and separators | `var(--azgrid-border, var(--azgrid-preset-border))` |
-| `--azgrid-menu-bg-hover` | Hovered/focused menu entries | `var(--azgrid-row-bg-hover, var(--azgrid-preset-row-bg-hover))` |
-| `--azgrid-scrollbar-track` | Native and Inovua scrollbar tracks | `#f1f1f1` / `#313943` |
-| `--azgrid-scrollbar-thumb` | Native and Inovua scrollbar thumbs | `#b5b5b5` / `#697582` |
-| `--azgrid-empty-bg` | Empty state background | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-empty-fg` | No records text | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-loading-bg` | Loading overlay background | `rgba(255, 255, 255, .8)` / `rgba(49, 57, 67, .8)` |
-| `--azgrid-loading-fg` | Loading text and spinner | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-tree-bg` | Tree/group row background | `var(--azgrid-row-bg-even, var(--azgrid-preset-row-bg-even))` |
-| `--azgrid-tree-fg` | Tree/group text and expand icons | `var(--azgrid-fg, var(--azgrid-preset-fg))` |
-| `--azgrid-details-bg` | Row details background | `var(--azgrid-bg, var(--azgrid-preset-bg))` |
-| `--azgrid-locked-column-shadow` | Locked column separator shadow (complete CSS box-shadow value) | `0 0 5px rgba(0, 0, 0, .2)` / `0 0 5px rgba(0, 0, 0, .5)` |
-<!-- /azgrid-tokens -->
-
-### Dark Art Deco host preset
-
-Square corners, obsidian surfaces, gold accents and uppercase widely spaced
-headers are host choices, separate from the neutral theme. Set variables on
-`.azgrid-theme-deco` to support `theme="deco"`, or on a host wrapper.
-
-```tsx
-<AzGrid theme="deco" columns={columns} dataSource={rows} />
-```
-
-<!-- azgrid-deco -->
+# @azrico/reactgrid
+
+Private React data grid package for Azrideus' projects.
+
+## Usage
+
+```tsx
+import { AzGrid } from '@azrico/reactgrid';
+import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css';
+
+const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
+const rows = [{ __table_id: '1', name: 'Alice' }];
+
+<AzGrid theme="light" columns={columns} dataSource={rows} />;
+```
+
+The token stylesheet is optional. Without it, the grid uses Inovua's default-light appearance.
+
+## Accessibility
+
+The grid exposes ARIA grid semantics, so screen readers and automation tools can read it from the accessibility tree.
+
+| Element | Attributes |
+| --- | --- |
+| Grid root | `role="grid"`, `aria-rowcount` (total rows incl. header; the full data count when paginated), `aria-colcount` (visible columns), `aria-label`, `aria-readonly="true"` when the grid isn't editable |
+| Header row | `role="row"`, `aria-rowindex="1"` |
+| Header cells | `role="columnheader"`, `aria-colindex`, `aria-sort` (`ascending` / `descending` / `none`, sortable columns only) |
+| Rows | `role="row"`, `aria-rowindex` (1-based, header is 1, includes the page offset), `aria-selected` when selection is enabled, `data-row-id` |
+| Body cells | `role="gridcell"`, `aria-colindex`, `data-column="<column name>"`, `aria-readonly="true"` when the cell can't be edited |
+| Row-number cells | `role="rowheader"` |
+
+New props:
+
+- `ariaLabel?: string` on the grid sets the accessible name of the grid.
+- `ariaLabel?: (value, data) => string` on a column sets `aria-label` on its cells. Use it for icons, badges or values whose visible text isn't descriptive.
+
+```tsx
+const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];
+
+<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;
+```
+
+Override any cell attribute with the column's `cellDOMProps` / `headerDOMProps`. Values you set there are kept.
+A `gridOptions.onRenderRow` runs after the grid's own row attributes are set, so it can change them too.
+
+## Themes
+
+Use `theme="light"` (default), `theme="dark"`, or a custom name. Custom names apply
+`azgrid-theme-<name>` to the grid and use light defaults for unspecified variables.
+
+`dark` remains a deprecated alias. `theme` takes precedence; `gridOptions.theme` is ignored.
+
+Set `--azgrid-*` variables on a wrapper, `:root`, or a theme class. Each grid can use a different palette.
+
+```tsx
+<div className="my-grid">
+  <AzGrid theme="light" columns={columns} dataSource={rows} />
+</div>
+```
+
 ```css
-/* Example host preset; separate from the neutral grid theme. */
-.azgrid-example-deco, .azgrid-theme-deco {
-	--azgrid-bg: #0A0A0A;
-	--azgrid-fg: #eee7d6;
-	--azgrid-border: #6b5824;
-	--azgrid-accent: #D4AF37;
-	--azgrid-muted-fg: #9b8a5b;
-	--azgrid-radius: 0;
-	--azgrid-font-family: Georgia, serif;
-	--azgrid-header-bg: #0A0A0A;
-	--azgrid-header-fg: #D4AF37;
-	--azgrid-header-border: #6b5824;
-	--azgrid-header-text-transform: uppercase;
-	--azgrid-header-letter-spacing: .1em;
-	--azgrid-header-font-weight: 600;
-	--azgrid-row-bg-even: #0A0A0A;
-	--azgrid-row-bg-odd: #12110e;
-	--azgrid-row-bg-hover: #282211;
-	--azgrid-row-fg-hover: #fff6dc;
-	--azgrid-row-bg-selected: #423619;
-	--azgrid-row-fg-selected: #fff6dc;
-	--azgrid-row-bg-active: #332a15;
-	--azgrid-cell-border: #6b5824;
-	--azgrid-cell-border-width: 1px;
-	--azgrid-cell-padding: 0 10px;
-	--azgrid-filter-bg: #12110e;
-	--azgrid-filter-fg: #eee7d6;
-	--azgrid-filter-border: #6b5824;
-	--azgrid-filter-placeholder: #9b8a5b;
-	--azgrid-filter-focus-ring: #D4AF37;
-	--azgrid-pagination-bg: #0A0A0A;
-	--azgrid-pagination-fg: #D4AF37;
-	--azgrid-pagination-border: #6b5824;
-	--azgrid-menu-bg: #12110e;
-	--azgrid-menu-fg: #eee7d6;
-	--azgrid-menu-border: #6b5824;
-	--azgrid-menu-bg-hover: #282211;
-	--azgrid-scrollbar-track: #0A0A0A;
-	--azgrid-scrollbar-thumb: #6b5824;
-	--azgrid-empty-bg: #0A0A0A;
-	--azgrid-empty-fg: #9b8a5b;
-	--azgrid-loading-bg: rgba(10, 10, 10, .85);
-	--azgrid-loading-fg: #D4AF37;
-	--azgrid-tree-bg: #12110e;
-	--azgrid-tree-fg: #D4AF37;
-	--azgrid-details-bg: #12110e;
-	--azgrid-shadow-color: rgba(0, 0, 0, .6);
-	--azgrid-locked-column-shadow: 0 0 5px #6b5824;
+.my-grid {
+  --azgrid-accent: #345b93;
+  --azgrid-header-bg: #edf2f8;
+  --azgrid-row-bg-hover: #e4ecf7;
 }
+```
+
+## CSS variables
+
+All variables have light/dark defaults. Use valid CSS values for the named property.
+`--azgrid-locked-column-shadow` accepts a complete `box-shadow` value.
+
+<!-- azgrid-tokens -->
+| Variable | Controls |
+| --- | --- |
+| `--azgrid-bg` | Grid background |
+| `--azgrid-fg` | Grid text |
+| `--azgrid-border` | Grid border and separators |
+| `--azgrid-font-family` | Grid and control fonts |
+| `--azgrid-radius` | Grid, input and menu corner radius; default `0` |
+| `--azgrid-accent` | Focus, sort arrows, checkboxes and selection handles |
+| `--azgrid-transparent` | Transparent structural surfaces |
+| `--azgrid-muted-fg` | Disabled text and secondary icons |
+| `--azgrid-shadow-color` | Menu and input shadow colour |
+| `--azgrid-header-bg` | Header background |
+| `--azgrid-header-fg` | Header text |
+| `--azgrid-header-border` | Header separators |
+| `--azgrid-header-font-size` | Header font size |
+| `--azgrid-header-text-transform` | Header text transform |
+| `--azgrid-header-letter-spacing` | Header letter spacing |
+| `--azgrid-header-font-weight` | Header font weight |
+| `--azgrid-row-bg-even` | Even and non-zebra rows |
+| `--azgrid-row-bg-odd` | Odd rows |
+| `--azgrid-row-bg-hover` | Hovered rows and cells |
+| `--azgrid-row-fg-hover` | Hovered row text |
+| `--azgrid-row-bg-selected` | Selected rows and cells |
+| `--azgrid-row-fg-selected` | Selected row text |
+| `--azgrid-row-bg-active` | Active rows |
+| `--azgrid-cell-border` | Cell border colour |
+| `--azgrid-cell-border-width` | Cell border width |
+| `--azgrid-cell-padding` | Data cell padding |
+| `--azgrid-filter-bg` | Filter row, input, editor and search background |
+| `--azgrid-filter-fg` | Filter input and editor text |
+| `--azgrid-filter-border` | Filter input borders |
+| `--azgrid-filter-placeholder` | Input placeholder text |
+| `--azgrid-filter-focus-ring` | Focused input border and ring |
+| `--azgrid-pagination-bg` | Pagination toolbar and control background |
+| `--azgrid-pagination-fg` | Pagination text and icons |
+| `--azgrid-pagination-border` | Pagination control borders |
+| `--azgrid-menu-bg` | Menu, select dropdown and date picker background |
+| `--azgrid-menu-fg` | Menu text and icons |
+| `--azgrid-menu-border` | Menu borders and separators |
+| `--azgrid-menu-bg-hover` | Hovered and focused menu entries |
+| `--azgrid-scrollbar-track` | Scrollbar tracks |
+| `--azgrid-scrollbar-thumb` | Scrollbar thumbs |
+| `--azgrid-empty-bg` | Empty state background |
+| `--azgrid-empty-fg` | Empty state text |
+| `--azgrid-loading-bg` | Loading overlay background |
+| `--azgrid-loading-fg` | Loading text and spinner |
+| `--azgrid-tree-bg` | Tree and group row background |
+| `--azgrid-tree-fg` | Tree and group text and expand icons |
+| `--azgrid-details-bg` | Row details background |
+| `--azgrid-locked-column-shadow` | Locked column shadow |
+<!-- /azgrid-tokens -->
+
+## Art Deco example
+
+Use dark defaults with an obsidian background, gold accents, square corners and uppercase headers.
 
+```tsx
+<div className="deco-grid">
+  <AzGrid theme="dark" columns={columns} dataSource={rows} />
+</div>
 ```
-<!-- /azgrid-deco -->
-
-`src/example.tsx` renders light, dark and this host palette together, with
-filter inputs, editable cells, tree rows, selection, context menus and pagination.
-
-### Scope and maintenance
-
-The wrapper's MUI context menu portal stays inside the owning theme scope.
-Inovua's default column/filter menus and page-size dropdown render in
-the grid. If you explicitly use `gridOptions.menuPortalContainer` or
-`gridOptions.renderInPortal` to move UI elsewhere, that external container must
-also carry `azgrid-scope`, the owning `azgrid-theme-<name>` class and host
-variables. Arbitrary custom cell,
-editor, menu and row-detail content must use these variables in its own CSS;
-the package cannot replace colours deliberately supplied by a host renderer or
-inline `gridOptions.style`/column styles.
-
-Inovua's base layout, animations, icon geometry and state selectors remain
-intact. `config/generate-theme.cjs` extracts only colour/font declarations and
-adds scope specificity. Run `node config/generate-theme.cjs` after an Inovua
-upgrade and inspect selector changes. Run `yarn check:theme` to audit upstream
-colour coverage, token defaults/documentation and commented important rules.
-`config/theme-extras.css` handles surfaces
-without upstream colour declarations. The only colour-related upstream
-`!important` rules are footer cell border colour and first-row cell top border;
-our matching overrides explain each use. Native scrollbar presentation remains
-subject to browser/OS support.
-
-### Styling dependencies
-
-`@azrico/controls` 1.6.1 provides the context menu. MUI's default styled engine
-uses `@emotion/react` and `@emotion/styled` for those components; the grid does
-not use Emotion to implement its CSS variable theme. Removing Emotion requires
-replacing the MUI menu or configuring another supported MUI styling engine.
+
+```css
+.deco-grid {
+  --azgrid-bg: #0A0A0A;
+  --azgrid-fg: #eee7d6;
+  --azgrid-border: #6b5824;
+  --azgrid-accent: #D4AF37;
+  --azgrid-radius: 0;
+  --azgrid-header-bg: var(--azgrid-bg);
+  --azgrid-header-fg: var(--azgrid-accent);
+  --azgrid-header-text-transform: uppercase;
+  --azgrid-header-letter-spacing: .1em;
+  --azgrid-header-font-weight: 600;
+  --azgrid-cell-border: var(--azgrid-border);
+  --azgrid-cell-border-width: 1px;
+  --azgrid-row-bg-odd: #12110e;
+  --azgrid-row-bg-hover: #282211;
+  --azgrid-row-bg-selected: #423619;
+  --azgrid-row-bg-active: #332a15;
+  --azgrid-scrollbar-track: var(--azgrid-bg);
+  --azgrid-scrollbar-thumb: var(--azgrid-border);
+  --azgrid-loading-bg: rgba(10, 10, 10, .85);
+}
+```
+
+See [src/example.tsx](src/example.tsx) for light, dark and a complete custom `deco` palette.
+
+Custom renderers must style their own content. External menu portal containers need
+`azgrid-scope`, the matching `azgrid-theme-<name>` class and the host variables.

package/dist/index.d.ts

@@ -1,3 +1,5 @@
-export * from './src';
-import { AzGrid } from './src';
+export * from './src/views/DataGrid';
+export * from './src/types/types';
+export { get_row_id, set_row_id, get_col_name, get_col_header } from './src/func/func_grid';
+import { AzGrid } from './src/views/DataGrid';
 export default AzGrid;

package/dist/index.js

@@ -3,18 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  get_row_id: true,
+  set_row_id: true,
+  get_col_name: true,
+  get_col_header: true
+};
 exports.default = void 0;
-var _src = require("./src");
-Object.keys(_src).forEach(function (key) {
+Object.defineProperty(exports, "get_col_header", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_header;
+  }
+});
+Object.defineProperty(exports, "get_col_name", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_col_name;
+  }
+});
+Object.defineProperty(exports, "get_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.get_row_id;
+  }
+});
+Object.defineProperty(exports, "set_row_id", {
+  enumerable: true,
+  get: function () {
+    return _func_grid.set_row_id;
+  }
+});
+var _DataGrid = require("./src/views/DataGrid");
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _types = require("./src/types/types");
+Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _src[key]) return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _src[key];
+      return _types[key];
     }
   });
 });
-var _default = exports.default = _src.AzGrid;
+var _func_grid = require("./src/func/func_grid");
+var _default = exports.default = _DataGrid.AzGrid;

package/dist/src/example.js

@@ -39,7 +39,8 @@ const columns = [{
   name: 'age',
   title: 'Age',
   type: 'number',
-  defaultFlex: 1
+  defaultFlex: 1,
+  ariaLabel: value => `${value} years`
 }];
 const editableColumns = ['job', 'age'];
 function getData(delta, max = 200) {
@@ -157,6 +158,7 @@ function ExampleGrid() {
     }
   }, _react.default.createElement("h3", null, theme === 'deco' ? 'Art Deco (host variables)' : `Default ${theme}`), _react.default.createElement(_DataGrid.default, {
     theme: theme,
+    ariaLabel: `Users (${theme})`,
     delayedSize: true,
     // details_dataSource={details_dataSource}
     dataSource: dataSource,
@@ -185,7 +187,11 @@ function ExampleGrid() {
       defaultLimit: 10,
       pageSizes: [10, 25, 50],
       checkboxColumn: true,
-      multiSelect: true
+      multiSelect: true,
+      // consumer onRenderRow runs after the internal one
+      onRenderRow: rowProps => {
+        rowProps['data-example-row'] = 'true';
+      }
       // defaultFilterValue: filterValue,
       // remoteFilter: false,
       // multiSelect: true,

package/dist/src/func/func_a11y.d.ts

@@ -0,0 +1,52 @@
+import { GridType } from '../types/types';
+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;
+};
+/**
+ * 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 declare function apply_column_a11y<T extends Record<string, any>>(col: T, options?: ColumnA11yOptions): T;
+/**
+ * adds ARIA attributes to a row, called from onRenderRow
+ * @param rowProps
+ * @param selectionEnabled
+ */
+export declare function apply_row_a11y(rowProps: any, selectionEnabled: boolean): void;
+/**
+ * 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 declare function get_grid_row_count(grid: GridType): number;
+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 declare function get_grid_root(grid: GridType | null | undefined): Element | 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 declare function get_root_a11y_key(grid: GridType | null | undefined, options: RootA11yOptions): string;
+/**
+ * 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 declare function apply_root_a11y(grid: GridType | null | undefined, options: RootA11yOptions): Element | null;

package/dist/src/func/func_a11y.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.apply_column_a11y = apply_column_a11y;
+exports.apply_root_a11y = apply_root_a11y;
+exports.apply_row_a11y = apply_row_a11y;
+exports.get_grid_root = get_grid_root;
+exports.get_grid_row_count = get_grid_row_count;
+exports.get_root_a11y_key = get_root_a11y_key;
+function set_default(target, key, value) {
+  if (target[key] === undefined && value !== undefined && value !== null) target[key] = value;
+}
+function resolve_dom_props(src, cellProps) {
+  const res = typeof src === 'function' ? src(cellProps) : src;
+  return res ? {
+    ...res
+  } : {};
+}
+function get_sort_dir(sortInfo) {
+  if (!sortInfo || !sortInfo.dir) return 'none';
+  return sortInfo.dir > 0 ? 'ascending' : 'descending';
+}
+function is_cell_readonly(cellProps, gridEditable) {
+  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
+ */
+function apply_column_a11y(col, options = {}) {
+  const {
+    role = 'gridcell',
+    gridEditable = false,
+    markReadonly = true
+  } = options;
+  const consumerCellDOMProps = col.cellDOMProps;
+  const consumerHeaderDOMProps = col.headerDOMProps;
+  const ariaLabel = col.ariaLabel;
+  return {
+    ...col,
+    cellDOMProps: cellProps => {
+      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 => {
+      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
+ */
+function apply_row_a11y(rowProps, selectionEnabled) {
+  var _ref, _rowProps$remoteRowIn;
+  //filler rows (showEmptyRows) are not data rows
+  if (rowProps.empty) return;
+  const index = (_ref = (_rowProps$remoteRowIn = rowProps.remoteRowIndex) !== null && _rowProps$remoteRowIn !== void 0 ? _rowProps$remoteRowIn : rowProps.realIndex) !== null && _ref !== void 0 ? _ref : 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, key, value) {
+  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
+ */
+function get_grid_row_count(grid) {
+  const g = grid;
+  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);
+}
+/**
+ * root element of the grid, null when it isn't mounted
+ * @param grid computed props of the grid
+ */
+function get_grid_root(grid) {
+  var _grid$getDOMNode;
+  return (grid === null || grid === void 0 || (_grid$getDOMNode = grid.getDOMNode) === null || _grid$getDOMNode === void 0 ? void 0 : _grid$getDOMNode.call(grid)) || 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
+ */
+function get_root_a11y_key(grid, options) {
+  var _options$ariaLabel;
+  const g = grid;
+  if (!g) return '';
+  return [get_grid_row_count(g), (g.visibleColumns || []).length, (_options$ariaLabel = options.ariaLabel) !== null && _options$ariaLabel !== void 0 ? _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
+ */
+function apply_root_a11y(grid, options) {
+  const g = grid;
+  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;
+}