@salt-ds/data-grid 0.0.0-snapshot-20230620094559

package/dist-cjs/internal/TableBody.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var TableRow = require('./TableRow.js');
+var utils = require('./utils.js');
+var SelectionContext = require('../SelectionContext.js');
+var EditorContext = require('../EditorContext.js');
+var CursorContext = require('../CursorContext.js');
+
+function TableBody(props) {
+  const {
+    columns,
+    rows,
+    hoverRowKey,
+    setHoverRowKey,
+    gap,
+    zebra,
+    getRowValidationStatus
+  } = props;
+  const { selRowIdxs, selectedCellRange } = SelectionContext.useSelectionContext();
+  const isCellInSelectedRange = react.useCallback(
+    (rowIdx, colIdx) => {
+      if (!selectedCellRange) {
+        return false;
+      }
+      const { start, end } = selectedCellRange;
+      const minRowIdx = Math.min(start.rowIdx, end.rowIdx);
+      const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);
+      const minColIdx = Math.min(start.colIdx, end.colIdx);
+      const maxColIdx = Math.max(start.colIdx, end.colIdx);
+      return rowIdx >= minRowIdx && rowIdx <= maxRowIdx && colIdx >= minColIdx && colIdx <= maxColIdx;
+    },
+    [selectedCellRange]
+  );
+  const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } = CursorContext.useCursorContext();
+  const { editMode, startEditMode } = EditorContext.useEditorContext();
+  const onRowMouseEnter = (event) => {
+    const target = event.currentTarget;
+    const rowKey = utils.getRowKeyAttribute(target);
+    setHoverRowKey(rowKey);
+  };
+  const onMouseLeave = (event) => {
+    setHoverRowKey(void 0);
+  };
+  const onDoubleClick = (event) => {
+    startEditMode();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", {
+    onMouseLeave,
+    onDoubleClick,
+    children: rows.map((row) => {
+      const isSelected = selRowIdxs.has(row.index);
+      const cursorIdx = focusedPart === "body" && cursorRowIdx === row.index ? cursorColIdx : void 0;
+      const editorColIdx = editMode ? cursorIdx : void 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(TableRow.TableRow, {
+        row,
+        onMouseEnter: onRowMouseEnter,
+        columns,
+        isHoverOver: row.key === hoverRowKey,
+        isSelected,
+        cursorColIdx: cursorIdx,
+        gap,
+        zebra: zebra && row.index % 2 == 0,
+        editorColIdx,
+        isCellSelected: isCellInSelectedRange,
+        headerIsFocusable,
+        validationStatus: getRowValidationStatus ? getRowValidationStatus(row) : void 0
+      }, row.key);
+    })
+  });
+}
+
+exports.TableBody = TableBody;
+//# sourceMappingURL=TableBody.js.map

package/dist-cjs/internal/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverRowKey?: string;\n  setHoverRowKey: (key: string | undefined) => void;\n  gap?: number;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n  const {\n    columns,\n    rows,\n    hoverRowKey,\n    setHoverRowKey,\n    gap,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n  const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n  const isCellInSelectedRange = useCallback(\n    (rowIdx: number, colIdx: number) => {\n      if (!selectedCellRange) {\n        return false;\n      }\n      const { start, end } = selectedCellRange;\n      const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n      const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n      const minColIdx = Math.min(start.colIdx, end.colIdx);\n      const maxColIdx = Math.max(start.colIdx, end.colIdx);\n      return (\n        rowIdx >= minRowIdx &&\n        rowIdx <= maxRowIdx &&\n        colIdx >= minColIdx &&\n        colIdx <= maxColIdx\n      );\n    },\n    [selectedCellRange]\n  );\n\n  const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n    useCursorContext();\n\n  const { editMode, startEditMode } = useEditorContext();\n\n  const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n    const target = event.currentTarget as HTMLElement;\n    const rowKey = getRowKeyAttribute(target);\n    setHoverRowKey(rowKey);\n  };\n\n  const onMouseLeave: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n    setHoverRowKey(undefined);\n  };\n\n  const onDoubleClick: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n    startEditMode();\n  };\n\n  return (\n    <tbody onMouseLeave={onMouseLeave} onDoubleClick={onDoubleClick}>\n      {rows.map((row) => {\n        const isSelected = selRowIdxs.has(row.index);\n        const cursorIdx =\n          focusedPart === \"body\" && cursorRowIdx === row.index\n            ? cursorColIdx\n            : undefined;\n        const editorColIdx = editMode ? cursorIdx : undefined;\n        return (\n          <TableRow\n            key={row.key}\n            row={row}\n            onMouseEnter={onRowMouseEnter}\n            columns={columns}\n            isHoverOver={row.key === hoverRowKey}\n            isSelected={isSelected}\n            cursorColIdx={cursorIdx}\n            gap={gap}\n            zebra={zebra && row.index % 2 == 0}\n            editorColIdx={editorColIdx}\n            isCellSelected={isCellInSelectedRange}\n            headerIsFocusable={headerIsFocusable}\n            validationStatus={\n              getRowValidationStatus ? getRowValidationStatus(row) : undefined\n            }\n          />\n        );\n      })}\n    </tbody>\n  );\n}\n"],"names":["useSelectionContext","useCallback","useCursorContext","useEditorContext","getRowKeyAttribute","jsx","TableRow"],"mappings":"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"}

package/dist-cjs/internal/TableColGroup.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function TableColGroup(props) {
+  const { columns, gap } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("colgroup", {
+    children: [
+      columns.map((column) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(TableCol, {
+          width: column.info.width
+        }, column.info.props.id);
+      }),
+      gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableCol, {
+        width: gap
+      }, "__gap") : null
+    ]
+  });
+}
+function TableCol(props) {
+  const { width } = props;
+  const style = react.useMemo(() => {
+    return {
+      width: `${width}px`
+    };
+  }, [width]);
+  return /* @__PURE__ */ jsxRuntime.jsx("col", {
+    style
+  });
+}
+
+exports.TableCol = TableCol;
+exports.TableColGroup = TableColGroup;
+//# sourceMappingURL=TableColGroup.js.map

package/dist-cjs/internal/TableColGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColGroup.js","sources":["../src/internal/TableColGroup.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { GridColumnModel } from \"../Grid\";\n\nexport interface TableColGroupProps<T> {\n  columns: GridColumnModel<T>[];\n  gap?: number;\n}\n\nexport interface TableColProps<T> {\n  width: number;\n}\n\n// Controls column widths.\nexport function TableColGroup<T>(props: TableColGroupProps<T>) {\n  const { columns, gap } = props;\n  return (\n    <colgroup>\n      {columns.map((column) => {\n        return (\n          <TableCol key={column.info.props.id} width={column.info.width} />\n        );\n      })}\n      {gap !== undefined && gap > 0 ? (\n        <TableCol key=\"__gap\" width={gap} />\n      ) : null}\n    </colgroup>\n  );\n}\n\nexport function TableCol<T>(props: TableColProps<T>) {\n  const { width } = props;\n  const style = useMemo(() => {\n    return {\n      width: `${width}px`,\n    };\n  }, [width]);\n  return <col style={style} />;\n}\n"],"names":["jsxs","jsx","useMemo"],"mappings":";;;;;;;AAaO,SAAS,cAAiB,KAA8B,EAAA;AAC7D,EAAM,MAAA,EAAE,OAAS,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AACzB,EAAA,uBACGA,eAAA,CAAA,UAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACvB,QAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,UAAoC,KAAA,EAAO,OAAO,IAAK,CAAA,KAAA;AAAA,SAAzC,EAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,EAA8B,CAAA,CAAA;AAAA,OAElE,CAAA;AAAA,MACA,GAAQ,KAAA,KAAA,CAAA,IAAa,GAAM,GAAA,CAAA,mBACzBA,cAAA,CAAA,QAAA,EAAA;AAAA,QAAqB,KAAO,EAAA,GAAA;AAAA,OAAA,EAAf,OAAoB,CAChC,GAAA,IAAA;AAAA,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAM,MAAA,KAAA,GAAQC,cAAQ,MAAM;AAC1B,IAAO,OAAA;AAAA,MACL,OAAO,CAAG,EAAA,KAAA,CAAA,EAAA,CAAA;AAAA,KACZ,CAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACV,EAAA,uBAAQD,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAA;AAAA,GAAc,CAAA,CAAA;AAC5B;;;;;"}

package/dist-cjs/internal/TableRow.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridTableRow {\n  height: var(--grid-row-height);\n  /* Row border doesn't render properly in Chrome on Windows. Applying borders to cells */\n  --grid-row-borderColor: var(--grid-rowSeparator-color);\n  --grid-row-background: var(--grid-background);\n}\n\n.saltGridTableRow-first {\n  height: calc(var(--grid-row-height) + 1px);\n}\n\n.saltGridTableRow th {\n  border-style: solid;\n  border-color: var(--grid-row-borderColor);\n  border-width: var(--grid-rowSeparator-width) 0 0 0;\n}\n\n.saltGridTableRow-divided {\n  --grid-row-borderColor: var(--grid-rowSeparator-color-divided);\n}\n\n.saltGridTableRow-zebra {\n  --grid-row-background: var(--grid-zebraColor);\n}\n\n.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-selected {\n  --grid-row-borderColor: var(--grid-row-borderColor-selected);\n  --grid-row-background: var(--grid-row-background-selected);\n}\n\n.saltGridTableRow-selected .saltGridCell:before {\n  content: \"\";\n  position: absolute;\n  top: -1px;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--grid-row-borderColor);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-selected {\n  --grid-row-background: var(--grid-row-background-selected);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-selected.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-selected.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-validationStatus-error,\n.saltGridTableRow-validationStatus-error.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-error-background-emphasize);\n}\n.saltGridTableRow-validationStatus-warning,\n.saltGridTableRow-validationStatus-warning.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-warning-background-emphasize);\n}\n.saltGridTableRow-validationStatus-success,\n.saltGridTableRow-validationStatus-success.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-success-background-emphasize);\n}\n\n.saltGridTableRow-validationStatus-error.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-error-background-selected);\n  --grid-row-borderColor: var(--salt-status-error-borderColor);\n}\n.saltGridTableRow-validationStatus-warning.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-warning-background-selected);\n  --grid-row-borderColor: var(--salt-status-warning-borderColor);\n}\n.saltGridTableRow-validationStatus-success.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-success-background-selected);\n  --grid-row-borderColor: var(--salt-status-success-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TableRow.css.js.map

package/dist-cjs/internal/TableRow.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/internal/TableRow.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('clsx');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
+var BaseCell = require('../BaseCell.js');
+var GridContext = require('../GridContext.js');
+var RowValidationStatus = require('../RowValidationStatus.js');
+var FakeCell = require('./FakeCell.js');
+var DefaultCellValue = require('./DefaultCellValue.js');
+var TableRow$1 = require('./TableRow.css.js');
+
+const withBaseName = core.makePrefixer("saltGridTableRow");
+function TableRow(props) {
+  const {
+    row,
+    isSelected,
+    zebra,
+    isHoverOver,
+    columns,
+    onMouseEnter,
+    onMouseLeave,
+    cursorColIdx,
+    gap,
+    editorColIdx,
+    isCellSelected,
+    headerIsFocusable,
+    validationStatus: rowValidationStatus
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-table-row",
+    css: TableRow$1,
+    window: targetWindow
+  });
+  const grid = GridContext.useGridContext();
+  if (!row.key) {
+    throw new Error(`Invalid row`);
+  }
+  const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", {
+    "aria-rowindex": ariaRowIndex,
+    "aria-selected": isSelected ? true : void 0,
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("zebra")]: zebra,
+      [withBaseName("hover")]: isHoverOver,
+      [withBaseName("selected")]: isSelected,
+      [withBaseName("first")]: row.index === 0,
+      [withBaseName(`validationStatus-${rowValidationStatus}`)]: rowValidationStatus
+    }),
+    onMouseEnter,
+    onMouseLeave,
+    "data-row-index": row.index,
+    "data-row-key": row.key,
+    role: "row",
+    children: [
+      columns.map((column, i) => {
+        var _a, _b, _c, _d;
+        const colKey = column.info.props.id;
+        const editorInfo = grid.getEditor(column.info.props.id);
+        const isEditable = !!editorInfo;
+        if (editorColIdx === column.index) {
+          if (isEditable) {
+            if (react.isValidElement(editorInfo.children)) {
+              const editorElement = react.Children.only(editorInfo.children);
+              return react.cloneElement(editorElement, {
+                key: colKey,
+                row,
+                column
+              });
+            }
+          }
+        }
+        const Cell = column.info.props.cellComponent || BaseCell.BaseCell;
+        const CellValue = column.info.props.cellValueComponent || DefaultCellValue.DefaultCellValue;
+        const value = column.info.props.getValue && row.data ? column.info.props.getValue(row.data) : null;
+        const isFocused = cursorColIdx === column.index;
+        const isSelected2 = isCellSelected && isCellSelected(row.index, column.index);
+        const validationFnArg = {
+          row,
+          column,
+          isFocused,
+          value
+        };
+        const validationStatus = (_b = (_a = column.info.props).getValidationStatus) == null ? void 0 : _b.call(_a, validationFnArg);
+        const validationMessage = validationStatus && ((_d = (_c = column.info.props).getValidationMessage) == null ? void 0 : _d.call(_c, validationFnArg));
+        return /* @__PURE__ */ jsxRuntime.jsx(RowValidationStatus.RowValidationStatusContext.Provider, {
+          value: { status: rowValidationStatus },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Cell, {
+            row,
+            column,
+            isFocused,
+            isSelected: isSelected2,
+            isEditable,
+            validationStatus,
+            validationMessage,
+            validationType: column.info.props.validationType,
+            value,
+            align: column.info.props.align,
+            children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, {
+              column,
+              row,
+              value,
+              isFocused,
+              validationStatus,
+              validationMessage,
+              validationType: column.info.props.validationType
+            })
+          }, colKey)
+        });
+      }),
+      gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FakeCell.FakeCell, {
+        row
+      }) : null
+    ]
+  });
+}
+
+exports.TableRow = TableRow;
+//# sourceMappingURL=TableRow.js.map

package/dist-cjs/internal/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  MouseEventHandler,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { BaseCell } from \"../BaseCell\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useGridContext } from \"../GridContext\";\nimport { CellValidationState } from \"../GridColumn\";\nimport { RowValidationStatusContext } from \"../RowValidationStatus\";\n\nimport { FakeCell } from \"./FakeCell\";\nimport { DefaultCellValue } from \"./DefaultCellValue\";\n\nimport tableRowCss from \"./TableRow.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n  row: GridRowModel<T>;\n  isSelected?: boolean;\n  isHoverOver?: boolean;\n  zebra?: boolean;\n  columns: GridColumnModel<T>[];\n  cursorColIdx?: number;\n  onMouseEnter?: MouseEventHandler<HTMLTableRowElement>;\n  onMouseLeave?: MouseEventHandler<HTMLTableRowElement>;\n  gap?: number;\n  editorColIdx?: number;\n  isCellSelected?: (rowIdx: number, colIdx: number) => boolean;\n  headerIsFocusable?: boolean;\n  validationStatus?: CellValidationState;\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  const {\n    row,\n    isSelected,\n    zebra,\n    isHoverOver,\n    columns,\n    onMouseEnter,\n    onMouseLeave,\n    cursorColIdx,\n    gap,\n    editorColIdx,\n    isCellSelected,\n    headerIsFocusable,\n    validationStatus: rowValidationStatus,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-row\",\n    css: tableRowCss,\n    window: targetWindow,\n  });\n\n  const grid = useGridContext();\n\n  if (!row.key) {\n    throw new Error(`Invalid row`);\n  }\n\n  const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;\n\n  return (\n    <tr\n      aria-rowindex={ariaRowIndex}\n      aria-selected={isSelected ? true : undefined}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"zebra\")]: zebra,\n        [withBaseName(\"hover\")]: isHoverOver,\n        [withBaseName(\"selected\")]: isSelected,\n        [withBaseName(\"first\")]: row.index === 0,\n        [withBaseName(`validationStatus-${rowValidationStatus}`)]:\n          rowValidationStatus,\n      })}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      data-row-index={row.index}\n      data-row-key={row.key}\n      role=\"row\"\n    >\n      {columns.map((column, i) => {\n        const colKey = column.info.props.id;\n        const editorInfo = grid.getEditor(column.info.props.id);\n        const isEditable = !!editorInfo;\n\n        if (editorColIdx === column.index) {\n          if (isEditable) {\n            if (isValidElement(editorInfo.children)) {\n              const editorElement = Children.only(editorInfo.children);\n              return cloneElement(editorElement, {\n                key: colKey,\n                row,\n                column,\n              } as any);\n            }\n          }\n        }\n\n        const Cell = column.info.props.cellComponent || BaseCell;\n        const CellValue =\n          column.info.props.cellValueComponent || DefaultCellValue;\n        const value =\n          column.info.props.getValue && row.data\n            ? column.info.props.getValue(row.data)\n            : null;\n        const isFocused = cursorColIdx === column.index;\n        const isSelected =\n          isCellSelected && isCellSelected(row.index, column.index);\n        const validationFnArg = {\n          row,\n          column,\n          isFocused,\n          value,\n        };\n        const validationStatus =\n          column.info.props.getValidationStatus?.(validationFnArg);\n        const validationMessage =\n          validationStatus &&\n          column.info.props.getValidationMessage?.(validationFnArg);\n\n        return (\n          <RowValidationStatusContext.Provider\n            value={{ status: rowValidationStatus }}\n          >\n            <Cell\n              key={colKey}\n              row={row}\n              column={column}\n              isFocused={isFocused}\n              isSelected={isSelected}\n              isEditable={isEditable}\n              validationStatus={validationStatus}\n              validationMessage={validationMessage}\n              validationType={column.info.props.validationType}\n              value={value}\n              align={column.info.props.align}\n            >\n              <CellValue\n                column={column}\n                row={row}\n                value={value}\n                isFocused={isFocused}\n                validationStatus={validationStatus}\n                validationMessage={validationMessage}\n                validationType={column.info.props.validationType}\n              />\n            </Cell>\n          </RowValidationStatusContext.Provider>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n    </tr>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tableRowCss","useGridContext","jsxs","clsx","isValidElement","Children","cloneElement","BaseCell","DefaultCellValue","isSelected","jsx","RowValidationStatusContext","FakeCell"],"mappings":"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"}

package/dist-cjs/internal/TopLeftPart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridTopLeftPart {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--grid-left-header-zIndex);\n}\n\n.saltGridTopLeftPart-rightShadow {\n  box-shadow: 2px 0 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px -10px 0 0);\n}\n\n.saltGridTopLeftPart-bottomShadow {\n  box-shadow: 0 2px 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px 0 -10px 0);\n}\n\n.saltGridTopLeftPart-rightShadow.saltGridTopLeftPart-bottomShadow {\n  box-shadow: 2px 2px 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px -10px -10px 0);\n}\n\n.saltGridTopLeftPart table {\n  table-layout: fixed;\n  width: var(--grid-leftPart-width);\n  height: var(--grid-topPart-height);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TopLeftPart.css.js.map

package/dist-cjs/internal/TopLeftPart.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopLeftPart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/internal/TopLeftPart.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var GroupHeaderRow = require('./GroupHeaderRow.js');
+var TableColGroup = require('./TableColGroup.js');
+var HeaderRow = require('./HeaderRow.js');
+var gridHooks = require('./gridHooks.js');
+var TopLeftPart$1 = require('./TopLeftPart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridTopLeftPart");
+function TopLeftPart(props) {
+  const { onWheel, columns, columnGroups, rightShadow, bottomShadow } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-top-left-part",
+    css: TopLeftPart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("rightShadow")]: rightShadow,
+      [withBaseName("bottomShadow")]: bottomShadow
+    }),
+    "data-testid": "grid-top-left-part",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+      ref: tableRef,
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+          columns
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("thead", {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GroupHeaderRow.GroupHeaderRow, {
+              groups: columnGroups
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(HeaderRow.HeaderRow, {
+              columns
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+exports.TopLeftPart = TopLeftPart;
+//# sourceMappingURL=TopLeftPart.js.map

package/dist-cjs/internal/TopLeftPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopLeftPart.js","sources":["../src/internal/TopLeftPart.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\n\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nimport topLeftPartCss from \"./TopLeftPart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTopLeftPart\");\n\nexport interface TopLeftPartProps<T> {\n  onWheel: EventListener;\n  columns: GridColumnModel<T>[];\n  columnGroups: GridColumnGroupModel[];\n  rightShadow?: boolean;\n  bottomShadow?: boolean;\n}\n\nexport function TopLeftPart<T>(props: TopLeftPartProps<T>) {\n  const { onWheel, columns, columnGroups, rightShadow, bottomShadow } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-top-left-part\",\n    css: topLeftPartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"rightShadow\")]: rightShadow,\n        [withBaseName(\"bottomShadow\")]: bottomShadow,\n      })}\n      data-testid=\"grid-top-left-part\"\n    >\n      <table ref={tableRef} role=\"presentation\">\n        <TableColGroup columns={columns} />\n        <thead>\n          <GroupHeaderRow groups={columnGroups} />\n          <HeaderRow columns={columns} />\n        </thead>\n      </table>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","topLeftPartCss","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAUhD,SAAS,YAAe,KAA4B,EAAA;AACzD,EAAA,MAAM,EAAE,OAAS,EAAA,OAAA,EAAS,YAAc,EAAA,WAAA,EAAa,cAAiB,GAAA,KAAA,CAAA;AAEtE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,aAAY,EAAA,oBAAA;AAAA,IAEZ,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,MAAM,GAAK,EAAA,QAAA;AAAA,MAAU,IAAK,EAAA,cAAA;AAAA,MACzB,QAAA,EAAA;AAAA,wBAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,UAAc,OAAA;AAAA,SAAkB,CAAA;AAAA,wBAChCD,eAAA,CAAA,OAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,cAAe,MAAQ,EAAA,YAAA;AAAA,aAAc,CAAA;AAAA,4BACrCJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,cAAU,OAAA;AAAA,aAAkB,CAAA;AAAA,WAAA;AAAA,SAC/B,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/TopPart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridTopPart {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: var(--grid-scrollBar-width);\n  overflow-x: hidden;\n  overflow-y: hidden;\n  clip-path: inset(0 var(--grid-rightPart-width) 0 var(--grid-leftPart-width));\n  z-index: var(--grid-middle-header-zIndex);\n}\n\n.saltGridTopPart-bottomShadow {\n  box-shadow: 0 2px 4px 0 var(--grid-shadow-color);\n  clip-path: inset(0 var(--grid-rightPart-width) -10px var(--grid-leftPart-width));\n}\n\n.saltGridTopPart-space {\n  height: var(--grid-topPart-height);\n  width: var(--grid-total-width);\n}\n\n.saltGridTopPart table {\n  table-layout: fixed;\n  position: absolute;\n  top: 0;\n\n  width: var(--grid-headerVisibleColumns-width);\n  height: var(--grid-topPart-height);\n  left: var(--grid-headerVisibleArea-left);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TopPart.css.js.map

package/dist-cjs/internal/TopPart.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopPart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/internal/TopPart.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var HeaderRow = require('./HeaderRow.js');
+var GroupHeaderRow = require('./GroupHeaderRow.js');
+var TableColGroup = require('./TableColGroup.js');
+var gridHooks = require('./gridHooks.js');
+var TopPart$1 = require('./TopPart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridTopPart");
+function TopPart(props) {
+  const { topRef, onWheel, columns, columnGroups, midGap, bottomShadow } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-top-part",
+    css: TopPart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("bottomShadow")]: bottomShadow
+    }),
+    ref: topRef,
+    "data-testid": "grid-top-part",
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("space"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+        ref: tableRef,
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+            columns,
+            gap: midGap
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("thead", {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(GroupHeaderRow.GroupHeaderRow, {
+                groups: columnGroups,
+                gap: midGap
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeaderRow.HeaderRow, {
+                columns,
+                gap: midGap
+              })
+            ]
+          })
+        ]
+      })
+    })
+  });
+}
+
+exports.TopPart = TopPart;
+//# sourceMappingURL=TopPart.js.map

package/dist-cjs/internal/TopPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopPart.js","sources":["../src/internal/TopPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\n\nimport { HeaderRow } from \"./HeaderRow\";\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nimport topPartCss from \"./TopPart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTopPart\");\n\nexport interface TopPartProps<T> {\n  topRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  columns: GridColumnModel<T>[];\n  columnGroups: GridColumnGroupModel[];\n  midGap: number;\n  bottomShadow?: boolean;\n}\n\nexport function TopPart<T>(props: TopPartProps<T>) {\n  const { topRef, onWheel, columns, columnGroups, midGap, bottomShadow } =\n    props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-top-part\",\n    css: topPartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"bottomShadow\")]: bottomShadow,\n      })}\n      ref={topRef}\n      data-testid=\"grid-top-part\"\n    >\n      <div className={withBaseName(\"space\")}>\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} gap={midGap} />\n          <thead>\n            <GroupHeaderRow groups={columnGroups} gap={midGap} />\n            <HeaderRow columns={columns} gap={midGap} />\n          </thead>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","topPartCss","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAW5C,SAAS,QAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,EAAE,MAAQ,EAAA,OAAA,EAAS,SAAS,YAAc,EAAA,MAAA,EAAQ,cACtD,GAAA,KAAA,CAAA;AAEF,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,GAAK,EAAA,MAAA;AAAA,IACL,aAAY,EAAA,eAAA;AAAA,IAEZ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAAE,eAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,YAAc,OAAA;AAAA,YAAkB,GAAK,EAAA,MAAA;AAAA,WAAQ,CAAA;AAAA,0BAC7CD,eAAA,CAAA,OAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,gBAAe,MAAQ,EAAA,YAAA;AAAA,gBAAc,GAAK,EAAA,MAAA;AAAA,eAAQ,CAAA;AAAA,8BAClDJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,gBAAU,OAAA;AAAA,gBAAkB,GAAK,EAAA,MAAA;AAAA,eAAQ,CAAA;AAAA,aAAA;AAAA,WAC5C,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/internal/TopRightPart.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridTopRightPart {\n  position: absolute;\n  top: 0;\n  right: var(--grid-scrollBar-width);\n  z-index: var(--grid-right-header-zIndex);\n}\n\n.saltGridTopRightPart-leftShadow {\n  box-shadow: -2px 0 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px 0 0 -10px);\n}\n\n.saltGrid-pinnedSeparators .saltGridTopRightPart-leftShadow {\n  border-left: solid 1px var(--grid-pinnedSeparator-color);\n}\n\n.saltGridTopRightPart-bottomShadow {\n  box-shadow: 0 2px 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px 0 -10px 0);\n}\n\n.saltGridTopRightPart-leftShadow.saltGridTopRightPart-bottomShadow {\n  box-shadow: -2px 2px 4px 0 var(--grid-shadow-color);\n  clip-path: inset(1px 0 -10px -10px);\n}\n\n.saltGridTopRightPart table {\n  table-layout: fixed;\n\n  width: var(--grid-rightPart-width);\n  height: var(--grid-topPart-height);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TopRightPart.css.js.map

package/dist-cjs/internal/TopRightPart.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopRightPart.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/internal/TopRightPart.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableColGroup = require('./TableColGroup.js');
+var HeaderRow = require('./HeaderRow.js');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var clsx = require('clsx');
+var GroupHeaderRow = require('./GroupHeaderRow.js');
+var gridHooks = require('./gridHooks.js');
+var TopRightPart$1 = require('./TopRightPart.css.js');
+
+const withBaseName = core.makePrefixer("saltGridTopRightPart");
+function TopRightPart(props) {
+  const { onWheel, columns, columnGroups, leftShadow, bottomShadow } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-top-right-part",
+    css: TopRightPart$1,
+    window: targetWindow
+  });
+  const tableRef = gridHooks.useActiveOnWheel(onWheel);
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("leftShadow")]: leftShadow,
+      [withBaseName("bottomShadow")]: bottomShadow
+    }),
+    "data-testid": "grid-top-right-part",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("table", {
+      className: withBaseName("table"),
+      ref: tableRef,
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableColGroup.TableColGroup, {
+          columns
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("thead", {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GroupHeaderRow.GroupHeaderRow, {
+              groups: columnGroups
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(HeaderRow.HeaderRow, {
+              columns
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+exports.TopRightPart = TopRightPart;
+//# sourceMappingURL=TopRightPart.js.map

package/dist-cjs/internal/TopRightPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopRightPart.js","sources":["../src/internal/TopRightPart.tsx"],"sourcesContent":["import { TableColGroup } from \"./TableColGroup\";\nimport { HeaderRow } from \"./HeaderRow\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { GridColumnGroupModel, GridColumnModel } from \"../Grid\";\n\nimport { GroupHeaderRow } from \"./GroupHeaderRow\";\nimport { useActiveOnWheel } from \"./gridHooks\";\n\nimport topRightPartCss from \"./TopRightPart.css\";\n\nconst withBaseName = makePrefixer(\"saltGridTopRightPart\");\n\nexport interface TopRightPartProps<T> {\n  onWheel: EventListener;\n  columns: GridColumnModel<T>[];\n  columnGroups: GridColumnGroupModel[];\n  leftShadow?: boolean;\n  bottomShadow?: boolean;\n}\n\nexport function TopRightPart<T>(props: TopRightPartProps<T>) {\n  const { onWheel, columns, columnGroups, leftShadow, bottomShadow } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-top-right-part\",\n    css: topRightPartCss,\n    window: targetWindow,\n  });\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"leftShadow\")]: leftShadow,\n        [withBaseName(\"bottomShadow\")]: bottomShadow,\n      })}\n      data-testid=\"grid-top-right-part\"\n    >\n      <table\n        className={withBaseName(\"table\")}\n        ref={tableRef}\n        role=\"presentation\"\n      >\n        <TableColGroup columns={columns} />\n        <thead>\n          <GroupHeaderRow groups={columnGroups} />\n          <HeaderRow columns={columns} />\n          {/*TODO Do we need a toolbar?*/}\n          {/*{showToolbar ? <HeaderToolbarRow columns={rightColumns} /> : null}*/}\n        </thead>\n      </table>\n    </div>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","topRightPartCss","useActiveOnWheel","jsx","clsx","jsxs","TableColGroup","GroupHeaderRow","HeaderRow"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAUjD,SAAS,aAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,OAAS,EAAA,OAAA,EAAS,YAAc,EAAA,UAAA,EAAY,cAAiB,GAAA,KAAA,CAAA;AAErE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,2BAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,KACjC,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IAEZ,QAAC,kBAAAC,eAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAK,EAAA,QAAA;AAAA,MACL,IAAK,EAAA,cAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAACF,cAAA,CAAAG,2BAAA,EAAA;AAAA,UAAc,OAAA;AAAA,SAAkB,CAAA;AAAA,wBAChCD,eAAA,CAAA,OAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAAI,6BAAA,EAAA;AAAA,cAAe,MAAQ,EAAA,YAAA;AAAA,aAAc,CAAA;AAAA,4BACrCJ,cAAA,CAAAK,mBAAA,EAAA;AAAA,cAAU,OAAA;AAAA,aAAkB,CAAA;AAAA,WAAA;AAAA,SAG/B,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}