@salt-ds/data-grid 1.0.3 → 1.0.4-alpha.1

package/dist-es/packages/grid/src/Grid.js

@@ -30,12 +30,20 @@ import { ColumnDragContext } from './ColumnDragContext.js';
 import { ColumnGhost } from './internal/ColumnGhost.js';
 import { ColumnDropTarget } from './internal/ColumnDropTarget.js';
 import { ColumnDataContext } from './ColumnDataContext.js';
+import { ColumnSortContext } from './ColumnSortContext.js';
 
 const withBaseName = 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,
@@ -55,7 +63,8 @@ const Grid = function Grid2(props) {
     onColumnMoved,
     cellSelectionMode = "none",
     onVisibleRowRangeChange,
-    headerIsFocusable
+    headerIsFocusable,
+    getRowValidationStatus
   } = props;
   const rootRef = useRef(null);
   const scrollableRef = useRef(null);
@@ -83,6 +92,8 @@ const Grid = function Grid2(props) {
   const [focusedPart, setFocusedPart] = useState(
     headerIsFocusable ? "header" : "body"
   );
+  const [sortByColumnId, setSortByColumnId] = useState("");
+  const [sortOrder, setSortOrder] = useState("none" /* NONE */);
   const [editMode, setEditMode] = useState(false);
   const [initialText, setInitialText] = useState(void 0);
   const resizeClient = useCallback(
@@ -127,8 +138,8 @@ const Grid = function Grid2(props) {
   );
   const midGrpByColId = 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);
       }
     }
@@ -242,6 +253,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 = 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 = 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 = useMemo(
+    () => ({
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    }),
+    [
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    ]
+  );
   const scroll = useCallback(
     (left, top, source) => {
       setScrollSource(source || "user");
@@ -265,9 +340,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 {
@@ -305,7 +380,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);
@@ -329,7 +404,7 @@ const Grid = function Grid2(props) {
     onMouseDown: onRowSelectionMouseDown
   } = useRowSelection(
     rowKeyGetter,
-    rowData,
+    sortedRowData,
     defaultSelectedRowIdxs,
     selectedRowIdxs,
     rowSelectionMode,
@@ -338,7 +413,6 @@ const Grid = function Grid2(props) {
   const rangeSelection = useRangeSelection(cellSelectionMode);
   const moveCursor = useCallback(
     (part, rowIdx, colIdx) => {
-      cancelEditMode();
       if (!headerIsFocusable && part === "header") {
         console.warn(
           `Cannot move focus to the header. "headerIsFocusable" prop is false.`
@@ -348,10 +422,10 @@ const Grid = function Grid2(props) {
       setFocusedPart(part);
       colIdx = 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 = clamp(rowIdx, 0, rowData.length - 1);
+        rowIdx = clamp(rowIdx, 0, sortedRowData.length - 1);
       } else if (part === "header") {
         rowIdx = 0;
       }
@@ -366,7 +440,7 @@ const Grid = function Grid2(props) {
     [
       setCursorRowIdx,
       setCursorColIdx,
-      rowData,
+      sortedRowData,
       rowKeyGetter,
       cols,
       rootRef.current,
@@ -377,7 +451,7 @@ const Grid = function Grid2(props) {
       headerIsFocusable
     ]
   );
-  const rows = useRowModels(rowKeyGetter, rowData, visRowRng);
+  const rows = useRowModels(rowKeyGetter, sortedRowData, visRowRng);
   const isLeftRaised = scrollLeft > 0;
   const isRightRaised = scrollLeft + clientMidWidth < midWidth;
   const isHeaderRaised = scrollTop > 0;
@@ -544,7 +618,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 {
@@ -565,11 +639,13 @@ 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;
+          } else {
+            return false;
           }
-          break;
         default:
           return false;
       }
@@ -584,7 +660,7 @@ const Grid = function Grid2(props) {
       selectAll,
       cursorColIdx,
       cursorRowIdx,
-      rowData.length,
+      sortedRowData.length,
       cols.length,
       focusedPart
     ]
@@ -599,7 +675,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];
@@ -675,7 +751,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":
@@ -684,7 +760,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);
                 }
               }
@@ -724,7 +800,7 @@ const Grid = function Grid2(props) {
       cursorRowIdx,
       cursorRowIdx,
       cols.length,
-      rowData.length,
+      sortedRowData.length,
       headerIsFocusable,
       pageSize
     ]
@@ -809,115 +885,121 @@ const Grid = function Grid2(props) {
               value: sizingContext,
               children: /* @__PURE__ */ jsx(EditorContext.Provider, {
                 value: editorContext,
-                children: /* @__PURE__ */ jsxs(ColumnDataContext.Provider, {
+                children: /* @__PURE__ */ jsx(ColumnDataContext.Provider, {
                   value: columnDataContext,
-                  children: [
-                    props.children,
-                    /* @__PURE__ */ jsxs("div", {
-                      className: 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__ */ jsx(CellMeasure, {
-                          setRowHeight
-                        }),
-                        /* @__PURE__ */ jsx(Scrollable, {
-                          resizeClient,
-                          scrollLeft,
-                          scrollTop,
-                          scrollSource,
-                          scroll,
-                          scrollerRef: scrollableRef,
-                          topRef,
-                          rightRef,
-                          bottomRef,
-                          leftRef,
-                          middleRef
-                        }),
-                        !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsx(TopLeftPart, {
-                          onWheel,
-                          columns: leftCols,
-                          columnGroups: leftGroups,
-                          rightShadow: isLeftRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && /* @__PURE__ */ jsx(TopPart, {
-                          columns: headVisibleColumns,
-                          columnGroups: visColGrps,
-                          topRef,
-                          onWheel,
-                          midGap,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsx(TopRightPart, {
-                          onWheel,
-                          columns: rightCols,
-                          columnGroups: rightGroups,
-                          leftShadow: isRightRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        leftCols.length > 0 && /* @__PURE__ */ jsx(LeftPart, {
-                          leftRef,
-                          onWheel,
-                          columns: leftCols,
-                          rows,
-                          rightShadow: isLeftRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsx(MiddlePart, {
-                          middleRef,
-                          onWheel,
-                          columns: bodyVisibleColumns,
-                          rows,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          midGap,
-                          zebra
-                        }),
-                        rightCols.length > 0 && /* @__PURE__ */ jsx(RightPart, {
-                          rightRef,
-                          onWheel,
-                          columns: rightCols,
-                          rows,
-                          leftShadow: isRightRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsx(ColumnDropTarget, {
-                          x: activeTarget == null ? void 0 : activeTarget.x
-                        }),
-                        /* @__PURE__ */ jsx(ColumnGhost, {
-                          columns: cols,
-                          rows,
-                          dragState,
-                          zebra
-                        })
-                      ]
-                    })
-                  ]
+                  children: /* @__PURE__ */ jsxs(ColumnSortContext.Provider, {
+                    value: columnSortContext,
+                    children: [
+                      props.children,
+                      /* @__PURE__ */ jsxs("div", {
+                        className: 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__ */ jsx(CellMeasure, {
+                            setRowHeight
+                          }),
+                          /* @__PURE__ */ jsx(Scrollable, {
+                            resizeClient,
+                            scrollLeft,
+                            scrollTop,
+                            scrollSource,
+                            scroll,
+                            scrollerRef: scrollableRef,
+                            topRef,
+                            rightRef,
+                            bottomRef,
+                            leftRef,
+                            middleRef
+                          }),
+                          !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsx(TopLeftPart, {
+                            onWheel,
+                            columns: leftCols,
+                            columnGroups: leftGroups,
+                            rightShadow: isLeftRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && /* @__PURE__ */ jsx(TopPart, {
+                            columns: headVisibleColumns,
+                            columnGroups: visColGrps,
+                            topRef,
+                            onWheel,
+                            midGap,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsx(TopRightPart, {
+                            onWheel,
+                            columns: rightCols,
+                            columnGroups: rightGroups,
+                            leftShadow: isRightRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          leftCols.length > 0 && /* @__PURE__ */ jsx(LeftPart, {
+                            leftRef,
+                            onWheel,
+                            columns: leftCols,
+                            rows,
+                            rightShadow: isLeftRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsx(MiddlePart, {
+                            middleRef,
+                            onWheel,
+                            columns: bodyVisibleColumns,
+                            rows,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            midGap,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          rightCols.length > 0 && /* @__PURE__ */ jsx(RightPart, {
+                            rightRef,
+                            onWheel,
+                            columns: rightCols,
+                            rows,
+                            leftShadow: isRightRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsx(ColumnDropTarget, {
+                            x: activeTarget == null ? void 0 : activeTarget.x
+                          }),
+                          /* @__PURE__ */ jsx(ColumnGhost, {
+                            columns: cols,
+                            rows,
+                            dragState,
+                            zebra
+                          })
+                        ]
+                      })
+                    ]
+                  })
                 })
               })
             })
@@ -928,5 +1010,5 @@ const Grid = function Grid2(props) {
   });
 };
 
-export { Grid };
+export { Grid, SortOrder };
 //# sourceMappingURL=Grid.js.map