@salt-ds/data-grid 1.0.0

package/dist-cjs/packages/grid/src/internal/gridHooks.js

@@ -0,0 +1,916 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var NumberRange = require('../NumberRange.js');
+var utils = require('./utils.js');
+var core = require('@salt-ds/core');
+
+function useActiveOnWheel(onWheel) {
+  const tableRef = react.useRef(null);
+  react.useEffect(() => {
+    const table = tableRef.current;
+    if (table && onWheel) {
+      table.addEventListener("wheel", onWheel, { passive: false });
+      return () => {
+        table.removeEventListener("wheel", onWheel);
+      };
+    }
+  }, [tableRef.current]);
+  return tableRef;
+}
+function sumWidth(columns) {
+  return columns.reduce((p, x) => p + x.info.width, 0);
+}
+function useSumWidth(columns) {
+  return react.useMemo(() => sumWidth(columns), [columns]);
+}
+function useSum(source) {
+  return react.useMemo(() => source.reduce((p, x) => p + x, 0), source);
+}
+function sumRangeWidth(columns, range) {
+  let w = 0;
+  range.forEach((i) => {
+    w += columns[i].info.width;
+  });
+  return w;
+}
+function useSumRangeWidth(columns, range) {
+  return react.useMemo(() => sumRangeWidth(columns, range), [columns, range]);
+}
+function useMemoRng(fn, deps) {
+  const prevRef = react.useRef(NumberRange.NumberRange.empty);
+  const range = react.useMemo(fn, deps);
+  if (!NumberRange.NumberRange.equals(prevRef.current, range)) {
+    prevRef.current = range;
+  }
+  return prevRef.current;
+}
+function useBodyVisibleColumnRange(midColumns, scrollLeft, clientMidWidth) {
+  return useMemoRng(() => {
+    if (clientMidWidth === 0 || midColumns.length === 0) {
+      return NumberRange.NumberRange.empty;
+    }
+    let width = scrollLeft;
+    let start = 0;
+    for (let i = 0; i < midColumns.length; ++i) {
+      const colWidth = midColumns[i].info.width;
+      if (width > colWidth) {
+        width -= colWidth;
+      } else {
+        start = i;
+        width += clientMidWidth;
+        break;
+      }
+    }
+    let end = start + 1;
+    for (let i = start; i < midColumns.length; ++i) {
+      const colWidth = midColumns[i].info.width;
+      width -= colWidth;
+      end = i + 1;
+      if (width <= 0) {
+        break;
+      }
+    }
+    if (end > midColumns.length) {
+      end = midColumns.length;
+    }
+    return new NumberRange.NumberRange(start, end);
+  }, [midColumns, scrollLeft, clientMidWidth]);
+}
+function useClientMidWidth(clientWidth, leftWidth, rightWidth) {
+  return react.useMemo(
+    () => clientWidth - leftWidth - rightWidth,
+    [clientWidth, leftWidth, rightWidth]
+  );
+}
+function useClientMidHeight(clientHeight, topHeight, botHeight) {
+  return react.useMemo(
+    () => clientHeight - topHeight - botHeight,
+    [clientHeight, topHeight, botHeight]
+  );
+}
+function useBodyVisibleAreaTop(rowHeight, visibleRowRange, topHeight) {
+  return react.useMemo(() => {
+    let top = topHeight + visibleRowRange.start * rowHeight;
+    if (visibleRowRange.start > 0) {
+      top += 1;
+    }
+    return top;
+  }, [rowHeight, visibleRowRange, topHeight]);
+}
+function useVisibleRowRange(scrollTop, clientMidHeight, rowHeight, rowCount) {
+  return useMemoRng(() => {
+    if (rowHeight < 1) {
+      return NumberRange.NumberRange.empty;
+    }
+    const firstRowHeight = rowHeight + 1;
+    const start = scrollTop > firstRowHeight ? 1 + Math.floor((scrollTop - firstRowHeight) / rowHeight) : 0;
+    let endPos = scrollTop + clientMidHeight;
+    if (start === 0) {
+      endPos -= 1;
+    }
+    const end = Math.min(
+      rowCount,
+      Math.max(start, Math.ceil(endPos / rowHeight))
+    );
+    return new NumberRange.NumberRange(start, end);
+  }, [scrollTop, clientMidHeight, rowHeight, rowCount]);
+}
+function useColumnRange(columns, range) {
+  return react.useMemo(() => columns.slice(range.start, range.end), [columns, range]);
+}
+function useLeftScrolledOutWidth(midColumns, bodyVisibleColumnRange) {
+  return react.useMemo(() => {
+    let w = 0;
+    for (let i = 0; i < bodyVisibleColumnRange.start; ++i) {
+      w += midColumns[i].info.width;
+    }
+    return w;
+  }, [midColumns, bodyVisibleColumnRange]);
+}
+function useRowModels(getKey, rowData, visibleRowRange) {
+  return react.useMemo(() => {
+    const rows = [];
+    visibleRowRange.forEach((i) => {
+      const key = getKey(rowData[i], i);
+      rows.push({ data: rowData[i], key, index: i });
+    });
+    return rows;
+  }, [getKey, rowData, visibleRowRange]);
+}
+const useColumnGroups = (grpPs, startIdx) => react.useMemo(
+  () => grpPs.map((data, i) => {
+    const childrenIds = react.Children.toArray(data.children).map((child) => {
+      if (!react.isValidElement(child)) {
+        return void 0;
+      }
+      return child.props.id;
+    }).filter((x) => x !== void 0);
+    const colSpan = childrenIds.length;
+    return {
+      data,
+      index: i + startIdx,
+      childrenIds,
+      colSpan,
+      columnSeparator: "regular",
+      rowSeparator: "regular"
+    };
+  }),
+  [grpPs, startIdx]
+);
+function useVisibleColumnGroupRange(bodyVisColRng, midCols, midGrpByColId, leftGrpCount) {
+  return useMemoRng(() => {
+    if (bodyVisColRng.length === 0) {
+      return NumberRange.NumberRange.empty;
+    }
+    const firstVisibleCol = midCols[bodyVisColRng.start];
+    const lastVisibleCol = midCols[bodyVisColRng.end - 1];
+    const firstVisibleGroup = midGrpByColId.get(firstVisibleCol.info.props.id);
+    const lastVisibleGroup = midGrpByColId.get(lastVisibleCol.info.props.id);
+    if (!firstVisibleGroup || !lastVisibleGroup) {
+      return NumberRange.NumberRange.empty;
+    }
+    return new NumberRange.NumberRange(
+      firstVisibleGroup.index - leftGrpCount,
+      lastVisibleGroup.index + 1 - leftGrpCount
+    );
+  }, [bodyVisColRng, midCols, midGrpByColId, leftGrpCount]);
+}
+function last(source) {
+  return source[source.length - 1];
+}
+function useHeadVisibleColumnRange(bodyVisColRng, visColGrps, midColsById, leftColCount) {
+  return useMemoRng(() => {
+    var _a, _b;
+    if (visColGrps.length === 0) {
+      return bodyVisColRng;
+    }
+    const firstVisibleGroup = visColGrps[0];
+    const lastVisibleGroup = last(visColGrps);
+    const firstColId = firstVisibleGroup.childrenIds[0];
+    const lastColId = last(lastVisibleGroup.childrenIds);
+    const firstColIdx = (_a = midColsById.get(firstColId)) == null ? void 0 : _a.index;
+    const lastColIdx = (_b = midColsById.get(lastColId)) == null ? void 0 : _b.index;
+    if (firstColIdx === void 0 || lastColIdx === void 0) {
+      return NumberRange.NumberRange.empty;
+    }
+    return new NumberRange.NumberRange(
+      firstColIdx - leftColCount,
+      lastColIdx + 1 - leftColCount
+    );
+  }, [bodyVisColRng, visColGrps, midColsById, leftColCount]);
+}
+function useCols(colInfos, startIdx, groups) {
+  return react.useMemo(() => {
+    const edgeColIds = /* @__PURE__ */ new Set();
+    groups.forEach((g) => {
+      edgeColIds.add(last(g.childrenIds));
+    });
+    const columnModels = colInfos.map((info, i) => ({
+      info,
+      index: i + startIdx,
+      separator: edgeColIds.has(info.props.id) ? "groupEdge" : "regular"
+    }));
+    return columnModels;
+  }, [colInfos, startIdx, groups]);
+}
+function useScrollToCell(visRowRng, rowHeight, clientMidHeight, midCols, bodyVisColRng, clientMidWidth, scroll) {
+  return react.useCallback(
+    (part, rowIdx, colIdx) => {
+      if (part !== "body") {
+        return;
+      }
+      let x = void 0;
+      let y = void 0;
+      if (rowIdx <= visRowRng.start) {
+        y = rowIdx === 0 ? 0 : 1 + rowHeight * rowIdx;
+      } else if (rowIdx >= visRowRng.end - 1) {
+        const extraBorder = rowIdx > 0 ? 1 : 0;
+        y = Math.max(
+          0,
+          rowHeight * rowIdx + extraBorder - clientMidHeight + rowHeight
+        );
+      }
+      const isMidCol = midCols.length > 0 && colIdx >= midCols[0].index && colIdx <= last(midCols).index;
+      if (isMidCol) {
+        const midColIdx = colIdx - midCols[0].index;
+        if (midColIdx <= bodyVisColRng.start) {
+          let w = 0;
+          for (let i = 0; i < midColIdx; ++i) {
+            w += midCols[i].info.width;
+          }
+          x = w;
+        } else if (midColIdx >= bodyVisColRng.end - 1) {
+          let w = 0;
+          for (let i = 0; i <= midColIdx; ++i) {
+            w += midCols[i].info.width;
+          }
+          x = Math.max(0, w - clientMidWidth);
+        }
+      }
+      if (x !== void 0 || y !== void 0) {
+        scroll(x, y, "table");
+      }
+    },
+    [
+      visRowRng,
+      rowHeight,
+      clientMidHeight,
+      midCols,
+      bodyVisColRng,
+      clientMidWidth,
+      scroll
+    ]
+  );
+}
+const MIN_COLUMN_WIDTH = 10;
+function useColumnResize(cols, resizeColumn) {
+  const columnResizeDataRef = react.useRef();
+  const onMouseUp = react.useCallback(() => {
+    var _a;
+    (_a = columnResizeDataRef.current) == null ? void 0 : _a.eventsUnsubscription();
+    columnResizeDataRef.current = void 0;
+  }, []);
+  const onMouseMove = react.useCallback((event) => {
+    const x = event.screenX;
+    const { startX, columnIndex, initialColumnWidth, minWidth } = columnResizeDataRef.current;
+    const shift = x - startX;
+    let width = Math.max(minWidth, initialColumnWidth + shift);
+    columnResizeDataRef.current.resizeColumn(columnIndex, Math.round(width));
+  }, []);
+  return react.useCallback(
+    (event) => {
+      const targetElement = event.target;
+      const [columnIndexAttribute, thElement] = utils.getAttribute(
+        targetElement,
+        "data-column-index"
+      );
+      const columnIndex = parseInt(columnIndexAttribute, 10);
+      document.addEventListener("mouseup", onMouseUp);
+      document.addEventListener("mousemove", onMouseMove);
+      const initialColumnWidth = thElement.getBoundingClientRect().width;
+      columnResizeDataRef.current = {
+        startX: event.screenX,
+        startY: event.screenY,
+        eventsUnsubscription: () => {
+          document.removeEventListener("mouseup", onMouseUp);
+          document.removeEventListener("mousemove", onMouseMove);
+        },
+        columnIndex,
+        initialColumnWidth,
+        resizeColumn,
+        minWidth: cols[columnIndex].info.props.minWidth || MIN_COLUMN_WIDTH
+      };
+      event.preventDefault();
+    },
+    [resizeColumn]
+  );
+}
+function useFlatten(map) {
+  return react.useMemo(() => {
+    const entries = [...map.entries()].filter(([index, value]) => !!value);
+    entries.sort((a, b) => a[0] - b[0]);
+    return entries.map((x) => x[1]);
+  }, [map]);
+}
+function useColMap() {
+  return react.useState(/* @__PURE__ */ new Map());
+}
+function useGrpMap() {
+  return react.useState(/* @__PURE__ */ new Map());
+}
+function useColumnRegistry(children) {
+  const [leftColMap, setLeftColMap] = useColMap();
+  const [rightColMap, setRightColMap] = useColMap();
+  const [midColMap, setMidColMap] = useColMap();
+  const [leftGrpMap, setLeftGrpMap] = useGrpMap();
+  const [rightGrpMap, setRightGrpMap] = useGrpMap();
+  const [midGrpMap, setMidGrpMap] = useGrpMap();
+  const [editorMap, setEditorMap] = react.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const leftColInfos = useFlatten(leftColMap);
+  const rightColInfos = useFlatten(rightColMap);
+  const midColInfos = useFlatten(midColMap);
+  const leftGrpPs = useFlatten(leftGrpMap);
+  const rightGrpPs = useFlatten(rightGrpMap);
+  const midGrpPs = useFlatten(midGrpMap);
+  const leftGroups = useColumnGroups(leftGrpPs, 0);
+  const midGroups = useColumnGroups(midGrpPs, leftGroups.length);
+  const rightGroups = useColumnGroups(
+    rightGrpPs,
+    leftGroups.length + midGroups.length
+  );
+  if (leftGroups.length > 0) {
+    last(leftGroups).columnSeparator = "pinned";
+  }
+  if (rightGroups.length > 0 && midGroups.length > 0) {
+    last(midGroups).columnSeparator = "pinned";
+  }
+  const leftCols = useCols(leftColInfos, 0, leftGroups);
+  const midCols = useCols(
+    midColInfos,
+    leftCols.length,
+    midGroups
+  );
+  const rightCols = useCols(
+    rightColInfos,
+    leftCols.length + midCols.length,
+    rightGroups
+  );
+  if (leftCols.length > 0) {
+    last(leftCols).separator = "pinned";
+  }
+  if (rightCols.length > 0 && midCols.length > 0) {
+    last(midCols).separator = "pinned";
+  }
+  const chPosById = react.useRef(/* @__PURE__ */ new Map());
+  const indexChildren = () => {
+    const m = /* @__PURE__ */ new Map();
+    let i = 0;
+    const indexChildrenRec = (c) => {
+      if (!c) {
+        return;
+      }
+      react.Children.forEach(c, (x) => {
+        if (react.isValidElement(x) && x.props.id !== void 0) {
+          m.set(x.props.id, i);
+          i++;
+          indexChildrenRec(x.props.children);
+        }
+      });
+    };
+    indexChildrenRec(children);
+    return m;
+  };
+  chPosById.current = indexChildren();
+  const getChildIndex = react.useCallback((id) => {
+    const idx = chPosById.current.get(id);
+    if (idx === void 0) {
+      console.log(`Unknown child id "${id}"`);
+      console.log(
+        `Known ids: ${Array.from(chPosById.current.keys()).map((x) => `"${x}"`).join(", ")}`
+      );
+      throw new Error(`Unknown child id: "${id}"`);
+    }
+    return idx;
+  }, []);
+  const getColMapSet = (pinned) => pinned === "left" ? setLeftColMap : pinned === "right" ? setRightColMap : setMidColMap;
+  const onColumnAdded = react.useCallback((columnInfo) => {
+    const { id, pinned } = columnInfo.props;
+    const index = getChildIndex(id);
+    getColMapSet(pinned)(utils.makeMapAdder(index, columnInfo));
+  }, []);
+  const onColumnRemoved = react.useCallback(
+    (index, columnInfo) => {
+      const { id, pinned } = columnInfo.props;
+      getColMapSet(pinned)(utils.makeMapDeleter(index));
+    },
+    []
+  );
+  const getGrpMapSet = (pinned) => pinned === "left" ? setLeftGrpMap : pinned === "right" ? setRightGrpMap : setMidGrpMap;
+  const onColumnGroupAdded = react.useCallback((colGroupProps) => {
+    const { id, pinned } = colGroupProps;
+    getGrpMapSet(pinned)(utils.makeMapAdder(getChildIndex(id), colGroupProps));
+  }, []);
+  const onColumnGroupRemoved = react.useCallback(
+    (index, colGroupProps) => {
+      const { id, pinned } = colGroupProps;
+      getGrpMapSet(pinned)(utils.makeMapDeleter(index));
+    },
+    []
+  );
+  const onEditorAdded = react.useCallback((info) => {
+    const { columnId } = info;
+    setEditorMap(utils.makeMapAdder(columnId, info));
+  }, []);
+  const onEditorRemoved = react.useCallback((info) => {
+    const { columnId } = info;
+    setEditorMap(utils.makeMapDeleter(columnId));
+  }, []);
+  const getEditor = react.useCallback(
+    (columnId) => editorMap.get(columnId),
+    [editorMap]
+  );
+  const contextValue = react.useMemo(
+    () => ({
+      getChildIndex,
+      onColumnAdded,
+      onColumnRemoved,
+      onColumnGroupAdded,
+      onColumnGroupRemoved,
+      onEditorAdded,
+      onEditorRemoved,
+      getEditor
+    }),
+    [
+      getChildIndex,
+      onColumnAdded,
+      onColumnRemoved,
+      onColumnGroupAdded,
+      onColumnGroupRemoved,
+      onEditorAdded,
+      onEditorRemoved,
+      getEditor
+    ]
+  );
+  return {
+    leftCols,
+    midCols,
+    rightCols,
+    leftGroups,
+    midGroups,
+    rightGroups,
+    contextValue
+  };
+}
+function useRowSelection(rowKeyGetter, rowData, defaultSelectedRowIdxs, selectedRowIdxs, rowSelectionMode, onRowSelected) {
+  const selectedRowIdxsProp = react.useMemo(() => {
+    if (selectedRowIdxs == void 0) {
+      return void 0;
+    }
+    return new Set(selectedRowIdxs);
+  }, [selectedRowIdxs]);
+  const defaultSelectedRowIdxsProp = react.useMemo(() => {
+    if (defaultSelectedRowIdxs == void 0) {
+      return /* @__PURE__ */ new Set([]);
+    }
+    return new Set(defaultSelectedRowIdxs);
+  }, [defaultSelectedRowIdxs]);
+  const [selRowIdxs, setSelRowIdxs] = core.useControlled({
+    controlled: selectedRowIdxsProp,
+    default: defaultSelectedRowIdxsProp,
+    name: "useRowSelection",
+    state: "selRowIdxs"
+  });
+  const [lastSelRowIdx, setLastSelRowIdx] = react.useState(
+    void 0
+  );
+  react.useEffect(() => {
+    if (rowSelectionMode === "none" && selRowIdxs.size > 0 || rowSelectionMode === "single" && selRowIdxs.size > 1) {
+      setSelRowIdxs(/* @__PURE__ */ new Set());
+    }
+  }, [rowSelectionMode, selRowIdxs, setSelRowIdxs]);
+  const selectRows = react.useCallback(
+    ({
+      rowIndex,
+      isRange = false,
+      incremental = false,
+      unselectOtherRows = false
+    }) => {
+      const idxFrom = rowSelectionMode === "multi" && lastSelRowIdx !== void 0 && isRange ? lastSelRowIdx : void 0;
+      let nextSelRowIdxs = void 0;
+      let nextLastSelRowIdx = void 0;
+      if (idxFrom === void 0) {
+        if (unselectOtherRows) {
+          if (incremental && selRowIdxs.has(rowIndex)) {
+            nextSelRowIdxs = /* @__PURE__ */ new Set([]);
+            nextLastSelRowIdx = void 0;
+          } else {
+            nextSelRowIdxs = /* @__PURE__ */ new Set([rowIndex]);
+            nextLastSelRowIdx = rowIndex;
+          }
+        } else {
+          if (incremental && rowSelectionMode === "multi") {
+            nextSelRowIdxs = new Set(selRowIdxs);
+            if (nextSelRowIdxs.has(rowIndex)) {
+              nextSelRowIdxs.delete(rowIndex);
+              nextLastSelRowIdx = void 0;
+            } else {
+              nextSelRowIdxs.add(rowIndex);
+              nextLastSelRowIdx = rowIndex;
+            }
+          } else {
+            nextSelRowIdxs = /* @__PURE__ */ new Set([rowIndex]);
+            nextLastSelRowIdx = rowIndex;
+          }
+        }
+      } else {
+        const s = incremental ? new Set(selRowIdxs) : /* @__PURE__ */ new Set();
+        const idxs = [rowIndex, idxFrom];
+        idxs.sort((a, b) => a - b);
+        const rowIdxs = [];
+        for (let i = idxs[0]; i <= idxs[1]; ++i) {
+          rowIdxs.push(i);
+        }
+        if (selRowIdxs.has(rowIndex)) {
+          rowIdxs.forEach((k) => s.delete(k));
+        } else {
+          rowIdxs.forEach((k) => s.add(k));
+        }
+        nextSelRowIdxs = s;
+        nextLastSelRowIdx = rowIndex;
+      }
+      setSelRowIdxs(nextSelRowIdxs);
+      setLastSelRowIdx(nextLastSelRowIdx);
+      if (onRowSelected) {
+        onRowSelected(Array.from(nextSelRowIdxs.keys()));
+      }
+    },
+    [
+      selRowIdxs,
+      lastSelRowIdx,
+      setSelRowIdxs,
+      setLastSelRowIdx,
+      rowData,
+      rowKeyGetter,
+      onRowSelected
+    ]
+  );
+  const isAllSelected = selRowIdxs.size === rowData.length;
+  const isAnySelected = selRowIdxs.size > 0;
+  const selectAll = react.useCallback(() => {
+    const allRowIdxs = [...new Array(rowData.length).keys()].map((_, i) => i);
+    setSelRowIdxs(new Set(allRowIdxs));
+    if (onRowSelected) {
+      onRowSelected(allRowIdxs);
+    }
+  }, [rowData, setSelRowIdxs]);
+  const unselectAll = react.useCallback(() => {
+    setSelRowIdxs(/* @__PURE__ */ new Set());
+    if (onRowSelected) {
+      onRowSelected([]);
+    }
+  }, [setSelRowIdxs]);
+  const onMouseDown = react.useCallback(
+    (event) => {
+      if (rowSelectionMode === "none") {
+        return;
+      }
+      const target = event.target;
+      try {
+        const [rowIndex] = utils.getCellPosition(target);
+        selectRows({
+          rowIndex,
+          isRange: event.shiftKey,
+          incremental: event.metaKey || event.ctrlKey
+        });
+      } catch (e) {
+      }
+    },
+    [selectRows, rowSelectionMode]
+  );
+  return {
+    onMouseDown,
+    selRowIdxs,
+    isAllSelected,
+    isAnySelected,
+    selectRows,
+    selectAll,
+    unselectAll
+  };
+}
+const COLUMN_DRAG_TOLERANCE = 10;
+function useColumnMove(columnMove, rootRef, leftCols, midCols, rightCols, cols, scrollLeft, clientMidWidth, onColumnMove) {
+  const moveRef = react.useRef();
+  const activeTargetRef = react.useRef(void 0);
+  const [dragState, setDragState] = react.useState(
+    void 0
+  );
+  const columnDragStart = react.useCallback(
+    (columnIndex, x, y) => {
+      setDragState({ columnIndex, x, y });
+    },
+    [setDragState]
+  );
+  const columnDrag = react.useCallback(
+    (x, y) => {
+      setDragState((old) => {
+        return { ...old, x, y };
+      });
+    },
+    [setDragState]
+  );
+  const columnDrop = react.useCallback(() => {
+    var _a, _b, _c, _d;
+    const toIndex = (_a = activeTargetRef.current) == null ? void 0 : _a.columnIndex;
+    const fromIndex = (_b = moveRef.current) == null ? void 0 : _b.columnIndex;
+    const columnId = (_c = moveRef.current) == null ? void 0 : _c.columnId;
+    const handler = (_d = moveRef.current) == null ? void 0 : _d.onColumnMove;
+    if (toIndex !== void 0 && fromIndex !== void 0 && handler !== void 0 && columnId !== void 0) {
+      handler(columnId, fromIndex, toIndex);
+    }
+    setDragState(void 0);
+  }, [setDragState]);
+  const onMouseUp = react.useCallback(() => {
+    var _a, _b;
+    if ((_a = moveRef.current) == null ? void 0 : _a.dragTriggered) {
+      columnDrop();
+    }
+    (_b = moveRef.current) == null ? void 0 : _b.unsubscribe();
+    moveRef.current = void 0;
+  }, [columnDrop]);
+  const onMouseMove = react.useCallback(
+    (event) => {
+      const {
+        columnIndex,
+        startHeaderX,
+        startHeaderY,
+        startScreenX,
+        startScreenY,
+        dragTriggered
+      } = moveRef.current;
+      const shiftX = event.screenX - startScreenX;
+      const shiftY = event.screenY - startScreenY;
+      const x = startHeaderX + shiftX;
+      const y = startHeaderY + shiftY;
+      if (!dragTriggered) {
+        if (Math.sqrt(shiftX * shiftX + shiftY * shiftY) > COLUMN_DRAG_TOLERANCE) {
+          moveRef.current.dragTriggered = true;
+          columnDragStart(columnIndex, x, y);
+        }
+      } else {
+        columnDrag(x, y);
+      }
+    },
+    [columnDrag]
+  );
+  const onColumnMoveHandleMouseDown = react.useCallback(
+    (event) => {
+      const [columnIndexAttribute, thElement] = utils.getAttribute(
+        event.target,
+        "data-column-index"
+      );
+      const rootElement = rootRef.current;
+      document.addEventListener("mouseup", onMouseUp);
+      document.addEventListener("mousemove", onMouseMove);
+      const columnIndex = parseInt(columnIndexAttribute, 10);
+      const columnId = cols[columnIndex].info.props.id;
+      const thRect = thElement.getBoundingClientRect();
+      const rootRect = rootElement.getBoundingClientRect();
+      const x = thRect.x - rootRect.x;
+      const y = thRect.y - rootRect.y;
+      moveRef.current = {
+        unsubscribe: () => {
+          document.removeEventListener("mouseup", onMouseUp);
+          document.removeEventListener("mousemove", onMouseMove);
+        },
+        startScreenX: event.screenX,
+        startScreenY: event.screenY,
+        startHeaderX: x,
+        startHeaderY: y,
+        columnIndex,
+        columnId,
+        dragTriggered: false,
+        onColumnMove
+      };
+      event.preventDefault();
+    },
+    [columnDragStart, cols]
+  );
+  const onColumnMoveCancel = react.useCallback(() => {
+    var _a;
+    setDragState(void 0);
+    (_a = moveRef.current) == null ? void 0 : _a.unsubscribe();
+    moveRef.current = void 0;
+  }, [setDragState]);
+  const targets = react.useMemo(() => {
+    if (!dragState) {
+      return void 0;
+    }
+    let ts = [];
+    let x = 0;
+    leftCols.forEach((c, i2) => {
+      ts.push({ columnIndex: c.index, x });
+      x += c.info.width;
+    });
+    let w = scrollLeft;
+    let i = 0;
+    while (w > 0 && i < midCols.length) {
+      w -= midCols[i].info.width;
+      i++;
+    }
+    x -= w;
+    w += clientMidWidth;
+    while (w > 0 && i < midCols.length) {
+      const c = midCols[i];
+      ts.push({ columnIndex: c.index, x });
+      x += c.info.width;
+      w -= c.info.width;
+      i++;
+    }
+    if (rightCols.length > 0) {
+      x += w;
+      rightCols.forEach((c, i2) => {
+        ts.push({ columnIndex: c.index, x });
+        x += c.info.width;
+      });
+      ts.push({ columnIndex: last(rightCols).index + 1, x });
+    } else {
+      ts.push({ columnIndex: last(midCols).index + 1, x });
+    }
+    return ts;
+  }, [dragState, leftCols, midCols, rightCols, scrollLeft, clientMidWidth]);
+  const activeTargetIdx = react.useMemo(() => {
+    const x = dragState == null ? void 0 : dragState.x;
+    if (x === void 0 || targets === void 0 || targets.length < 1) {
+      return void 0;
+    }
+    let i = 0;
+    while (i < targets.length && targets[i].x < x) {
+      i++;
+    }
+    if (i === 0) {
+      return 0;
+    }
+    if (i >= targets.length) {
+      return targets.length - 1;
+    }
+    return targets[i].x - x < x - targets[i - 1].x ? i : i - 1;
+  }, [targets, dragState == null ? void 0 : dragState.x]);
+  const activeTarget = activeTargetIdx === void 0 ? void 0 : targets[activeTargetIdx];
+  activeTargetRef.current = activeTarget;
+  return {
+    onColumnMoveHandleMouseDown,
+    dragState,
+    activeTarget,
+    onColumnMoveCancel
+  };
+}
+function cellPositionEquals(a, b) {
+  return a.rowIdx === b.rowIdx && a.colIdx === b.colIdx;
+}
+function cellRangeEquals(a, b) {
+  if (!a) {
+    return !b;
+  }
+  return !!b && cellPositionEquals(a.start, b.start) && cellPositionEquals(a.end, b.end);
+}
+function useRangeSelection(cellSelectionMode) {
+  const mouseSelectionRef = react.useRef();
+  const keyboardSelectionRef = react.useRef();
+  if (cellSelectionMode !== "range") {
+    if (mouseSelectionRef.current) {
+      mouseSelectionRef.current.unsubscribe();
+      mouseSelectionRef.current = void 0;
+    }
+    if (keyboardSelectionRef.current) {
+      keyboardSelectionRef.current = void 0;
+    }
+  }
+  const [selectedCellRange, setSelectedCellRange] = react.useState(void 0);
+  const onMouseMove = react.useCallback((event) => {
+    const { clientX, clientY } = event;
+    const element = document.elementFromPoint(clientX, clientY);
+    try {
+      const [rowIdx, colIdx] = utils.getCellPosition(element);
+      setSelectedCellRange((old) => {
+        const { start } = mouseSelectionRef.current;
+        const p = { start, end: { rowIdx, colIdx } };
+        return cellRangeEquals(old, p) ? old : p;
+      });
+    } catch (exc) {
+    }
+  }, []);
+  const onMouseUp = react.useCallback((event) => {
+    if (!mouseSelectionRef.current) {
+      throw new Error(`useRangeSelection state is not initialized`);
+    }
+    mouseSelectionRef.current.unsubscribe();
+    mouseSelectionRef.current = void 0;
+  }, []);
+  const onCellMouseDown = react.useCallback(
+    (event) => {
+      if (cellSelectionMode !== "range") {
+        return;
+      }
+      const target = event.target;
+      try {
+        const [rowIdx, colIdx] = utils.getCellPosition(target);
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("mousemove", onMouseMove);
+        const pos = { rowIdx, colIdx };
+        mouseSelectionRef.current = {
+          start: pos,
+          unsubscribe: () => {
+            document.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("mousemove", onMouseMove);
+          }
+        };
+        setSelectedCellRange({ start: pos, end: pos });
+      } catch (exc) {
+      }
+    },
+    [cellSelectionMode]
+  );
+  const onKeyboardRangeSelectionStart = react.useCallback((pos) => {
+    keyboardSelectionRef.current = {
+      start: pos
+    };
+  }, []);
+  const onKeyboardRangeSelectionEnd = react.useCallback(() => {
+    keyboardSelectionRef.current = void 0;
+  }, []);
+  const onCursorMove = react.useCallback((pos) => {
+    if (!keyboardSelectionRef.current) {
+      return;
+    }
+    setSelectedCellRange((old) => {
+      if (!keyboardSelectionRef.current) {
+        return old;
+      }
+      const { start } = keyboardSelectionRef.current;
+      const p = { start, end: pos };
+      return cellRangeEquals(old, p) ? old : p;
+    });
+  }, []);
+  const selectRange = react.useCallback((range) => {
+    if (cellSelectionMode !== "range") {
+      return;
+    }
+    setSelectedCellRange(range);
+  }, []);
+  return {
+    selectedCellRange,
+    onCellMouseDown,
+    onKeyboardRangeSelectionStart,
+    onKeyboardRangeSelectionEnd,
+    onCursorMove,
+    selectRange
+  };
+}
+function useFocusableContent() {
+  const ref = react.useRef(null);
+  const [isFocusableContent, setFocusableContent] = react.useState(false);
+  const onFocus = (event) => {
+    if (event.target === ref.current) {
+      const nestedInteractive = ref.current.querySelector(`[tabindex="0"]`);
+      if (nestedInteractive) {
+        nestedInteractive.focus();
+        setFocusableContent(true);
+      }
+    }
+  };
+  return { ref, isFocusableContent, onFocus };
+}
+
+exports.cellPositionEquals = cellPositionEquals;
+exports.cellRangeEquals = cellRangeEquals;
+exports.last = last;
+exports.useActiveOnWheel = useActiveOnWheel;
+exports.useBodyVisibleAreaTop = useBodyVisibleAreaTop;
+exports.useBodyVisibleColumnRange = useBodyVisibleColumnRange;
+exports.useClientMidHeight = useClientMidHeight;
+exports.useClientMidWidth = useClientMidWidth;
+exports.useCols = useCols;
+exports.useColumnGroups = useColumnGroups;
+exports.useColumnMove = useColumnMove;
+exports.useColumnRange = useColumnRange;
+exports.useColumnRegistry = useColumnRegistry;
+exports.useColumnResize = useColumnResize;
+exports.useFlatten = useFlatten;
+exports.useFocusableContent = useFocusableContent;
+exports.useHeadVisibleColumnRange = useHeadVisibleColumnRange;
+exports.useLeftScrolledOutWidth = useLeftScrolledOutWidth;
+exports.useRangeSelection = useRangeSelection;
+exports.useRowModels = useRowModels;
+exports.useRowSelection = useRowSelection;
+exports.useScrollToCell = useScrollToCell;
+exports.useSum = useSum;
+exports.useSumRangeWidth = useSumRangeWidth;
+exports.useSumWidth = useSumWidth;
+exports.useVisibleColumnGroupRange = useVisibleColumnGroupRange;
+exports.useVisibleRowRange = useVisibleRowRange;
+//# sourceMappingURL=gridHooks.js.map