@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-conditional-formatting.js

@@ -0,0 +1,497 @@
+import { cellIdentifier } from "@rowsncolumns/grid";
+import { isConditionalFormatFormulaRule, iterateCellsInRange, } from "@rowsncolumns/utils";
+import isNil from "lodash/isNil";
+import { useCallback, useMemo, useRef } from "react";
+import { computeDataBarFill, ICON_SET_COLORS, ICON_SET_GLYPHS, pickIconBucket, resolveThreshold, } from "../api/cf-overlays";
+import { isEngineEvaluatedAggregateRule } from "../api/cf-engine";
+import { windowConditionalFormatRules } from "../api/cf-window";
+import { getGradientColors } from "../api/heatmap";
+import { checkBooleanRule, shouldUsePreviousValue } from "../api/validation";
+import { getStringifiedColor } from "../themes";
+import { DEFAULT_COLUMN_COUNT, DEFAULT_ROW_COUNT } from "../config";
+export const useConditionalFormatting = ({ sheetId, theme, conditionalFormats, locale, getValidationValue, isNumberValue, getSheetRowCount, getSheetColumnCount, window: evaluationWindow, getConditionalFormatResult, }) => {
+    const previousEffectiveValueMap = useRef(undefined);
+    // Lazy initialization
+    const getPreviousValueMap = useCallback(() => {
+        if (!previousEffectiveValueMap.current) {
+            previousEffectiveValueMap.current = new Map();
+        }
+        return previousEffectiveValueMap.current;
+    }, []);
+    // Set previous value
+    const setPreviousValue = useCallback((rowIndex, columnIndex, conditionIndex, effectiveValue) => {
+        getPreviousValueMap().set(`${cellIdentifier(rowIndex, columnIndex)}_${conditionIndex}`, effectiveValue);
+    }, [getPreviousValueMap]);
+    // Get previous value
+    const getPreviousValue = useCallback((rowIndex, columnIndex, conditionIndex) => getPreviousValueMap().get(`${cellIdentifier(rowIndex, columnIndex)}_${conditionIndex}`), [getPreviousValueMap]);
+    // Helper to clamp range to actual sheet dimensions. Ranges are 1-based inclusive
+    // (data rows/columns are 1..count; index 0 is the header), so the last valid index
+    // is the count itself — a full-column selection legitimately ends at
+    // endRowIndex === rowCount, and clamping to count - 1 silently dropped the final
+    // row/column of full-height/width rules.
+    const clampRange = useCallback((range) => {
+        const rowCount = getSheetRowCount?.(range.sheetId) ?? DEFAULT_ROW_COUNT;
+        const columnCount = getSheetColumnCount?.(range.sheetId) ?? DEFAULT_COLUMN_COUNT;
+        return {
+            ...range,
+            endRowIndex: Math.min(range.endRowIndex, rowCount),
+            endColumnIndex: Math.min(range.endColumnIndex, columnCount),
+        };
+    }, [getSheetRowCount, getSheetColumnCount]);
+    return useMemo(() => {
+        const formattingByCell = new Map();
+        if (!conditionalFormats) {
+            return formattingByCell;
+        }
+        const sortedRules = conditionalFormats
+            .map((rule, index) => ({ rule, index }))
+            .sort((left, right) => {
+            const leftPriority = left.rule.priority ?? Number.POSITIVE_INFINITY;
+            const rightPriority = right.rule.priority ?? Number.POSITIVE_INFINITY;
+            if (leftPriority === rightPriority) {
+                return left.index - right.index;
+            }
+            return leftPriority - rightPriority;
+        })
+            .map(({ rule }) => rule);
+        const rules = evaluationWindow
+            ? windowConditionalFormatRules({
+                rules: sortedRules,
+                sheetId,
+                window: evaluationWindow,
+            })
+            : sortedRules;
+        // Aggregate rules the engine stamped per-cell results for. Judged on the
+        // ORIGINAL (pre-windowing) ranges: windowed ranges under-count coverage,
+        // and an over-cap rule (which the engine skipped) must keep computing.
+        const engineStampedRuleIds = getConditionalFormatResult
+            ? new Set(sortedRules
+                .filter(isEngineEvaluatedAggregateRule)
+                .map((rule) => rule.id))
+            : undefined;
+        const stopCells = new Set();
+        // Consume the engine's per-cell stamps for an aggregate rule over one
+        // (possibly window-intersected) range — cells outside the window aren't
+        // visible, and the stamps already carry the FULL-range aggregate result.
+        const applyEngineStamps = (rule, range, format) => {
+            for (const [rowIndex, columnIndex] of iterateCellsInRange(range)) {
+                if (getConditionalFormatResult?.(sheetId, rowIndex, columnIndex, rule.id) !== true) {
+                    continue;
+                }
+                const cellId = cellIdentifier(rowIndex, columnIndex);
+                if (stopCells.has(cellId)) {
+                    continue;
+                }
+                formattingByCell.set(cellId, format);
+                if (rule.stopIfTrue) {
+                    stopCells.add(cellId);
+                }
+            }
+        };
+        // There can be conditions applied
+        // to the same range
+        // So to get previous value, we have to save it
+        // in a key based on condition index
+        let conditionIndex = 0;
+        for (const rule of rules) {
+            const engineStamped = engineStampedRuleIds?.has(rule.id) ?? false;
+            const { ranges, enabled, booleanRule, gradientRule, topBottomRule, distinctRule, iconSetRule, dataBarRule, } = rule;
+            // Only look for enabled rules
+            if (typeof enabled !== "undefined" && enabled === false) {
+                continue;
+            }
+            if (booleanRule) {
+                for (const range of ranges) {
+                    // Only pick current sheet
+                    if (range?.sheetId !== sheetId) {
+                        continue;
+                    }
+                    // Clamp range to actual sheet dimensions
+                    const clampedRange = clampRange(range);
+                    const conditionType = booleanRule?.condition?.type;
+                    const isAboveBelowAverage = conditionType === "NUMBER_ABOVE_AVERAGE" ||
+                        conditionType === "NUMBER_BELOW_AVERAGE";
+                    // Engine-stamped above/below-average: the engine compared every
+                    // covered cell against the FULL range's mean — consume the stamps.
+                    if (isAboveBelowAverage && engineStamped) {
+                        applyEngineStamps(rule, clampedRange, booleanRule.format);
+                        continue;
+                    }
+                    let averageValue;
+                    if (isAboveBelowAverage) {
+                        const numericValues = [];
+                        for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                            const value = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                            if (!isNil(value) &&
+                                isNumberValue(sheetId, rowIndex, columnIndex) &&
+                                Number.isFinite(Number(value))) {
+                                numericValues.push(Number(value));
+                            }
+                        }
+                        if (numericValues.length) {
+                            averageValue =
+                                numericValues.reduce((sum, entry) => sum + entry, 0) /
+                                    numericValues.length;
+                        }
+                    }
+                    // Formula path vs sync path: see `isConditionalFormatFormulaRule`
+                    // in `libs/spreadsheet-state/api/conditional-format.ts` for the
+                    // routing policy and what stays sync (above-average, *_PREVIOUS,
+                    // calendar-relative dates, ERROR/NOT_ERROR, gradient/topBottom/distinct).
+                    const isFormulaRule = isConditionalFormatFormulaRule(rule);
+                    const usePreviousValue = !isFormulaRule &&
+                        shouldUsePreviousValue(booleanRule?.condition?.type);
+                    // Iterate all cells within this range
+                    for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                        const effectiveValue = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                        let satisfies = false;
+                        if (booleanRule?.condition) {
+                            if (isAboveBelowAverage) {
+                                if (averageValue !== undefined &&
+                                    !isNil(effectiveValue) &&
+                                    isNumberValue(sheetId, rowIndex, columnIndex)) {
+                                    const numericValue = Number(effectiveValue);
+                                    if (Number.isFinite(numericValue)) {
+                                        satisfies =
+                                            conditionType === "NUMBER_ABOVE_AVERAGE"
+                                                ? numericValue > averageValue
+                                                : numericValue < averageValue;
+                                    }
+                                }
+                            }
+                            else if (isFormulaRule) {
+                                satisfies = effectiveValue === true;
+                            }
+                            else {
+                                satisfies = Boolean(checkBooleanRule(booleanRule, effectiveValue, usePreviousValue
+                                    ? getPreviousValue(rowIndex, columnIndex, conditionIndex)
+                                    : undefined, undefined, { locale }));
+                            }
+                        }
+                        if (satisfies) {
+                            const cellId = cellIdentifier(rowIndex, columnIndex);
+                            if (stopCells.has(cellId)) {
+                                continue;
+                            }
+                            formattingByCell.set(cellId, booleanRule.format);
+                            if (rule.stopIfTrue) {
+                                stopCells.add(cellId);
+                            }
+                        }
+                        // Set previous value
+                        if (usePreviousValue) {
+                            setPreviousValue(rowIndex, columnIndex, conditionIndex, effectiveValue);
+                        }
+                    }
+                }
+            }
+            else if (gradientRule) {
+                // Heatmap
+                const values = [];
+                // Get colors from all ranges initially
+                for (const range of ranges) {
+                    // Only pick current sheet
+                    if (range?.sheetId !== sheetId) {
+                        continue;
+                    }
+                    // Clamp range to actual sheet dimensions
+                    const clampedRange = clampRange(range);
+                    const rangeValues = [];
+                    for (let rowIndex = clampedRange.startRowIndex; rowIndex <= clampedRange.endRowIndex; rowIndex++) {
+                        const rowValues = [];
+                        for (let columnIndex = clampedRange.startColumnIndex; columnIndex <= clampedRange.endColumnIndex; columnIndex++) {
+                            const value = getValidationValue(range.sheetId, rowIndex, columnIndex, rule);
+                            // Only accept number
+                            if (!isNil(value) &&
+                                isNumberValue(range.sheetId, rowIndex, columnIndex)) {
+                                rowValues.push(Number(value));
+                            }
+                            else {
+                                rowValues.push(undefined);
+                            }
+                        }
+                        rangeValues.push(rowValues);
+                    }
+                    values.push(rangeValues);
+                }
+                const colors = getGradientColors(values, gradientRule, theme);
+                let rangeIndex = 0;
+                // Apply colors
+                for (const range of ranges) {
+                    // Only pick current sheet
+                    if (range.sheetId !== sheetId) {
+                        continue;
+                    }
+                    // Clamp range to actual sheet dimensions
+                    const clampedRange = clampRange(range);
+                    for (let rowIndex = clampedRange.startRowIndex; rowIndex <= clampedRange.endRowIndex; rowIndex++) {
+                        for (let columnIndex = clampedRange.startColumnIndex; columnIndex <= clampedRange.endColumnIndex; columnIndex++) {
+                            const backgroundColor = colors[rangeIndex]?.[rowIndex - clampedRange.startRowIndex]?.[columnIndex - clampedRange.startColumnIndex];
+                            const cellId = cellIdentifier(rowIndex, columnIndex);
+                            if (stopCells.has(cellId)) {
+                                continue;
+                            }
+                            if (isNil(backgroundColor)) {
+                                continue;
+                            }
+                            formattingByCell.set(cellId, {
+                                backgroundColor,
+                            });
+                            if (rule.stopIfTrue) {
+                                stopCells.add(cellId);
+                            }
+                        }
+                    }
+                    rangeIndex++;
+                }
+            }
+            else if (topBottomRule) {
+                for (const range of ranges) {
+                    if (range.sheetId !== sheetId) {
+                        continue;
+                    }
+                    // Clamp range to actual sheet dimensions
+                    const clampedRange = clampRange(range);
+                    // Engine-stamped rank rule: the engine ranked the FULL range —
+                    // consume its per-cell stamps instead of ranking the loaded window.
+                    if (engineStamped) {
+                        applyEngineStamps(rule, clampedRange, topBottomRule.format);
+                        continue;
+                    }
+                    const numericCells = [];
+                    for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                        const value = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                        if (!isNil(value) &&
+                            isNumberValue(sheetId, rowIndex, columnIndex) &&
+                            Number.isFinite(Number(value))) {
+                            numericCells.push({
+                                rowIndex,
+                                columnIndex,
+                                value: Number(value),
+                            });
+                        }
+                    }
+                    if (numericCells.length === 0) {
+                        continue;
+                    }
+                    const total = numericCells.length;
+                    const desiredRank = Math.min(total, Math.max(1, topBottomRule.isPercent
+                        ? Math.ceil((topBottomRule.rank / 100) * total)
+                        : topBottomRule.rank));
+                    const sorted = [...numericCells].sort((a, b) => topBottomRule.type === "TOP"
+                        ? b.value - a.value
+                        : a.value - b.value);
+                    const thresholdValue = sorted[Math.min(desiredRank - 1, sorted.length - 1)]?.value;
+                    if (thresholdValue === undefined) {
+                        continue;
+                    }
+                    const comparator = topBottomRule.type === "TOP"
+                        ? (value) => value >= thresholdValue
+                        : (value) => value <= thresholdValue;
+                    for (const cell of numericCells) {
+                        if (comparator(cell.value)) {
+                            const cellId = cellIdentifier(cell.rowIndex, cell.columnIndex);
+                            if (stopCells.has(cellId)) {
+                                continue;
+                            }
+                            formattingByCell.set(cellId, topBottomRule.format);
+                            if (rule.stopIfTrue) {
+                                stopCells.add(cellId);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (distinctRule) {
+                for (const range of ranges) {
+                    if (range.sheetId !== sheetId) {
+                        continue;
+                    }
+                    // Clamp range to actual sheet dimensions
+                    const clampedRange = clampRange(range);
+                    // Engine-stamped duplicate/unique rule: the engine counted the FULL
+                    // range's occurrences — consume its per-cell stamps.
+                    if (engineStamped) {
+                        applyEngineStamps(rule, clampedRange, distinctRule.format);
+                        continue;
+                    }
+                    const occurrences = new Map();
+                    for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                        const value = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                        if (isNil(value)) {
+                            continue;
+                        }
+                        const key = typeof value === "string"
+                            ? value
+                            : typeof value === "number" || typeof value === "boolean"
+                                ? String(value)
+                                : JSON.stringify(value);
+                        if (!occurrences.has(key)) {
+                            occurrences.set(key, []);
+                        }
+                        occurrences.get(key).push({ rowIndex, columnIndex });
+                    }
+                    const shouldFormat = (count) => distinctRule.type === "DUPLICATE" ? count > 1 : count === 1;
+                    for (const cells of occurrences.values()) {
+                        if (!shouldFormat(cells.length)) {
+                            continue;
+                        }
+                        for (const cell of cells) {
+                            const cellId = cellIdentifier(cell.rowIndex, cell.columnIndex);
+                            if (stopCells.has(cellId)) {
+                                continue;
+                            }
+                            formattingByCell.set(cellId, distinctRule.format);
+                            if (rule.stopIfTrue) {
+                                stopCells.add(cellId);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (iconSetRule) {
+                const glyphs = ICON_SET_GLYPHS[iconSetRule.iconSet];
+                if (!glyphs) {
+                    conditionIndex++;
+                    continue;
+                }
+                const orderedGlyphs = iconSetRule.reverse
+                    ? [...glyphs].reverse()
+                    : glyphs;
+                const orderedColors = iconSetRule.reverse
+                    ? [...ICON_SET_COLORS[iconSetRule.iconSet]].reverse()
+                    : ICON_SET_COLORS[iconSetRule.iconSet];
+                for (const range of ranges) {
+                    if (range.sheetId !== sheetId)
+                        continue;
+                    const clampedRange = clampRange(range);
+                    // Aggregate range min/max for PERCENT/PERCENTILE threshold resolution.
+                    let rangeMin = Infinity;
+                    let rangeMax = -Infinity;
+                    const cellValues = [];
+                    for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                        const v = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                        if (!isNil(v) &&
+                            isNumberValue(sheetId, rowIndex, columnIndex) &&
+                            Number.isFinite(Number(v))) {
+                            const num = Number(v);
+                            cellValues.push({ rowIndex, columnIndex, value: num });
+                            if (num < rangeMin)
+                                rangeMin = num;
+                            if (num > rangeMax)
+                                rangeMax = num;
+                        }
+                    }
+                    if (cellValues.length === 0)
+                        continue;
+                    const sortedThresholds = iconSetRule.thresholds
+                        .map((t) => resolveThreshold(t, rangeMin, rangeMax))
+                        .filter((n) => Number.isFinite(n))
+                        .sort((a, b) => a - b);
+                    for (const cell of cellValues) {
+                        const bucket = pickIconBucket(cell.value, sortedThresholds);
+                        const cellId = cellIdentifier(cell.rowIndex, cell.columnIndex);
+                        if (stopCells.has(cellId))
+                            continue;
+                        const glyphIndex = Math.min(bucket, orderedGlyphs.length - 1);
+                        const glyph = orderedGlyphs[glyphIndex];
+                        const color = orderedColors[Math.min(bucket, orderedColors.length - 1)];
+                        const existing = formattingByCell.get(cellId);
+                        formattingByCell.set(cellId, {
+                            ...(existing ?? {}),
+                            // iconSet + iconId are needed by the icon column filter to
+                            // match cells against a specific (iconSet, iconId) target.
+                            // They're harmless to renderers that only read `glyph`.
+                            conditionalIcon: {
+                                glyph,
+                                color,
+                                iconSet: iconSetRule.iconSet,
+                                iconId: glyphIndex,
+                            },
+                        });
+                        if (rule.stopIfTrue)
+                            stopCells.add(cellId);
+                    }
+                }
+            }
+            else if (dataBarRule) {
+                const barColor = getStringifiedColor(dataBarRule.color, theme);
+                const negativeColor = dataBarRule.negativeColor
+                    ? getStringifiedColor(dataBarRule.negativeColor, theme)
+                    : undefined;
+                const borderColor = dataBarRule.borderColor
+                    ? getStringifiedColor(dataBarRule.borderColor, theme)
+                    : undefined;
+                const direction = dataBarRule.direction === "rightToLeft"
+                    ? "rightToLeft"
+                    : "leftToRight";
+                for (const range of ranges) {
+                    if (range.sheetId !== sheetId)
+                        continue;
+                    const clampedRange = clampRange(range);
+                    let rangeMin = Infinity;
+                    let rangeMax = -Infinity;
+                    const cellValues = [];
+                    for (const [rowIndex, columnIndex] of iterateCellsInRange(clampedRange)) {
+                        const v = getValidationValue(sheetId, rowIndex, columnIndex, rule);
+                        if (!isNil(v) &&
+                            isNumberValue(sheetId, rowIndex, columnIndex) &&
+                            Number.isFinite(Number(v))) {
+                            const num = Number(v);
+                            cellValues.push({ rowIndex, columnIndex, value: num });
+                            if (num < rangeMin)
+                                rangeMin = num;
+                            if (num > rangeMax)
+                                rangeMax = num;
+                        }
+                    }
+                    if (cellValues.length === 0)
+                        continue;
+                    const min = resolveThreshold(dataBarRule.minpoint, rangeMin, rangeMax);
+                    const max = resolveThreshold(dataBarRule.maxpoint, rangeMin, rangeMax);
+                    const resolvedMin = Number.isFinite(min) ? min : rangeMin;
+                    const resolvedMax = Number.isFinite(max) ? max : rangeMax;
+                    for (const cell of cellValues) {
+                        const cellId = cellIdentifier(cell.rowIndex, cell.columnIndex);
+                        if (stopCells.has(cellId))
+                            continue;
+                        const isNegative = cell.value < 0 && negativeColor !== undefined;
+                        const fill = computeDataBarFill(isNegative ? -cell.value : cell.value, isNegative ? 0 : Math.max(0, resolvedMin), isNegative
+                            ? Math.abs(resolvedMin)
+                            : Math.max(resolvedMin, resolvedMax));
+                        const existing = formattingByCell.get(cellId);
+                        formattingByCell.set(cellId, {
+                            ...(existing ?? {}),
+                            conditionalDataBar: {
+                                color: isNegative
+                                    ? negativeColor
+                                    : barColor,
+                                fillFraction: fill,
+                                negative: isNegative,
+                                borderColor,
+                                direction,
+                            },
+                        });
+                        if (rule.stopIfTrue)
+                            stopCells.add(cellId);
+                    }
+                }
+            }
+            conditionIndex++;
+        }
+        return formattingByCell;
+    }, [
+        sheetId,
+        theme,
+        conditionalFormats,
+        locale,
+        getValidationValue,
+        getPreviousValue,
+        setPreviousValue,
+        isNumberValue,
+        getSheetRowCount,
+        getSheetColumnCount,
+        evaluationWindow,
+        getConditionalFormatResult,
+    ]);
+};

package/dist/esm/hooks/use-context-menu.d.ts

@@ -0,0 +1,52 @@
+import type { CellInterface, Grid } from "@rowsncolumns/grid";
+import type { ElementType } from "react";
+import React from "react";
+import type { ContextMenuProps } from "../components/context-menu";
+export type UseContexMenuProps = {
+    ContextMenuWrapper?: ElementType<ContextMenuWrapperProps>;
+    /**
+     * Get cell coords from x and y position
+     * @param x
+     * @param y
+     * @param includeFrozen
+     */
+    getCellCoordsFromOffset(x: number, y: number, includeFrozen?: boolean | undefined): CellInterface | null | undefined;
+    /**
+     * Get position relative to the sheet
+     * @param x
+     * @param y
+     */
+    getRelativePositionFromOffset: React.ComponentRef<typeof Grid>["getRelativePositionFromOffset"];
+    /**
+     * Row header function
+     * @param columnIndex
+     */
+    isRowHeader(columnIndex: number): boolean;
+    /**
+     * Column header function
+     * @param rowIndex
+     */
+    isColumnHeader(rowIndex: number): boolean;
+    /**
+     * Get context menu component
+     * @param cell
+     */
+    getContextMenu(activeCell: CellInterface): React.ReactElement<ContextMenuProps> | null;
+    getScrollPosition: React.ComponentRef<typeof Grid>["getScrollPosition"];
+    getCellOffsetFromCoords: React.ComponentRef<typeof Grid>["getCellOffsetFromCoords"];
+};
+export declare const useContextMenu: ({ getCellCoordsFromOffset, getRelativePositionFromOffset, getCellOffsetFromCoords, getScrollPosition, isRowHeader, isColumnHeader, getContextMenu, ContextMenuWrapper, }: UseContexMenuProps) => {
+    onContextMenu: (e: React.MouseEvent) => void;
+    contextMenuComponent: React.JSX.Element;
+    onRequestClose: () => void;
+    showContextMenu: (cell: CellInterface, x?: number, y?: number) => void;
+};
+export type ContextMenuWrapperProps = {
+    isOpen?: boolean;
+    left: number;
+    top: number;
+    onOpenChange(isOpen: boolean): void;
+    children?: React.ReactNode;
+};
+export declare const DefaultContextMenuWrapper: ({ left, top, isOpen, onOpenChange, children, }: ContextMenuWrapperProps) => React.JSX.Element;
+//# sourceMappingURL=use-context-menu.d.ts.map

package/dist/esm/hooks/use-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-context-menu.d.ts","sourceRoot":"","sources":["../../../hooks/use-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAiB,MAAM,oBAAoB,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAInE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB,CAAC,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC1D;;;;;OAKG;IACH,uBAAuB,CACrB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,GAClC,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC;;;;OAIG;IACH,6BAA6B,EAAE,KAAK,CAAC,YAAY,CAC/C,OAAO,IAAI,CACZ,CAAC,+BAA+B,CAAC,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C;;;OAGG;IACH,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C;;;OAGG;IACH,cAAc,CACZ,UAAU,EAAE,aAAa,GACxB,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC/C,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC,CAAC;IACxE,uBAAuB,EAAE,KAAK,CAAC,YAAY,CACzC,OAAO,IAAI,CACZ,CAAC,yBAAyB,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0KAS5B,kBAAkB;uBAmDb,KAAK,CAAC,UAAU;;;4BAxCb,aAAa,MAAM,MAAM,MAAM,MAAM;CAqF/C,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gDAMvC,uBAAuB,sBAYzB,CAAC"}

package/dist/esm/hooks/use-context-menu.js

@@ -0,0 +1,75 @@
+import { isNil } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { ContextMenuDropdown } from "../components/context-menu/menu";
+import { StyledContextMenuWrapper } from "../components/context-menu/style";
+export const useContextMenu = ({ getCellCoordsFromOffset, getRelativePositionFromOffset, getCellOffsetFromCoords, getScrollPosition, isRowHeader, isColumnHeader, getContextMenu, ContextMenuWrapper = DefaultContextMenuWrapper, }) => {
+    const [menuPosition, setMenuPosition] = useState({ left: 0, top: 0 });
+    const [isOpen, setIsOpen] = useState(false);
+    const activeCellRef = useRef(undefined);
+    const showMenu = useCallback(() => setIsOpen(true), []);
+    const closeMenu = useCallback(() => setIsOpen(false), []);
+    /**
+     * Programmatically Display a context menu at a cell
+     */
+    const showContextMenu = useCallback((cell, x, y) => {
+        // Set active cell
+        activeCellRef.current = cell;
+        let position;
+        if (isNil(x) || isNil(y)) {
+            // cell pos
+            const cellPosition = getCellOffsetFromCoords(cell);
+            const scrollPosition = getScrollPosition();
+            if (!isNil(cellPosition)) {
+                position = {
+                    x: cellPosition.x - scrollPosition.scrollLeft + cellPosition.width,
+                    y: cellPosition.y - scrollPosition.scrollTop + cellPosition.height,
+                };
+            }
+        }
+        else {
+            position = getRelativePositionFromOffset(x, y);
+        }
+        if (isNil(position)) {
+            return;
+        }
+        // Set menu position
+        setMenuPosition({ left: position.x, top: position.y });
+        // Show menu
+        showMenu();
+    }, [
+        getRelativePositionFromOffset,
+        getCellOffsetFromCoords,
+        getScrollPosition,
+        showMenu,
+    ]);
+    // Called when user right-clicks on the sheet
+    const handleContextMenu = useCallback((e) => {
+        const { clientX, clientY } = e.nativeEvent;
+        const cell = getCellCoordsFromOffset(clientX, clientY);
+        if (isNil(cell) ||
+            (isRowHeader(cell?.columnIndex) && isColumnHeader(cell?.rowIndex))) {
+            return;
+        }
+        showContextMenu(cell, clientX, clientY);
+        // Hide default context menu
+        e.preventDefault();
+    }, [getCellCoordsFromOffset, showContextMenu, isRowHeader, isColumnHeader]);
+    const contextMenuComponent = useMemo(() => {
+        const ContextMenu = isOpen && activeCellRef.current
+            ? getContextMenu(activeCellRef.current)
+            : null;
+        return (React.createElement(ContextMenuWrapper, { left: menuPosition.left, top: menuPosition.top, isOpen: isOpen, onOpenChange: setIsOpen }, ContextMenu));
+    }, [getContextMenu, ContextMenuWrapper, isOpen, menuPosition, setIsOpen]);
+    return useMemo(() => ({
+        onContextMenu: handleContextMenu,
+        contextMenuComponent,
+        onRequestClose: closeMenu,
+        showContextMenu,
+    }), [handleContextMenu, contextMenuComponent, closeMenu, showContextMenu]);
+};
+export const DefaultContextMenuWrapper = ({ left, top, isOpen, onOpenChange, children, }) => {
+    return (React.createElement(StyledContextMenuWrapper, { style: {
+            transform: `translate3d(${left}px, ${top}px, 0)`,
+        } },
+        React.createElement(ContextMenuDropdown, { isOpen: isOpen, onOpenChange: onOpenChange }, children)));
+};

package/dist/esm/hooks/use-context-setter.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasGridMethods } from "../components/canvas-grid/typings";
+export declare const useContextSetter: (forwardedRef: React.ForwardedRef<CanvasGridMethods>, contextValue: CanvasGridMethods) => void;
+//# sourceMappingURL=use-context-setter.d.ts.map

package/dist/esm/hooks/use-context-setter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-context-setter.d.ts","sourceRoot":"","sources":["../../../hooks/use-context-setter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAG3E,eAAO,MAAM,gBAAgB,GAC3B,cAAc,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EACnD,cAAc,iBAAiB,SA2LhC,CAAC"}