@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-embeds-charts.js

@@ -0,0 +1,284 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmbedsCharts = exports.getOverlayPlacement = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../atoms");
+var embeds_1 = require("../components/embeds");
+var config_1 = require("../config");
+/**
+ * Get placement of an item based on anchor cell position
+ */
+var getOverlayPlacement = function (anchorCell, frozenRows, frozenColumns) {
+    if (!anchorCell)
+        return "body";
+    var rowIndex = anchorCell.rowIndex, columnIndex = anchorCell.columnIndex;
+    var inFrozenRow = rowIndex < frozenRows;
+    var inFrozenColumn = columnIndex < frozenColumns;
+    if (inFrozenRow && inFrozenColumn)
+        return "intersection";
+    if (inFrozenRow)
+        return "frozenRow";
+    if (inFrozenColumn)
+        return "frozenColumn";
+    return "body";
+};
+exports.getOverlayPlacement = getOverlayPlacement;
+var defaultGetChartComponent = function (props) { return (react_1.default.createElement(embeds_1.ChartComponent, tslib_1.__assign({}, props))); };
+var defaultGetEmbedComponent = function (props) { return (react_1.default.createElement(embeds_1.EmbedComponent, tslib_1.__assign({}, props))); };
+var defaultGetSlicerComponent = function (props) { return (react_1.default.createElement(embeds_1.SlicerComponent, tslib_1.__assign({}, props))); };
+// Validate embed object
+var validateEmbeds = function (embedsOrCharts, sheetId) {
+    return embedsOrCharts === null || embedsOrCharts === void 0 ? void 0 : embedsOrCharts.map(function (obj) {
+        if (typeof obj.position !== "object") {
+            return tslib_1.__assign(tslib_1.__assign({}, obj), { position: {
+                    overlayPosition: config_1.DEFAULT_OVERLAY_POSITION,
+                    sheetId: sheetId,
+                } });
+        }
+        return obj;
+    });
+};
+var useEmbedsCharts = function (_a) {
+    var _b = _a.scale, scale = _b === void 0 ? 1 : _b, charts = _a.charts, embeds = _a.embeds, slicers = _a.slicers, sheetId = _a.sheetId, _c = _a.frozenRows, frozenRows = _c === void 0 ? 0 : _c, _d = _a.frozenColumns, frozenColumns = _d === void 0 ? 0 : _d, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getAbsolutePositionFromOffset = _a.getAbsolutePositionFromOffset, getBounds = _a.getBounds, _e = _a.selectedColor, selectedColor = _e === void 0 ? "#1a73e8" : _e, onMoveChart = _a.onMoveChart, onResizeChart = _a.onResizeChart, onMoveEmbed = _a.onMoveEmbed, onResizeEmbed = _a.onResizeEmbed, onDeleteChart = _a.onDeleteChart, onDeleteEmbed = _a.onDeleteEmbed, onRequestEditEmbed = _a.onRequestEditEmbed, onMoveSlicer = _a.onMoveSlicer, onResizeSlicer = _a.onResizeSlicer, onDeleteSlicer = _a.onDeleteSlicer, onRequestEditSlicer = _a.onRequestEditSlicer, onFilterTable = _a.onFilterTable, onFilterPivot = _a.onFilterPivot, tables = _a.tables, pivotTables = _a.pivotTables, getFormattedValue = _a.getFormattedValue, _f = _a.getChartComponent, getChartComponent = _f === void 0 ? defaultGetChartComponent : _f, _g = _a.getEmbedComponent, getEmbedComponent = _g === void 0 ? defaultGetEmbedComponent : _g, _h = _a.getSlicerComponent, getSlicerComponent = _h === void 0 ? defaultGetSlicerComponent : _h, readonly = _a.readonly, theme = _a.theme, backgroundColor = _a.backgroundColor, disabled = _a.disabled;
+    var _j = tslib_1.__read((0, atoms_1.useSelectedChartEmbed)(), 2), selectedIndex = _j[0], setSelectedIndex = _j[1];
+    /**
+     * When user selects the sheet
+     */
+    var handleMouseDown = (0, react_1.useCallback)(function () {
+        setSelectedIndex(undefined);
+    }, [setSelectedIndex]);
+    var getCellPosition = (0, react_1.useCallback)(function (x, y) {
+        var _a, _b;
+        var position = getAbsolutePositionFromOffset(x, y);
+        // Use includeFrozen=true to detect cells in all regions
+        var anchorCell = getCellCoordsFromOffset((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : 0, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : 0, true);
+        var cellPosition = anchorCell
+            ? getCellOffsetFromCoords(anchorCell)
+            : undefined;
+        if (anchorCell && cellPosition) {
+            return [anchorCell, x - cellPosition.x, y - cellPosition.y];
+        }
+    }, [
+        getCellOffsetFromCoords,
+        getCellCoordsFromOffset,
+        getAbsolutePositionFromOffset,
+    ]);
+    // Callback when user moves a chart
+    var handleMove = (0, react_1.useCallback)(function (id, x, y) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onMoveChart === null || onMoveChart === void 0 ? void 0 : onMoveChart(id, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveChart, getCellPosition]);
+    // Callback when resizes an embed
+    var handleEmbedResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onResizeEmbed === null || onResizeEmbed === void 0 ? void 0 : onResizeEmbed(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeEmbed, sheetId, getCellPosition]);
+    // Callback when user moves a chart
+    var handleEmbedMove = (0, react_1.useCallback)(function (id, x, y) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onMoveEmbed === null || onMoveEmbed === void 0 ? void 0 : onMoveEmbed(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveEmbed, sheetId, getCellPosition]);
+    // Callback when resizes a chart
+    var handleResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onResizeChart === null || onResizeChart === void 0 ? void 0 : onResizeChart(id, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeChart, getCellPosition]);
+    // Callback when user resizes a slicer
+    var handleSlicerResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onResizeSlicer === null || onResizeSlicer === void 0 ? void 0 : onResizeSlicer(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeSlicer, sheetId, getCellPosition]);
+    // Callback when user moves a slicer
+    var handleSlicerMove = (0, react_1.useCallback)(function (id, x, y) {
+        var position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
+        onMoveSlicer === null || onMoveSlicer === void 0 ? void 0 : onMoveSlicer(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveSlicer, sheetId, getCellPosition]);
+    // Chart components - categorized by frozen pane placement
+    var chartComponents = (0, react_1.useMemo)(function () {
+        var _a;
+        var result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
+        // If user has no chartComponent, skip rendering
+        if (!getChartComponent || disabled) {
+            return result;
+        }
+        var bounds = getBounds();
+        (_a = validateEmbeds(charts, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (chart) { return chart.position.sheetId === sheetId; }).forEach(function (chart) {
+            var chartId = chart.chartId, overlayPosition = chart.position.overlayPosition, borderColor = chart.borderColor, draggable = chart.draggable, resizable = chart.resizable;
+            var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
+            var isSelected = selectedIndex === chartId;
+            var finalBorderColor = isSelected ? selectedColor : borderColor;
+            var placement = (0, exports.getOverlayPlacement)(anchorCell, frozenRows, frozenColumns);
+            var component = (react_1.default.createElement(embeds_1.EmbedDraggable, { bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return setSelectedIndex(chartId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined }, function (width, height) {
+                return getChartComponent === null || getChartComponent === void 0 ? void 0 : getChartComponent({
+                    chart: chart,
+                    width: width,
+                    height: height,
+                    theme: theme,
+                    backgroundColor: backgroundColor,
+                    isSelected: isSelected,
+                    onDeleteChart: onDeleteChart,
+                    sheetId: sheetId,
+                    readonly: readonly,
+                });
+            }));
+            result[placement].push(component);
+        });
+        return result;
+    }, [
+        disabled,
+        readonly,
+        scale,
+        charts,
+        sheetId,
+        selectedColor,
+        selectedIndex,
+        setSelectedIndex,
+        handleMove,
+        handleResize,
+        getChartComponent,
+        theme,
+        onDeleteChart,
+        backgroundColor,
+        frozenRows,
+        frozenColumns,
+    ]);
+    // Embed components
+    var embedComponents = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        // If user has no EmbedComponent, skip rendering
+        if (!getEmbedComponent || disabled) {
+            return [];
+        }
+        return ((_b = (_a = validateEmbeds(embeds, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (embed) { return embed.position.sheetId === sheetId; }).map(function (embed) {
+            var embedId = embed.embedId, overlayPosition = embed.position.overlayPosition, borderColor = embed.borderColor, lockAspectRatio = embed.lockAspectRatio, draggable = embed.draggable, resizable = embed.resizable;
+            var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
+            var bounds = getBounds();
+            var isSelected = selectedIndex === embedId;
+            var finalBorderColor = isSelected ? selectedColor : borderColor;
+            return (react_1.default.createElement(embeds_1.EmbedDraggable, { key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return setSelectedIndex(embedId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, lockAspectRatio: lockAspectRatio !== null && lockAspectRatio !== void 0 ? lockAspectRatio : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }, function (width, height) {
+                return getEmbedComponent === null || getEmbedComponent === void 0 ? void 0 : getEmbedComponent({
+                    embed: embed,
+                    width: width,
+                    height: height,
+                    theme: theme,
+                    backgroundColor: backgroundColor,
+                    isSelected: isSelected,
+                    onDeleteEmbed: onDeleteEmbed,
+                    onRequestEditEmbed: onRequestEditEmbed,
+                    sheetId: sheetId,
+                    readonly: readonly,
+                });
+            }));
+        })) !== null && _b !== void 0 ? _b : []);
+    }, [
+        disabled,
+        scale,
+        embeds,
+        sheetId,
+        selectedColor,
+        readonly,
+        getBounds,
+        selectedIndex,
+        setSelectedIndex,
+        handleEmbedMove,
+        handleEmbedResize,
+        getEmbedComponent,
+        theme,
+        onDeleteEmbed,
+        onRequestEditEmbed,
+        backgroundColor,
+    ]);
+    // Slicer components
+    var slicerComponents = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        // If user has no SlicerComponent, skip rendering
+        if (!getSlicerComponent || disabled) {
+            return [];
+        }
+        return ((_b = (_a = validateEmbeds(slicers, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (slicer) { return slicer.position.sheetId === sheetId; }).map(function (slicer) {
+            var slicerId = slicer.slicerId, overlayPosition = slicer.position.overlayPosition, borderColor = slicer.borderColor, draggable = slicer.draggable, resizable = slicer.resizable;
+            var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
+            var bounds = getBounds();
+            var isSelected = selectedIndex === slicerId;
+            var finalBorderColor = isSelected ? selectedColor : borderColor;
+            return (react_1.default.createElement(embeds_1.EmbedDraggable, { key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, borderColor: typeof finalBorderColor === "string"
+                    ? finalBorderColor
+                    : undefined, onPointerDown: function () { return setSelectedIndex(slicerId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }, function (width, height) {
+                return getSlicerComponent === null || getSlicerComponent === void 0 ? void 0 : getSlicerComponent({
+                    slicer: slicer,
+                    width: width,
+                    height: height,
+                    theme: theme,
+                    backgroundColor: backgroundColor,
+                    isSelected: isSelected,
+                    onDeleteSlicer: onDeleteSlicer,
+                    onFilterTable: onFilterTable,
+                    onFilterPivot: onFilterPivot,
+                    tables: tables,
+                    pivotTables: pivotTables,
+                    getFormattedValue: getFormattedValue,
+                    sheetId: sheetId,
+                    readonly: readonly,
+                });
+            }));
+        })) !== null && _b !== void 0 ? _b : []);
+    }, [
+        disabled,
+        scale,
+        slicers,
+        sheetId,
+        selectedColor,
+        readonly,
+        getBounds,
+        selectedIndex,
+        setSelectedIndex,
+        handleSlicerMove,
+        handleSlicerResize,
+        getSlicerComponent,
+        theme,
+        onDeleteSlicer,
+        onFilterTable,
+        onFilterPivot,
+        tables,
+        pivotTables,
+        getFormattedValue,
+        backgroundColor,
+    ]);
+    return (0, react_1.useMemo)(function () { return ({
+        chartComponents: chartComponents,
+        embedComponents: embedComponents,
+        slicerComponents: slicerComponents,
+        onMouseDown: handleMouseDown,
+    }); }, [chartComponents, embedComponents, slicerComponents, handleMouseDown]);
+};
+exports.useEmbedsCharts = useEmbedsCharts;

package/dist/cjs/hooks/use-expand-cell.d.ts

@@ -0,0 +1,35 @@
+import type { CellInterface, CellPosition, ScrollCoords } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { AXIS } from "../types";
+type UseExpandCellProps = {
+    sheetId: number;
+    activeCell?: CellInterface | null;
+    theme: SpreadsheetTheme;
+    iconColor: string;
+    /**
+     * Grid references
+     */
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => ScrollCoords | undefined;
+    /**
+     * Is frozen row
+     * @param rowIndex
+     */
+    isFrozenRow(rowIndex: number): boolean;
+    /**
+     * Is frozen column
+     * @param columnIndex
+     */
+    isFrozenColumn(columnIndex: number): boolean;
+    onChangeActiveCell?: CanvasGridProps["onChangeActiveCell"];
+    cellExpandPredicate: CanvasGridProps["cellExpandPredicate"];
+    onRequestExpand: CanvasGridProps["onRequestExpand"];
+    getCellSpacing: (sheetId: number, rowIndex: number, columnIndex: number, axis: AXIS) => number;
+};
+export declare const useExpandCell: ({ activeCell, sheetId, theme, iconColor, isFrozenColumn, isFrozenRow, getCellOffsetFromCoords, cellExpandPredicate, onRequestExpand, getScrollPosition, onChangeActiveCell, }: UseExpandCellProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=use-expand-cell.d.ts.map

package/dist/cjs/hooks/use-expand-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expand-cell.d.ts","sourceRoot":"","sources":["../../../hooks/use-expand-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACb,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C,kBAAkB,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC3D,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,cAAc,EAAE,CACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,IAAI,KACP,MAAM,CAAC;CACb,CAAC;AACF,eAAO,MAAM,aAAa,GAAI,+KAY3B,kBAAkB,6BAkEpB,CAAC"}

package/dist/cjs/hooks/use-expand-cell.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandCell = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var themes_1 = require("../themes");
+var useExpandCell = function (_a) {
+    var activeCell = _a.activeCell, sheetId = _a.sheetId, theme = _a.theme, iconColor = _a.iconColor, isFrozenColumn = _a.isFrozenColumn, isFrozenRow = _a.isFrozenRow, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, cellExpandPredicate = _a.cellExpandPredicate, onRequestExpand = _a.onRequestExpand, getScrollPosition = _a.getScrollPosition, onChangeActiveCell = _a.onChangeActiveCell;
+    /**
+     * Popover position
+     */
+    var getCellPosition = (0, react_1.useCallback)(function (popoverCell) {
+        var _a, _b, _c, _d, _e, _f;
+        var scrollPosition = getScrollPosition();
+        var cellOffset = getCellOffsetFromCoords(popoverCell);
+        return {
+            x: (_a = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.x) !== null && _a !== void 0 ? _a : 0,
+            y: (_b = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.y) !== null && _b !== void 0 ? _b : 0,
+            width: (_c = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.width) !== null && _c !== void 0 ? _c : 0,
+            height: (_d = cellOffset === null || cellOffset === void 0 ? void 0 : cellOffset.height) !== null && _d !== void 0 ? _d : 0,
+            scrollLeft: isFrozenColumn(popoverCell.columnIndex)
+                ? 0
+                : (_e = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollLeft) !== null && _e !== void 0 ? _e : 0,
+            scrollTop: isFrozenRow(popoverCell.rowIndex)
+                ? 0
+                : (_f = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollTop) !== null && _f !== void 0 ? _f : 0,
+        };
+    }, [getScrollPosition, getCellOffsetFromCoords, isFrozenColumn, isFrozenRow]);
+    if (activeCell &&
+        (cellExpandPredicate === null || cellExpandPredicate === void 0 ? void 0 : cellExpandPredicate(sheetId, activeCell.rowIndex, activeCell.columnIndex))) {
+        var _b = getCellPosition(activeCell), x = _b.x, y = _b.y, width = _b.width;
+        var color = (0, themes_1.getStringifiedColor)(iconColor, theme);
+        var iconDim = 16;
+        var spacing = 3;
+        return (react_1.default.createElement(ui_1.IconButton, { variant: "outline", className: "absolute border border-solid bg-rnc-background rounded-none min-w-px min-h-full p-0 top-0 left-0 pointer-events-auto select-none", size: "sm", style: {
+                transform: "translate3d(".concat(x + width - iconDim - spacing, "px, ").concat(y + 2, "px, 0)"),
+                height: iconDim,
+                width: iconDim,
+                color: color,
+                borderColor: color,
+            }, tooltip: "Expand cell contents", onClick: function () {
+                // Update active cell
+                onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, activeCell);
+                // Send request to expand
+                onRequestExpand === null || onRequestExpand === void 0 ? void 0 : onRequestExpand(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+            } },
+            react_1.default.createElement(icons_1.ExpandIcon, { className: "text-base" })));
+    }
+    return null;
+};
+exports.useExpandCell = useExpandCell;

package/dist/cjs/hooks/use-export-range.d.ts

@@ -0,0 +1,36 @@
+import type { CellInterface, CellPosition, ScrollCoords, ViewPortProps } from "@rowsncolumns/grid";
+import type { Layer } from "konva/lib/Layer";
+import type { CanvasGridMethods, CanvasGridProps, ExportFormats } from "../components/canvas-grid/typings";
+import type { SheetRange } from "../types";
+export type UseExportRangeProps = {
+    sheetId: number;
+    gridLineWidth: number;
+    cellBackgroundColor: string;
+    getCanvasLayers: () => Layer[] | undefined;
+    getRowHeaderCanvasLayer: () => Layer[] | undefined;
+    getColumnHeaderCanvasLayer: () => Layer[] | undefined;
+    getSheetName: CanvasGridProps["getSheetName"];
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    getR1C1AddressFromSelection: CanvasGridMethods["getR1C1AddressFromSelection"];
+    getScrollPosition(): ScrollCoords;
+    getViewPort(): ViewPortProps;
+    getRowOffset(rowIndex: number): number;
+    getColumnOffset(columnIndex: number): number;
+    getSheetDimensions(): readonly [number, number];
+    scrollTo?(scrollCoords: ScrollCoords, immediate?: boolean): void;
+    scrollToCell?: CanvasGridMethods["scrollToCell"];
+    scale?: number;
+    onChangeScale?(scale: number): void;
+};
+export type ExportRangeOptions<F extends ExportFormats = ExportFormats> = {
+    filename?: string;
+    format?: F;
+    includeHeaders?: boolean;
+};
+export type ExportRangeOutput = {
+    (range: SheetRange, options: ExportRangeOptions<"blob">): Promise<Blob>;
+    (range: SheetRange, options: ExportRangeOptions<"clipboard">): Promise<void>;
+    (range: SheetRange, options?: ExportRangeOptions): Promise<ArrayBuffer | Blob | void> | undefined;
+};
+export declare const useExportRange: ({ sheetId, gridLineWidth, cellBackgroundColor, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getCellOffsetFromCoords, getR1C1AddressFromSelection, getScrollPosition, getViewPort, getRowOffset, getColumnOffset, getSheetDimensions, scrollTo, scrollToCell, scale, onChangeScale, }: UseExportRangeProps) => ExportRangeOutput;
+//# sourceMappingURL=use-export-range.d.ts.map

package/dist/cjs/hooks/use-export-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-export-range.d.ts","sourceRoot":"","sources":["../../../hooks/use-export-range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACd,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,aAAa,EACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IAC3C,uBAAuB,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACnD,0BAA0B,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACtD,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE,2BAA2B,EAAE,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IAC9E,iBAAiB,IAAI,YAAY,CAAC;IAClC,WAAW,IAAI,aAAa,CAAC;IAC7B,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7C,kBAAkB,IAAI,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAC5C,OAAO,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,GAClC,SAAS,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6TAmB5B,mBAAmB,KAAG,iBAkTxB,CAAC"}