@salt-ds/data-grid 1.0.5 → 1.0.7

package/dist-es/Grid.js

@@ -1,9 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { ColumnDataContext } from './ColumnDataContext.js';
+import { ColumnDragContext } from './ColumnDragContext.js';
+import { ColumnSortContext } from './ColumnSortContext.js';
+import { CursorContext } from './CursorContext.js';
+import { EditorContext } from './EditorContext.js';
+import { GridContext } from './GridContext.js';
+import { LayoutContext } from './LayoutContext.js';
+import { SelectionContext } from './SelectionContext.js';
+import { SizingContext } from './SizingContext.js';
 import { CellMeasure } from './internal/CellMeasure.js';
 import './internal/Cursor.js';
 import './internal/GroupHeaderRow.js';
@@ -14,23 +23,14 @@ import { RightPart } from './internal/RightPart.js';
 import { Scrollable } from './internal/Scrollable.js';
 import './internal/TableRow.js';
 import { clamp, getFocusablePosition } from './internal/utils.js';
-import { SelectionContext } from './SelectionContext.js';
-import { EditorContext } from './EditorContext.js';
-import { CursorContext } from './CursorContext.js';
 import { useColumnRegistry, useSumWidth, useSum, useClientMidWidth, useBodyVisibleColumnRange, useVisibleColumnGroupRange, useHeadVisibleColumnRange, useLeftScrolledOutWidth, useClientMidHeight, useVisibleRowRange, useBodyVisibleAreaTop, useColumnRange, useSumRangeWidth, useScrollToCell, useRowSelection, useRangeSelection, useRowModels, useColumnResize, useColumnMove } from './internal/gridHooks.js';
 import { TopLeftPart } from './internal/TopLeftPart.js';
 import { TopPart } from './internal/TopPart.js';
 import { TopRightPart } from './internal/TopRightPart.js';
 import './CellFrame.js';
 import './internal/DefaultCellValue.js';
-import { GridContext } from './GridContext.js';
-import { SizingContext } from './SizingContext.js';
-import { LayoutContext } from './LayoutContext.js';
-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';
+import { ColumnGhost } from './internal/ColumnGhost.js';
 import css_248z from './Grid.css.js';
 
 const withBaseName = makePrefixer("saltGrid");
@@ -111,8 +111,11 @@ const Grid = function Grid2(props) {
   );
   const {
     leftCols,
+    // Columns pinned to left
     midCols,
+    // Scrollable columns
     rightCols,
+    // Columns pinned to right
     leftGroups,
     midGroups,
     rightGroups,
@@ -120,7 +123,9 @@ const Grid = function Grid2(props) {
   } = useColumnRegistry(children);
   const midColsById = useMemo(
     () => new Map(
-      midCols.map((c) => [c.info.props.id, c])
+      midCols.map(
+        (c) => [c.info.props.id, c]
+      )
     ),
     [midCols]
   );
@@ -232,7 +237,8 @@ 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)) {
+        if (!(Math.round(s.scrollHeight - s.scrollTop) === s.clientHeight || // reached the bottom
+        s.scrollTop === 0 && deltaY < 0)) {
           event.preventDefault();
           event.stopPropagation();
         }
@@ -269,8 +275,7 @@ const Grid = function Grid2(props) {
   });
   const customSortingFn = (_c = getColById(sortByColumnId)) == null ? void 0 : _c.info.props.customSort;
   const sortedRowData = useMemo(() => {
-    if (!isSortMode || onSortOrderChange)
-      return rowData;
+    if (!isSortMode || onSortOrderChange) return rowData;
     if (customSortingFn) {
       return customSortingFn({ rowData, sortOrder });
     }
@@ -360,7 +365,7 @@ const Grid = function Grid2(props) {
     }, 0);
   };
   const startEditMode = (text) => {
-    if (editMode || cursorRowIdx == void 0 || cursorColIdx == void 0) {
+    if (editMode || cursorRowIdx === void 0 || cursorColIdx === void 0) {
       return;
     }
     const c = cols[cursorColIdx];
@@ -374,14 +379,14 @@ const Grid = function Grid2(props) {
     if (!editMode) {
       return;
     }
-    if (cursorColIdx == void 0) {
-      console.error(`endEditMode: cursorColIdx is undefined in edit mode`);
+    if (cursorColIdx === void 0) {
+      console.error("endEditMode: cursorColIdx is undefined in edit mode");
       return;
     }
     const c = cols[cursorColIdx];
     const handler = c.info.props.onChange;
-    if (cursorRowIdx == void 0) {
-      console.error(`endEditMode: cursorRowIdx is undefined in edit mode`);
+    if (cursorRowIdx === void 0) {
+      console.error("endEditMode: cursorRowIdx is undefined in edit mode");
       return;
     }
     if (!handler) {
@@ -500,18 +505,12 @@ const Grid = function Grid2(props) {
     [editMode, startEditMode, endEditMode, cancelEditMode, initialText]
   );
   const [isFocused, setFocused] = useState(false);
-  const onFocus = useCallback(
-    (event) => {
-      setFocused(true);
-    },
-    [setFocused]
-  );
-  const onBlur = useCallback(
-    (event) => {
-      setFocused(false);
-    },
-    [setFocused]
-  );
+  const onFocus = useCallback(() => {
+    setFocused(true);
+  }, []);
+  const onBlur = useCallback(() => {
+    setFocused(false);
+  }, []);
   const cursorContext = useMemo(
     () => ({
       isFocused,
@@ -595,9 +594,8 @@ const Grid = function Grid2(props) {
           if (editMode) {
             cancelEditMode();
             break;
-          } else {
-            return false;
           }
+          return false;
         default:
           if (!editMode && !event.ctrlKey && !event.metaKey && !event.altKey && /^[\w\d ]$/.test(key)) {
             startEditMode(key);
@@ -624,14 +622,14 @@ const Grid = function Grid2(props) {
         case " ":
           if (focusedPart === "body") {
             if (event.ctrlKey) {
-              if (cursorColIdx != void 0) {
+              if (cursorColIdx !== void 0) {
                 rangeSelection.selectRange({
                   start: { rowIdx: 0, colIdx: cursorColIdx },
                   end: { rowIdx: sortedRowData.length, colIdx: cursorColIdx }
                 });
               }
             } else {
-              if (cursorRowIdx != void 0) {
+              if (cursorRowIdx !== void 0) {
                 selectRows({
                   rowIndex: cursorRowIdx,
                   isRange: false,
@@ -641,9 +639,8 @@ const Grid = function Grid2(props) {
               }
             }
             break;
-          } else {
-            return false;
           }
+          return false;
         case "a":
           if (event.ctrlKey || event.metaKey) {
             rangeSelection.selectRange({
@@ -652,9 +649,8 @@ const Grid = function Grid2(props) {
             });
             selectAll();
             return true;
-          } else {
-            return false;
           }
+          return false;
         default:
           return false;
       }
@@ -676,6 +672,7 @@ const Grid = function Grid2(props) {
   );
   const clipboardKeyHandler = useCallback(
     (event) => {
+      var _a2, _b2;
       const { key } = event;
       if (key === "c" && (event.ctrlKey || event.metaKey) && rangeSelection.selectedCellRange) {
         const { start, end } = rangeSelection.selectedCellRange;
@@ -688,7 +685,7 @@ const Grid = function Grid2(props) {
           const rowText = [];
           for (let c2 = minCol; c2 <= maxCol; ++c2) {
             const col = cols[c2];
-            const cellValue = col.info.props.getValue(row);
+            const cellValue = (_b2 = col == null ? void 0 : (_a2 = col.info.props).getValue) == null ? void 0 : _b2.call(_a2, row);
             rowText.push(cellValue);
           }
           text.push(rowText.join("	"));
@@ -788,7 +785,7 @@ const Grid = function Grid2(props) {
           break;
         case "Enter":
           if (editMode && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-            if (cursorRowIdx == void 0) {
+            if (cursorRowIdx === void 0) {
               moveCursor(focusedPart, 0, 0);
             } else {
               moveCursor(focusedPart, cursorRowIdx + 1, cursorColIdx);
@@ -829,7 +826,7 @@ const Grid = function Grid2(props) {
   );
   const onKeyDown = useCallback(
     (event) => {
-      if (cursorColIdx != void 0 && cursorRowIdx != void 0) {
+      if (cursorColIdx !== void 0 && cursorRowIdx !== void 0) {
         const column = cols[cursorColIdx];
         if (column.info.props.onKeyDown) {
           column.info.props.onKeyDown(event, cursorRowIdx);
@@ -880,143 +877,139 @@ const Grid = function Grid2(props) {
       onVisibleRowRangeChange(visRowRng.start, visRowRng.end);
     }
   }, [onVisibleRowRangeChange, visRowRng]);
-  return /* @__PURE__ */ jsx(GridContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx(LayoutContext.Provider, {
-      value: layoutContext,
-      children: /* @__PURE__ */ jsx(SelectionContext.Provider, {
-        value: selectionContext,
-        children: /* @__PURE__ */ jsx(ColumnDragContext.Provider, {
-          value: columnDragContext,
-          children: /* @__PURE__ */ jsx(CursorContext.Provider, {
-            value: cursorContext,
-            children: /* @__PURE__ */ jsx(SizingContext.Provider, {
-              value: sizingContext,
-              children: /* @__PURE__ */ jsx(EditorContext.Provider, {
-                value: editorContext,
-                children: /* @__PURE__ */ jsx(ColumnDataContext.Provider, {
-                  value: columnDataContext,
-                  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
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(GridContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(LayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionContext, children: /* @__PURE__ */ jsx(ColumnDragContext.Provider, { value: columnDragContext, children: /* @__PURE__ */ jsx(CursorContext.Provider, { value: cursorContext, children: /* @__PURE__ */ jsx(SizingContext.Provider, { value: sizingContext, children: /* @__PURE__ */ jsx(EditorContext.Provider, { value: editorContext, children: /* @__PURE__ */ jsx(ColumnDataContext.Provider, { value: columnDataContext, 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
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) }) }) }) }) }) }) });
 };
 
 export { Grid, SortOrder };