@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-get-values-from-range.js

@@ -0,0 +1,108 @@
+import { checkIfStringIsReference, iterateCells } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+import { useCallbackRef } from "./use-callback-ref";
+/**
+ * Get all user entered values from a range
+ * used in data validation
+ * @param param0
+ * @returns
+ */
+export const useGetValuesFromRange = ({ sheetId, getFormattedValue, getValidationValue, getSheetId, getSelectionsFromFormula, onRequestCalculate, getValidationSourceValue, }) => {
+    // Windowed hosts supply an off-window-safe reader for validation source ranges
+    // (dropdown options + commit checks) — the plain `getFormattedValue` only sees the
+    // loaded viewport there. Defaults to `getFormattedValue`.
+    const readSourceValue = getValidationSourceValue ?? getFormattedValue;
+    const getValuesFromRange = useCallback((address, callback) => {
+        const selections = getSelectionsFromFormula(address);
+        const userEnteredValues = new Map();
+        for (const selection of selections) {
+            const { range: { startRowIndex, startColumnIndex, endRowIndex, endColumnIndex, }, sheetName, } = selection;
+            const selectedSheetId = sheetName
+                ? getSheetId?.(sheetName) ?? sheetId
+                : sheetId;
+            for (const [rowIndex, columnIndex] of iterateCells(startRowIndex, endColumnIndex, endRowIndex, startColumnIndex)) {
+                const userEnteredValue = callback(selectedSheetId, rowIndex, columnIndex);
+                if (userEnteredValue) {
+                    userEnteredValues.set(userEnteredValue, {
+                        userEnteredValue,
+                    });
+                }
+            }
+        }
+        return userEnteredValues;
+    }, [getSelectionsFromFormula, getSheetId, sheetId]);
+    /**
+     * Get formatted user entered values
+     */
+    const getFormattedValuesFromRange = useCallbackRef(useCallback((address) => {
+        return [...getValuesFromRange(address, readSourceValue).values()];
+    }, [readSourceValue, getValuesFromRange]));
+    const getEffectiveValuesFromRange = useCallbackRef(useCallback((address) => {
+        return [...getValuesFromRange(address, getValidationValue).values()];
+    }, [getValidationValue, getValuesFromRange]));
+    const getFormattedValuesFromRangeAsync = useCallbackRef(useCallback(async (address, rowIndex, columnIndex, targetSheetId = sheetId) => {
+        const trimmedAddress = address?.trim() ?? "";
+        const isFormula = trimmedAddress.startsWith("=");
+        const formulaBody = isFormula ? trimmedAddress.slice(1) : trimmedAddress;
+        const hasDirectReference = checkIfStringIsReference(formulaBody);
+        const shouldCalc = isFormula &&
+            /(OFFSET|INDIRECT|FILTER|UNIQUE|SORT|SEQUENCE)\s*\(/i.test(formulaBody);
+        if (!onRequestCalculate || !shouldCalc) {
+            const selections = getSelectionsFromFormula(address);
+            if (hasDirectReference || selections.length) {
+                return [...getValuesFromRange(address, readSourceValue).values()];
+            }
+            return [];
+        }
+        const result = await onRequestCalculate(trimmedAddress, targetSheetId, rowIndex, columnIndex, { isArray: true, disablePreview: true });
+        const userEnteredValues = new Map();
+        const pushValue = (value) => {
+            if (value === null || value === undefined) {
+                return;
+            }
+            if (Array.isArray(value)) {
+                for (const entry of value) {
+                    pushValue(entry);
+                }
+                return;
+            }
+            const userEnteredValue = value instanceof Date
+                ? value.toISOString()
+                : typeof value === "boolean"
+                    ? value
+                        ? "TRUE"
+                        : "FALSE"
+                    : String(value);
+            userEnteredValues.set(userEnteredValue, { userEnteredValue });
+        };
+        if (Array.isArray(result)) {
+            if (Array.isArray(result[0])) {
+                for (const row of result) {
+                    for (const entry of row) {
+                        pushValue(entry);
+                    }
+                }
+            }
+            else {
+                for (const entry of result) {
+                    pushValue(entry);
+                }
+            }
+        }
+        else {
+            pushValue(result);
+        }
+        return [...userEnteredValues.values()];
+    }, [
+        readSourceValue,
+        getSelectionsFromFormula,
+        getValuesFromRange,
+        onRequestCalculate,
+        sheetId,
+    ]));
+    return [
+        getFormattedValuesFromRange,
+        getEffectiveValuesFromRange,
+        getFormattedValuesFromRangeAsync,
+    ];
+};

package/dist/esm/hooks/use-grid-children.d.ts

@@ -0,0 +1,31 @@
+import type { GridChildrenProps } from "@rowsncolumns/grid";
+import React from "react";
+import type { SheetCoordinate, SheetRange } from "../types";
+import type { useEmbedsCharts } from "./use-embeds-charts";
+type UseGridChildrenProps = {
+    stickyEditor?: boolean;
+    editorComponent: React.ReactElement | null;
+    chartComponents: ReturnType<typeof useEmbedsCharts>["chartComponents"];
+    embedComponents: React.JSX.Element[] | null | undefined;
+    slicerComponents: React.JSX.Element[] | null | undefined;
+    pivotPlaceholders: React.JSX.Element[] | null | undefined;
+    tableResizers: React.JSX.Element[] | null | undefined;
+    hiddenColumnMarkers: React.JSX.Element | null | undefined;
+    frozenHiddenColumnMarkers: React.JSX.Element | null | undefined;
+    hiddenRowMarkers: React.JSX.Element | null | undefined;
+    frozenHiddenRowMarkers: React.JSX.Element | null | undefined;
+    headerMenuComponent: React.JSX.Element | null | undefined;
+    isHeaderMenuInFrozenColumn?: boolean;
+    popoverComponent: React.JSX.Element | null | undefined;
+    cellExpandComponent: React.JSX.Element | null | undefined;
+    popoverRange?: SheetRange | SheetCoordinate;
+    gridLineWidth?: number;
+    frozenColumns: number;
+    frozenRows: number;
+};
+export declare const useGridChildren: ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, }: UseGridChildrenProps) => (props: GridChildrenProps) => React.JSX.Element;
+export declare const StyledGridChildren: ({ className, elevate, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    elevate?: boolean;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=use-grid-children.d.ts.map

package/dist/esm/hooks/use-grid-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-children.d.ts","sourceRoot":"","sources":["../../../hooks/use-grid-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACvE,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACxD,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,yBAAyB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7D,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,YAAY,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,oWAoB7B,oBAAoB,aAiBX,iBAAiB,sBAmI5B,CAAC;AA+BF,eAAO,MAAM,kBAAkB,GAAI,kCAIhC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,sBAS9D,CAAC"}

package/dist/esm/hooks/use-grid-children.js

@@ -0,0 +1,129 @@
+import { cn } from "@rowsncolumns/ui";
+import React, { useCallback } from "react";
+import { useEditingCellCoordinate } from "../atoms";
+import { isSheetRange } from "../helpers";
+export const useGridChildren = ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth = 1, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, }) => {
+    const editingCellCoordinate = useEditingCellCoordinate();
+    // Quite a bit of logic for non sticky editor
+    // Remove if majority dont use this
+    const stickyEditorPlacement = getCellPlacement(editingCellCoordinate, frozenRows, frozenColumns);
+    // Popover placement
+    const popoverPlacement = getCellPlacement(popoverRange, frozenRows, frozenColumns);
+    return useCallback((props) => {
+        const { frozenRowHeight, frozenColumnWidth, scrollLeft, scrollTop } = props;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(StyledGridChildren, { elevate: true, style: {
+                    top: 0,
+                    // Menus on scrollable column headers are clipped at the frozen
+                    // boundary so they don't overlap frozen column headers
+                    left: isHeaderMenuInFrozenColumn ? 0 : frozenColumnWidth,
+                    height: frozenRowHeight + gridLineWidth,
+                } },
+                React.createElement("div", { style: {
+                        // Frozen column headers do not move with horizontal scroll
+                        transform: isHeaderMenuInFrozenColumn
+                            ? undefined
+                            : `translate(-${scrollLeft + frozenColumnWidth}px, 0)`,
+                        pointerEvents: "all",
+                    } }, headerMenuComponent)),
+            React.createElement(StyledGridChildren, { style: {
+                    top: frozenRowHeight + gridLineWidth,
+                    left: frozenColumnWidth + gridLineWidth,
+                } },
+                React.createElement("div", { style: {
+                        transform: `translate(-${scrollLeft + frozenColumnWidth}px, -${scrollTop + frozenRowHeight}px)`,
+                    } },
+                    tableResizers,
+                    !stickyEditor && stickyEditorPlacement === "body"
+                        ? editorComponent
+                        : null,
+                    chartComponents.body,
+                    embedComponents,
+                    slicerComponents,
+                    pivotPlaceholders,
+                    popoverPlacement === "body" ? popoverComponent : null,
+                    cellExpandComponent)),
+            React.createElement(StyledGridChildren, { style: {
+                    left: frozenColumnWidth + gridLineWidth,
+                } },
+                React.createElement("div", { 
+                    // className="relative z-[1]"
+                    style: {
+                        transform: `translate(-${scrollLeft + frozenColumnWidth}px, 0`,
+                    } },
+                    !stickyEditor && stickyEditorPlacement === "row"
+                        ? editorComponent
+                        : null,
+                    hiddenColumnMarkers,
+                    chartComponents.frozenRow,
+                    popoverPlacement === "row" ? popoverComponent : null)),
+            React.createElement(StyledGridChildren, { style: {
+                    top: frozenRowHeight + gridLineWidth,
+                } },
+                React.createElement("div", { 
+                    // className="relative z-[1]"/
+                    style: {
+                        transform: `translate(0, -${scrollTop + frozenRowHeight}px)`,
+                    } },
+                    !stickyEditor && stickyEditorPlacement === "column"
+                        ? editorComponent
+                        : null,
+                    hiddenRowMarkers,
+                    chartComponents.frozenColumn,
+                    popoverPlacement === "column" ? popoverComponent : null)),
+            React.createElement(StyledGridChildren, null,
+                !stickyEditor && stickyEditorPlacement === "intersection"
+                    ? editorComponent
+                    : null,
+                frozenHiddenColumnMarkers,
+                frozenHiddenRowMarkers,
+                chartComponents.intersection,
+                popoverPlacement === "intersection" ? popoverComponent : null)));
+    }, [
+        editorComponent,
+        stickyEditor,
+        hiddenColumnMarkers,
+        hiddenRowMarkers,
+        frozenHiddenColumnMarkers,
+        frozenHiddenRowMarkers,
+        chartComponents,
+        embedComponents,
+        slicerComponents,
+        pivotPlaceholders,
+        tableResizers,
+        gridLineWidth,
+        headerMenuComponent,
+        isHeaderMenuInFrozenColumn,
+        stickyEditorPlacement,
+        popoverComponent,
+        popoverPlacement,
+        cellExpandComponent,
+    ]);
+};
+/**
+ * Get placement of sticky editing cell
+ * @param editingCell
+ * @param frozenRows
+ * @param frozenColumns
+ * @returns
+ */
+const getCellPlacement = (editingCell, frozenRows, frozenColumns) => {
+    if (!editingCell) {
+        return "body";
+    }
+    const { columnIndex, rowIndex } = isSheetRange(editingCell)
+        ? {
+            rowIndex: editingCell.startColumnIndex,
+            columnIndex: editingCell.startColumnIndex,
+        }
+        : editingCell;
+    if (columnIndex < frozenColumns && rowIndex < frozenRows) {
+        return "intersection";
+    }
+    if (columnIndex < frozenColumns)
+        return "column";
+    if (rowIndex < frozenRows)
+        return "row";
+    return "body";
+};
+export const StyledGridChildren = ({ className, elevate, ...props }) => (React.createElement("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none", elevate ? "z-[1]" : undefined, className), ...props }));

package/dist/esm/hooks/use-header-actions.d.ts

@@ -0,0 +1,70 @@
+import type { CellInterface, CellPosition, PosXYRequired, ScrollCoords, ViewPortProps } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { AXIS } from "../types";
+import type { useSelection } from "./use-selection";
+type UseHeaderActions = {
+    backgroundColor?: string;
+    activeCell?: CellInterface | null;
+    getScrollPosition: () => ScrollCoords | undefined;
+    getCellOffsetFromCoords: (cell: CellInterface) => CellPosition | undefined;
+    getRelativePositionFromOffset: (x: number, y: number) => PosXYRequired | null | undefined;
+    /**
+     * Callback when user resizes a column or row
+     */
+    onResize?: CanvasGridProps["onResize"];
+    /**
+     * Focus current sheet
+     */
+    focusSheet?(): void;
+    /**
+     * Called when user double clicks on a column or row
+     */
+    onAutoFit?: (index: number, axis: AXIS) => void;
+    isRowHeader(columnIndex: number): boolean;
+    isColumnHeader(rowIndex: number): boolean;
+    /**
+     * Show context menu for a cell
+     * @param cell
+     * @param x
+     * @param y
+     */
+    showContextMenu(cell: CellInterface, x: number, y: number): void;
+    selectColumn(columnIndex: number): void;
+    /**
+     * Set active cell
+     * @param coords
+     * @param shouldScroll
+     */
+    setActiveCell: ReturnType<typeof useSelection>["setActiveCell"];
+    getViewPort(): ViewPortProps;
+    isHiddenColumn: (columnIndex: number) => boolean;
+    showHeaderMenuButton?: boolean;
+    frozenRows: number;
+    frozenColumns: number;
+    headerMenuWidth?: number;
+    selectionTopBound: number;
+    resizerDimension?: number;
+    headerBorderWidth?: number;
+    containerWidth: number;
+    containerHeight: number;
+    minDimension?: number;
+    scale?: number;
+    sheetId: number;
+    selectedRowHeadersIds: number[];
+    selectedColumnHeadersIds: number[];
+    enableResizerOverflow?: boolean;
+};
+/**
+ * User header actions hook
+ * @param param0
+ * @returns
+ */
+export declare const useHeaderActions: ({ activeCell, getScrollPosition, getCellOffsetFromCoords, getRelativePositionFromOffset, onResize, onAutoFit, isRowHeader, isColumnHeader, showContextMenu, selectColumn, setActiveCell, getViewPort, isHiddenColumn, focusSheet, frozenRows, frozenColumns, showHeaderMenuButton, selectionTopBound, resizerDimension, headerBorderWidth, minDimension, containerHeight, containerWidth, backgroundColor, scale, headerMenuWidth, sheetId, selectedRowHeadersIds, selectedColumnHeadersIds, enableResizerOverflow, }: UseHeaderActions) => {
+    headerMenuComponent: React.JSX.Element | null;
+    isHeaderMenuInFrozenColumn: boolean;
+    headerResizer: React.JSX.Element | null;
+    isDragging: boolean;
+};
+export {};
+//# sourceMappingURL=use-header-actions.d.ts.map

package/dist/esm/hooks/use-header-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-header-actions.d.ts","sourceRoot":"","sources":["../../../hooks/use-header-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,KAAK,gBAAgB,GAAG;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD,uBAAuB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,GAAG,SAAS,CAAC;IAC3E,6BAA6B,EAAE,CAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,KACN,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,IAAI,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C;;;;;OAKG;IACH,eAAe,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjE,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC;;;;OAIG;IACH,aAAa,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,eAAe,CAAC,CAAC;IAChE,WAAW,IAAI,aAAa,CAAC;IAC7B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,ufA+B9B,gBAAgB;;;;;CA8VlB,CAAC"}

package/dist/esm/hooks/use-header-actions.js

@@ -0,0 +1,248 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { scheduleLowPriorityCallback } from "../api/scheduler";
+import { Headermenu } from "../components/header-menu";
+import { HeaderResizer } from "../components/header-resizer";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+/**
+ * User header actions hook
+ * @param param0
+ * @returns
+ */
+export const useHeaderActions = ({ activeCell, getScrollPosition, getCellOffsetFromCoords, getRelativePositionFromOffset, onResize, onAutoFit, isRowHeader, isColumnHeader, showContextMenu, selectColumn, setActiveCell, getViewPort, isHiddenColumn, focusSheet, frozenRows, frozenColumns, showHeaderMenuButton, selectionTopBound, resizerDimension = 5, headerBorderWidth = 1, minDimension = 5, containerHeight, containerWidth, backgroundColor, scale = 1, headerMenuWidth = 16 * scale, sheetId, selectedRowHeadersIds, selectedColumnHeadersIds, enableResizerOverflow = false, }) => {
+    const [dimension, setDimension] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStartPos = useRef(0);
+    const activeCellRef = useRef(undefined);
+    const axisRef = useRef(undefined);
+    const dimensionRef = useRef(0);
+    const initialDimensionRef = useRef(0);
+    const hiddenMarkerDim = 15;
+    const selectedIndexesRef = useRef(undefined);
+    useIsomorphicLayoutEffect(() => {
+        dimensionRef.current = dimension;
+    }, [dimension]);
+    useIsomorphicLayoutEffect(() => {
+        selectedIndexesRef.current =
+            axisRef.current === "x"
+                ? selectedRowHeadersIds
+                : selectedColumnHeadersIds;
+    }, [isDragging, selectedColumnHeadersIds, selectedRowHeadersIds]);
+    // Check if header is selected
+    const isHeaderSelected = useCallback((index) => {
+        return selectedIndexesRef.current?.includes(index);
+    }, []);
+    // Show header menu
+    const showHeaderMenu = useCallback((activeCell, x, y) => {
+        const actualFrozenRows = frozenRows - 1;
+        const { visibleRowStartIndex } = getViewPort();
+        // Set the first visible cell
+        setActiveCell(sheetId, {
+            ...activeCell,
+            rowIndex: actualFrozenRows >= selectionTopBound
+                ? selectionTopBound
+                : visibleRowStartIndex,
+        }, false);
+        // Select entire column
+        selectColumn(activeCell.columnIndex);
+        // Show context menu
+        showContextMenu(activeCell, x, y);
+    }, [
+        sheetId,
+        frozenRows,
+        getViewPort,
+        selectionTopBound,
+        selectColumn,
+        showContextMenu,
+        setActiveCell,
+    ]);
+    /**
+     * Frozen column headers do not translate with horizontal scroll,
+     * so the menu overlay must skip the scroll offset for them
+     */
+    const isHeaderMenuInFrozenColumn = !!activeCell && activeCell.columnIndex < frozenColumns;
+    /**
+     * Header actions component
+     */
+    const headerMenuComponent = useMemo(() => {
+        if (!showHeaderMenuButton ||
+            isDragging ||
+            !activeCell ||
+            !isColumnHeader(activeCell.rowIndex) ||
+            (isColumnHeader(activeCell.rowIndex) &&
+                isRowHeader(activeCell.columnIndex))) {
+            return null;
+        }
+        // Only visible for column headers
+        const { x = 0, y = 0, width = 0, height = 0, } = getCellOffsetFromCoords(activeCell) ?? {};
+        const isSelected = isHeaderSelected(axisRef.current === "x" ? activeCell.rowIndex : activeCell.columnIndex);
+        const isNextColumnHidden = isHiddenColumn(activeCell.columnIndex + 1);
+        const spacing = (height - headerMenuWidth) / 2;
+        const left = x +
+            // scrollLeft +
+            width -
+            headerMenuWidth -
+            spacing +
+            (isNextColumnHidden ? -hiddenMarkerDim + spacing : 0);
+        const top = y + (height - headerMenuWidth) / 2;
+        return (React.createElement(Headermenu, { left: left, top: top, dimension: headerMenuWidth, onClick: (e) => {
+                showHeaderMenu(activeCell, e.nativeEvent.clientX, e.nativeEvent.clientY);
+            }, 
+            /**
+             * We are listening to mousedown events in
+             * <BaseGrid />
+             * This div appears above it and events dont get
+             * propagated to the BaseGrid
+             */
+            onContextMenu: (e) => {
+                showHeaderMenu(activeCell, e.nativeEvent.clientX, e.nativeEvent.clientY);
+            }, isSelected: isSelected, scale: scale }));
+    }, [
+        activeCell,
+        headerMenuWidth,
+        showHeaderMenuButton,
+        hiddenMarkerDim,
+        isDragging,
+        isHiddenColumn,
+        showHeaderMenu,
+        getCellOffsetFromCoords,
+        isColumnHeader,
+        isRowHeader,
+        isHeaderSelected,
+        scale,
+    ]);
+    /**
+     * Called when user drags header resize component
+     */
+    const handleMouseMove = useCallback((e) => {
+        const relativePosition = getRelativePositionFromOffset(e.clientX, e.clientY);
+        if (!relativePosition) {
+            return;
+        }
+        const pos = axisRef.current === "x" ? relativePosition.y : relativePosition.x;
+        let finalDimension = pos - dragStartPos.current;
+        if (initialDimensionRef.current + finalDimension < minDimension) {
+            finalDimension = minDimension - initialDimensionRef.current;
+        }
+        setDimension(finalDimension);
+    }, [minDimension, getRelativePositionFromOffset]);
+    /**
+     * Called when user finishes dragging the component
+     */
+    const handleMouseUp = useCallback(() => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        // Header resizer does not update otherwise.. @Vinay TODO Fix this later
+        scheduleLowPriorityCallback(() => {
+            setDimension(0);
+            setIsDragging(false);
+        });
+        if (!activeCellRef.current || !axisRef.current || !dimensionRef.current) {
+            return;
+        }
+        const activeCellIndex = axisRef.current === "x"
+            ? activeCellRef.current?.rowIndex
+            : activeCellRef.current?.columnIndex;
+        const indexes = selectedIndexesRef.current?.length &&
+            selectedIndexesRef.current.includes(activeCellIndex)
+            ? selectedIndexesRef.current
+            : [activeCellIndex];
+        const finalDimension = Math.max(0, initialDimensionRef.current + dimensionRef.current);
+        onResize?.(sheetId, indexes, finalDimension / scale, axisRef.current);
+        // Keep the focus back
+        focusSheet?.();
+        activeCellRef.current = null;
+    }, [handleMouseMove, onResize, focusSheet, scale, sheetId]);
+    /**
+     * When user activates resize component
+     * @param e
+     * @returns
+     */
+    const handleMouseDown = useCallback((e) => {
+        if (!activeCell || e.button !== 0) {
+            return;
+        }
+        setIsDragging(true);
+        const relativePosition = getRelativePositionFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!relativePosition) {
+            return;
+        }
+        const { width = 0, height = 0 } = getCellOffsetFromCoords(activeCell) ?? {};
+        activeCellRef.current = activeCell;
+        axisRef.current = activeCell?.rowIndex === 0 ? "y" : "x";
+        dragStartPos.current =
+            axisRef.current === "x" ? relativePosition.y : relativePosition.x;
+        initialDimensionRef.current = axisRef.current === "x" ? height : width;
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [
+        activeCell,
+        handleMouseMove,
+        handleMouseUp,
+        getCellOffsetFromCoords,
+        getRelativePositionFromOffset,
+    ]);
+    /**
+     * Header resize component
+     */
+    const headerResizer = useMemo(() => {
+        const currentCell = isDragging ? activeCellRef.current : activeCell;
+        if (!currentCell) {
+            return null;
+        }
+        const { rowIndex, columnIndex } = currentCell;
+        if ((!isRowHeader(columnIndex) && !isColumnHeader(rowIndex)) ||
+            (isRowHeader(columnIndex) && isColumnHeader(rowIndex))) {
+            return null;
+        }
+        const { x = 0, y = 0, width = 0, height = 0, } = getCellOffsetFromCoords(currentCell) ?? {};
+        const { scrollLeft: scrollX = 0, scrollTop: scrollY = 0 } = getScrollPosition() ?? {};
+        const axis = isColumnHeader(rowIndex) ? "y" : "x";
+        // Frozen rows/columns are not affected by scroll
+        const scrollLeft = columnIndex < frozenColumns ? 0 : scrollX;
+        const scrollTop = rowIndex < frozenRows ? 0 : scrollY;
+        const left = axis === "y"
+            ? Math.min(x -
+                scrollLeft +
+                width -
+                resizerDimension +
+                dimension +
+                headerBorderWidth, enableResizerOverflow ? Number.MAX_SAFE_INTEGER : containerWidth)
+            : headerBorderWidth;
+        const top = axis === "x"
+            ? Math.min(y -
+                scrollTop +
+                height -
+                resizerDimension +
+                dimension +
+                headerBorderWidth, enableResizerOverflow ? Number.MAX_SAFE_INTEGER : containerHeight)
+            : headerBorderWidth;
+        const resizerWidth = axis === "y" ? resizerDimension : width - headerBorderWidth;
+        const resizerHeight = axis === "y" ? height - headerBorderWidth : resizerDimension;
+        const index = axis === "y" ? columnIndex : rowIndex;
+        return (React.createElement(HeaderResizer, { left: left, top: top, width: resizerWidth, height: resizerHeight, axis: axis, onMouseDown: handleMouseDown, onMouseMove: (e) => e.stopPropagation(), isDragging: isDragging, dimension: resizerDimension, onAutoFit: onAutoFit, index: index, containerHeight: containerHeight, containerWidth: containerWidth, backgroundColor: backgroundColor }));
+    }, [
+        activeCell,
+        dimension,
+        isDragging,
+        resizerDimension,
+        headerBorderWidth,
+        frozenRows,
+        frozenColumns,
+        onAutoFit,
+        containerWidth,
+        containerHeight,
+        backgroundColor,
+        getCellOffsetFromCoords,
+        getScrollPosition,
+        handleMouseDown,
+        isRowHeader,
+        isColumnHeader,
+        enableResizerOverflow,
+    ]);
+    return {
+        headerMenuComponent,
+        isHeaderMenuInFrozenColumn,
+        headerResizer,
+        isDragging,
+    };
+};

package/dist/esm/hooks/use-hidden-dimension-markers.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { Sheet } from "../types";
+type InputProps = {
+    sheetId: number;
+    columnMetadata: Sheet["columnMetadata"];
+    rowMetadata: Sheet["rowMetadata"];
+    onShowColumn: CanvasGridProps["onShowColumn"];
+    onShowRow: CanvasGridProps["onShowRow"];
+    isFrozenColumn(columnIndex: number): boolean;
+    isFrozenRow(rowIndex: number): boolean;
+    focusSheet(): void;
+    rowCount: number;
+    columnCount: number;
+    HiddenRowMarkers?: CanvasGridProps["HiddenRowMarkers"];
+    HiddenColumnMarkers?: CanvasGridProps["HiddenColumnMarkers"];
+};
+export declare const useHiddenDimensionMarkers: ({ sheetId, columnMetadata, rowMetadata, onShowColumn, onShowRow, isFrozenColumn, isFrozenRow, focusSheet, rowCount, columnCount, HiddenRowMarkers, HiddenColumnMarkers, }: InputProps) => readonly [React.JSX.Element, React.JSX.Element, React.JSX.Element, React.JSX.Element];
+export {};
+//# sourceMappingURL=use-hidden-dimension-markers.d.ts.map

package/dist/esm/hooks/use-hidden-dimension-markers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hidden-dimension-markers.d.ts","sourceRoot":"","sources":["../../../hooks/use-hidden-dimension-markers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAKzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACxC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAClC,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,UAAU,IAAI,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,mBAAmB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,2KAavC,UAAU,0FAsJZ,CAAC"}