@salt-ds/data-grid 1.0.4-alpha.0 → 1.0.4-alpha.2

package/dist-cjs/packages/data-grid/src/BaseCell.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltGridBaseCell-valueContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: calc(var(--grid-row-height) - 2px);\n  border-style: solid;\n  border-width: 1px;\n  border-color: transparent;\n  --grid-cell-padding: 0 calc(var(--grid-padding) - 1px);\n}\n\n.saltGridCell-editable .saltGridBaseCell-valueContainer {\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--grid-editableCell-borderColor);\n}\n\n.saltGridCell-editable:hover .saltGridBaseCell-valueContainer {\n  border-color: var(--grid-editableCell-borderColor-hover);\n}\n\n.saltGridCell-editable:focus .saltGridBaseCell-valueContainer {\n  border-color: transparent;\n}\n\n.saltGridBaseCell-status-error {\n  --status-border-color: var(--salt-status-error-borderColor);\n  --status-background-color: var(--salt-status-error-background-emphasize);\n}\n\n.saltGridBaseCell-status-warning {\n  --status-border-color: var(--salt-status-warning-borderColor);\n  --status-background-color: var(--salt-status-warning-background-emphasize);\n}\n\n.saltGridBaseCell-status-success {\n  --status-border-color: var(--salt-status-success-borderColor);\n  --status-background-color: var(--salt-status-success-background-emphasize);\n}\n\n.saltGridCell-editable .saltGridBaseCell-valueContainer {\n  border-color: var(--status-border-color);\n}\n\n.saltGridBaseCell-hasValidation:focus .saltGridCursor {\n  border-color: var(--status-border-color);\n}\n\n.saltGridBaseCell-hasValidation:focus .saltGridCornerTag-focusOnly {\n  border-left-color: var(--status-border-color);\n}\n\n.saltGridBaseCell-valueContainer {\n  background-color: var(--status-background-color);\n}\n\n.salt-density-high {\n  --grid-statusIndicator-size: 5px;\n}\n\n.salt-density-medium {\n  --grid-statusIndicator-size: 6px;\n}\n\n.salt-density-low {\n  --grid-statusIndicator-size: 7px;\n}\n\n.salt-density-touch {\n  --grid-statusIndicator-size: 9px;\n}\n\n.saltGridBaseCell-statusContainer {\n  font-size: var(--saltGrid-statusIndicator-size, var(--grid-statusIndicator-size));\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n}\n\n.saltGridBaseCell-statusContainer svg {\n  display: block;\n  fill: var(--status-border-color);\n}\n\n.saltGridBaseCell-statusContainer.saltGridBaseCell-statusContainer-align-right {\n  right: auto;\n  left: 3px;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=BaseCell.css.js.map

package/dist-cjs/packages/{grid → data-grid}/src/BaseCell.js

@@ -27,11 +27,17 @@ require('./internal/TopRightPart.js');
 require('./internal/FakeCell.css.js');
 require('./internal/DefaultCellValue.js');
 var CornerTag = require('./CornerTag.js');
+var CellStatusIcons = require('./internal/CellStatusIcons.js');
 
 const withBaseName = core.makePrefixer("saltGridBaseCell");
 function getCellId(rowKey, column) {
   return `R${rowKey}C${column.info.props.id}`;
 }
+const icons = {
+  warning: CellStatusIcons.CellWarningIcon,
+  error: CellStatusIcons.CellErrorIcon,
+  success: CellStatusIcons.CellSuccessIcon
+};
 function BaseCell(props) {
   const {
     column,
@@ -41,12 +47,20 @@ function BaseCell(props) {
     isFocused,
     isSelected,
     isEditable,
-    children
+    children,
+    validationStatus,
+    validationMessage,
+    validationType = "light",
+    align
   } = props;
   const { ref, isFocusableContent, onFocus } = gridHooks.useFocusableContent();
+  const cellId = getCellId(row.key, column);
+  const hasValidation = !!validationStatus;
+  const hasValidationMessage = !!validationMessage || hasValidation;
+  const validationMessageId = `${cellId}-statusMessage`;
   return /* @__PURE__ */ jsxRuntime.jsxs(Cell.Cell, {
     ref,
-    id: getCellId(row.key, column),
+    id: cellId,
     "data-row-index": row.index,
     "data-column-index": column.index,
     "data-testid": isFocused ? "grid-cell-focused" : void 0,
@@ -55,15 +69,33 @@ function BaseCell(props) {
     separator: column.separator,
     isSelected,
     isEditable,
-    className,
+    className: clsx.clsx(className, {
+      [withBaseName("hasValidation")]: hasValidation,
+      [withBaseName(`status-${validationStatus}`)]: validationStatus
+    }),
     style,
     tabIndex: isFocused && !isFocusableContent ? 0 : -1,
     onFocus,
+    "aria-invalid": validationStatus === "error" || void 0,
+    "aria-describedby": hasValidationMessage ? validationMessageId : void 0,
     children: [
+      hasValidationMessage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        id: validationMessageId,
+        className: "salt-visuallyHidden",
+        "aria-hidden": true,
+        role: "status",
+        children: validationMessage ? validationMessage : `Cell validation state is ${validationStatus}`
+      }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: clsx.clsx(withBaseName("valueContainer")),
         children
       }),
+      hasValidation && validationType === "strong" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: clsx.clsx(withBaseName("statusContainer"), {
+          [withBaseName(`statusContainer-align-${align}`)]: align
+        }),
+        children: icons[validationStatus]
+      }) : null,
       isFocused && isEditable && /* @__PURE__ */ jsxRuntime.jsx(CornerTag.CornerTag, {
         focusOnly: true
       }),

package/dist-cjs/packages/data-grid/src/BaseCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCell.js","sources":["../src/BaseCell.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport \"./BaseCell.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridCellProps } from \"./GridColumn\";\nimport { GridColumnModel } from \"./Grid\";\nimport { Cell, Cursor, useFocusableContent } from \"./internal\";\nimport { CornerTag } from \"./CornerTag\";\nimport {\n  CellErrorIcon,\n  CellSuccessIcon,\n  CellWarningIcon,\n} from \"./internal/CellStatusIcons\";\n\nconst withBaseName = makePrefixer(\"saltGridBaseCell\");\n\nexport function getCellId<T>(rowKey: string, column: GridColumnModel<T>) {\n  return `R${rowKey}C${column.info.props.id}`;\n}\n\nconst icons = {\n  warning: CellWarningIcon,\n  error: CellErrorIcon,\n  success: CellSuccessIcon,\n};\n\n// Default component for grid cells. Provides selection, on-hover highlighting,\n// cursor etc.\nexport function BaseCell<T>(props: GridCellProps<T>) {\n  const {\n    column,\n    className,\n    row,\n    style,\n    isFocused,\n    isSelected,\n    isEditable,\n    children,\n    validationStatus,\n    validationMessage,\n    validationType = \"light\",\n    align,\n  } = props;\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableCellElement>();\n  const cellId = getCellId(row.key, column);\n  const hasValidation = !!validationStatus;\n  const hasValidationMessage = !!validationMessage || hasValidation;\n  const validationMessageId = `${cellId}-statusMessage`;\n  return (\n    <Cell\n      ref={ref}\n      id={cellId}\n      data-row-index={row.index}\n      data-column-index={column.index}\n      data-testid={isFocused ? \"grid-cell-focused\" : undefined}\n      // aria-colindex uses one-based array indexing\n      aria-colindex={column.index + 1}\n      role=\"gridcell\"\n      separator={column.separator}\n      isSelected={isSelected}\n      isEditable={isEditable}\n      className={clsx(className, {\n        [withBaseName(\"hasValidation\")]: hasValidation,\n        [withBaseName(`status-${validationStatus as string}`)]:\n          validationStatus,\n      })}\n      style={style}\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n      aria-invalid={validationStatus === \"error\" || undefined}\n      aria-describedby={hasValidationMessage ? validationMessageId : undefined}\n    >\n      {hasValidationMessage ? (\n        <div\n          id={validationMessageId}\n          className=\"salt-visuallyHidden\"\n          aria-hidden\n          role=\"status\"\n        >\n          {validationMessage\n            ? validationMessage\n            : `Cell validation state is ${validationStatus as string}`}\n        </div>\n      ) : null}\n      <div className={clsx(withBaseName(\"valueContainer\"))}>{children}</div>\n      {hasValidation && validationType === \"strong\" ? (\n        <div\n          className={clsx(withBaseName(\"statusContainer\"), {\n            [withBaseName(`statusContainer-align-${align as string}`)]: align,\n          })}\n        >\n          {icons[validationStatus]}\n        </div>\n      ) : null}\n      {isFocused && isEditable && <CornerTag focusOnly={true} />}\n      {isFocused && !isFocusableContent && <Cursor />}\n    </Cell>\n  );\n}\n"],"names":["makePrefixer","CellWarningIcon","CellErrorIcon","CellSuccessIcon","useFocusableContent","jsxs","Cell","clsx","jsx","CornerTag","Cursor"],"mappings":"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"}

package/dist-cjs/packages/data-grid/src/ColumnSortContext.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const ColumnSortContext = react.createContext(
+  void 0
+);
+const useColumnSortContext = () => {
+  const c = react.useContext(ColumnSortContext);
+  if (!c) {
+    throw new Error(`useColumnSortContext invoked outside of a Grid`);
+  }
+  return c;
+};
+
+exports.ColumnSortContext = ColumnSortContext;
+exports.useColumnSortContext = useColumnSortContext;
+//# sourceMappingURL=ColumnSortContext.js.map

package/dist-cjs/packages/data-grid/src/ColumnSortContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSortContext.js","sources":["../src/ColumnSortContext.ts"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { SortOrder } from \"./Grid\";\nimport { GridColumnProps } from \"./GridColumn\";\n\nexport interface ColumnSortContext {\n  sortByColumnId?: GridColumnProps[\"id\"];\n  setSortByColumnId: (c: React.SetStateAction<GridColumnProps[\"id\"]>) => void;\n  sortOrder: SortOrder;\n  setSortOrder: (o: SortOrder) => void;\n  onClickSortColumn: (colHeaderId: GridColumnProps[\"id\"]) => void;\n}\n\nexport const ColumnSortContext = createContext<ColumnSortContext | undefined>(\n  undefined\n);\n\nexport const useColumnSortContext = () => {\n  const c = useContext(ColumnSortContext);\n  if (!c) {\n    throw new Error(`useColumnSortContext invoked outside of a Grid`);\n  }\n  return c;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAYO,MAAM,iBAAoB,GAAAA,mBAAA;AAAA,EAC/B,KAAA,CAAA;AACF,EAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,CAAA,GAAIC,iBAAW,iBAAiB,CAAA,CAAA;AACtC,EAAA,IAAI,CAAC,CAAG,EAAA;AACN,IAAM,MAAA,IAAI,MAAM,CAAgD,8CAAA,CAAA,CAAA,CAAA;AAAA,GAClE;AACA,EAAO,OAAA,CAAA,CAAA;AACT;;;;;"}

package/dist-cjs/packages/{grid → data-grid}/src/Grid.js

@@ -34,12 +34,20 @@ var ColumnDragContext = require('./ColumnDragContext.js');
 var ColumnGhost = require('./internal/ColumnGhost.js');
 var ColumnDropTarget = require('./internal/ColumnDropTarget.js');
 var ColumnDataContext = require('./ColumnDataContext.js');
+var ColumnSortContext = require('./ColumnSortContext.js');
 
 const withBaseName = core.makePrefixer("saltGrid");
+var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
+  SortOrder2["ASC"] = "asc";
+  SortOrder2["DESC"] = "desc";
+  SortOrder2["NONE"] = "none";
+  return SortOrder2;
+})(SortOrder || {});
 function defaultRowKeyGetter(row, index) {
   return `${index}`;
 }
 const Grid = function Grid2(props) {
+  var _a, _b, _c;
   const {
     rowData,
     zebra,
@@ -59,7 +67,8 @@ const Grid = function Grid2(props) {
     onColumnMoved,
     cellSelectionMode = "none",
     onVisibleRowRangeChange,
-    headerIsFocusable
+    headerIsFocusable,
+    getRowValidationStatus
   } = props;
   const rootRef = react.useRef(null);
   const scrollableRef = react.useRef(null);
@@ -87,6 +96,8 @@ const Grid = function Grid2(props) {
   const [focusedPart, setFocusedPart] = react.useState(
     headerIsFocusable ? "header" : "body"
   );
+  const [sortByColumnId, setSortByColumnId] = react.useState("");
+  const [sortOrder, setSortOrder] = react.useState("none" /* NONE */);
   const [editMode, setEditMode] = react.useState(false);
   const [initialText, setInitialText] = react.useState(void 0);
   const resizeClient = react.useCallback(
@@ -131,8 +142,8 @@ const Grid = function Grid2(props) {
   );
   const midGrpByColId = react.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
-    for (let g of midGroups) {
-      for (let c of g.childrenIds) {
+    for (const g of midGroups) {
+      for (const c of g.childrenIds) {
         m.set(c, g);
       }
     }
@@ -246,6 +257,70 @@ const Grid = function Grid2(props) {
     }),
     [getColById]
   );
+  const isSortMode = sortByColumnId && sortOrder !== "none" /* NONE */;
+  const onSortOrderChange = (_a = getColById(sortByColumnId)) == null ? void 0 : _a.info.props.onSortOrderChange;
+  const valueGetter = ((_b = getColById(sortByColumnId)) == null ? void 0 : _b.info.props.getValue) || ((r) => {
+    return r[sortByColumnId];
+  });
+  const customSortingFn = (_c = getColById(sortByColumnId)) == null ? void 0 : _c.info.props.customSort;
+  const sortedRowData = react.useMemo(() => {
+    if (!isSortMode || onSortOrderChange)
+      return rowData;
+    if (customSortingFn) {
+      return customSortingFn({ rowData, sortOrder });
+    }
+    const sortedData = [...rowData].sort(
+      (a, b) => valueGetter(a) < valueGetter(b) ? -1 : 1
+    );
+    if (sortOrder === "desc" /* DESC */) {
+      return sortedData.reverse();
+    }
+    return sortedData;
+  }, [
+    onSortOrderChange,
+    valueGetter,
+    customSortingFn,
+    isSortMode,
+    rowData,
+    sortByColumnId,
+    sortOrder
+  ]);
+  const onClickSortColumn = react.useCallback(
+    (colHeaderId) => {
+      if (sortByColumnId === colHeaderId) {
+        switch (sortOrder) {
+          case "asc" /* ASC */:
+            setSortOrder("desc" /* DESC */);
+            break;
+          case "desc" /* DESC */:
+            setSortOrder("none" /* NONE */);
+            break;
+          default:
+            setSortOrder("asc" /* ASC */);
+        }
+      } else {
+        setSortByColumnId(colHeaderId);
+        setSortOrder("asc" /* ASC */);
+      }
+    },
+    [sortByColumnId, sortOrder]
+  );
+  const columnSortContext = react.useMemo(
+    () => ({
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    }),
+    [
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    ]
+  );
   const scroll = react.useCallback(
     (left, top, source) => {
       setScrollSource(source || "user");
@@ -269,9 +344,9 @@ const Grid = function Grid2(props) {
   );
   const focusCellElement = (part, rowIdx, colIdx) => {
     setTimeout(() => {
-      var _a;
+      var _a2;
       const selector = part === "body" ? `td[data-row-index="${rowIdx}"][data-column-index="${colIdx}"]` : `th[data-column-index="${colIdx}"]`;
-      const nodeToFocus = (_a = rootRef.current) == null ? void 0 : _a.querySelector(selector);
+      const nodeToFocus = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(selector);
       if (nodeToFocus) {
         nodeToFocus.focus({ preventScroll: true });
       } else {
@@ -309,7 +384,7 @@ const Grid = function Grid2(props) {
         `onChange is not specified for editable column "${c.info.props.id}".`
       );
     } else {
-      handler(rowData[cursorRowIdx], cursorRowIdx, value);
+      handler(sortedRowData[cursorRowIdx], cursorRowIdx, value);
     }
     setEditMode(false);
     focusCellElement(focusedPart, cursorRowIdx, cursorColIdx);
@@ -333,7 +408,7 @@ const Grid = function Grid2(props) {
     onMouseDown: onRowSelectionMouseDown
   } = gridHooks.useRowSelection(
     rowKeyGetter,
-    rowData,
+    sortedRowData,
     defaultSelectedRowIdxs,
     selectedRowIdxs,
     rowSelectionMode,
@@ -351,10 +426,10 @@ const Grid = function Grid2(props) {
       setFocusedPart(part);
       colIdx = utils.clamp(colIdx, 0, cols.length - 1);
       if (part === "body") {
-        if (rowData.length < 1 || cols.length < 1) {
+        if (sortedRowData.length < 1 || cols.length < 1) {
           return;
         }
-        rowIdx = utils.clamp(rowIdx, 0, rowData.length - 1);
+        rowIdx = utils.clamp(rowIdx, 0, sortedRowData.length - 1);
       } else if (part === "header") {
         rowIdx = 0;
       }
@@ -369,7 +444,7 @@ const Grid = function Grid2(props) {
     [
       setCursorRowIdx,
       setCursorColIdx,
-      rowData,
+      sortedRowData,
       rowKeyGetter,
       cols,
       rootRef.current,
@@ -380,7 +455,7 @@ const Grid = function Grid2(props) {
       headerIsFocusable
     ]
   );
-  const rows = gridHooks.useRowModels(rowKeyGetter, rowData, visRowRng);
+  const rows = gridHooks.useRowModels(rowKeyGetter, sortedRowData, visRowRng);
   const isLeftRaised = scrollLeft > 0;
   const isRightRaised = scrollLeft + clientMidWidth < midWidth;
   const isHeaderRaised = scrollTop > 0;
@@ -547,7 +622,7 @@ const Grid = function Grid2(props) {
               if (cursorColIdx != void 0) {
                 rangeSelection.selectRange({
                   start: { rowIdx: 0, colIdx: cursorColIdx },
-                  end: { rowIdx: rowData.length, colIdx: cursorColIdx }
+                  end: { rowIdx: sortedRowData.length, colIdx: cursorColIdx }
                 });
               }
             } else {
@@ -568,7 +643,7 @@ const Grid = function Grid2(props) {
           if (event.ctrlKey || event.metaKey) {
             rangeSelection.selectRange({
               start: { rowIdx: 0, colIdx: 0 },
-              end: { rowIdx: rowData.length, colIdx: cols.length }
+              end: { rowIdx: sortedRowData.length, colIdx: cols.length }
             });
             selectAll();
             return true;
@@ -589,7 +664,7 @@ const Grid = function Grid2(props) {
       selectAll,
       cursorColIdx,
       cursorRowIdx,
-      rowData.length,
+      sortedRowData.length,
       cols.length,
       focusedPart
     ]
@@ -604,7 +679,7 @@ const Grid = function Grid2(props) {
         const [minCol, maxCol] = [start.colIdx, end.colIdx].sort(c);
         const text = [];
         for (let r = minRow; r <= maxRow; ++r) {
-          const row = rowData[r];
+          const row = sortedRowData[r];
           const rowText = [];
           for (let c2 = minCol; c2 <= maxCol; ++c2) {
             const col = cols[c2];
@@ -680,7 +755,7 @@ const Grid = function Grid2(props) {
           if (!event.ctrlKey) {
             moveCursor(focusedPart, cursorRowIdx, cols.length - 1);
           } else {
-            moveCursor(focusedPart, rowData.length - 1, cols.length - 1);
+            moveCursor(focusedPart, sortedRowData.length - 1, cols.length - 1);
           }
           break;
         case "Tab":
@@ -689,7 +764,7 @@ const Grid = function Grid2(props) {
               if (cursorColIdx < cols.length - 1) {
                 moveCursor(focusedPart, cursorRowIdx, cursorColIdx + 1);
               } else {
-                if (cursorRowIdx < rowData.length - 1) {
+                if (cursorRowIdx < sortedRowData.length - 1) {
                   moveCursor(focusedPart, cursorRowIdx + 1, 0);
                 }
               }
@@ -729,7 +804,7 @@ const Grid = function Grid2(props) {
       cursorRowIdx,
       cursorRowIdx,
       cols.length,
-      rowData.length,
+      sortedRowData.length,
       headerIsFocusable,
       pageSize
     ]
@@ -814,115 +889,121 @@ const Grid = function Grid2(props) {
               value: sizingContext,
               children: /* @__PURE__ */ jsxRuntime.jsx(EditorContext.EditorContext.Provider, {
                 value: editorContext,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ColumnDataContext.ColumnDataContext.Provider, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(ColumnDataContext.ColumnDataContext.Provider, {
                   value: columnDataContext,
-                  children: [
-                    props.children,
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                      className: clsx.clsx(
-                        withBaseName(),
-                        {
-                          [withBaseName("zebra")]: zebra,
-                          [withBaseName("columnSeparators")]: columnSeparators,
-                          [withBaseName("pinnedSeparators")]: pinnedSeparators,
-                          [withBaseName("primaryBackground")]: variant === "primary",
-                          [withBaseName("secondaryBackground")]: variant === "secondary"
-                        },
-                        className
-                      ),
-                      style: rootStyle,
-                      ref: rootRef,
-                      onKeyDown,
-                      onKeyUp,
-                      onMouseDown,
-                      onFocus,
-                      onBlur,
-                      "data-name": "grid-root",
-                      role: "grid",
-                      "aria-colcount": cols.length,
-                      "aria-rowcount": rowCount + headRowCount,
-                      "aria-multiselectable": rowSelectionMode === "multi",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(CellMeasure.CellMeasure, {
-                          setRowHeight
-                        }),
-                        /* @__PURE__ */ jsxRuntime.jsx(Scrollable.Scrollable, {
-                          resizeClient,
-                          scrollLeft,
-                          scrollTop,
-                          scrollSource,
-                          scroll,
-                          scrollerRef: scrollableRef,
-                          topRef,
-                          rightRef,
-                          bottomRef,
-                          leftRef,
-                          middleRef
-                        }),
-                        !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TopLeftPart.TopLeftPart, {
-                          onWheel,
-                          columns: leftCols,
-                          columnGroups: leftGroups,
-                          rightShadow: isLeftRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && /* @__PURE__ */ jsxRuntime.jsx(TopPart.TopPart, {
-                          columns: headVisibleColumns,
-                          columnGroups: visColGrps,
-                          topRef,
-                          onWheel,
-                          midGap,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TopRightPart.TopRightPart, {
-                          onWheel,
-                          columns: rightCols,
-                          columnGroups: rightGroups,
-                          leftShadow: isRightRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        leftCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(LeftPart.LeftPart, {
-                          leftRef,
-                          onWheel,
-                          columns: leftCols,
-                          rows,
-                          rightShadow: isLeftRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsxRuntime.jsx(MiddlePart.MiddlePart, {
-                          middleRef,
-                          onWheel,
-                          columns: bodyVisibleColumns,
-                          rows,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          midGap,
-                          zebra
-                        }),
-                        rightCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(RightPart.RightPart, {
-                          rightRef,
-                          onWheel,
-                          columns: rightCols,
-                          rows,
-                          leftShadow: isRightRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ColumnDropTarget.ColumnDropTarget, {
-                          x: activeTarget == null ? void 0 : activeTarget.x
-                        }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ColumnGhost.ColumnGhost, {
-                          columns: cols,
-                          rows,
-                          dragState,
-                          zebra
-                        })
-                      ]
-                    })
-                  ]
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(ColumnSortContext.ColumnSortContext.Provider, {
+                    value: columnSortContext,
+                    children: [
+                      props.children,
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        className: clsx.clsx(
+                          withBaseName(),
+                          {
+                            [withBaseName("zebra")]: zebra,
+                            [withBaseName("columnSeparators")]: columnSeparators,
+                            [withBaseName("pinnedSeparators")]: pinnedSeparators,
+                            [withBaseName("primaryBackground")]: variant === "primary",
+                            [withBaseName("secondaryBackground")]: variant === "secondary"
+                          },
+                          className
+                        ),
+                        style: rootStyle,
+                        ref: rootRef,
+                        onKeyDown,
+                        onKeyUp,
+                        onMouseDown,
+                        onFocus,
+                        onBlur,
+                        "data-name": "grid-root",
+                        role: "grid",
+                        "aria-colcount": cols.length,
+                        "aria-rowcount": rowCount + headRowCount,
+                        "aria-multiselectable": rowSelectionMode === "multi",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(CellMeasure.CellMeasure, {
+                            setRowHeight
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Scrollable.Scrollable, {
+                            resizeClient,
+                            scrollLeft,
+                            scrollTop,
+                            scrollSource,
+                            scroll,
+                            scrollerRef: scrollableRef,
+                            topRef,
+                            rightRef,
+                            bottomRef,
+                            leftRef,
+                            middleRef
+                          }),
+                          !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TopLeftPart.TopLeftPart, {
+                            onWheel,
+                            columns: leftCols,
+                            columnGroups: leftGroups,
+                            rightShadow: isLeftRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && /* @__PURE__ */ jsxRuntime.jsx(TopPart.TopPart, {
+                            columns: headVisibleColumns,
+                            columnGroups: visColGrps,
+                            topRef,
+                            onWheel,
+                            midGap,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TopRightPart.TopRightPart, {
+                            onWheel,
+                            columns: rightCols,
+                            columnGroups: rightGroups,
+                            leftShadow: isRightRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          leftCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(LeftPart.LeftPart, {
+                            leftRef,
+                            onWheel,
+                            columns: leftCols,
+                            rows,
+                            rightShadow: isLeftRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx(MiddlePart.MiddlePart, {
+                            middleRef,
+                            onWheel,
+                            columns: bodyVisibleColumns,
+                            rows,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            midGap,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          rightCols.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(RightPart.RightPart, {
+                            rightRef,
+                            onWheel,
+                            columns: rightCols,
+                            rows,
+                            leftShadow: isRightRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ColumnDropTarget.ColumnDropTarget, {
+                            x: activeTarget == null ? void 0 : activeTarget.x
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ColumnGhost.ColumnGhost, {
+                            columns: cols,
+                            rows,
+                            dragState,
+                            zebra
+                          })
+                        ]
+                      })
+                    ]
+                  })
                 })
               })
             })
@@ -934,4 +1015,5 @@ const Grid = function Grid2(props) {
 };
 
 exports.Grid = Grid;
+exports.SortOrder = SortOrder;
 //# sourceMappingURL=Grid.js.map