@ornery/ui-grid-react 0.1.7 → 0.1.8-hotfix-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/demo/demo.css +122 -0
  2. package/demo/main.tsx +89 -3
  3. package/dist/UiGrid.d.ts +3 -2
  4. package/dist/UiGrid.d.ts.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +314 -401
  8. package/dist/index.mjs +312 -401
  9. package/dist/mountUiGrid.d.ts +5 -0
  10. package/dist/mountUiGrid.d.ts.map +1 -1
  11. package/dist/ui-grid.css +802 -0
  12. package/package.json +3 -3
  13. package/src/UiGrid.test.tsx +41 -1
  14. package/src/UiGrid.tsx +264 -348
  15. package/src/index.ts +1 -1
  16. package/src/mountUiGrid.tsx +18 -0
  17. package/src/ui-grid.css +122 -40
package/dist/index.js CHANGED
@@ -42,6 +42,8 @@ __export(index_exports, {
42
42
  orderVisibleColumns: () => orderVisibleColumns,
43
43
  registerReactUiGridWasmEngineFromModule: () => registerReactUiGridWasmEngineFromModule,
44
44
  resolveBenchmarkIterations: () => resolveBenchmarkIterations,
45
+ styledCell: () => styledCell,
46
+ updateUiGrid: () => updateUiGrid,
45
47
  useGridState: () => useGridState,
46
48
  useVirtualScroll: () => useVirtualScroll
47
49
  });
@@ -1379,6 +1381,7 @@ function UiGrid({
1379
1381
  options,
1380
1382
  onRegisterApi,
1381
1383
  cellRenderer,
1384
+ headerRenderer,
1382
1385
  expandableRenderer,
1383
1386
  className
1384
1387
  }) {
@@ -1391,12 +1394,7 @@ function UiGrid({
1391
1394
  gridContainerRef,
1392
1395
  displayItems,
1393
1396
  virtualizationEnabled,
1394
- pipelineMs,
1395
- visibleRowCount,
1396
- totalRows,
1397
- benchmarkResult,
1398
1397
  rowSize,
1399
- viewportHeightPx,
1400
1398
  editingValue,
1401
1399
  sortingFeature,
1402
1400
  filteringFeature,
@@ -1405,7 +1403,6 @@ function UiGrid({
1405
1403
  cellEditFeature,
1406
1404
  expandableFeature,
1407
1405
  treeViewFeature,
1408
- csvExportFeature,
1409
1406
  columnMovingFeature,
1410
1407
  paginationCurrentPage,
1411
1408
  paginationTotalPages,
@@ -1430,6 +1427,21 @@ function UiGrid({
1430
1427
  const [draggedColumnName, setDraggedColumnName] = import_react3.default.useState(null);
1431
1428
  const [dropTargetColumnName, setDropTargetColumnName] = import_react3.default.useState(null);
1432
1429
  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
1430
+ function renderHeaderContent(column) {
1431
+ const value = state.headerLabel(column);
1432
+ const context = {
1433
+ $implicit: value,
1434
+ value,
1435
+ column
1436
+ };
1437
+ if (headerRenderer) {
1438
+ return headerRenderer(context) ?? value;
1439
+ }
1440
+ if (column.headerRenderer) {
1441
+ return column.headerRenderer(context);
1442
+ }
1443
+ return value;
1444
+ }
1433
1445
  const eventPathIncludesClass = import_react3.default.useCallback((event, className2) => {
1434
1446
  const eventPath = typeof event.composedPath === "function" ? event.composedPath() : event.target ? [event.target] : [];
1435
1447
  return eventPath.some((target) => {
@@ -1734,416 +1746,305 @@ function UiGrid({
1734
1746
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z" }) });
1735
1747
  }
1736
1748
  }
1737
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "grid-shell ui-grid-shell", "data-part": "shell", children: [
1738
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "grid-hero ui-grid-toolbar-shell", "data-part": "hero", children: [
1739
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
1740
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "eyebrow", children: "React wrapper for @ornery/ui-grid" }),
1741
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: options.title ?? "UI Grid" }),
1742
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "deck", children: "Familiar `gridOptions` and `onRegisterApi`, built with React hooks, virtualization, grouping, sorting, filtering, and column ordering." })
1743
- ] }),
1744
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hero-actions", children: [
1745
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1746
- "button",
1747
- {
1748
- type: "button",
1749
- className: "action action-secondary",
1750
- "data-part": "action benchmark-action",
1751
- onClick: () => state.runBenchmark(),
1752
- children: "Benchmark"
1753
- }
1754
- ),
1755
- csvExportFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1756
- "button",
1749
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1750
+ "section",
1751
+ {
1752
+ className: "grid-frame ui-grid",
1753
+ "data-part": "grid-frame",
1754
+ role: "grid",
1755
+ "aria-label": options.title ?? "Data grid",
1756
+ children: [
1757
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1758
+ "div",
1757
1759
  {
1758
- type: "button",
1759
- className: "action action-secondary",
1760
- "data-part": "action export-action",
1761
- onClick: () => state.exportCsv(),
1762
- children: "Export CSV"
1763
- }
1764
- ),
1765
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stats-card", "data-part": "stats-card", children: [
1766
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: visibleRowCount }),
1767
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: labels.statsVisibleRows })
1768
- ] })
1769
- ] })
1770
- ] }),
1771
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1772
- "section",
1773
- {
1774
- className: "metrics-strip",
1775
- "data-part": "metrics",
1776
- "aria-label": "Grid performance metrics",
1777
- children: [
1778
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
1779
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
1780
- pipelineMs.toFixed(2),
1781
- " ms"
1782
- ] }),
1783
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "pipeline" })
1784
- ] }),
1785
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
1786
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: virtualizationEnabled ? "On" : "Off" }),
1787
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "virtualization" })
1788
- ] }),
1789
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
1790
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: state.groupByColumns.length }),
1791
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "group columns" })
1792
- ] }),
1793
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { "data-part": "metric-card", children: [
1794
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: benchmarkResult?.averageMs?.toFixed(2) || "\u2014" }),
1795
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "benchmark avg" })
1796
- ] })
1797
- ]
1798
- }
1799
- ),
1800
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1801
- "section",
1802
- {
1803
- className: "grid-frame ui-grid",
1804
- "data-part": "grid-frame",
1805
- role: "grid",
1806
- "aria-label": options.title ?? "Data grid",
1807
- children: [
1808
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid-toolbar", "data-part": "grid-toolbar", children: [
1809
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
1810
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: visibleRowCount }),
1811
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1812
- labels.toolbarOf,
1813
- " ",
1814
- totalRows,
1815
- " ",
1816
- labels.toolbarRows
1817
- ] })
1818
- ] }),
1819
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "`gridOptions` compatibility layer: sorting, filtering, grouping, column moving, templating, and virtualized rendering." })
1820
- ] }),
1821
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1822
- "div",
1823
- {
1824
- className: "grid-table ui-grid-contents-wrapper",
1825
- "data-part": "grid-table",
1826
- style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
1827
- onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
1828
- children: [
1829
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1830
- "div",
1831
- {
1832
- className: "header-grid ui-grid-header ui-grid-header-canvas",
1833
- "data-part": "header",
1834
- role: "row",
1835
- ref: headerGridRef,
1836
- style: { gridTemplateColumns },
1837
- children: visibleColumns.map((column) => {
1838
- const pinned = state.isPinned(column);
1839
- const pinOffset = pinned ? state.pinnedOffset(column) : null;
1840
- const pinMenuOpen = isPinMenuOpen(column);
1841
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1842
- "div",
1843
- {
1844
- className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}${draggedColumnName === column.name ? " is-dragging" : ""}${dropTargetColumnName === column.name ? " is-drag-target" : ""}`,
1845
- "data-part": "header-cell",
1846
- role: "columnheader",
1847
- "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
1848
- draggable: columnMovingFeature,
1849
- onDragStart: (event) => handleHeaderDragStart(column, event),
1850
- onDragOver: (event) => handleHeaderDragOver(column, event),
1851
- onDrop: (event) => handleHeaderDrop(column, event),
1852
- onDragEnd: handleHeaderDragEnd,
1853
- onDragLeave: () => {
1854
- if (dropTargetColumnName === column.name) {
1855
- setDropTargetColumnName(null);
1856
- }
1857
- },
1858
- style: {
1859
- position: pinned ? "sticky" : void 0,
1860
- left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1861
- right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1862
- zIndex: pinMenuOpen ? 8 : pinned ? 2 : void 0
1863
- },
1864
- children: [
1865
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "header-label", children: state.headerLabel(column) }),
1866
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "header-actions", children: [
1867
- sortingFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1868
- "button",
1869
- {
1870
- type: "button",
1871
- className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
1872
- disabled: !state.isColumnSortable(column),
1873
- "aria-label": state.sortButtonLabel(column),
1874
- title: state.sortButtonLabel(column),
1875
- onClick: () => state.toggleSort(column),
1876
- children: [
1877
- renderSortIcon(column),
1878
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
1879
- ]
1880
- }
1881
- ),
1882
- groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1883
- "button",
1884
- {
1885
- type: "button",
1886
- className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
1887
- "data-part": "group-toggle",
1888
- "aria-label": state.groupingButtonLabel(column),
1889
- title: state.groupingButtonLabel(column),
1890
- onClick: (e) => state.toggleGrouping(column, e),
1891
- children: [
1892
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
1893
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
1894
- ]
1895
- }
1896
- ),
1897
- state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1898
- "div",
1899
- {
1900
- className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`,
1901
- onClick: (event) => event.stopPropagation(),
1902
- children: [
1903
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1904
- "button",
1905
- {
1906
- type: "button",
1907
- className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
1908
- "data-part": "pin-toggle",
1909
- "aria-label": pinButtonLabel(column),
1910
- title: pinButtonLabel(column),
1911
- "aria-haspopup": pinned ? void 0 : "menu",
1912
- "aria-expanded": pinned ? void 0 : pinMenuOpen,
1913
- onClick: (event) => onPinTrigger(column, event),
1914
- children: [
1915
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
1916
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: pinButtonLabel(column) })
1917
- ]
1918
- }
1919
- ),
1920
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1921
- "div",
1922
- {
1923
- className: "pin-menu",
1924
- "data-part": "pin-menu",
1925
- role: "menu",
1926
- "aria-label": "Pin options",
1927
- "aria-hidden": !pinMenuOpen,
1928
- children: [
1929
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1930
- "button",
1931
- {
1932
- type: "button",
1933
- className: "pin-menu-action",
1934
- "data-part": "pin-left-action",
1935
- role: "menuitem",
1936
- "aria-label": labels.pinLeft,
1937
- title: labels.pinLeft,
1938
- tabIndex: pinMenuOpen ? 0 : -1,
1939
- onClick: (event) => choosePinDirection(column, "left", event),
1940
- children: [
1941
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
1942
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
1943
- ]
1944
- }
1945
- ),
1946
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1947
- "button",
1948
- {
1949
- type: "button",
1950
- className: "pin-menu-action",
1951
- "data-part": "pin-right-action",
1952
- role: "menuitem",
1953
- "aria-label": labels.pinRight,
1954
- title: labels.pinRight,
1955
- tabIndex: pinMenuOpen ? 0 : -1,
1956
- onClick: (event) => choosePinDirection(column, "right", event),
1957
- children: [
1958
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
1959
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
1960
- ]
1961
- }
1962
- )
1963
- ]
1964
- }
1965
- )
1966
- ]
1967
- }
1968
- )
1969
- ] })
1970
- ]
1760
+ className: "grid-table ui-grid-contents-wrapper",
1761
+ "data-part": "grid-table",
1762
+ style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
1763
+ onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
1764
+ children: [
1765
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1766
+ "div",
1767
+ {
1768
+ className: "header-grid ui-grid-header ui-grid-header-canvas",
1769
+ "data-part": "header",
1770
+ role: "row",
1771
+ ref: headerGridRef,
1772
+ style: { gridTemplateColumns },
1773
+ children: visibleColumns.map((column) => {
1774
+ const pinned = state.isPinned(column);
1775
+ const pinOffset = pinned ? state.pinnedOffset(column) : null;
1776
+ const pinMenuOpen = isPinMenuOpen(column);
1777
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1778
+ "div",
1779
+ {
1780
+ className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}${pinned ? " is-pinned" : ""}${pinMenuOpen ? " is-pin-menu-open" : ""}${draggedColumnName === column.name ? " is-dragging" : ""}${dropTargetColumnName === column.name ? " is-drag-target" : ""}`,
1781
+ "data-part": "header-cell",
1782
+ role: "columnheader",
1783
+ "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
1784
+ draggable: columnMovingFeature,
1785
+ onDragStart: (event) => handleHeaderDragStart(column, event),
1786
+ onDragOver: (event) => handleHeaderDragOver(column, event),
1787
+ onDrop: (event) => handleHeaderDrop(column, event),
1788
+ onDragEnd: handleHeaderDragEnd,
1789
+ onDragLeave: () => {
1790
+ if (dropTargetColumnName === column.name) {
1791
+ setDropTargetColumnName(null);
1792
+ }
1971
1793
  },
1972
- column.name
1973
- );
1974
- })
1975
- }
1976
- ),
1977
- filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1978
- "div",
1979
- {
1980
- className: "filter-grid ui-grid-header",
1981
- "data-part": "filters",
1982
- ref: filterGridRef,
1983
- style: {
1984
- gridTemplateColumns,
1985
- ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px`
1986
- },
1987
- children: visibleColumns.map((column) => {
1988
- const pinned = state.isPinned(column);
1989
- const pinOffset = pinned ? state.pinnedOffset(column) : null;
1990
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1991
- "label",
1992
- {
1993
- className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
1994
- "data-part": "filter-cell",
1995
- style: {
1996
- position: pinned ? "sticky" : void 0,
1997
- left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1998
- right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1999
- zIndex: pinned ? 2 : void 0
2000
- },
2001
- children: [
2002
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only ui-grid-sr-only", children: [
2003
- labels.filterColumn,
2004
- " ",
2005
- state.headerLabel(column)
2006
- ] }),
2007
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2008
- "input",
1794
+ style: {
1795
+ position: pinned ? "sticky" : void 0,
1796
+ left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1797
+ right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1798
+ zIndex: pinMenuOpen ? 8 : pinned ? 2 : void 0
1799
+ },
1800
+ children: [
1801
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "header-label", children: renderHeaderContent(column) }),
1802
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "header-actions", children: [
1803
+ sortingFeature && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1804
+ "button",
1805
+ {
1806
+ type: "button",
1807
+ className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
1808
+ disabled: !state.isColumnSortable(column),
1809
+ "aria-label": state.sortButtonLabel(column),
1810
+ title: state.sortButtonLabel(column),
1811
+ onClick: () => state.toggleSort(column),
1812
+ children: [
1813
+ renderSortIcon(column),
1814
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
1815
+ ]
1816
+ }
1817
+ ),
1818
+ groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1819
+ "button",
1820
+ {
1821
+ type: "button",
1822
+ className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
1823
+ "data-part": "group-toggle",
1824
+ "aria-label": state.groupingButtonLabel(column),
1825
+ title: state.groupingButtonLabel(column),
1826
+ onClick: (e) => state.toggleGrouping(column, e),
1827
+ children: [
1828
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
1829
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
1830
+ ]
1831
+ }
1832
+ ),
1833
+ state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1834
+ "div",
2009
1835
  {
2010
- className: "ui-grid-filter-input",
2011
- type: "text",
2012
- defaultValue: state.filterValue(column.name),
2013
- placeholder: state.filterPlaceholder(column),
2014
- disabled: state.isFilterInputDisabled(column),
2015
- onChange: (e) => state.updateFilter(column.name, e.target.value)
1836
+ className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`,
1837
+ onClick: (event) => event.stopPropagation(),
1838
+ children: [
1839
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1840
+ "button",
1841
+ {
1842
+ type: "button",
1843
+ className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
1844
+ "data-part": "pin-toggle",
1845
+ "aria-label": pinButtonLabel(column),
1846
+ title: pinButtonLabel(column),
1847
+ "aria-haspopup": pinned ? void 0 : "menu",
1848
+ "aria-expanded": pinned ? void 0 : pinMenuOpen,
1849
+ onClick: (event) => onPinTrigger(column, event),
1850
+ children: [
1851
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
1852
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: pinButtonLabel(column) })
1853
+ ]
1854
+ }
1855
+ ),
1856
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1857
+ "div",
1858
+ {
1859
+ className: "pin-menu",
1860
+ "data-part": "pin-menu",
1861
+ role: "menu",
1862
+ "aria-label": "Pin options",
1863
+ "aria-hidden": !pinMenuOpen,
1864
+ children: [
1865
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1866
+ "button",
1867
+ {
1868
+ type: "button",
1869
+ className: "pin-menu-action",
1870
+ "data-part": "pin-left-action",
1871
+ role: "menuitem",
1872
+ "aria-label": labels.pinLeft,
1873
+ title: labels.pinLeft,
1874
+ tabIndex: pinMenuOpen ? 0 : -1,
1875
+ onClick: (event) => choosePinDirection(column, "left", event),
1876
+ children: [
1877
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
1878
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
1879
+ ]
1880
+ }
1881
+ ),
1882
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1883
+ "button",
1884
+ {
1885
+ type: "button",
1886
+ className: "pin-menu-action",
1887
+ "data-part": "pin-right-action",
1888
+ role: "menuitem",
1889
+ "aria-label": labels.pinRight,
1890
+ title: labels.pinRight,
1891
+ tabIndex: pinMenuOpen ? 0 : -1,
1892
+ onClick: (event) => choosePinDirection(column, "right", event),
1893
+ children: [
1894
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
1895
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
1896
+ ]
1897
+ }
1898
+ )
1899
+ ]
1900
+ }
1901
+ )
1902
+ ]
2016
1903
  }
2017
1904
  )
2018
- ]
2019
- },
2020
- column.name
2021
- );
2022
- })
2023
- }
2024
- ),
2025
- displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2026
- "div",
2027
- {
2028
- className: "grid-virtual-spacer",
2029
- style: { height: `${virtualScroll.totalHeight}px` },
2030
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2031
- "div",
1905
+ ] })
1906
+ ]
1907
+ },
1908
+ column.name
1909
+ );
1910
+ })
1911
+ }
1912
+ ),
1913
+ filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1914
+ "div",
1915
+ {
1916
+ className: "filter-grid ui-grid-header",
1917
+ "data-part": "filters",
1918
+ ref: filterGridRef,
1919
+ style: {
1920
+ gridTemplateColumns,
1921
+ ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px`
1922
+ },
1923
+ children: visibleColumns.map((column) => {
1924
+ const pinned = state.isPinned(column);
1925
+ const pinOffset = pinned ? state.pinnedOffset(column) : null;
1926
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1927
+ "label",
2032
1928
  {
2033
- className: "body-grid ui-grid-canvas grid-virtual-body",
2034
- "data-part": "body",
2035
- role: "rowgroup",
1929
+ className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
1930
+ "data-part": "filter-cell",
2036
1931
  style: {
2037
- gridTemplateColumns,
2038
- position: "absolute",
2039
- top: `${virtualScroll.offsetY}px`,
2040
- left: 0
1932
+ position: pinned ? "sticky" : void 0,
1933
+ left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1934
+ right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1935
+ zIndex: pinned ? 2 : void 0
2041
1936
  },
2042
- children: itemsToRender.map(renderDisplayItem)
2043
- }
2044
- )
2045
- }
2046
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2047
- "div",
1937
+ children: [
1938
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only ui-grid-sr-only", children: [
1939
+ labels.filterColumn,
1940
+ " ",
1941
+ state.headerLabel(column)
1942
+ ] }),
1943
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1944
+ "input",
1945
+ {
1946
+ className: "ui-grid-filter-input",
1947
+ type: "text",
1948
+ defaultValue: state.filterValue(column.name),
1949
+ placeholder: state.filterPlaceholder(column),
1950
+ disabled: state.isFilterInputDisabled(column),
1951
+ onChange: (e) => state.updateFilter(column.name, e.target.value)
1952
+ }
1953
+ )
1954
+ ]
1955
+ },
1956
+ column.name
1957
+ );
1958
+ })
1959
+ }
1960
+ ),
1961
+ displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-virtual-spacer", style: { height: `${virtualScroll.totalHeight}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1962
+ "div",
1963
+ {
1964
+ className: "body-grid ui-grid-canvas grid-virtual-body",
1965
+ "data-part": "body",
1966
+ role: "rowgroup",
1967
+ style: {
1968
+ gridTemplateColumns,
1969
+ position: "absolute",
1970
+ top: `${virtualScroll.offsetY}px`,
1971
+ left: 0
1972
+ },
1973
+ children: itemsToRender.map(renderDisplayItem)
1974
+ }
1975
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "body-grid ui-grid-canvas", "data-part": "body", role: "rowgroup", style: { gridTemplateColumns }, children: displayItems.map(renderDisplayItem) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
1976
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
1977
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: labels.emptyDescription })
1978
+ ] })
1979
+ ]
1980
+ }
1981
+ ),
1982
+ paginationFeature && state.showPaginationControls() && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1983
+ "footer",
1984
+ {
1985
+ className: "pagination-bar ui-grid-pagination",
1986
+ "data-part": "pagination",
1987
+ role: "navigation",
1988
+ "aria-label": labels.paginationPage,
1989
+ children: [
1990
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: state.paginationSummary() }),
1991
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pagination-controls", children: [
1992
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1993
+ "button",
2048
1994
  {
2049
- className: "body-grid ui-grid-canvas",
2050
- "data-part": "body",
2051
- role: "rowgroup",
2052
- style: { gridTemplateColumns },
2053
- children: displayItems.map(renderDisplayItem)
1995
+ type: "button",
1996
+ className: "action action-secondary pagination-button",
1997
+ "aria-label": labels.paginationPrevious,
1998
+ disabled: paginationCurrentPage <= 1,
1999
+ onClick: () => state.previousPage(),
2000
+ children: [
2001
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
2002
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationPrevious })
2003
+ ]
2054
2004
  }
2055
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
2056
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
2057
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: labels.emptyDescription })
2005
+ ),
2006
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
2007
+ labels.paginationPage,
2008
+ " ",
2009
+ paginationCurrentPage,
2010
+ " ",
2011
+ labels.paginationOf,
2012
+ " ",
2013
+ paginationTotalPages
2058
2014
  ] }),
2059
- paginationFeature && state.showPaginationControls() && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2060
- "footer",
2015
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2016
+ "button",
2061
2017
  {
2062
- className: "pagination-bar ui-grid-pagination",
2063
- "data-part": "pagination",
2064
- role: "navigation",
2065
- "aria-label": labels.paginationPage,
2018
+ type: "button",
2019
+ className: "action action-secondary pagination-button",
2020
+ "aria-label": labels.paginationNext,
2021
+ disabled: paginationCurrentPage >= paginationTotalPages,
2022
+ onClick: () => state.nextPage(),
2066
2023
  children: [
2067
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: state.paginationSummary() }),
2068
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pagination-controls", children: [
2069
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2070
- "button",
2071
- {
2072
- type: "button",
2073
- className: "action action-secondary pagination-button",
2074
- "aria-label": labels.paginationPrevious,
2075
- disabled: paginationCurrentPage <= 1,
2076
- onClick: () => state.previousPage(),
2077
- children: [
2078
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2079
- "svg",
2080
- {
2081
- className: "pagination-icon",
2082
- viewBox: "0 0 24 24",
2083
- "aria-hidden": "true",
2084
- focusable: false,
2085
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
2086
- }
2087
- ),
2088
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationPrevious })
2089
- ]
2090
- }
2091
- ),
2092
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
2093
- labels.paginationPage,
2094
- " ",
2095
- paginationCurrentPage,
2096
- " ",
2097
- labels.paginationOf,
2098
- " ",
2099
- paginationTotalPages
2100
- ] }),
2101
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2102
- "button",
2103
- {
2104
- type: "button",
2105
- className: "action action-secondary pagination-button",
2106
- "aria-label": labels.paginationNext,
2107
- disabled: paginationCurrentPage >= paginationTotalPages,
2108
- onClick: () => state.nextPage(),
2109
- children: [
2110
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2111
- "svg",
2112
- {
2113
- className: "pagination-icon",
2114
- viewBox: "0 0 24 24",
2115
- "aria-hidden": "true",
2116
- focusable: false,
2117
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" })
2118
- }
2119
- ),
2120
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationNext })
2121
- ]
2122
- }
2123
- ),
2124
- state.pageSizeOptions().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "pagination-size", children: [
2125
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationRows }),
2126
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2127
- "select",
2128
- {
2129
- "aria-label": labels.paginationRows,
2130
- value: paginationSelectedPageSize,
2131
- onChange: (e) => state.onPageSizeChange(e.target.value),
2132
- children: state.pageSizeOptions().map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: size, children: size }, size))
2133
- }
2134
- )
2135
- ] })
2136
- ] })
2024
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }),
2025
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationNext })
2137
2026
  ]
2138
2027
  }
2139
- )
2140
- ]
2141
- }
2142
- )
2143
- ]
2144
- }
2145
- )
2146
- ] }) });
2028
+ ),
2029
+ state.pageSizeOptions().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "pagination-size", children: [
2030
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: labels.paginationRows }),
2031
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2032
+ "select",
2033
+ {
2034
+ "aria-label": labels.paginationRows,
2035
+ value: paginationSelectedPageSize,
2036
+ onChange: (e) => state.onPageSizeChange(e.target.value),
2037
+ children: state.pageSizeOptions().map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: size, children: size }, size))
2038
+ }
2039
+ )
2040
+ ] })
2041
+ ] })
2042
+ ]
2043
+ }
2044
+ )
2045
+ ]
2046
+ }
2047
+ ) });
2147
2048
  }
2148
2049
 
2149
2050
  // src/mountUiGrid.tsx
@@ -2154,6 +2055,16 @@ function mountUiGrid(container, props) {
2154
2055
  root.render(import_react4.default.createElement(UiGrid, props));
2155
2056
  return root;
2156
2057
  }
2058
+ function updateUiGrid(root, props) {
2059
+ root.render(import_react4.default.createElement(UiGrid, props));
2060
+ }
2061
+ function styledCell(text, color, extraStyle) {
2062
+ return import_react4.default.createElement(
2063
+ "span",
2064
+ { style: { color, fontVariantNumeric: "tabular-nums", ...extraStyle } },
2065
+ text
2066
+ );
2067
+ }
2157
2068
 
2158
2069
  // src/vanillaAdapter.ts
2159
2070
  async function mountUiGridCustomElement(container, mountOptions) {
@@ -2210,6 +2121,8 @@ var import_ui_grid_core4 = require("@ornery/ui-grid-core");
2210
2121
  orderVisibleColumns,
2211
2122
  registerReactUiGridWasmEngineFromModule,
2212
2123
  resolveBenchmarkIterations,
2124
+ styledCell,
2125
+ updateUiGrid,
2213
2126
  useGridState,
2214
2127
  useVirtualScroll
2215
2128
  });