@salt-ds/data-grid 1.0.5 → 1.0.7

package/dist-cjs/Grid.js

@@ -1,13 +1,20 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
+var react = require('react');
+var ColumnDataContext = require('./ColumnDataContext.js');
+var ColumnDragContext = require('./ColumnDragContext.js');
+var ColumnSortContext = require('./ColumnSortContext.js');
+var CursorContext = require('./CursorContext.js');
+var EditorContext = require('./EditorContext.js');
+var GridContext = require('./GridContext.js');
+var LayoutContext = require('./LayoutContext.js');
+var SelectionContext = require('./SelectionContext.js');
+var SizingContext = require('./SizingContext.js');
 var CellMeasure = require('./internal/CellMeasure.js');
 require('./internal/Cursor.js');
 require('./internal/GroupHeaderRow.js');
@@ -18,23 +25,14 @@ var RightPart = require('./internal/RightPart.js');
 var Scrollable = require('./internal/Scrollable.js');
 require('./internal/TableRow.js');
 var utils = require('./internal/utils.js');
-var SelectionContext = require('./SelectionContext.js');
-var EditorContext = require('./EditorContext.js');
-var CursorContext = require('./CursorContext.js');
 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('./CellFrame.js');
 require('./internal/DefaultCellValue.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 ColumnGhost = require('./internal/ColumnGhost.js');
 var Grid$1 = require('./Grid.css.js');
 
 const withBaseName = core.makePrefixer("saltGrid");
@@ -115,8 +113,11 @@ const Grid = function Grid2(props) {
   );
   const {
     leftCols,
+    // Columns pinned to left
     midCols,
+    // Scrollable columns
     rightCols,
+    // Columns pinned to right
     leftGroups,
     midGroups,
     rightGroups,
@@ -124,7 +125,9 @@ const Grid = function Grid2(props) {
   } = gridHooks.useColumnRegistry(children);
   const midColsById = react.useMemo(
     () => new Map(
-      midCols.map((c) => [c.info.props.id, c])
+      midCols.map(
+        (c) => [c.info.props.id, c]
+      )
     ),
     [midCols]
   );
@@ -236,7 +239,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();
         }
@@ -273,8 +277,7 @@ const Grid = function Grid2(props) {
   });
   const customSortingFn = (_c = getColById(sortByColumnId)) == null ? void 0 : _c.info.props.customSort;
   const sortedRowData = react.useMemo(() => {
-    if (!isSortMode || onSortOrderChange)
-      return rowData;
+    if (!isSortMode || onSortOrderChange) return rowData;
     if (customSortingFn) {
       return customSortingFn({ rowData, sortOrder });
     }
@@ -364,7 +367,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];
@@ -378,14 +381,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) {
@@ -504,18 +507,12 @@ const Grid = function Grid2(props) {
     [editMode, startEditMode, endEditMode, cancelEditMode, initialText]
   );
   const [isFocused, setFocused] = react.useState(false);
-  const onFocus = react.useCallback(
-    (event) => {
-      setFocused(true);
-    },
-    [setFocused]
-  );
-  const onBlur = react.useCallback(
-    (event) => {
-      setFocused(false);
-    },
-    [setFocused]
-  );
+  const onFocus = react.useCallback(() => {
+    setFocused(true);
+  }, []);
+  const onBlur = react.useCallback(() => {
+    setFocused(false);
+  }, []);
   const cursorContext = react.useMemo(
     () => ({
       isFocused,
@@ -599,9 +596,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);
@@ -628,14 +624,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,
@@ -645,9 +641,8 @@ const Grid = function Grid2(props) {
               }
             }
             break;
-          } else {
-            return false;
           }
+          return false;
         case "a":
           if (event.ctrlKey || event.metaKey) {
             rangeSelection.selectRange({
@@ -656,9 +651,8 @@ const Grid = function Grid2(props) {
             });
             selectAll();
             return true;
-          } else {
-            return false;
           }
+          return false;
         default:
           return false;
       }
@@ -680,6 +674,7 @@ const Grid = function Grid2(props) {
   );
   const clipboardKeyHandler = react.useCallback(
     (event) => {
+      var _a2, _b2;
       const { key } = event;
       if (key === "c" && (event.ctrlKey || event.metaKey) && rangeSelection.selectedCellRange) {
         const { start, end } = rangeSelection.selectedCellRange;
@@ -692,7 +687,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("	"));
@@ -792,7 +787,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);
@@ -833,7 +828,7 @@ const Grid = function Grid2(props) {
   );
   const onKeyDown = react.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);
@@ -884,143 +879,139 @@ const Grid = function Grid2(props) {
       onVisibleRowRangeChange(visRowRng.start, visRowRng.end);
     }
   }, [onVisibleRowRangeChange, visRowRng]);
-  return /* @__PURE__ */ jsxRuntime.jsx(GridContext.GridContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.LayoutContext.Provider, {
-      value: layoutContext,
-      children: /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, {
-        value: selectionContext,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ColumnDragContext.ColumnDragContext.Provider, {
-          value: columnDragContext,
-          children: /* @__PURE__ */ jsxRuntime.jsx(CursorContext.CursorContext.Provider, {
-            value: cursorContext,
-            children: /* @__PURE__ */ jsxRuntime.jsx(SizingContext.SizingContext.Provider, {
-              value: sizingContext,
-              children: /* @__PURE__ */ jsxRuntime.jsx(EditorContext.EditorContext.Provider, {
-                value: editorContext,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ColumnDataContext.ColumnDataContext.Provider, {
-                  value: columnDataContext,
-                  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
-                          })
-                        ]
-                      })
-                    ]
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(GridContext.GridContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.LayoutContext.Provider, { value: layoutContext, children: /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionContext, children: /* @__PURE__ */ jsxRuntime.jsx(ColumnDragContext.ColumnDragContext.Provider, { value: columnDragContext, children: /* @__PURE__ */ jsxRuntime.jsx(CursorContext.CursorContext.Provider, { value: cursorContext, children: /* @__PURE__ */ jsxRuntime.jsx(SizingContext.SizingContext.Provider, { value: sizingContext, children: /* @__PURE__ */ jsxRuntime.jsx(EditorContext.EditorContext.Provider, { value: editorContext, children: /* @__PURE__ */ jsxRuntime.jsx(ColumnDataContext.ColumnDataContext.Provider, { value: columnDataContext, 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
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) }) }) }) }) }) }) });
 };
 
 exports.Grid = Grid;