@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,236 @@
+import { isAreasEqual } from "@rowsncolumns/grid";
+import { ChevronRightIcon, FileIcon, GroupIcon, PlusIcon, TableIcon, TriangleDownIcon, } from "@rowsncolumns/icons";
+import { DropdownLeftSlot, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, Input, } from "@rowsncolumns/ui";
+import { addressToCell, cellToAddress, convertCellToRange, sortSheetsByIndex, } from "@rowsncolumns/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import { addressToSelection, selectionToRxC } from "../../api/selections";
+import { useFocusSheet, useFormulaModeValue, useGetAddressFromSelection, } from "../../atoms";
+import { useRangeContext } from "../../atoms/range-selector.atom";
+import { DEFAULT_ARRAY, MAX_COLUMN_COUNT, MAX_ROW_COUNT } from "../../config";
+const SELECTOR_WIDTH = 90;
+const ICON_WIDTH = 23;
+const ITEM_HEIGHT = 28;
+function RangeSelectorContent({ namedRanges, tables, sheets, sheetId, activeCell, selections, isOpen, shouldFocusSheetRef, onSelectNamedRange, onSelectTable, onRequestUpdateNamedRange, onDeleteNamedRange, onRequestDefineNamedRange, onChangeActiveSheet, }) {
+    const namedRangesScrollRef = useRef(null);
+    // Virtualize named ranges for performance with 1000+ items
+    const namedRangesVirtualizer = useVirtualizer({
+        count: namedRanges.length,
+        getScrollElement: () => namedRangesScrollRef.current,
+        estimateSize: useCallback(() => ITEM_HEIGHT, []),
+        overscan: 5,
+    });
+    return (React.createElement(React.Fragment, null,
+        namedRanges.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(DropdownMenuLabel, null, "Named ranges"),
+            React.createElement("div", { ref: namedRangesScrollRef, className: "overflow-auto border-b border-rnc-border mb-1", style: { maxHeight: 200 } },
+                React.createElement("div", { style: {
+                        height: `${namedRangesVirtualizer.getTotalSize()}px`,
+                        width: "100%",
+                        position: "relative",
+                    } }, namedRangesVirtualizer.getVirtualItems().map((virtualItem) => {
+                    const namedRange = namedRanges[virtualItem.index];
+                    return (React.createElement("div", { key: namedRange.namedRangeId, style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: `${virtualItem.size}px`,
+                            transform: `translateY(${virtualItem.start}px)`,
+                        } },
+                        React.createElement(DropdownMenuSub, null,
+                            React.createElement(DropdownMenuSubTrigger, null,
+                                React.createElement(DropdownLeftSlot, null,
+                                    React.createElement(GroupIcon, null)),
+                                React.createElement("div", { title: namedRange.name, style: {
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                        flex: 1,
+                                        minWidth: 0,
+                                    } }, namedRange.name),
+                                React.createElement(DropdownRightSlot, null,
+                                    React.createElement(ChevronRightIcon, null))),
+                            React.createElement(DropdownMenuPortal, null,
+                                React.createElement(DropdownMenuSubContent, null,
+                                    namedRange.range ? (React.createElement(DropdownMenuItem, { onClick: () => onSelectNamedRange(namedRange) }, "View")) : null,
+                                    React.createElement(DropdownMenuItem, { onClick: () => {
+                                            shouldFocusSheetRef.current = false;
+                                            onRequestUpdateNamedRange?.(sheetId, namedRange);
+                                        } }, "Edit"),
+                                    React.createElement(DropdownMenuItem, { onClick: () => onDeleteNamedRange?.(namedRange.namedRangeId) }, "Remove"))))));
+                }))))),
+        React.createElement(DropdownMenuItem, { onClick: () => {
+                shouldFocusSheetRef.current = false;
+                onRequestDefineNamedRange?.(sheetId, activeCell, selections);
+            } },
+            React.createElement(DropdownLeftSlot, null,
+                React.createElement(PlusIcon, null)),
+            "Define named range"),
+        namedRanges.length ? React.createElement(DropdownMenuSeparator, null) : null,
+        tables.length ? React.createElement(DropdownMenuLabel, null, "Tables") : null,
+        tables.map((table) => {
+            return (React.createElement(DropdownMenuItem, { onClick: () => {
+                    onSelectTable(table);
+                }, key: table.id },
+                React.createElement(DropdownLeftSlot, null,
+                    React.createElement(TableIcon, null)),
+                table.title));
+        }),
+        tables.length ? React.createElement(DropdownMenuSeparator, null) : null,
+        sheets.length ? React.createElement(DropdownMenuLabel, null, "Sheets") : null,
+        sortSheetsByIndex(sheets).map(({ title, sheetId }) => (React.createElement(DropdownMenuItem, { onClick: () => onChangeActiveSheet?.(sheetId), key: sheetId },
+            React.createElement(DropdownLeftSlot, null,
+                React.createElement(FileIcon, null)),
+            title)))));
+}
+function RangeSelectorComponent({ namedRanges = DEFAULT_ARRAY, tables = DEFAULT_ARRAY, sheets = DEFAULT_ARRAY, merges, selections = DEFAULT_ARRAY, activeCell, rowCount = MAX_ROW_COUNT, columnCount = MAX_COLUMN_COUNT, sheetId, onChangeActiveSheet, onChangeActiveCell, onChangeSelections, onRequestUpdateNamedRange, onDeleteNamedRange, onRequestDefineNamedRange, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState("");
+    const inputRef = useRef(null);
+    const { navigateToSheetRange } = useRangeContext();
+    const isFormulaMode = useFormulaModeValue();
+    const shouldFocusSheetRef = useRef(false);
+    const focusSheet = useFocusSheet();
+    const getAddressFromSelection = useGetAddressFromSelection();
+    // Keep input value in sync with activeCell and selections
+    useEffect(() => {
+        if (isFormulaMode) {
+            return;
+        }
+        const lastSelection = selections[selections.length - 1];
+        const isSelectionInProgress = lastSelection?.inProgress;
+        const inputValue = lastSelection
+            ? isSelectionInProgress
+                ? selectionToRxC(lastSelection)
+                : getAddressFromSelection?.(lastSelection, undefined)
+            : cellToAddress(activeCell);
+        // We check if selection is part of a named range
+        const range = namedRanges.find(({ range }) => {
+            return (range &&
+                isAreasEqual(range, lastSelection ? lastSelection.range : 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
+    const onSelectRange = useCallback((range) => {
+        navigateToSheetRange?.(range, { enableFlash: false });
+    }, [navigateToSheetRange]);
+    // Select a named range
+    const onSelectNamedRange = useCallback(({ range }) => {
+        if (range) {
+            onSelectRange(range);
+        }
+    }, [onSelectRange]);
+    // Select table
+    const onSelectTable = useCallback((table) => {
+        const { sheetId, range } = table;
+        onSelectRange({ ...range, sheetId });
+    }, [onSelectRange]);
+    // Callback when user changes the input
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            const value = inputRef.current?.value;
+            if (value) {
+                // Check for named range
+                const namedRange = namedRanges.find((range) => range.name === value);
+                if (namedRange) {
+                    onSelectNamedRange(namedRange);
+                    // Blur Name Box back to the grid after Enter so subsequent
+                    // keystrokes hit the grid, not the input.
+                    if (!isFormulaMode) {
+                        inputRef.current?.blur();
+                        focusSheet?.();
+                    }
+                    return;
+                }
+                // Check for selections
+                const selection = addressToSelection(value, rowCount, columnCount);
+                const targetCell = selection
+                    ? {
+                        rowIndex: selection.range.startRowIndex,
+                        columnIndex: selection.range.startColumnIndex,
+                    }
+                    : addressToCell(value);
+                // 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?.({ ...selection.range, sheetId }, { enableFlash: false });
+                }
+                else if (targetCell) {
+                    navigateToSheetRange?.({
+                        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) {
+                    inputRef.current?.blur();
+                    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.
+            const lastSelection = selections[selections.length - 1];
+            const reverted = lastSelection
+                ? getAddressFromSelection?.(lastSelection, undefined)
+                : cellToAddress(activeCell);
+            if (reverted) {
+                setValue(reverted);
+            }
+            inputRef.current?.blur();
+            focusSheet?.();
+            return;
+        }
+    }, [
+        sheetId,
+        rowCount,
+        columnCount,
+        onSelectNamedRange,
+        namedRanges,
+        onChangeActiveCell,
+        onChangeSelections,
+        isFormulaMode,
+        focusSheet,
+        selections,
+        activeCell,
+        getAddressFromSelection,
+        setValue,
+        navigateToSheetRange,
+    ]);
+    return (React.createElement("div", { className: "flex h-full w-[90px]" },
+        React.createElement(Input, { value: value, type: "text", ref: inputRef, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, onFocus: (e) => e.target.select(), className: "text-xs border-none rounded-none outline-none m-0 bg-rnc-background text-rnc-foreground w-full" }),
+        React.createElement(DropdownMenu, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, { className: "rounded-none mr-0", shrink: true },
+                    React.createElement(TriangleDownIcon, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "start", alignOffset: -SELECTOR_WIDTH + ICON_WIDTH, sideOffset: 1, className: "max-h-[300px] overflow-auto", onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current && !isOpen) {
+                            focusSheet?.();
+                        }
+                    } },
+                    React.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 }))))));
+}
+export const RangeSelector = memo(RangeSelectorComponent);

package/dist/esm/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/esm/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/esm/components/resizer/index.js

@@ -0,0 +1,39 @@
+import React, { useCallback, useRef } from "react";
+const RESIZER_HEIGHT = 4;
+export const Resizer = ({ onChange, value, min = 0 }) => {
+    const dragging = useRef(false);
+    const startY = useRef(0);
+    const el = useRef(null);
+    const handleMouseMove = useCallback((e) => {
+        if (!el.current) {
+            return;
+        }
+        const diff = Math.max(e.pageY - startY.current, min);
+        onChange?.(diff);
+        el.current.style.top = diff + "px";
+    }, [min, onChange]);
+    const handleMouseUp = useCallback(() => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseMove]);
+    const handleMouseDown = useCallback((e) => {
+        dragging.current = true;
+        const top = el.current?.style.top ? parseInt(el.current?.style.top) : 0;
+        startY.current = e.pageY - top;
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [handleMouseMove, handleMouseUp]);
+    return (React.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",
+        } }));
+};

package/dist/esm/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/esm/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/esm/components/selection/avatar.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { StyledAvatar } from "./style";
+export const Avatar = ({ title, backgroundColor, alignment, flipX = false, style, ...props }) => {
+    return (React.createElement(StyledAvatar, { style: {
+            backgroundColor: backgroundColor,
+            ...(alignment === "top"
+                ? flipX
+                    ? { borderBottomRightRadius: 0 }
+                    : { borderBottomLeftRadius: 0 }
+                : flipX
+                    ? { borderTopRightRadius: 0 }
+                    : { borderTopLeftRadius: 0 }),
+            ...style,
+        }, ...props }, title));
+};

package/dist/esm/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/esm/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/esm/components/selection/index.js

@@ -0,0 +1,192 @@
+import React, { memo } from "react";
+import { MagicFill } from "./magic-fill";
+import { PasteMenu as DefaultPasteMenu } from "./paste-menu";
+import { QuickEdit as DefaultQuickEdit } from "./quick-edit";
+import { StyledBorderCover, StyledFill, StyledLine, StyleResizeHandle, } from "./style";
+import { SuggestionAction as DefaultSuggestionAction } from "./suggestion-action";
+import { SelectionTitle } from "./title";
+/**
+ * Selection component
+ * @param param0
+ * @returns
+ */
+export const Selection = memo(({ x = 0, y = 0, width = 0, height = 0, fillHandleSize = 8, showFillHandle, offset = 0, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, strokeStyle = "solid", fillOpacity = 1, draggable, isDragging, borderCoverWidth = 5, type, range, title, keepTitleWithinBounds, keepTitleWithinVerticalBounds, flipTitleToBottom, table, pivotTable, onMouseDownTitle, onMouseDownResizeHandle, onMouseDownMoveHandle, TitleComponent = SelectionTitle, onMouseDown, onRequestEditTable, onRequestEditPivotTable, onFlashEnd, zIndex, index, id, showResizeHandles, resizeHandleBorderColor, resizeHandleSize = 6, fill, duration, selectionCount, enableMagicFill, sheetId, activeCell, selection, MagicFillComponent = MagicFill, metadata, readonly, showPasteMenu, onSplitTextToColumns, agentSuggestion, isHovered, MagicFillContent, QuickEdit = DefaultQuickEdit, PasteMenu = DefaultPasteMenu, SuggestionAction = DefaultSuggestionAction, onRemoveQuickEdit, onAddQuickEdit, }) => {
+    // Show paste menu
+    const finalShowPasteMenu = !showPasteMenu
+        ? false
+        : (type === "activeCell" && selectionCount === 0) || type === "selection";
+    // Flash cells
+    const isFlash = type === "flash";
+    // Suggestion
+    const isSuggestion = type === "suggestion";
+    /**
+     * In formula mode, border covers let the user drag
+     * a formula reference to move it (onMouseDownMoveHandle)
+     */
+    const 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
+     */
+    const showBorderCover = (draggable || isFormulaMove) &&
+        (type === "selection" || type === "activeCell");
+    const canDrag = draggable || isFormulaMove;
+    const 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;
+    const fillHandleSpacing = fillHandleSize / 2 + 1;
+    const lines = [
+        React.createElement(StyledLine, { style: {
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                width: width,
+                height: strokeTopWidth,
+                borderColor: strokeTopColor,
+                borderTopWidth: strokeTopWidth,
+                borderStyle: strokeStyle,
+                zIndex,
+            }, key: "top" }),
+        React.createElement(StyledLine, { style: {
+                transform: `translate3d(${x + width}px, ${y}px, 0)`,
+                width: strokeRightWidth,
+                height: height,
+                borderColor: strokeRightColor,
+                borderRightWidth: strokeRightWidth,
+                borderStyle: strokeStyle,
+                zIndex,
+            }, key: "right" }),
+        React.createElement(StyledLine, { style: {
+                transform: `translate3d(${x}px, ${y + height}px, 0)`,
+                width: width + strokeTopWidth,
+                height: strokeBottomWidth,
+                borderColor: strokeBottomColor,
+                borderBottomWidth: strokeBottomWidth,
+                borderStyle: strokeStyle,
+                zIndex,
+            }, key: "bottom" }),
+        // For dragged table column
+        React.createElement(StyledLine, { style: {
+                transform: `translate3d(${x}px, ${y + Math.round(strokeLeftWidth / 2) - 1}px, 0)`,
+                width: strokeLeftWidth,
+                height: height,
+                borderColor: strokeLeftColor,
+                borderLeftWidth: strokeLeftWidth,
+                borderStyle: strokeStyle,
+                zIndex,
+            }, key: "left" }),
+    ];
+    /**
+     * When moving a formula reference, pointerdown is handled by
+     * onMouseDownMoveHandle (like the resize handles), instead of
+     * the regular selection move (onMouseDown)
+     */
+    const borderCoverHandlers = {
+        onPointerDown: isFormulaMove ? onMouseDownMoveHandle : onMouseDown,
+        "data-index": index,
+    };
+    const borderCovers = [
+        React.createElement(StyledBorderCover, { style: {
+                ...borderCoverStyle,
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                width: width,
+                height: 5,
+            }, ...borderCoverHandlers, key: "top" }),
+        React.createElement(StyledBorderCover, { style: {
+                ...borderCoverStyle,
+                transform: `translate3d(${x + width}px, ${y}px, 0)`,
+                width: borderCoverWidth,
+                height: height - (showFillHandle ? fillHandleSpacing : 0),
+            }, ...borderCoverHandlers, key: "right" }),
+        React.createElement(StyledBorderCover, { style: {
+                ...borderCoverStyle,
+                transform: `translate3d(${x}px, ${y + height}px, 0)`,
+                width: width + strokeTopWidth - (showFillHandle ? fillHandleSpacing : 0),
+                height: borderCoverWidth,
+            }, ...borderCoverHandlers, key: "bottom" }),
+        React.createElement(StyledBorderCover, { style: {
+                ...borderCoverStyle,
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                width: borderCoverWidth,
+                height: height,
+            }, ...borderCoverHandlers, key: "left" }),
+    ];
+    const resizeHandles = [
+        React.createElement(StyleResizeHandle, { style: {
+                transform: `translate3d(${x - resizeHandleSize / 2 + 1}px, ${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.createElement(StyleResizeHandle, { style: {
+                transform: `translate3d(${x + width - resizeHandleSize / 2 + 1}px, ${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.createElement(StyleResizeHandle, { style: {
+                transform: `translate3d(${x - resizeHandleSize / 2 + 1}px, ${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.createElement(StyleResizeHandle, { style: {
+                transform: `translate3d(${x + width - resizeHandleSize / 2 + 1}px, ${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.createElement(React.Fragment, null,
+        fill && (React.createElement(StyledFill, { style: {
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                height: height + Math.floor(strokeWidth / 2),
+                width: width + Math.floor(strokeWidth / 2),
+                backgroundColor: fill,
+                opacity: isFlash ? 0 : fillOpacity,
+                animationDuration: isFlash ? `${duration}ms` : undefined,
+            }, className: isFlash ? "animate-flash ease-out repeat-1" : "", onAnimationEnd: () => isFlash ? onFlashEnd?.(id ?? index) : undefined })),
+        React.createElement(TitleComponent, {
+            type,
+            title,
+            keepTitleWithinBounds,
+            keepTitleWithinVerticalBounds,
+            flipTitleToBottom,
+            x,
+            y,
+            height,
+            width,
+            isDragging,
+            range,
+            offset,
+            stroke,
+            table,
+            pivotTable,
+            strokeWidth,
+            metadata,
+            onRequestEditTable,
+            onRequestEditPivotTable,
+            onMouseDown: onMouseDownTitle,
+            readonly,
+        }),
+        isSuggestion ? (React.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.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.createElement(QuickEdit, { x: x, y: y, width: width, height: height, range: range, sheetId: sheetId, onRemoveQuickEdit: onRemoveQuickEdit })) : null,
+        finalShowPasteMenu && (React.createElement(PasteMenu, { x: x + fillHandleSize / 2, y: y + fillHandleSize / 2, width: width, height: height, onSplitTextToColumns: onSplitTextToColumns }))));
+});
+Selection.displayName = "Selection";

package/dist/esm/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/esm/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/esm/components/selection/magic-fill.js

@@ -0,0 +1,52 @@
+import { selectionFromActiveCell } from "@rowsncolumns/grid";
+import { WandIcon } from "@rowsncolumns/icons";
+import { Button, cn, IconButton, Popover, PopoverContent, PopoverPortal, PopoverTrigger, } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+export const MagicFill = ({ x, y, width, height, sheetId, activeCell, selection, isHovered, backgroundColor, MagicFillContent = DefaultMagicFillContent, onAddQuickEdit, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const startRowIndex = activeCell?.rowIndex ?? selection?.range.startRowIndex;
+    const verticalPositon = startRowIndex === 1 ? "bottom" : "top";
+    const pillWidth = 12;
+    // const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const isActive = isHovered || isOpen;
+    const finalSelection = (activeCell && !selection
+        ? selectionFromActiveCell(activeCell)[0].range
+        : selection?.range);
+    // Selection in progress
+    if (selection?.inProgress) {
+        return null;
+    }
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { onMouseMove: (e) => e.stopPropagation(), variant: "primary", className: 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.createElement(PopoverPortal, null,
+            React.createElement(PopoverContent, { align: "start", className: "pointer-events-auto min-w-52", onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                } },
+                React.createElement(MagicFillContent, { sheetId: sheetId, selection: finalSelection, onRequestQuickEdit: () => {
+                        onAddQuickEdit({ ...finalSelection, sheetId });
+                        setIsOpen(false);
+                    } })))));
+};
+/**
+ * Default magic fill component
+ * @param props
+ * @returns
+ */
+const DefaultMagicFillContent = ({ onRequestQuickEdit, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { className: "gap-2 pl-1 pr-1", onClick: () => {
+                onRequestQuickEdit();
+            } },
+            React.createElement(WandIcon, null),
+            "AI Quick Edit")));
+};

package/dist/esm/components/selection/paste-menu.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type PasteMenuProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    onSplitTextToColumns?: (delimiter?: string) => void;
+};
+export declare const PasteMenu: ({ x, y, width, height, onSplitTextToColumns, }: PasteMenuProps) => React.JSX.Element;
+//# sourceMappingURL=paste-menu.d.ts.map

package/dist/esm/components/selection/paste-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paste-menu.d.ts","sourceRoot":"","sources":["../../../../components/selection/paste-menu.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,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,oBAAoB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,gDAMvB,cAAc,sBAsDhB,CAAC"}