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

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var core = require('@salt-ds/core');
-var GridContext = require('./GridContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
 var clsx = require('clsx');
 require('./internal/Cell.js');
 var CellMeasure = require('./internal/CellMeasure.js');
@@ -25,21 +26,29 @@ var gridHooks = require('./internal/gridHooks.js');
 var TopLeftPart = require('./internal/TopLeftPart.js');
 var TopPart = require('./internal/TopPart.js');
 var TopRightPart = require('./internal/TopRightPart.js');
-require('./internal/FakeCell.css.js');
 require('./internal/DefaultCellValue.js');
-require('./Grid.css.js');
+var GridContext = require('./GridContext.js');
 var SizingContext = require('./SizingContext.js');
 var LayoutContext = require('./LayoutContext.js');
 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');
+var Grid$1 = require('./Grid.css.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,8 +68,15 @@ const Grid = function Grid2(props) {
     onColumnMoved,
     cellSelectionMode = "none",
     onVisibleRowRangeChange,
-    headerIsFocusable
+    headerIsFocusable,
+    getRowValidationStatus
   } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-grid",
+    css: Grid$1,
+    window: targetWindow
+  });
   const rootRef = react.useRef(null);
   const scrollableRef = react.useRef(null);
   const middleRef = react.useRef(null);
@@ -87,6 +103,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 +149,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);
       }
     }
@@ -218,9 +236,11 @@ const Grid = function Grid2(props) {
       if (s) {
         s.scrollLeft += deltaX;
         s.scrollTop += deltaY;
+        if (!(Math.round(s.scrollHeight - s.scrollTop) === s.clientHeight || s.scrollTop === 0 && deltaY < 0)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
       }
-      event.preventDefault();
-      event.stopPropagation();
     },
     [scrollableRef.current]
   );
@@ -246,6 +266,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 +353,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 +393,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 +417,7 @@ const Grid = function Grid2(props) {
     onMouseDown: onRowSelectionMouseDown
   } = gridHooks.useRowSelection(
     rowKeyGetter,
-    rowData,
+    sortedRowData,
     defaultSelectedRowIdxs,
     selectedRowIdxs,
     rowSelectionMode,
@@ -351,10 +435,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 +453,7 @@ const Grid = function Grid2(props) {
     [
       setCursorRowIdx,
       setCursorColIdx,
-      rowData,
+      sortedRowData,
       rowKeyGetter,
       cols,
       rootRef.current,
@@ -380,7 +464,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 +631,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 +652,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 +673,7 @@ const Grid = function Grid2(props) {
       selectAll,
       cursorColIdx,
       cursorRowIdx,
-      rowData.length,
+      sortedRowData.length,
       cols.length,
       focusedPart
     ]
@@ -604,7 +688,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 +764,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 +773,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 +813,7 @@ const Grid = function Grid2(props) {
       cursorRowIdx,
       cursorRowIdx,
       cols.length,
-      rowData.length,
+      sortedRowData.length,
       headerIsFocusable,
       pageSize
     ]
@@ -814,115 +898,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 +1024,5 @@ const Grid = function Grid2(props) {
 };
 
 exports.Grid = Grid;
+exports.SortOrder = SortOrder;
 //# sourceMappingURL=Grid.js.map