@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/range-selector/index.js

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeSelector = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_virtual_1 = require("@tanstack/react-virtual");
+var react_1 = tslib_1.__importStar(require("react"));
+var selections_1 = require("../../api/selections");
+var atoms_1 = require("../../atoms");
+var range_selector_atom_1 = require("../../atoms/range-selector.atom");
+var config_1 = require("../../config");
+var SELECTOR_WIDTH = 90;
+var ICON_WIDTH = 23;
+var ITEM_HEIGHT = 28;
+function RangeSelectorContent(_a) {
+    var namedRanges = _a.namedRanges, tables = _a.tables, sheets = _a.sheets, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, isOpen = _a.isOpen, shouldFocusSheetRef = _a.shouldFocusSheetRef, onSelectNamedRange = _a.onSelectNamedRange, onSelectTable = _a.onSelectTable, onRequestUpdateNamedRange = _a.onRequestUpdateNamedRange, onDeleteNamedRange = _a.onDeleteNamedRange, onRequestDefineNamedRange = _a.onRequestDefineNamedRange, onChangeActiveSheet = _a.onChangeActiveSheet;
+    var namedRangesScrollRef = (0, react_1.useRef)(null);
+    // Virtualize named ranges for performance with 1000+ items
+    var namedRangesVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: namedRanges.length,
+        getScrollElement: function () { return namedRangesScrollRef.current; },
+        estimateSize: (0, react_1.useCallback)(function () { return ITEM_HEIGHT; }, []),
+        overscan: 5,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        namedRanges.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ui_1.DropdownMenuLabel, null, "Named ranges"),
+            react_1.default.createElement("div", { ref: namedRangesScrollRef, className: "overflow-auto border-b border-rnc-border mb-1", style: { maxHeight: 200 } },
+                react_1.default.createElement("div", { style: {
+                        height: "".concat(namedRangesVirtualizer.getTotalSize(), "px"),
+                        width: "100%",
+                        position: "relative",
+                    } }, namedRangesVirtualizer.getVirtualItems().map(function (virtualItem) {
+                    var namedRange = namedRanges[virtualItem.index];
+                    return (react_1.default.createElement("div", { key: namedRange.namedRangeId, style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: "".concat(virtualItem.size, "px"),
+                            transform: "translateY(".concat(virtualItem.start, "px)"),
+                        } },
+                        react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                            react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                    react_1.default.createElement(icons_1.GroupIcon, null)),
+                                react_1.default.createElement("div", { title: namedRange.name, style: {
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                        flex: 1,
+                                        minWidth: 0,
+                                    } }, namedRange.name),
+                                react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                    react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                                react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                                    namedRange.range ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onSelectNamedRange(namedRange); } }, "View")) : null,
+                                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                            shouldFocusSheetRef.current = false;
+                                            onRequestUpdateNamedRange === null || onRequestUpdateNamedRange === void 0 ? void 0 : onRequestUpdateNamedRange(sheetId, namedRange);
+                                        } }, "Edit"),
+                                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                            return onDeleteNamedRange === null || onDeleteNamedRange === void 0 ? void 0 : onDeleteNamedRange(namedRange.namedRangeId);
+                                        } }, "Remove"))))));
+                }))))),
+        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                shouldFocusSheetRef.current = false;
+                onRequestDefineNamedRange === null || onRequestDefineNamedRange === void 0 ? void 0 : onRequestDefineNamedRange(sheetId, activeCell, selections);
+            } },
+            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                react_1.default.createElement(icons_1.PlusIcon, null)),
+            "Define named range"),
+        namedRanges.length ? react_1.default.createElement(ui_1.DropdownMenuSeparator, null) : null,
+        tables.length ? react_1.default.createElement(ui_1.DropdownMenuLabel, null, "Tables") : null,
+        tables.map(function (table) {
+            return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                    onSelectTable(table);
+                }, key: table.id },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.TableIcon, null)),
+                table.title));
+        }),
+        tables.length ? react_1.default.createElement(ui_1.DropdownMenuSeparator, null) : null,
+        sheets.length ? react_1.default.createElement(ui_1.DropdownMenuLabel, null, "Sheets") : null,
+        (0, utils_1.sortSheetsByIndex)(sheets).map(function (_a) {
+            var title = _a.title, sheetId = _a.sheetId;
+            return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onChangeActiveSheet === null || onChangeActiveSheet === void 0 ? void 0 : onChangeActiveSheet(sheetId); }, key: sheetId },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.FileIcon, null)),
+                title));
+        })));
+}
+function RangeSelectorComponent(_a) {
+    var _b = _a.namedRanges, namedRanges = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = _a.tables, tables = _c === void 0 ? config_1.DEFAULT_ARRAY : _c, _d = _a.sheets, sheets = _d === void 0 ? config_1.DEFAULT_ARRAY : _d, merges = _a.merges, _e = _a.selections, selections = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, activeCell = _a.activeCell, _f = _a.rowCount, rowCount = _f === void 0 ? config_1.MAX_ROW_COUNT : _f, _g = _a.columnCount, columnCount = _g === void 0 ? config_1.MAX_COLUMN_COUNT : _g, sheetId = _a.sheetId, onChangeActiveSheet = _a.onChangeActiveSheet, onChangeActiveCell = _a.onChangeActiveCell, onChangeSelections = _a.onChangeSelections, onRequestUpdateNamedRange = _a.onRequestUpdateNamedRange, onDeleteNamedRange = _a.onDeleteNamedRange, onRequestDefineNamedRange = _a.onRequestDefineNamedRange;
+    var _h = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(""), 2), value = _j[0], setValue = _j[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var navigateToSheetRange = (0, range_selector_atom_1.useRangeContext)().navigateToSheetRange;
+    var isFormulaMode = (0, atoms_1.useFormulaModeValue)();
+    var shouldFocusSheetRef = (0, react_1.useRef)(false);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var getAddressFromSelection = (0, atoms_1.useGetAddressFromSelection)();
+    // Keep input value in sync with activeCell and selections
+    (0, react_1.useEffect)(function () {
+        if (isFormulaMode) {
+            return;
+        }
+        var lastSelection = selections[selections.length - 1];
+        var isSelectionInProgress = lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.inProgress;
+        var inputValue = lastSelection
+            ? isSelectionInProgress
+                ? (0, selections_1.selectionToRxC)(lastSelection)
+                : getAddressFromSelection === null || getAddressFromSelection === void 0 ? void 0 : getAddressFromSelection(lastSelection, undefined)
+            : (0, utils_1.cellToAddress)(activeCell);
+        // We check if selection is part of a named range
+        var range = namedRanges.find(function (_a) {
+            var range = _a.range;
+            return (range &&
+                (0, grid_1.isAreasEqual)(range, lastSelection ? lastSelection.range : (0, utils_1.convertCellToRange)(activeCell)));
+        });
+        if (inputValue) {
+            setValue(range ? range.name : inputValue);
+        }
+    }, [
+        rowCount,
+        columnCount,
+        activeCell,
+        selections,
+        namedRanges,
+        isFormulaMode,
+        merges,
+        getAddressFromSelection,
+    ]);
+    // Select a range of cells in a sheet
+    var onSelectRange = (0, react_1.useCallback)(function (range) {
+        navigateToSheetRange === null || navigateToSheetRange === void 0 ? void 0 : navigateToSheetRange(range, { enableFlash: false });
+    }, [navigateToSheetRange]);
+    // Select a named range
+    var onSelectNamedRange = (0, react_1.useCallback)(function (_a) {
+        var range = _a.range;
+        if (range) {
+            onSelectRange(range);
+        }
+    }, [onSelectRange]);
+    // Select table
+    var onSelectTable = (0, react_1.useCallback)(function (table) {
+        var sheetId = table.sheetId, range = table.range;
+        onSelectRange(tslib_1.__assign(tslib_1.__assign({}, range), { sheetId: sheetId }));
+    }, [onSelectRange]);
+    // Callback when user changes the input
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b, _c, _d;
+        if (e.key === "Enter") {
+            var value_1 = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+            if (value_1) {
+                // Check for named range
+                var namedRange = namedRanges.find(function (range) { return range.name === value_1; });
+                if (namedRange) {
+                    onSelectNamedRange(namedRange);
+                    // Blur Name Box back to the grid after Enter so subsequent
+                    // keystrokes hit the grid, not the input.
+                    if (!isFormulaMode) {
+                        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    }
+                    return;
+                }
+                // Check for selections
+                var selection = (0, selections_1.addressToSelection)(value_1, rowCount, columnCount);
+                var targetCell = selection
+                    ? {
+                        rowIndex: selection.range.startRowIndex,
+                        columnIndex: selection.range.startColumnIndex,
+                    }
+                    : (0, utils_1.addressToCell)(value_1);
+                // Route the typed-address Enter through navigateToSheetRange (like
+                // onSelectRange/named ranges) so the viewport scrolls the target
+                // into view; the bare onChangeActiveCell/onChangeSelections
+                // dispatchers only update state and never scroll, leaving
+                // off-screen cells out of view.
+                if (selection) {
+                    navigateToSheetRange === null || navigateToSheetRange === void 0 ? void 0 : navigateToSheetRange(tslib_1.__assign(tslib_1.__assign({}, selection.range), { sheetId: sheetId }), { enableFlash: false });
+                }
+                else if (targetCell) {
+                    navigateToSheetRange === null || navigateToSheetRange === void 0 ? void 0 : navigateToSheetRange({
+                        sheetId: sheetId,
+                        startRowIndex: targetCell.rowIndex,
+                        startColumnIndex: targetCell.columnIndex,
+                        endRowIndex: targetCell.rowIndex,
+                        endColumnIndex: targetCell.columnIndex,
+                    }, { enableFlash: false });
+                }
+                // Blur Name Box back to the grid after Enter so subsequent
+                // keystrokes hit the grid, not the input.
+                if (!isFormulaMode) {
+                    (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                }
+            }
+        }
+        else if (e.key === "Escape" && !isFormulaMode) {
+            // Revert the Name Box to the current selection/active cell on
+            // Escape, then return focus to the grid.
+            var lastSelection = selections[selections.length - 1];
+            var reverted = lastSelection
+                ? getAddressFromSelection === null || getAddressFromSelection === void 0 ? void 0 : getAddressFromSelection(lastSelection, undefined)
+                : (0, utils_1.cellToAddress)(activeCell);
+            if (reverted) {
+                setValue(reverted);
+            }
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+            return;
+        }
+    }, [
+        sheetId,
+        rowCount,
+        columnCount,
+        onSelectNamedRange,
+        namedRanges,
+        onChangeActiveCell,
+        onChangeSelections,
+        isFormulaMode,
+        focusSheet,
+        selections,
+        activeCell,
+        getAddressFromSelection,
+        setValue,
+        navigateToSheetRange,
+    ]);
+    return (react_1.default.createElement("div", { className: "flex h-full w-[90px]" },
+        react_1.default.createElement(ui_1.Input, { value: value, type: "text", ref: inputRef, onChange: function (e) { return setValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) { return e.target.select(); }, className: "text-xs border-none rounded-none outline-none m-0 bg-rnc-background text-rnc-foreground w-full" }),
+        react_1.default.createElement(ui_1.DropdownMenu, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+            react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+                react_1.default.createElement(ui_1.IconButton, { className: "rounded-none mr-0", shrink: true },
+                    react_1.default.createElement(icons_1.TriangleDownIcon, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", alignOffset: -SELECTOR_WIDTH + ICON_WIDTH, sideOffset: 1, className: "max-h-[300px] overflow-auto", onCloseAutoFocus: function (event) {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current && !isOpen) {
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        }
+                    } },
+                    react_1.default.createElement(RangeSelectorContent, { namedRanges: namedRanges, tables: tables, sheets: sheets, sheetId: sheetId, activeCell: activeCell, selections: selections, isOpen: isOpen, shouldFocusSheetRef: shouldFocusSheetRef, onSelectNamedRange: onSelectNamedRange, onSelectTable: onSelectTable, onRequestUpdateNamedRange: onRequestUpdateNamedRange, onDeleteNamedRange: onDeleteNamedRange, onRequestDefineNamedRange: onRequestDefineNamedRange, onChangeActiveSheet: onChangeActiveSheet }))))));
+}
+exports.RangeSelector = (0, react_1.memo)(RangeSelectorComponent);

package/dist/cjs/components/resizer/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type ResizerProps = {
+    onChange?: (value: number) => void;
+    value: number;
+    min?: number;
+};
+export declare const Resizer: ({ onChange, value, min }: ResizerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/resizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/resizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAIF,eAAO,MAAM,OAAO,GAAI,0BAA8B,YAAY,sBAoDjE,CAAC"}

package/dist/cjs/components/resizer/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var RESIZER_HEIGHT = 4;
+var Resizer = function (_a) {
+    var onChange = _a.onChange, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b;
+    var dragging = (0, react_1.useRef)(false);
+    var startY = (0, react_1.useRef)(0);
+    var el = (0, react_1.useRef)(null);
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        if (!el.current) {
+            return;
+        }
+        var diff = Math.max(e.pageY - startY.current, min);
+        onChange === null || onChange === void 0 ? void 0 : onChange(diff);
+        el.current.style.top = diff + "px";
+    }, [min, onChange]);
+    var handleMouseUp = (0, react_1.useCallback)(function () {
+        dragging.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseMove]);
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        dragging.current = true;
+        var top = ((_a = el.current) === null || _a === void 0 ? void 0 : _a.style.top) ? parseInt((_b = el.current) === null || _b === void 0 ? void 0 : _b.style.top) : 0;
+        startY.current = e.pageY - top;
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [handleMouseMove, handleMouseUp]);
+    return (react_1.default.createElement("div", { onMouseDown: handleMouseDown, ref: el, style: {
+            userSelect: "none",
+            // background: "red",
+            height: RESIZER_HEIGHT,
+            position: "absolute",
+            left: 0,
+            marginTop: -RESIZER_HEIGHT,
+            top: value,
+            right: 0,
+            zIndex: 1,
+            cursor: "ns-resize",
+        } }));
+};
+exports.Resizer = Resizer;

package/dist/cjs/components/selection/avatar.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import React from "react";
+import type { VerticalAlign } from "../../types";
+import { StyledAvatar } from "./style";
+type AvatarProps = {
+    title: string;
+    backgroundColor?: string;
+    alignment?: VerticalAlign;
+    /** Chip is right-aligned to the cell, so the tail corner flips sides */
+    flipX?: boolean;
+} & ComponentProps<typeof StyledAvatar>;
+export declare const Avatar: ({ title, backgroundColor, alignment, flipX, style, ...props }: AvatarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=avatar.d.ts.map

package/dist/cjs/components/selection/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../components/selection/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,GAAI,+DAOpB,WAAW,sBAmBb,CAAC"}

package/dist/cjs/components/selection/avatar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var style_1 = require("./style");
+var Avatar = function (_a) {
+    var title = _a.title, backgroundColor = _a.backgroundColor, alignment = _a.alignment, _b = _a.flipX, flipX = _b === void 0 ? false : _b, style = _a.style, props = tslib_1.__rest(_a, ["title", "backgroundColor", "alignment", "flipX", "style"]);
+    return (react_1.default.createElement(style_1.StyledAvatar, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({ backgroundColor: backgroundColor }, (alignment === "top"
+            ? flipX
+                ? { borderBottomRightRadius: 0 }
+                : { borderBottomLeftRadius: 0 }
+            : flipX
+                ? { borderTopRightRadius: 0 }
+                : { borderTopLeftRadius: 0 })), style) }, props), title));
+};
+exports.Avatar = Avatar;

package/dist/cjs/components/selection/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { SelectionNewProps } from "./types";
+/**
+ * Selection component
+ * @param param0
+ * @returns
+ */
+export declare const Selection: React.MemoExoticComponent<({ x, y, width, height, fillHandleSize, showFillHandle, offset, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, strokeStyle, fillOpacity, draggable, isDragging, borderCoverWidth, type, range, title, keepTitleWithinBounds, keepTitleWithinVerticalBounds, flipTitleToBottom, table, pivotTable, onMouseDownTitle, onMouseDownResizeHandle, onMouseDownMoveHandle, TitleComponent, onMouseDown, onRequestEditTable, onRequestEditPivotTable, onFlashEnd, zIndex, index, id, showResizeHandles, resizeHandleBorderColor, resizeHandleSize, fill, duration, selectionCount, enableMagicFill, sheetId, activeCell, selection, MagicFillComponent, metadata, readonly, showPasteMenu, onSplitTextToColumns, agentSuggestion, isHovered, MagicFillContent, QuickEdit, PasteMenu, SuggestionAction, onRemoveQuickEdit, onAddQuickEdit, }: SelectionNewProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/selection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/selection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAapC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,SAAS,m7BAkEjB,iBAAiB,uBA4SrB,CAAC"}

package/dist/cjs/components/selection/index.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var magic_fill_1 = require("./magic-fill");
+var paste_menu_1 = require("./paste-menu");
+var quick_edit_1 = require("./quick-edit");
+var style_1 = require("./style");
+var suggestion_action_1 = require("./suggestion-action");
+var title_1 = require("./title");
+/**
+ * Selection component
+ * @param param0
+ * @returns
+ */
+exports.Selection = (0, react_1.memo)(function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, _f = _a.fillHandleSize, fillHandleSize = _f === void 0 ? 8 : _f, showFillHandle = _a.showFillHandle, _g = _a.offset, offset = _g === void 0 ? 0 : _g, stroke = _a.stroke, _h = _a.strokeLeftColor, strokeLeftColor = _h === void 0 ? stroke : _h, _j = _a.strokeTopColor, strokeTopColor = _j === void 0 ? stroke : _j, _k = _a.strokeRightColor, strokeRightColor = _k === void 0 ? stroke : _k, _l = _a.strokeBottomColor, strokeBottomColor = _l === void 0 ? stroke : _l, _m = _a.strokeWidth, strokeWidth = _m === void 0 ? 0 : _m, _o = _a.strokeTopWidth, strokeTopWidth = _o === void 0 ? strokeWidth : _o, _p = _a.strokeRightWidth, strokeRightWidth = _p === void 0 ? strokeWidth : _p, _q = _a.strokeBottomWidth, strokeBottomWidth = _q === void 0 ? strokeWidth : _q, _r = _a.strokeLeftWidth, strokeLeftWidth = _r === void 0 ? strokeWidth : _r, _s = _a.strokeStyle, strokeStyle = _s === void 0 ? "solid" : _s, _t = _a.fillOpacity, fillOpacity = _t === void 0 ? 1 : _t, draggable = _a.draggable, isDragging = _a.isDragging, _u = _a.borderCoverWidth, borderCoverWidth = _u === void 0 ? 5 : _u, type = _a.type, range = _a.range, title = _a.title, keepTitleWithinBounds = _a.keepTitleWithinBounds, keepTitleWithinVerticalBounds = _a.keepTitleWithinVerticalBounds, flipTitleToBottom = _a.flipTitleToBottom, table = _a.table, pivotTable = _a.pivotTable, onMouseDownTitle = _a.onMouseDownTitle, onMouseDownResizeHandle = _a.onMouseDownResizeHandle, onMouseDownMoveHandle = _a.onMouseDownMoveHandle, _v = _a.TitleComponent, TitleComponent = _v === void 0 ? title_1.SelectionTitle : _v, onMouseDown = _a.onMouseDown, onRequestEditTable = _a.onRequestEditTable, onRequestEditPivotTable = _a.onRequestEditPivotTable, onFlashEnd = _a.onFlashEnd, zIndex = _a.zIndex, index = _a.index, id = _a.id, showResizeHandles = _a.showResizeHandles, resizeHandleBorderColor = _a.resizeHandleBorderColor, _w = _a.resizeHandleSize, resizeHandleSize = _w === void 0 ? 6 : _w, fill = _a.fill, duration = _a.duration, selectionCount = _a.selectionCount, enableMagicFill = _a.enableMagicFill, sheetId = _a.sheetId, activeCell = _a.activeCell, selection = _a.selection, _x = _a.MagicFillComponent, MagicFillComponent = _x === void 0 ? magic_fill_1.MagicFill : _x, metadata = _a.metadata, readonly = _a.readonly, showPasteMenu = _a.showPasteMenu, onSplitTextToColumns = _a.onSplitTextToColumns, agentSuggestion = _a.agentSuggestion, isHovered = _a.isHovered, MagicFillContent = _a.MagicFillContent, _y = _a.QuickEdit, QuickEdit = _y === void 0 ? quick_edit_1.QuickEdit : _y, _z = _a.PasteMenu, PasteMenu = _z === void 0 ? paste_menu_1.PasteMenu : _z, _0 = _a.SuggestionAction, SuggestionAction = _0 === void 0 ? suggestion_action_1.SuggestionAction : _0, onRemoveQuickEdit = _a.onRemoveQuickEdit, onAddQuickEdit = _a.onAddQuickEdit;
+    // Show paste menu
+    var finalShowPasteMenu = !showPasteMenu
+        ? false
+        : (type === "activeCell" && selectionCount === 0) || type === "selection";
+    // Flash cells
+    var isFlash = type === "flash";
+    // Suggestion
+    var isSuggestion = type === "suggestion";
+    /**
+     * In formula mode, border covers let the user drag
+     * a formula reference to move it (onMouseDownMoveHandle)
+     */
+    var isFormulaMove = onMouseDownMoveHandle !== undefined;
+    /**
+     * Border cover is so that there is enough
+     * draggable handle area for the user.
+     * Default is 5px
+     *
+     * Only show draggable area for selection and active cell
+     */
+    var showBorderCover = (draggable || isFormulaMove) &&
+        (type === "selection" || type === "activeCell");
+    var canDrag = draggable || isFormulaMove;
+    var borderCoverStyle = {
+        pointerEvents: canDrag ? "auto" : "none",
+        cursor: canDrag ? (isDragging ? "grabbing" : "grab") : "initial",
+    };
+    x = x + offset;
+    y = y + offset;
+    width = width - Math.floor(strokeWidth / 2) - 2 * offset;
+    height = height - Math.floor(strokeWidth / 2) - 2 * offset;
+    var fillHandleSpacing = fillHandleSize / 2 + 1;
+    var lines = [
+        react_1.default.createElement(style_1.StyledLine, { style: {
+                transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"),
+                width: width,
+                height: strokeTopWidth,
+                borderColor: strokeTopColor,
+                borderTopWidth: strokeTopWidth,
+                borderStyle: strokeStyle,
+                zIndex: zIndex,
+            }, key: "top" }),
+        react_1.default.createElement(style_1.StyledLine, { style: {
+                transform: "translate3d(".concat(x + width, "px, ").concat(y, "px, 0)"),
+                width: strokeRightWidth,
+                height: height,
+                borderColor: strokeRightColor,
+                borderRightWidth: strokeRightWidth,
+                borderStyle: strokeStyle,
+                zIndex: zIndex,
+            }, key: "right" }),
+        react_1.default.createElement(style_1.StyledLine, { style: {
+                transform: "translate3d(".concat(x, "px, ").concat(y + height, "px, 0)"),
+                width: width + strokeTopWidth,
+                height: strokeBottomWidth,
+                borderColor: strokeBottomColor,
+                borderBottomWidth: strokeBottomWidth,
+                borderStyle: strokeStyle,
+                zIndex: zIndex,
+            }, key: "bottom" }),
+        // For dragged table column
+        react_1.default.createElement(style_1.StyledLine, { style: {
+                transform: "translate3d(".concat(x, "px, ").concat(y + Math.round(strokeLeftWidth / 2) - 1, "px, 0)"),
+                width: strokeLeftWidth,
+                height: height,
+                borderColor: strokeLeftColor,
+                borderLeftWidth: strokeLeftWidth,
+                borderStyle: strokeStyle,
+                zIndex: zIndex,
+            }, key: "left" }),
+    ];
+    /**
+     * When moving a formula reference, pointerdown is handled by
+     * onMouseDownMoveHandle (like the resize handles), instead of
+     * the regular selection move (onMouseDown)
+     */
+    var borderCoverHandlers = {
+        onPointerDown: isFormulaMove ? onMouseDownMoveHandle : onMouseDown,
+        "data-index": index,
+    };
+    var borderCovers = [
+        react_1.default.createElement(style_1.StyledBorderCover, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: width, height: 5 }) }, borderCoverHandlers, { key: "top" })),
+        react_1.default.createElement(style_1.StyledBorderCover, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x + width, "px, ").concat(y, "px, 0)"), width: borderCoverWidth, height: height - (showFillHandle ? fillHandleSpacing : 0) }) }, borderCoverHandlers, { key: "right" })),
+        react_1.default.createElement(style_1.StyledBorderCover, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y + height, "px, 0)"), width: width + strokeTopWidth - (showFillHandle ? fillHandleSpacing : 0), height: borderCoverWidth }) }, borderCoverHandlers, { key: "bottom" })),
+        react_1.default.createElement(style_1.StyledBorderCover, tslib_1.__assign({ style: tslib_1.__assign(tslib_1.__assign({}, borderCoverStyle), { transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"), width: borderCoverWidth, height: height }) }, borderCoverHandlers, { key: "left" })),
+    ];
+    var resizeHandles = [
+        react_1.default.createElement(style_1.StyleResizeHandle, { style: {
+                transform: "translate3d(".concat(x - resizeHandleSize / 2 + 1, "px, ").concat(y - resizeHandleSize / 2 + 1, "px, 0)"),
+                borderTopWidth: 0,
+                borderLeftWidth: 0,
+                backgroundColor: stroke,
+                borderColor: resizeHandleBorderColor,
+            }, className: "cursor-nwse-resize", key: "tl", "data-position": "tl", "data-index": index, onPointerDown: onMouseDownResizeHandle }),
+        react_1.default.createElement(style_1.StyleResizeHandle, { style: {
+                transform: "translate3d(".concat(x + width - resizeHandleSize / 2 + 1, "px, ").concat(y - resizeHandleSize / 2 + 1, "px, 0)"),
+                borderTopWidth: 0,
+                borderRightWidth: 0,
+                backgroundColor: stroke,
+                borderColor: resizeHandleBorderColor,
+            }, className: "cursor-nesw-resize", key: "tr", "data-position": "tr", "data-index": index, onPointerDown: onMouseDownResizeHandle }),
+        react_1.default.createElement(style_1.StyleResizeHandle, { style: {
+                transform: "translate3d(".concat(x - resizeHandleSize / 2 + 1, "px, ").concat(y + height - resizeHandleSize / 2 + 1, "px, 0)"),
+                borderLeftWidth: 0,
+                borderBottomWidth: 0,
+                backgroundColor: stroke,
+                borderColor: resizeHandleBorderColor,
+            }, className: "cursor-nesw-resize", key: "br", "data-position": "br", "data-index": index, onPointerDown: onMouseDownResizeHandle }),
+        react_1.default.createElement(style_1.StyleResizeHandle, { style: {
+                transform: "translate3d(".concat(x + width - resizeHandleSize / 2 + 1, "px, ").concat(y + height - resizeHandleSize / 2 + 1, "px, 0)"),
+                borderBottomWidth: 0,
+                borderRightWidth: 0,
+                backgroundColor: stroke,
+                borderColor: resizeHandleBorderColor,
+            }, className: "cursor-nwse-resize", key: "bl", "data-position": "bl", "data-index": index, onPointerDown: onMouseDownResizeHandle }),
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        fill && (react_1.default.createElement(style_1.StyledFill, { style: {
+                transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"),
+                height: height + Math.floor(strokeWidth / 2),
+                width: width + Math.floor(strokeWidth / 2),
+                backgroundColor: fill,
+                opacity: isFlash ? 0 : fillOpacity,
+                animationDuration: isFlash ? "".concat(duration, "ms") : undefined,
+            }, className: isFlash ? "animate-flash ease-out repeat-1" : "", onAnimationEnd: function () {
+                return isFlash ? onFlashEnd === null || onFlashEnd === void 0 ? void 0 : onFlashEnd(id !== null && id !== void 0 ? id : index) : undefined;
+            } })),
+        react_1.default.createElement(TitleComponent, {
+            type: type,
+            title: title,
+            keepTitleWithinBounds: keepTitleWithinBounds,
+            keepTitleWithinVerticalBounds: keepTitleWithinVerticalBounds,
+            flipTitleToBottom: flipTitleToBottom,
+            x: x,
+            y: y,
+            height: height,
+            width: width,
+            isDragging: isDragging,
+            range: range,
+            offset: offset,
+            stroke: stroke,
+            table: table,
+            pivotTable: pivotTable,
+            strokeWidth: strokeWidth,
+            metadata: metadata,
+            onRequestEditTable: onRequestEditTable,
+            onRequestEditPivotTable: onRequestEditPivotTable,
+            onMouseDown: onMouseDownTitle,
+            readonly: readonly,
+        }),
+        isSuggestion ? (react_1.default.createElement(SuggestionAction, { x: x, y: y, width: width, height: height, agentSuggestion: agentSuggestion })) : null,
+        lines,
+        showBorderCover && borderCovers,
+        showResizeHandles && resizeHandles,
+        enableMagicFill &&
+            (type === "selection" ||
+                (type === "activeCell" && selectionCount === 0)) ? (react_1.default.createElement(MagicFillComponent, { sheetId: sheetId, x: x, y: y, height: height, width: width, type: type, activeCell: activeCell, selection: selection, isHovered: isHovered, MagicFillContent: MagicFillContent, onAddQuickEdit: onAddQuickEdit, backgroundColor: stroke })) : null,
+        type === "quickedit" ? (react_1.default.createElement(QuickEdit, { x: x, y: y, width: width, height: height, range: range, sheetId: sheetId, onRemoveQuickEdit: onRemoveQuickEdit })) : null,
+        finalShowPasteMenu && (react_1.default.createElement(PasteMenu, { x: x + fillHandleSize / 2, y: y + fillHandleSize / 2, width: width, height: height, onSplitTextToColumns: onSplitTextToColumns }))));
+});
+exports.Selection.displayName = "Selection";

package/dist/cjs/components/selection/magic-fill.d.ts

@@ -0,0 +1,26 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/common-types";
+import React from "react";
+import type { SheetRange } from "../../types";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+import type { SelectionNewProps } from "./types";
+export type MagicFillProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    type: SelectionNewProps["type"];
+    sheetId: number;
+    activeCell?: CellInterface;
+    selection?: SelectionArea<SelectionAttributes>;
+    isHovered?: boolean;
+    onAddQuickEdit(range: SheetRange): void;
+    MagicFillContent?: React.ComponentType<MagicFillContentProps>;
+    backgroundColor?: string;
+};
+export type MagicFillContentProps = {
+    sheetId: number;
+    selection: GridRange;
+    onRequestQuickEdit(): void;
+};
+export declare const MagicFill: ({ x, y, width, height, sheetId, activeCell, selection, isHovered, backgroundColor, MagicFillContent, onAddQuickEdit, }: MagicFillProps) => React.JSX.Element | null;
+//# sourceMappingURL=magic-fill.d.ts.map

package/dist/cjs/components/selection/magic-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-fill.d.ts","sourceRoot":"","sources":["../../../../components/selection/magic-fill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,4BAA4B,CAAC;AAYpC,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,kBAAkB,IAAI,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,wHAYvB,cAAc,6BAkEhB,CAAC"}

package/dist/cjs/components/selection/magic-fill.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MagicFill = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var MagicFill = function (_a) {
+    var _b;
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, sheetId = _a.sheetId, activeCell = _a.activeCell, selection = _a.selection, isHovered = _a.isHovered, backgroundColor = _a.backgroundColor, _c = _a.MagicFillContent, MagicFillContent = _c === void 0 ? DefaultMagicFillContent : _c, onAddQuickEdit = _a.onAddQuickEdit;
+    var _d = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _d[0], setIsOpen = _d[1];
+    var startRowIndex = (_b = activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex) !== null && _b !== void 0 ? _b : selection === null || selection === void 0 ? void 0 : selection.range.startRowIndex;
+    var verticalPositon = startRowIndex === 1 ? "bottom" : "top";
+    var pillWidth = 12;
+    // const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    var isActive = isHovered || isOpen;
+    var finalSelection = (activeCell && !selection
+        ? (0, grid_1.selectionFromActiveCell)(activeCell)[0].range
+        : selection === null || selection === void 0 ? void 0 : selection.range);
+    // Selection in progress
+    if (selection === null || selection === void 0 ? void 0 : selection.inProgress) {
+        return null;
+    }
+    return (react_1.default.createElement(ui_1.Popover, { open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { onMouseMove: function (e) { return e.stopPropagation(); }, variant: "primary", className: (0, ui_1.cn)("absolute z-10 left-0 top-0 pointer-events-auto rounded-full w-3 h-3 p-0 min-w-0 min-h-0 cursor-pointer", "transition-[opacity,transform] duration-200 ease-in-out", "hover:scale-125", isOpen && "scale-125", verticalPositon === "top" ? "-translate-y-full" : "-mt-[12px]", isActive ? "opacity-100" : "opacity-0 pointer-events-none"), style: {
+                    background: backgroundColor,
+                    left: x + width - pillWidth / 2 + 1,
+                    top: verticalPositon === "top"
+                        ? y +
+                            (verticalPositon === "top" ? 0 : height) +
+                            pillWidth / 2 +
+                            1
+                        : y + height / 2 + pillWidth / 2,
+                }, tooltip: "Magic fill" })),
+        react_1.default.createElement(ui_1.PopoverPortal, null,
+            react_1.default.createElement(ui_1.PopoverContent, { align: "start", className: "pointer-events-auto min-w-52", onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                } },
+                react_1.default.createElement(MagicFillContent, { sheetId: sheetId, selection: finalSelection, onRequestQuickEdit: function () {
+                        onAddQuickEdit(tslib_1.__assign(tslib_1.__assign({}, finalSelection), { sheetId: sheetId }));
+                        setIsOpen(false);
+                    } })))));
+};
+exports.MagicFill = MagicFill;
+/**
+ * Default magic fill component
+ * @param props
+ * @returns
+ */
+var DefaultMagicFillContent = function (_a) {
+    var onRequestQuickEdit = _a.onRequestQuickEdit;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ui_1.Button, { className: "gap-2 pl-1 pr-1", onClick: function () {
+                onRequestQuickEdit();
+            } },
+            react_1.default.createElement(icons_1.WandIcon, null),
+            "AI Quick Edit")));
+};