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

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 (16) 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 +720 -0
  12. package/package.json +2 -2
  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
package/dist/index.mjs CHANGED
@@ -1431,6 +1431,7 @@ function UiGrid({
1431
1431
  options,
1432
1432
  onRegisterApi,
1433
1433
  cellRenderer,
1434
+ headerRenderer,
1434
1435
  expandableRenderer,
1435
1436
  className
1436
1437
  }) {
@@ -1443,12 +1444,7 @@ function UiGrid({
1443
1444
  gridContainerRef,
1444
1445
  displayItems,
1445
1446
  virtualizationEnabled,
1446
- pipelineMs,
1447
- visibleRowCount,
1448
- totalRows,
1449
- benchmarkResult,
1450
1447
  rowSize,
1451
- viewportHeightPx,
1452
1448
  editingValue,
1453
1449
  sortingFeature,
1454
1450
  filteringFeature,
@@ -1457,7 +1453,6 @@ function UiGrid({
1457
1453
  cellEditFeature,
1458
1454
  expandableFeature,
1459
1455
  treeViewFeature,
1460
- csvExportFeature,
1461
1456
  columnMovingFeature,
1462
1457
  paginationCurrentPage,
1463
1458
  paginationTotalPages,
@@ -1482,6 +1477,21 @@ function UiGrid({
1482
1477
  const [draggedColumnName, setDraggedColumnName] = React.useState(null);
1483
1478
  const [dropTargetColumnName, setDropTargetColumnName] = React.useState(null);
1484
1479
  const scrollContainerHeight = `${options.viewportHeight ?? 560}px`;
1480
+ function renderHeaderContent(column) {
1481
+ const value = state.headerLabel(column);
1482
+ const context = {
1483
+ $implicit: value,
1484
+ value,
1485
+ column
1486
+ };
1487
+ if (headerRenderer) {
1488
+ return headerRenderer(context) ?? value;
1489
+ }
1490
+ if (column.headerRenderer) {
1491
+ return column.headerRenderer(context);
1492
+ }
1493
+ return value;
1494
+ }
1485
1495
  const eventPathIncludesClass = React.useCallback((event, className2) => {
1486
1496
  const eventPath = typeof event.composedPath === "function" ? event.composedPath() : event.target ? [event.target] : [];
1487
1497
  return eventPath.some((target) => {
@@ -1786,416 +1796,305 @@ function UiGrid({
1786
1796
  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z" }) });
1787
1797
  }
1788
1798
  }
1789
- return /* @__PURE__ */ jsx("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ jsxs("section", { className: "grid-shell ui-grid-shell", "data-part": "shell", children: [
1790
- /* @__PURE__ */ jsxs("header", { className: "grid-hero ui-grid-toolbar-shell", "data-part": "hero", children: [
1791
- /* @__PURE__ */ jsxs("div", { children: [
1792
- /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "React wrapper for @ornery/ui-grid" }),
1793
- /* @__PURE__ */ jsx("h1", { children: options.title ?? "UI Grid" }),
1794
- /* @__PURE__ */ jsx("p", { className: "deck", children: "Familiar `gridOptions` and `onRegisterApi`, built with React hooks, virtualization, grouping, sorting, filtering, and column ordering." })
1795
- ] }),
1796
- /* @__PURE__ */ jsxs("div", { className: "hero-actions", children: [
1797
- /* @__PURE__ */ jsx(
1798
- "button",
1799
- {
1800
- type: "button",
1801
- className: "action action-secondary",
1802
- "data-part": "action benchmark-action",
1803
- onClick: () => state.runBenchmark(),
1804
- children: "Benchmark"
1805
- }
1806
- ),
1807
- csvExportFeature && /* @__PURE__ */ jsx(
1808
- "button",
1799
+ return /* @__PURE__ */ jsx("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ jsxs(
1800
+ "section",
1801
+ {
1802
+ className: "grid-frame ui-grid",
1803
+ "data-part": "grid-frame",
1804
+ role: "grid",
1805
+ "aria-label": options.title ?? "Data grid",
1806
+ children: [
1807
+ /* @__PURE__ */ jsxs(
1808
+ "div",
1809
1809
  {
1810
- type: "button",
1811
- className: "action action-secondary",
1812
- "data-part": "action export-action",
1813
- onClick: () => state.exportCsv(),
1814
- children: "Export CSV"
1815
- }
1816
- ),
1817
- /* @__PURE__ */ jsxs("div", { className: "stats-card", "data-part": "stats-card", children: [
1818
- /* @__PURE__ */ jsx("span", { children: visibleRowCount }),
1819
- /* @__PURE__ */ jsx("small", { children: labels.statsVisibleRows })
1820
- ] })
1821
- ] })
1822
- ] }),
1823
- /* @__PURE__ */ jsxs(
1824
- "section",
1825
- {
1826
- className: "metrics-strip",
1827
- "data-part": "metrics",
1828
- "aria-label": "Grid performance metrics",
1829
- children: [
1830
- /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
1831
- /* @__PURE__ */ jsxs("strong", { children: [
1832
- pipelineMs.toFixed(2),
1833
- " ms"
1834
- ] }),
1835
- /* @__PURE__ */ jsx("span", { children: "pipeline" })
1836
- ] }),
1837
- /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
1838
- /* @__PURE__ */ jsx("strong", { children: virtualizationEnabled ? "On" : "Off" }),
1839
- /* @__PURE__ */ jsx("span", { children: "virtualization" })
1840
- ] }),
1841
- /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
1842
- /* @__PURE__ */ jsx("strong", { children: state.groupByColumns.length }),
1843
- /* @__PURE__ */ jsx("span", { children: "group columns" })
1844
- ] }),
1845
- /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
1846
- /* @__PURE__ */ jsx("strong", { children: benchmarkResult?.averageMs?.toFixed(2) || "\u2014" }),
1847
- /* @__PURE__ */ jsx("span", { children: "benchmark avg" })
1848
- ] })
1849
- ]
1850
- }
1851
- ),
1852
- /* @__PURE__ */ jsxs(
1853
- "section",
1854
- {
1855
- className: "grid-frame ui-grid",
1856
- "data-part": "grid-frame",
1857
- role: "grid",
1858
- "aria-label": options.title ?? "Data grid",
1859
- children: [
1860
- /* @__PURE__ */ jsxs("div", { className: "grid-toolbar", "data-part": "grid-toolbar", children: [
1861
- /* @__PURE__ */ jsxs("div", { children: [
1862
- /* @__PURE__ */ jsx("strong", { children: visibleRowCount }),
1863
- /* @__PURE__ */ jsxs("span", { children: [
1864
- labels.toolbarOf,
1865
- " ",
1866
- totalRows,
1867
- " ",
1868
- labels.toolbarRows
1869
- ] })
1870
- ] }),
1871
- /* @__PURE__ */ jsx("p", { children: "`gridOptions` compatibility layer: sorting, filtering, grouping, column moving, templating, and virtualized rendering." })
1872
- ] }),
1873
- /* @__PURE__ */ jsxs(
1874
- "div",
1875
- {
1876
- className: "grid-table ui-grid-contents-wrapper",
1877
- "data-part": "grid-table",
1878
- style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
1879
- onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
1880
- children: [
1881
- /* @__PURE__ */ jsx(
1882
- "div",
1883
- {
1884
- className: "header-grid ui-grid-header ui-grid-header-canvas",
1885
- "data-part": "header",
1886
- role: "row",
1887
- ref: headerGridRef,
1888
- style: { gridTemplateColumns },
1889
- children: visibleColumns.map((column) => {
1890
- const pinned = state.isPinned(column);
1891
- const pinOffset = pinned ? state.pinnedOffset(column) : null;
1892
- const pinMenuOpen = isPinMenuOpen(column);
1893
- return /* @__PURE__ */ jsxs(
1894
- "div",
1895
- {
1896
- 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" : ""}`,
1897
- "data-part": "header-cell",
1898
- role: "columnheader",
1899
- "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
1900
- draggable: columnMovingFeature,
1901
- onDragStart: (event) => handleHeaderDragStart(column, event),
1902
- onDragOver: (event) => handleHeaderDragOver(column, event),
1903
- onDrop: (event) => handleHeaderDrop(column, event),
1904
- onDragEnd: handleHeaderDragEnd,
1905
- onDragLeave: () => {
1906
- if (dropTargetColumnName === column.name) {
1907
- setDropTargetColumnName(null);
1908
- }
1909
- },
1910
- style: {
1911
- position: pinned ? "sticky" : void 0,
1912
- left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1913
- right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1914
- zIndex: pinMenuOpen ? 8 : pinned ? 2 : void 0
1915
- },
1916
- children: [
1917
- /* @__PURE__ */ jsx("span", { className: "header-label", children: state.headerLabel(column) }),
1918
- /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
1919
- sortingFeature && /* @__PURE__ */ jsxs(
1920
- "button",
1921
- {
1922
- type: "button",
1923
- className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
1924
- disabled: !state.isColumnSortable(column),
1925
- "aria-label": state.sortButtonLabel(column),
1926
- title: state.sortButtonLabel(column),
1927
- onClick: () => state.toggleSort(column),
1928
- children: [
1929
- renderSortIcon(column),
1930
- /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
1931
- ]
1932
- }
1933
- ),
1934
- groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ jsxs(
1935
- "button",
1936
- {
1937
- type: "button",
1938
- className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
1939
- "data-part": "group-toggle",
1940
- "aria-label": state.groupingButtonLabel(column),
1941
- title: state.groupingButtonLabel(column),
1942
- onClick: (e) => state.toggleGrouping(column, e),
1943
- children: [
1944
- /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
1945
- /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
1946
- ]
1947
- }
1948
- ),
1949
- state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ jsxs(
1950
- "div",
1951
- {
1952
- className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`,
1953
- onClick: (event) => event.stopPropagation(),
1954
- children: [
1955
- /* @__PURE__ */ jsxs(
1956
- "button",
1957
- {
1958
- type: "button",
1959
- className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
1960
- "data-part": "pin-toggle",
1961
- "aria-label": pinButtonLabel(column),
1962
- title: pinButtonLabel(column),
1963
- "aria-haspopup": pinned ? void 0 : "menu",
1964
- "aria-expanded": pinned ? void 0 : pinMenuOpen,
1965
- onClick: (event) => onPinTrigger(column, event),
1966
- children: [
1967
- /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
1968
- /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: pinButtonLabel(column) })
1969
- ]
1970
- }
1971
- ),
1972
- /* @__PURE__ */ jsxs(
1973
- "div",
1974
- {
1975
- className: "pin-menu",
1976
- "data-part": "pin-menu",
1977
- role: "menu",
1978
- "aria-label": "Pin options",
1979
- "aria-hidden": !pinMenuOpen,
1980
- children: [
1981
- /* @__PURE__ */ jsxs(
1982
- "button",
1983
- {
1984
- type: "button",
1985
- className: "pin-menu-action",
1986
- "data-part": "pin-left-action",
1987
- role: "menuitem",
1988
- "aria-label": labels.pinLeft,
1989
- title: labels.pinLeft,
1990
- tabIndex: pinMenuOpen ? 0 : -1,
1991
- onClick: (event) => choosePinDirection(column, "left", event),
1992
- children: [
1993
- /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
1994
- /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
1995
- ]
1996
- }
1997
- ),
1998
- /* @__PURE__ */ jsxs(
1999
- "button",
2000
- {
2001
- type: "button",
2002
- className: "pin-menu-action",
2003
- "data-part": "pin-right-action",
2004
- role: "menuitem",
2005
- "aria-label": labels.pinRight,
2006
- title: labels.pinRight,
2007
- tabIndex: pinMenuOpen ? 0 : -1,
2008
- onClick: (event) => choosePinDirection(column, "right", event),
2009
- children: [
2010
- /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
2011
- /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
2012
- ]
2013
- }
2014
- )
2015
- ]
2016
- }
2017
- )
2018
- ]
2019
- }
2020
- )
2021
- ] })
2022
- ]
1810
+ className: "grid-table ui-grid-contents-wrapper",
1811
+ "data-part": "grid-table",
1812
+ style: virtualizationEnabled ? { height: scrollContainerHeight, overflowY: "auto" } : void 0,
1813
+ onScroll: virtualizationEnabled ? onGridTableScroll : void 0,
1814
+ children: [
1815
+ /* @__PURE__ */ jsx(
1816
+ "div",
1817
+ {
1818
+ className: "header-grid ui-grid-header ui-grid-header-canvas",
1819
+ "data-part": "header",
1820
+ role: "row",
1821
+ ref: headerGridRef,
1822
+ style: { gridTemplateColumns },
1823
+ children: visibleColumns.map((column) => {
1824
+ const pinned = state.isPinned(column);
1825
+ const pinOffset = pinned ? state.pinnedOffset(column) : null;
1826
+ const pinMenuOpen = isPinMenuOpen(column);
1827
+ return /* @__PURE__ */ jsxs(
1828
+ "div",
1829
+ {
1830
+ 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" : ""}`,
1831
+ "data-part": "header-cell",
1832
+ role: "columnheader",
1833
+ "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
1834
+ draggable: columnMovingFeature,
1835
+ onDragStart: (event) => handleHeaderDragStart(column, event),
1836
+ onDragOver: (event) => handleHeaderDragOver(column, event),
1837
+ onDrop: (event) => handleHeaderDrop(column, event),
1838
+ onDragEnd: handleHeaderDragEnd,
1839
+ onDragLeave: () => {
1840
+ if (dropTargetColumnName === column.name) {
1841
+ setDropTargetColumnName(null);
1842
+ }
2023
1843
  },
2024
- column.name
2025
- );
2026
- })
2027
- }
2028
- ),
2029
- filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ jsx(
2030
- "div",
2031
- {
2032
- className: "filter-grid ui-grid-header",
2033
- "data-part": "filters",
2034
- ref: filterGridRef,
2035
- style: {
2036
- gridTemplateColumns,
2037
- ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px`
2038
- },
2039
- children: visibleColumns.map((column) => {
2040
- const pinned = state.isPinned(column);
2041
- const pinOffset = pinned ? state.pinnedOffset(column) : null;
2042
- return /* @__PURE__ */ jsxs(
2043
- "label",
2044
- {
2045
- className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
2046
- "data-part": "filter-cell",
2047
- style: {
2048
- position: pinned ? "sticky" : void 0,
2049
- left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
2050
- right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
2051
- zIndex: pinned ? 2 : void 0
2052
- },
2053
- children: [
2054
- /* @__PURE__ */ jsxs("span", { className: "sr-only ui-grid-sr-only", children: [
2055
- labels.filterColumn,
2056
- " ",
2057
- state.headerLabel(column)
2058
- ] }),
2059
- /* @__PURE__ */ jsx(
2060
- "input",
1844
+ style: {
1845
+ position: pinned ? "sticky" : void 0,
1846
+ left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1847
+ right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1848
+ zIndex: pinMenuOpen ? 8 : pinned ? 2 : void 0
1849
+ },
1850
+ children: [
1851
+ /* @__PURE__ */ jsx("span", { className: "header-label", children: renderHeaderContent(column) }),
1852
+ /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
1853
+ sortingFeature && /* @__PURE__ */ jsxs(
1854
+ "button",
1855
+ {
1856
+ type: "button",
1857
+ className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
1858
+ disabled: !state.isColumnSortable(column),
1859
+ "aria-label": state.sortButtonLabel(column),
1860
+ title: state.sortButtonLabel(column),
1861
+ onClick: () => state.toggleSort(column),
1862
+ children: [
1863
+ renderSortIcon(column),
1864
+ /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
1865
+ ]
1866
+ }
1867
+ ),
1868
+ groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ jsxs(
1869
+ "button",
1870
+ {
1871
+ type: "button",
1872
+ className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
1873
+ "data-part": "group-toggle",
1874
+ "aria-label": state.groupingButtonLabel(column),
1875
+ title: state.groupingButtonLabel(column),
1876
+ onClick: (e) => state.toggleGrouping(column, e),
1877
+ children: [
1878
+ /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
1879
+ /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
1880
+ ]
1881
+ }
1882
+ ),
1883
+ state.pinningFeature && state.isPinningEnabled() && state.isColumnPinnable(column) && /* @__PURE__ */ jsxs(
1884
+ "div",
2061
1885
  {
2062
- className: "ui-grid-filter-input",
2063
- type: "text",
2064
- defaultValue: state.filterValue(column.name),
2065
- placeholder: state.filterPlaceholder(column),
2066
- disabled: state.isFilterInputDisabled(column),
2067
- onChange: (e) => state.updateFilter(column.name, e.target.value)
1886
+ className: `pin-control${pinMenuOpen ? " pin-control-open" : ""}`,
1887
+ onClick: (event) => event.stopPropagation(),
1888
+ children: [
1889
+ /* @__PURE__ */ jsxs(
1890
+ "button",
1891
+ {
1892
+ type: "button",
1893
+ className: `chip-action pin-trigger${pinned || pinMenuOpen ? " chip-action-active" : ""}`,
1894
+ "data-part": "pin-toggle",
1895
+ "aria-label": pinButtonLabel(column),
1896
+ title: pinButtonLabel(column),
1897
+ "aria-haspopup": pinned ? void 0 : "menu",
1898
+ "aria-expanded": pinned ? void 0 : pinMenuOpen,
1899
+ onClick: (event) => onPinTrigger(column, event),
1900
+ children: [
1901
+ /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" }) }),
1902
+ /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: pinButtonLabel(column) })
1903
+ ]
1904
+ }
1905
+ ),
1906
+ /* @__PURE__ */ jsxs(
1907
+ "div",
1908
+ {
1909
+ className: "pin-menu",
1910
+ "data-part": "pin-menu",
1911
+ role: "menu",
1912
+ "aria-label": "Pin options",
1913
+ "aria-hidden": !pinMenuOpen,
1914
+ children: [
1915
+ /* @__PURE__ */ jsxs(
1916
+ "button",
1917
+ {
1918
+ type: "button",
1919
+ className: "pin-menu-action",
1920
+ "data-part": "pin-left-action",
1921
+ role: "menuitem",
1922
+ "aria-label": labels.pinLeft,
1923
+ title: labels.pinLeft,
1924
+ tabIndex: pinMenuOpen ? 0 : -1,
1925
+ onClick: (event) => choosePinDirection(column, "left", event),
1926
+ children: [
1927
+ /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M10 6 4 12l6 6v-4h10v-4H10V6z" }) }),
1928
+ /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinLeft })
1929
+ ]
1930
+ }
1931
+ ),
1932
+ /* @__PURE__ */ jsxs(
1933
+ "button",
1934
+ {
1935
+ type: "button",
1936
+ className: "pin-menu-action",
1937
+ "data-part": "pin-right-action",
1938
+ role: "menuitem",
1939
+ "aria-label": labels.pinRight,
1940
+ title: labels.pinRight,
1941
+ tabIndex: pinMenuOpen ? 0 : -1,
1942
+ onClick: (event) => choosePinDirection(column, "right", event),
1943
+ children: [
1944
+ /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M14 6v4H4v4h10v4l6-6-6-6z" }) }),
1945
+ /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: labels.pinRight })
1946
+ ]
1947
+ }
1948
+ )
1949
+ ]
1950
+ }
1951
+ )
1952
+ ]
2068
1953
  }
2069
1954
  )
2070
- ]
2071
- },
2072
- column.name
2073
- );
2074
- })
2075
- }
2076
- ),
2077
- displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ jsx(
2078
- "div",
2079
- {
2080
- className: "grid-virtual-spacer",
2081
- style: { height: `${virtualScroll.totalHeight}px` },
2082
- children: /* @__PURE__ */ jsx(
2083
- "div",
1955
+ ] })
1956
+ ]
1957
+ },
1958
+ column.name
1959
+ );
1960
+ })
1961
+ }
1962
+ ),
1963
+ filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ jsx(
1964
+ "div",
1965
+ {
1966
+ className: "filter-grid ui-grid-header",
1967
+ "data-part": "filters",
1968
+ ref: filterGridRef,
1969
+ style: {
1970
+ gridTemplateColumns,
1971
+ ["--ui-grid-header-sticky-top"]: `${headerStickyHeight}px`
1972
+ },
1973
+ children: visibleColumns.map((column) => {
1974
+ const pinned = state.isPinned(column);
1975
+ const pinOffset = pinned ? state.pinnedOffset(column) : null;
1976
+ return /* @__PURE__ */ jsxs(
1977
+ "label",
2084
1978
  {
2085
- className: "body-grid ui-grid-canvas grid-virtual-body",
2086
- "data-part": "body",
2087
- role: "rowgroup",
1979
+ className: `filter-cell ui-grid-filter-container${pinned ? " is-pinned" : ""}`,
1980
+ "data-part": "filter-cell",
2088
1981
  style: {
2089
- gridTemplateColumns,
2090
- position: "absolute",
2091
- top: `${virtualScroll.offsetY}px`,
2092
- left: 0
1982
+ position: pinned ? "sticky" : void 0,
1983
+ left: pinOffset?.side === "left" ? pinOffset.offset : void 0,
1984
+ right: pinOffset?.side === "right" ? pinOffset.offset : void 0,
1985
+ zIndex: pinned ? 2 : void 0
2093
1986
  },
2094
- children: itemsToRender.map(renderDisplayItem)
2095
- }
2096
- )
2097
- }
2098
- ) : /* @__PURE__ */ jsx(
2099
- "div",
1987
+ children: [
1988
+ /* @__PURE__ */ jsxs("span", { className: "sr-only ui-grid-sr-only", children: [
1989
+ labels.filterColumn,
1990
+ " ",
1991
+ state.headerLabel(column)
1992
+ ] }),
1993
+ /* @__PURE__ */ jsx(
1994
+ "input",
1995
+ {
1996
+ className: "ui-grid-filter-input",
1997
+ type: "text",
1998
+ defaultValue: state.filterValue(column.name),
1999
+ placeholder: state.filterPlaceholder(column),
2000
+ disabled: state.isFilterInputDisabled(column),
2001
+ onChange: (e) => state.updateFilter(column.name, e.target.value)
2002
+ }
2003
+ )
2004
+ ]
2005
+ },
2006
+ column.name
2007
+ );
2008
+ })
2009
+ }
2010
+ ),
2011
+ displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ jsx("div", { className: "grid-virtual-spacer", style: { height: `${virtualScroll.totalHeight}px` }, children: /* @__PURE__ */ jsx(
2012
+ "div",
2013
+ {
2014
+ className: "body-grid ui-grid-canvas grid-virtual-body",
2015
+ "data-part": "body",
2016
+ role: "rowgroup",
2017
+ style: {
2018
+ gridTemplateColumns,
2019
+ position: "absolute",
2020
+ top: `${virtualScroll.offsetY}px`,
2021
+ left: 0
2022
+ },
2023
+ children: itemsToRender.map(renderDisplayItem)
2024
+ }
2025
+ ) }) : /* @__PURE__ */ jsx("div", { className: "body-grid ui-grid-canvas", "data-part": "body", role: "rowgroup", style: { gridTemplateColumns }, children: displayItems.map(renderDisplayItem) }) : /* @__PURE__ */ jsxs("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
2026
+ /* @__PURE__ */ jsx("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
2027
+ /* @__PURE__ */ jsx("p", { children: labels.emptyDescription })
2028
+ ] })
2029
+ ]
2030
+ }
2031
+ ),
2032
+ paginationFeature && state.showPaginationControls() && /* @__PURE__ */ jsxs(
2033
+ "footer",
2034
+ {
2035
+ className: "pagination-bar ui-grid-pagination",
2036
+ "data-part": "pagination",
2037
+ role: "navigation",
2038
+ "aria-label": labels.paginationPage,
2039
+ children: [
2040
+ /* @__PURE__ */ jsx("p", { children: state.paginationSummary() }),
2041
+ /* @__PURE__ */ jsxs("div", { className: "pagination-controls", children: [
2042
+ /* @__PURE__ */ jsxs(
2043
+ "button",
2100
2044
  {
2101
- className: "body-grid ui-grid-canvas",
2102
- "data-part": "body",
2103
- role: "rowgroup",
2104
- style: { gridTemplateColumns },
2105
- children: displayItems.map(renderDisplayItem)
2045
+ type: "button",
2046
+ className: "action action-secondary pagination-button",
2047
+ "aria-label": labels.paginationPrevious,
2048
+ disabled: paginationCurrentPage <= 1,
2049
+ onClick: () => state.previousPage(),
2050
+ children: [
2051
+ /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
2052
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationPrevious })
2053
+ ]
2106
2054
  }
2107
- ) : /* @__PURE__ */ jsxs("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
2108
- /* @__PURE__ */ jsx("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
2109
- /* @__PURE__ */ jsx("p", { children: labels.emptyDescription })
2055
+ ),
2056
+ /* @__PURE__ */ jsxs("span", { children: [
2057
+ labels.paginationPage,
2058
+ " ",
2059
+ paginationCurrentPage,
2060
+ " ",
2061
+ labels.paginationOf,
2062
+ " ",
2063
+ paginationTotalPages
2110
2064
  ] }),
2111
- paginationFeature && state.showPaginationControls() && /* @__PURE__ */ jsxs(
2112
- "footer",
2065
+ /* @__PURE__ */ jsxs(
2066
+ "button",
2113
2067
  {
2114
- className: "pagination-bar ui-grid-pagination",
2115
- "data-part": "pagination",
2116
- role: "navigation",
2117
- "aria-label": labels.paginationPage,
2068
+ type: "button",
2069
+ className: "action action-secondary pagination-button",
2070
+ "aria-label": labels.paginationNext,
2071
+ disabled: paginationCurrentPage >= paginationTotalPages,
2072
+ onClick: () => state.nextPage(),
2118
2073
  children: [
2119
- /* @__PURE__ */ jsx("p", { children: state.paginationSummary() }),
2120
- /* @__PURE__ */ jsxs("div", { className: "pagination-controls", children: [
2121
- /* @__PURE__ */ jsxs(
2122
- "button",
2123
- {
2124
- type: "button",
2125
- className: "action action-secondary pagination-button",
2126
- "aria-label": labels.paginationPrevious,
2127
- disabled: paginationCurrentPage <= 1,
2128
- onClick: () => state.previousPage(),
2129
- children: [
2130
- /* @__PURE__ */ jsx(
2131
- "svg",
2132
- {
2133
- className: "pagination-icon",
2134
- viewBox: "0 0 24 24",
2135
- "aria-hidden": "true",
2136
- focusable: false,
2137
- children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" })
2138
- }
2139
- ),
2140
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationPrevious })
2141
- ]
2142
- }
2143
- ),
2144
- /* @__PURE__ */ jsxs("span", { children: [
2145
- labels.paginationPage,
2146
- " ",
2147
- paginationCurrentPage,
2148
- " ",
2149
- labels.paginationOf,
2150
- " ",
2151
- paginationTotalPages
2152
- ] }),
2153
- /* @__PURE__ */ jsxs(
2154
- "button",
2155
- {
2156
- type: "button",
2157
- className: "action action-secondary pagination-button",
2158
- "aria-label": labels.paginationNext,
2159
- disabled: paginationCurrentPage >= paginationTotalPages,
2160
- onClick: () => state.nextPage(),
2161
- children: [
2162
- /* @__PURE__ */ jsx(
2163
- "svg",
2164
- {
2165
- className: "pagination-icon",
2166
- viewBox: "0 0 24 24",
2167
- "aria-hidden": "true",
2168
- focusable: false,
2169
- children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" })
2170
- }
2171
- ),
2172
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationNext })
2173
- ]
2174
- }
2175
- ),
2176
- state.pageSizeOptions().length > 0 && /* @__PURE__ */ jsxs("label", { className: "pagination-size", children: [
2177
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationRows }),
2178
- /* @__PURE__ */ jsx(
2179
- "select",
2180
- {
2181
- "aria-label": labels.paginationRows,
2182
- value: paginationSelectedPageSize,
2183
- onChange: (e) => state.onPageSizeChange(e.target.value),
2184
- children: state.pageSizeOptions().map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
2185
- }
2186
- )
2187
- ] })
2188
- ] })
2074
+ /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }),
2075
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationNext })
2189
2076
  ]
2190
2077
  }
2191
- )
2192
- ]
2193
- }
2194
- )
2195
- ]
2196
- }
2197
- )
2198
- ] }) });
2078
+ ),
2079
+ state.pageSizeOptions().length > 0 && /* @__PURE__ */ jsxs("label", { className: "pagination-size", children: [
2080
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationRows }),
2081
+ /* @__PURE__ */ jsx(
2082
+ "select",
2083
+ {
2084
+ "aria-label": labels.paginationRows,
2085
+ value: paginationSelectedPageSize,
2086
+ onChange: (e) => state.onPageSizeChange(e.target.value),
2087
+ children: state.pageSizeOptions().map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
2088
+ }
2089
+ )
2090
+ ] })
2091
+ ] })
2092
+ ]
2093
+ }
2094
+ )
2095
+ ]
2096
+ }
2097
+ ) });
2199
2098
  }
2200
2099
 
2201
2100
  // src/mountUiGrid.tsx
@@ -2206,6 +2105,16 @@ function mountUiGrid(container, props) {
2206
2105
  root.render(React2.createElement(UiGrid, props));
2207
2106
  return root;
2208
2107
  }
2108
+ function updateUiGrid(root, props) {
2109
+ root.render(React2.createElement(UiGrid, props));
2110
+ }
2111
+ function styledCell(text, color, extraStyle) {
2112
+ return React2.createElement(
2113
+ "span",
2114
+ { style: { color, fontVariantNumeric: "tabular-nums", ...extraStyle } },
2115
+ text
2116
+ );
2117
+ }
2209
2118
 
2210
2119
  // src/vanillaAdapter.ts
2211
2120
  async function mountUiGridCustomElement(container, mountOptions) {
@@ -2261,6 +2170,8 @@ export {
2261
2170
  orderVisibleColumns,
2262
2171
  registerReactUiGridWasmEngineFromModule,
2263
2172
  resolveBenchmarkIterations,
2173
+ styledCell,
2174
+ updateUiGrid,
2264
2175
  useGridState,
2265
2176
  useVirtualScroll
2266
2177
  };