@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/selection/paste-menu.js

@@ -0,0 +1,29 @@
+import { ChevronRightIcon, MdOutlineArrowDropDown, MdPaste, } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, } from "@rowsncolumns/ui";
+import React from "react";
+export const PasteMenu = ({ x, y, width, height, onSplitTextToColumns, }) => {
+    return (React.createElement("div", { className: "absolute pointer-events-auto shadow-sm bg-rnc-background border-rnc-border border border-solid rounded-md flex items-start justify-start", style: {
+            left: x + width,
+            top: y + height,
+        }, onMouseDown: (e) => e.stopPropagation() },
+        React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, { tooltip: "Paste formatting" },
+                    React.createElement(MdPaste, null),
+                    React.createElement(MdOutlineArrowDropDown, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                    } },
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, null,
+                            "Split text to columns",
+                            React.createElement(DropdownRightSlot, null,
+                                React.createElement(ChevronRightIcon, null))),
+                        React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(",") }, "Comma"),
+                            React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(";") }, "Semicolon"),
+                            React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(".") }, "Period"),
+                            React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(" ") }, "Space"),
+                            React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.("|") }, "Pipe"))))))));
+};

package/dist/esm/components/selection/quick-edit.d.ts

@@ -0,0 +1,14 @@
+import type { GridRange } from "@rowsncolumns/grid";
+import React from "react";
+import type { SheetRange } from "../../types";
+export type QuickEditProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    sheetId: number;
+    range?: GridRange | null;
+    onRemoveQuickEdit(range: SheetRange): void;
+};
+export declare const QuickEdit: ({ x, y, width, sheetId, range, onRemoveQuickEdit, }: QuickEditProps) => React.JSX.Element;
+//# sourceMappingURL=quick-edit.d.ts.map

package/dist/esm/components/selection/quick-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-edit.d.ts","sourceRoot":"","sources":["../../../../components/selection/quick-edit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AASpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,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,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,qDAOvB,cAAc,sBAoEhB,CAAC"}

package/dist/esm/components/selection/quick-edit.js

@@ -0,0 +1,41 @@
+import { Button, cn, Popover, PopoverContent, PopoverPortal, PopoverTrigger, } from "@rowsncolumns/ui";
+import React from "react";
+import { StyledNoteTextarea } from "../cell-tooltip/style";
+import { StyledFakeTriggerButton } from "../context-menu/style";
+export const QuickEdit = ({ x, y, width, sheetId, range, onRemoveQuickEdit, }) => {
+    const padding = 2;
+    return (React.createElement(Popover, { open: true },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(StyledFakeTriggerButton, { style: {
+                    left: x + width + padding,
+                    top: y,
+                } })),
+        React.createElement(PopoverPortal, null,
+            React.createElement(PopoverContent, { align: "start", className: "pointer-events-auto min-w-52", onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                } },
+                React.createElement("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                    } },
+                    React.createElement("div", { className: "text-xs pb-2" }, "Quick Edit"),
+                    React.createElement("div", { className: "flex flex-col gap-1 pb-2" },
+                        React.createElement("label", { className: "text-xs m-0 p-0" }, "Prompt"),
+                        React.createElement(StyledNoteTextarea, { className: cn("border border-rnc-input border-solid"), rows: 4, placeholder: "What would you like to do with this text?", autoFocus: true, onKeyDown: (e) => {
+                                if (e.key === "Escape" && range) {
+                                    onRemoveQuickEdit({
+                                        ...range,
+                                        sheetId,
+                                    });
+                                }
+                            } })),
+                    React.createElement("div", { className: "flex gap-2" },
+                        React.createElement(Button, { variant: "primary", type: "submit", size: "xs" }, "Submit"),
+                        React.createElement(Button, { variant: "outline", type: "reset", size: "xs", onClick: () => {
+                                if (range) {
+                                    onRemoveQuickEdit({
+                                        ...range,
+                                        sheetId,
+                                    });
+                                }
+                            } }, "Cancel")))))));
+};

package/dist/esm/components/selection/style.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare const StyledLine: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledBorderCover: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * For formula resize handles to work
+ * we have to replace all the values in the editor
+ */
+export declare const StyleResizeHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledFill: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    selectable?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledTitleWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledAvatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/selection/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/selection/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,UAAU,mKAYrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,mKAS5B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mKAY5B,CAAC;AAIH,eAAO,MAAM,UAAU,mKAYrB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAEiC,OAAO;wCAa9D,CAAC;AAIH,eAAO,MAAM,kBAAkB,mKAY7B,CAAC;AAIH,eAAO,MAAM,YAAY,mKAYvB,CAAC"}

package/dist/esm/components/selection/style.js

@@ -0,0 +1,22 @@
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledLine = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("absolute border-0 top-0 left-0 pointer-events-none border-none print:hidden", className), ...props })));
+StyledLine.displayName = "StyledLine";
+export const StyledBorderCover = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("select-none  absolute top-0 left-0 print:hidden", className), ...props })));
+StyledBorderCover.displayName = "StyledBorderCover";
+/**
+ * For formula resize handles to work
+ * we have to replace all the values in the editor
+ */
+export const StyleResizeHandle = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("absolute top-0 left-0 print:hidden w-1.5 h-1.5 cursor-crosshair pointer-events-auto before:content-[''] before:absolute before:-inset-[4px]", className), ...props })));
+StyleResizeHandle.displayName = "StyleResizeHandle";
+export const StyledFill = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("absolute top-0 left-0 select-none pointer-events-none print:hidden", className), ...props })));
+StyledFill.displayName = "StyledFill";
+export const StyledTitle = React.forwardRef(({ className, selectable, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("absolute top-0 pointer-events-auto left-0 select-none pb-1 fade-in-50 animate-fade-in z-10 -translate-y-full", selectable
+        ? "pointer-events-auto"
+        : "pointer-events-none print:hidden select-none", className), ...props })));
+StyledTitle.displayName = "StyledTitle";
+export const StyledTitleWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("bg-rnc-accent text-xs font-system text-rnc-foreground px-2 rounded-sm border-solid border border-rnc-border h-[24px] flex items-center gap-1 whitespace-nowrap print:hidden", className), ...props })));
+StyledTitleWrapper.displayName = "StyledTitleWrapper";
+export const StyledAvatar = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("text-xs text-center h-5 rounded-md w-auto pl-1 pr-1 justify-center flex items-center -translate-x-[10px] translate-y-1/2 overflow-hidden whitespace-nowrap text-rnc-background pointer-events-none print:hidden", className), ...props })));
+StyledAvatar.displayName = "StyledAvatar";

package/dist/esm/components/selection/suggestion-action.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { AgentSuggestion } from "../../types";
+export type SuggestionArrowProps = {
+    /**
+     * Direction of the arrow
+     */
+    direction?: "left" | "right" | "top" | "bottom";
+    /**
+     * Size of the arrow in pixels
+     */
+    size?: number;
+};
+export declare const SuggestionArrow: ({ direction, size, }: SuggestionArrowProps) => React.JSX.Element;
+export type SuggestionActionProps = React.HTMLAttributes<HTMLDivElement> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    agentSuggestion?: AgentSuggestion;
+};
+export declare const SuggestionAction: ({ x, y, width, height, agentSuggestion, }: SuggestionActionProps) => React.JSX.Element;
+//# sourceMappingURL=suggestion-action.d.ts.map

package/dist/esm/components/selection/suggestion-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-action.d.ts","sourceRoot":"","sources":["../../../../components/selection/suggestion-action.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAChD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,sBAG7B,oBAAoB,sBAoBtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACzE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,2CAM9B,qBAAqB,sBAgFvB,CAAC"}

package/dist/esm/components/selection/suggestion-action.js

@@ -0,0 +1,53 @@
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, Cross2Icon, } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+export const SuggestionArrow = ({ direction = "left", size = 8, }) => {
+    const getArrowClassName = () => {
+        const base = "absolute w-3 h-3 bg-rnc-background border border-rnc-border border-solid";
+        switch (direction) {
+            case "left":
+                return `${base} -left-[7px] top-4 rotate-45 border-r-0 border-t-0`;
+            case "right":
+                return `${base} -right-[6px] top-1/2 -translate-y-1/2 rotate-45 border-l-0 border-t-0`;
+            case "top":
+                return `${base} left-1/2 -translate-x-1/2 -top-[6px] rotate-45 border-b-0 border-r-0`;
+            case "bottom":
+                return `${base} left-1/2 -translate-x-1/2 -bottom-[6px] rotate-45 border-t-0 border-l-0`;
+            default:
+                return base;
+        }
+    };
+    return React.createElement("div", { className: getArrowClassName() });
+};
+export const SuggestionAction = ({ x, y, width, height, agentSuggestion, }) => {
+    return (React.createElement("div", { className: "absolute pointer-events-auto shadow-lg bg-rnc-background border-rnc-border border border-solid rounded-md flex flex-col items-stretch animate-fade-in z-20 text-xs p-2 ml-2", style: {
+            left: x + width,
+            top: y,
+        } },
+        React.createElement(SuggestionArrow, { direction: "left", size: 8 }),
+        React.createElement("div", { className: "pb-1.5" }, "Agent Suggestion"),
+        agentSuggestion?.reason && (React.createElement("div", { className: "pb-2 text-xs text-rnc-muted-foreground border-b border-rnc-border" }, agentSuggestion?.reason)),
+        React.createElement("div", { className: "flex flex-col gap-2 pb-2 border-b border-rnc-border" },
+            React.createElement("div", { className: "flex flex-col" },
+                React.createElement("label", { className: "flex items-center gap-2 cursor-pointer hover:bg-rnc-accent rounded px-2 py-1" },
+                    React.createElement("input", { type: "radio", name: "viewMode", value: "agent", className: "cursor-pointer m-0" }),
+                    React.createElement("span", { className: "text-xs" }, "Proposed changes")),
+                React.createElement("label", { className: "flex items-center gap-2 cursor-pointer hover:bg-rnc-accent rounded px-2 py-1" },
+                    React.createElement("input", { type: "radio", name: "viewMode", value: "current", className: "cursor-pointer m-0" }),
+                    React.createElement("span", { className: "text-xs" }, "Current values")),
+                React.createElement("label", { className: "flex items-center gap-2 cursor-pointer hover:bg-rnc-accent rounded px-2 py-1" },
+                    React.createElement("input", { type: "radio", name: "viewMode", value: "diff", defaultChecked: true, className: "cursor-pointer m-0" }),
+                    React.createElement("span", { className: "text-xs" }, "Show diff")))),
+        React.createElement("div", { className: "flex items-center justify-between gap-2" },
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(IconButton, { tooltip: "Approve", variant: "success" },
+                    React.createElement(CheckIcon, null)),
+                React.createElement(IconButton, { tooltip: "Reject", variant: "warning" },
+                    React.createElement(Cross2Icon, null))),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                React.createElement(IconButton, { tooltip: "Previous suggestion", className: "min-h-[28px] min-w-[28px]" },
+                    React.createElement(ChevronLeftIcon, null)),
+                React.createElement("span", { className: "text-xs text-rnc-muted-foreground px-1 min-w-[40px] text-center" }, "1 / 3"),
+                React.createElement(IconButton, { tooltip: "Next suggestion", className: "min-h-[28px] min-w-[28px]" },
+                    React.createElement(ChevronRightIcon, null))))));
+};

package/dist/esm/components/selection/title.d.ts

@@ -0,0 +1,45 @@
+import type { AreaStyle, GridRange, SelectionType } from "@rowsncolumns/grid";
+import React from "react";
+import type { PivotTable, TableView } from "../../types";
+import type { SelectionNewProps } from "./types";
+export type SelectionTitleProps = React.HTMLAttributes<HTMLDivElement> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    title?: string;
+    type: SelectionType;
+    range?: GridRange;
+    isDragging?: boolean;
+    offset?: number;
+    stroke?: string;
+    table?: TableView;
+    pivotTable?: PivotTable;
+    strokeWidth?: number;
+    onRequestEditTable: SelectionNewProps["onRequestEditTable"];
+    onRequestEditPivotTable: SelectionNewProps["onRequestEditPivotTable"];
+    metadata?: AreaStyle["metadata"];
+    readonly?: boolean;
+    /**
+     * Keep the title chip inside the selection's right edge. Set on
+     * frozen-pane copies, where a chip hanging past the edge would be
+     * clipped by the pane's overflow container at the frozen boundary.
+     */
+    keepTitleWithinBounds?: boolean;
+    /**
+     * Keep the title chip inside the selection's bottom edge. Set on
+     * frozen-row pane copies: a chip placed below the area (the first
+     * visible row has no room above it) would be cut in half by the pane's
+     * overflow container at the frozen boundary.
+     */
+    keepTitleWithinVerticalBounds?: boolean;
+    /**
+     * Draw the title chip below the area instead of above it. Set on
+     * scrollable-pane copies whose range starts on the pane's first visible
+     * row: a chip above the area would sit entirely past the frozen boundary,
+     * where the pane's overflow clip hides it.
+     */
+    flipTitleToBottom?: boolean;
+};
+export declare const SelectionTitle: ({ x, y, title, height, isDragging, onMouseDown, offset, type, stroke, width, range, table, pivotTable, strokeWidth, onRequestEditTable, onRequestEditPivotTable, readonly, keepTitleWithinBounds, keepTitleWithinVerticalBounds, flipTitleToBottom, }: SelectionTitleProps) => React.JSX.Element | null;
+//# sourceMappingURL=title.d.ts.map

package/dist/esm/components/selection/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../components/selection/title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAEV,UAAU,EACV,SAAS,EAEV,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACvE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC5D,uBAAuB,EAAE,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoCF,eAAO,MAAM,cAAc,GAAI,uPAqB5B,mBAAmB,6BA0GrB,CAAC"}

package/dist/esm/components/selection/title.js

@@ -0,0 +1,95 @@
+import { Pencil1Icon } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import React, { useCallback } from "react";
+import { Avatar } from "./avatar";
+import { StyledTitle, StyledTitleWrapper } from "./style";
+const getTitleStyle = (type, x, y, width, height, offset, isOutOfView) => {
+    switch (type) {
+        case "collaborator":
+            return {
+                left: x - offset,
+                top: y - offset + 1, // Cater for border width
+            };
+        case "pivotTable":
+            return {
+                left: x - offset,
+                top: y + height,
+                transform: `translateY(0%)`,
+            };
+        case "copy":
+        case "table":
+        default:
+            return {
+                left: isOutOfView ? x + width : x - offset,
+                top: y - offset + 1, // Cater for border width,
+                transform: isOutOfView ? `translateY(0%)` : undefined,
+            };
+    }
+};
+export const SelectionTitle = ({ x, y, title, height, isDragging, onMouseDown, offset = 0, type, stroke, width, range, table, pivotTable, strokeWidth = 0, onRequestEditTable, onRequestEditPivotTable, readonly = false, keepTitleWithinBounds = false, keepTitleWithinVerticalBounds = false, flipTitleToBottom = false, }) => {
+    const handleMouseMove = useCallback((e) => {
+        // Prevent propagation to parent element
+        // Selection title gets hidden when user mouses out of
+        // borderstyles
+        e.stopPropagation();
+    }, []);
+    const { verticalAlignment } = getLabelVerticalAlignment(range, flipTitleToBottom);
+    /**
+     * A chip below the area is centred on its bottom edge, so half of it hangs
+     * into the next row. Inside a frozen-row pane that half sits past the frozen
+     * boundary, where the pane's overflow clip cuts the chip in two, so pull it
+     * fully above the edge instead.
+     */
+    const clampToBottomEdge = keepTitleWithinVerticalBounds && verticalAlignment !== "top";
+    const isPivot = !!pivotTable;
+    if (!title) {
+        return null;
+    }
+    const isOutOfView = range?.startRowIndex === 1;
+    const titleStyles = getTitleStyle(type, x, y, width, height, offset, isOutOfView);
+    return (React.createElement(StyledTitle, { style: {
+            pointerEvents: isDragging ? "none" : "all",
+            ...titleStyles,
+        }, onMouseDown: onMouseDown, onMouseMove: handleMouseMove, selectable: type !== "collaborator" && type !== "copy" }, type === "collaborator" ? (React.createElement(Avatar, { title: title, backgroundColor: stroke, style: {
+            position: "absolute",
+            backgroundColor: stroke,
+            left: width,
+            ...(verticalAlignment === "top"
+                ? { bottom: "calc(100% + 5px)" }
+                : {
+                    top: clampToBottomEdge
+                        ? `${height - strokeWidth}px`
+                        : `calc(${height - strokeWidth}px - 5px)`,
+                }),
+            // Overrides the class-based -translate-x-[10px] translate-y-1/2.
+            // A -100% offset on an axis pulls the chip inside that edge of
+            // the cell instead of letting it hang past it, where a frozen
+            // pane's overflow clip would cut it off.
+            marginLeft: keepTitleWithinBounds ? 0 : 10,
+            transform: `translate(${keepTitleWithinBounds ? "-100%" : "-10px"}, ${clampToBottomEdge ? "-100%" : "50%"})`,
+        }, alignment: clampToBottomEdge ? "top" : verticalAlignment, flipX: keepTitleWithinBounds })) : type === "table" ? (React.createElement(StyledTitleWrapper, null,
+        title,
+        " ",
+        table && !readonly ? (React.createElement(IconButton, { onClick: () => onRequestEditTable?.(table), onMouseDown: (e) => {
+                e.stopPropagation();
+            }, className: "min-h-[20px] min-w-[20px]", tooltip: "Edit table" },
+            React.createElement(Pencil1Icon, null))) : null)) : (React.createElement(StyledTitleWrapper, { className: "bg-rnc-accent" },
+        title,
+        " ",
+        pivotTable && !readonly ? (React.createElement(IconButton, { onClick: () => onRequestEditPivotTable?.(pivotTable), onMouseDown: (e) => {
+                e.stopPropagation();
+            }, className: "min-h-[20px] min-w-[20px]", tooltip: "Edit Pivot Table" },
+            React.createElement(Pencil1Icon, null))) : null))));
+};
+const getLabelVerticalAlignment = (range, flipToBottom = false) => {
+    const rowIndex = range?.startRowIndex;
+    const columnIndex = range?.startColumnIndex;
+    const horizontalAlignment = rowIndex === 1 && columnIndex === 1 ? "right" : "left";
+    // Row 1 is the degenerate case of flipToBottom: the first row of an
+    // unfrozen grid has no room above it either (the column header sits there).
+    const verticalAlignment = rowIndex === 1 || flipToBottom ? "bottom" : "top";
+    return {
+        horizontalAlignment,
+        verticalAlignment,
+    };
+};

package/dist/esm/components/selection/types.d.ts

@@ -0,0 +1,43 @@
+import type { CellInterface } from "@rowsncolumns/common-types";
+import type { SelectionProps } from "@rowsncolumns/grid";
+import type { ElementType } from "react";
+import type { Maybe, PivotTable, SheetRange } from "../../types";
+import type { TableView } from "../../types";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+import type { MagicFillContentProps, MagicFillProps } from "./magic-fill";
+import type { PasteMenuProps } from "./paste-menu";
+import type { QuickEditProps } from "./quick-edit";
+import type { SuggestionActionProps } from "./suggestion-action";
+export type SelectionNewProps = SelectionProps<SelectionAttributes> & {
+    onMouseDownTitle?(e: React.MouseEvent<HTMLDivElement>): void;
+    onMouseDownResizeHandle?(e: React.PointerEvent<HTMLDivElement>): void;
+    onMouseDownMoveHandle?(e: React.PointerEvent<HTMLDivElement>): void;
+    TitleComponent?: ElementType;
+    onRequestEditTable?(table: TableView): void;
+    onRequestEditPivotTable?(pivotTable: PivotTable): void;
+    onFlashEnd?(id: string | number): void;
+    isCopy?: boolean;
+    zIndex?: number;
+    showResizeHandles?: boolean;
+    resizeHandleBorderColor?: string;
+    resizeHandleSize?: number;
+    fillHandleSize?: number;
+    showFillHandle?: boolean;
+    duration?: number;
+    selectionCount: number;
+    enableMagicFill?: boolean;
+    hoveredCell?: Maybe<CellInterface>;
+    MagicFillComponent?: React.ComponentType<MagicFillProps>;
+    MagicFillContent?: React.ComponentType<MagicFillContentProps>;
+    QuickEdit?: React.ComponentType<QuickEditProps>;
+    PasteMenu?: React.ComponentType<PasteMenuProps>;
+    SuggestionAction?: React.ComponentType<SuggestionActionProps>;
+    readonly?: boolean;
+    showPasteMenu?: boolean;
+    sheetId: number;
+    onSplitTextToColumns: (delimiter?: string) => void;
+    isHovered?: boolean;
+    onRemoveQuickEdit(range: SheetRange): void;
+    onAddQuickEdit(range: SheetRange): void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/selection/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/selection/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,mBAAmB,CAAC,GAAG;IACpE,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC7D,uBAAuB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtE,qBAAqB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,uBAAuB,CAAC,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IACvD,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IACnC,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAChD,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3C,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACzC,CAAC"}

package/dist/esm/components/selection/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/selection-input/index.d.ts

@@ -0,0 +1,19 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+type SelectionInputProps = {
+    placeholder?: string;
+    value?: string;
+    onChange?(value: string): void;
+    sheetName: string;
+    selections?: SelectionArea<SelectionAttributes>[];
+    activeCell: CellInterface;
+    selectionIndex?: number;
+    merges?: GridRange[];
+    rowCount?: number;
+    columnCount?: number;
+    style?: React.CSSProperties;
+};
+export declare const SelectionInput: ({ value, onChange, sheetName, selections, activeCell, selectionIndex, placeholder, style, }: SelectionInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/selection-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/selection-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIlE,KAAK,mBAAmB,GAAG;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClD,UAAU,EAAE,aAAa,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6FAS5B,mBAAmB,sBAgCrB,CAAC"}

package/dist/esm/components/selection-input/index.js

@@ -0,0 +1,27 @@
+import { selectionFromActiveCell } from "@rowsncolumns/grid";
+import React, { useRef } from "react";
+import { useGetAddressFromSelection } from "../../atoms";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { CellInput } from "../cell-input";
+import { StyledInputWrapper } from "./style";
+export const SelectionInput = ({ value = "", onChange, sheetName, selections, activeCell, selectionIndex = 0, placeholder, style, }) => {
+    const editorRef = useRef(null);
+    const getAddressFromSelection = useGetAddressFromSelection();
+    useIsomorphicLayoutEffect(() => {
+        const selection = selections?.length
+            ? selections[selectionIndex]
+            : selectionFromActiveCell(activeCell)[0];
+        const cellAddress = getAddressFromSelection?.(selection, sheetName);
+        if (cellAddress) {
+            onChange?.(cellAddress);
+        }
+    }, [selections, activeCell, sheetName, getAddressFromSelection]);
+    const handleChange = (value) => {
+        onChange?.(value);
+    };
+    return (React.createElement(StyledInputWrapper, null,
+        React.createElement(CellInput, { ref: editorRef, placeholder: placeholder, value: value, onChange: handleChange, style: {
+                border: "1px #ccc solid",
+                ...style,
+            } })));
+};

package/dist/esm/components/selection-input/style.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const StyledInputWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/selection-input/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/selection-input/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,kBAAkB,mKAS7B,CAAC"}

package/dist/esm/components/selection-input/style.js

@@ -0,0 +1,4 @@
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledInputWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("flex flex-row items-center mb-1", className), ...props })));
+StyledInputWrapper.displayName = "StyledInputWrapper";

package/dist/esm/components/sheet-search/index.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+/**
+ * Per-search toggles. Backwards-compatible: hosts that ignore the
+ * second `options` argument keep the previous case-insensitive
+ * substring behaviour.
+ */
+export type SheetSearchOptions = {
+    matchCase?: boolean;
+    wholeWord?: boolean;
+    useRegex?: boolean;
+};
+export type SheetSearchProps = {
+    placeholder?: string;
+    isActive?: boolean;
+    searchQuery?: string;
+    onSubmit(query: string, options?: SheetSearchOptions): void;
+    onReset(): void;
+    onNext(): void;
+    onPrevious(): void;
+    disablePrevious?: boolean;
+    disableNext?: boolean;
+    totalResults?: number;
+    currentResult?: number;
+    /**
+     * Open with the Replace pane expanded (Cmd/Ctrl+H entry point).
+     * Can also be toggled via the in-pane "Replace" link.
+     */
+    showReplaceByDefault?: boolean;
+    /**
+     * Replace the currently active match. When omitted, the Replace
+     * controls are not rendered.
+     */
+    onReplace?(replaceWith: string): void;
+    /**
+     * Replace every match in the current search scope.
+     */
+    onReplaceAll?(replaceWith: string): void;
+    replacePlaceholder?: string;
+};
+export declare const SheetSearch: ({ onSubmit, onReset, onNext, onPrevious, searchQuery, isActive, disablePrevious, disableNext, placeholder, totalResults, currentResult, showReplaceByDefault, onReplace, onReplaceAll, replacePlaceholder, }: SheetSearchProps) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/sheet-search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/sheet-search/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC5D,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;IACf,UAAU,IAAI,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC;;OAEG;IACH,YAAY,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8MAgBzB,gBAAgB,6BAmNlB,CAAC"}