@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/floating-cell-editor/index.js

@@ -0,0 +1,168 @@
+import { isEqualCells } from "@rowsncolumns/grid";
+import { CheckIcon, Cross1Icon, Pencil1Icon } from "@rowsncolumns/icons";
+import { cn, IconButton } from "@rowsncolumns/ui";
+import { useSelectionAwareChangeFormatting } from "../../hooks/use-selection-aware-formatting";
+import { memo, useCallback, useDeferredValue, useMemo, useRef, useState, } from "react";
+import React from "react";
+import { useEditingCell, useFocusSheet, useFormulaModeValue, useSetActiveEditor, useSetFormulaMode, useSetFormulaSelections, useSpreadsheet, } from "../../atoms";
+import { DEFAULT_ARRAY } from "../../config";
+import { useIsomorphicLayoutEffect } from "../../hooks";
+import { FormulaInput } from "../formula-input";
+import { BackgroundColorSelector, ButtonBold, ButtonInsertColumnRight, ButtonInsertRowBelow, ButtonItalic, ButtonStrikethrough, ButtonSubscript, ButtonSuperscript, ButtonUnderline, TextColorSelector, TextHorizontalAlignSelector, ToolbarSeparator, } from "../toolbar";
+export const FloatingCellEditor = memo(({ initialValue, initialTextFormatRuns, className, activeCell, sheetId, cellFormat, theme, isDarkMode, functionDescriptions, selections = DEFAULT_ARRAY, onChange, onChangeFormatting: onChangeFormattingProp, onInsertRow, onInsertColumn, ColorSelector, ...props }) => {
+    const formulaInputRef = useRef(null);
+    const [value, setValue] = useState(initialValue ?? "");
+    const [textFormatRuns, setTextFormatRuns] = useState(initialTextFormatRuns);
+    const setFormulaMode = useSetFormulaMode();
+    const formulaMode = useFormulaModeValue();
+    const setFormulaSelections = useSetFormulaSelections();
+    const [editingCellCoordinate, setEditingCellCoordiniate] = useEditingCell();
+    const focusSheet = useFocusSheet();
+    const setActiveEditor = useSetActiveEditor();
+    const { setActiveCell, canEditCell, getMentions } = useSpreadsheet();
+    const isEditing = useDeferredValue(Boolean(editingCellCoordinate), false);
+    const onChangeFormatting = useSelectionAwareChangeFormatting(onChangeFormattingProp);
+    const isProtected = useMemo(() => {
+        const editingSheetId = editingCellCoordinate?.sheetId ?? sheetId;
+        const editingCell = editingCellCoordinate ?? activeCell;
+        const canEdit = canEditCell?.(editingSheetId, editingCell);
+        return !canEdit;
+    }, [editingCellCoordinate, activeCell, sheetId, canEditCell]);
+    const closeFormulaMode = useCallback(() => {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+    }, [setFormulaMode, setFormulaSelections]);
+    const startEditing = useCallback(() => {
+        setEditingCellCoordiniate({
+            sheetId,
+            ...activeCell,
+        });
+        formulaInputRef.current?.focus(true);
+    }, [sheetId, activeCell, setEditingCellCoordiniate]);
+    const stopEditing = useCallback(() => {
+        setEditingCellCoordiniate(undefined);
+        closeFormulaMode();
+        setActiveEditor(undefined);
+        focusSheet?.();
+    }, [
+        closeFormulaMode,
+        setEditingCellCoordiniate,
+        setActiveEditor,
+        focusSheet,
+    ]);
+    useIsomorphicLayoutEffect(() => {
+        // Set value when not editing, or when editing but not in formula mode
+        if (!isEditing || !formulaMode) {
+            const currentValue = formulaInputRef.current?.getValue();
+            const newValue = initialValue ?? "";
+            if (currentValue !== newValue && (currentValue || newValue)) {
+                setValue(newValue);
+            }
+        }
+    }, [initialValue, isEditing, formulaMode]);
+    const handleSubmit = useCallback((value, textFormatRuns) => {
+        if (editingCellCoordinate) {
+            onChange?.(editingCellCoordinate.sheetId, editingCellCoordinate, value, textFormatRuns, initialValue, initialValue !== value, initialTextFormatRuns);
+            if (!isEqualCells(editingCellCoordinate, activeCell)) {
+                setActiveCell?.(editingCellCoordinate.sheetId, editingCellCoordinate, false);
+            }
+        }
+        stopEditing();
+        focusSheet?.();
+    }, [
+        editingCellCoordinate,
+        activeCell,
+        setActiveCell,
+        stopEditing,
+        focusSheet,
+        onChange,
+    ]);
+    const onFocus = useCallback(() => {
+        if (!isEditing) {
+            startEditing();
+        }
+    }, [isEditing, startEditing]);
+    // noop onBlur
+    const onBlur = useCallback(() => { }, []);
+    return (React.createElement("form", { className: `${cn("flex flex-col pr-2 border-rnc-border border-[1px] border-solid border-t-0 bg-rnc-background", className)}`, onSubmit: (e) => {
+            e.preventDefault();
+            handleSubmit(value);
+        } },
+        React.createElement("div", { className: "flex items-center gap-2 " },
+            React.createElement("div", { className: "flex-grow min-w-0" },
+                React.createElement(FormulaInput, { ref: formulaInputRef, value: value, textFormatRuns: textFormatRuns, onChange: (value, textFormatRuns) => {
+                        setValue(value);
+                        setTextFormatRuns(textFormatRuns);
+                    }, className: "mb-0", cellInputClassName: "border-none rounded-none", onSubmit: handleSubmit, editorClassName: "py-3 px-2 rounded-none", placeholder: "Enter text or formula", onFocus: onFocus, onBlur: onBlur, onCancel: stopEditing, disabled: isProtected, style: {
+                        lineHeight: "normal",
+                        fontSize: "1rem",
+                        minHeight: 44,
+                    }, functionDescriptions: functionDescriptions, getMentions: getMentions, ...props })),
+            isEditing ? (React.createElement(React.Fragment, null,
+                React.createElement(IconButton, { tooltip: "Save", variant: "primary", type: "submit", className: "min-w-8 min-h-8" },
+                    React.createElement(CheckIcon, null)),
+                React.createElement(IconButton, { tooltip: "Cancel", variant: "ghost", type: "button", className: "min-w-8 min-h-8", onClick: (e) => {
+                        e.preventDefault();
+                        stopEditing();
+                    } },
+                    React.createElement(Cross1Icon, null)))) : (React.createElement(IconButton, { variant: "ghost", type: "button", tooltip: "Edit", className: "min-w-8 min-h-8", disabled: isProtected, onClick: (e) => {
+                    e.preventDefault();
+                    startEditing();
+                } },
+                React.createElement(Pencil1Icon, null)))),
+        React.createElement("div", { className: "flex py-1 px-2 gap-2 min-h-8" },
+            React.createElement(ButtonBold, { isActive: cellFormat?.textFormat?.bold, disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        bold: !cellFormat?.textFormat?.bold,
+                    });
+                } }),
+            React.createElement(ButtonItalic, { isActive: cellFormat?.textFormat?.italic, disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        italic: !cellFormat?.textFormat?.italic,
+                    });
+                } }),
+            React.createElement(ButtonUnderline, { isActive: cellFormat?.textFormat?.underline, disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        underline: !cellFormat?.textFormat?.underline,
+                    });
+                } }),
+            React.createElement(ButtonStrikethrough, { isActive: cellFormat?.textFormat?.strikethrough, disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        strikethrough: !cellFormat?.textFormat?.strikethrough,
+                    });
+                } }),
+            React.createElement(ButtonSuperscript, { isActive: cellFormat?.textFormat?.baselineOffset === "superscript", disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        baselineOffset: cellFormat?.textFormat?.baselineOffset === "superscript"
+                            ? undefined
+                            : "superscript",
+                    });
+                } }),
+            React.createElement(ButtonSubscript, { isActive: cellFormat?.textFormat?.baselineOffset === "subscript", disabled: isProtected, onClick: () => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        baselineOffset: cellFormat?.textFormat?.baselineOffset === "subscript"
+                            ? undefined
+                            : "subscript",
+                    });
+                } }),
+            React.createElement(TextHorizontalAlignSelector, { value: cellFormat?.horizontalAlignment, disabled: isProtected, onChange: (value) => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "horizontalAlignment", value);
+                } }),
+            React.createElement(ToolbarSeparator, null),
+            React.createElement(TextColorSelector, { color: cellFormat?.textFormat?.color, disabled: isProtected, theme: theme, isDarkMode: isDarkMode, ColorSelector: ColorSelector, onChange: (color) => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "textFormat", {
+                        color,
+                    });
+                } }),
+            React.createElement(BackgroundColorSelector, { color: cellFormat?.backgroundColor, disabled: isProtected, theme: theme, ColorSelector: ColorSelector, onChange: (color) => {
+                    onChangeFormatting?.(sheetId, activeCell, selections, "backgroundColor", color);
+                } }),
+            React.createElement(ToolbarSeparator, null),
+            React.createElement(ButtonInsertRowBelow, { disabled: isProtected, onClick: () => {
+                    onInsertRow?.(sheetId, activeCell.rowIndex + 1, 1);
+                } }),
+            React.createElement(ButtonInsertColumnRight, { disabled: isProtected, onClick: () => {
+                    onInsertColumn?.(sheetId, activeCell.columnIndex + 1, 1);
+                } }))));
+});
+FloatingCellEditor.displayName = "FloatingCellEditor";

package/dist/esm/components/formula-bar/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type RefAttribute = {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare const FormulaBar: React.NamedExoticComponent<RefAttribute & {
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const FormulaBarLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/formula-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-bar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,KAAK,YAAY,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU;cACM,KAAK,CAAC,SAAS;gBAAc,MAAM;EAmB/D,CAAC;AAEF,eAAO,MAAM,eAAe,mKAAwB,CAAC"}

package/dist/esm/components/formula-bar/index.js

@@ -0,0 +1,14 @@
+import React, { forwardRef, memo, useState } from "react";
+import { FORMULA_BAR_HEIGHT } from "../../config";
+import { Resizer } from "../resizer";
+import { StyledFormulaBarLabel, StyledFormulaBarWrapper } from "./style";
+export const FormulaBar = memo(forwardRef(({ children, className }, forwardedRef) => {
+    const [height, setHeight] = useState(FORMULA_BAR_HEIGHT);
+    return (React.createElement(StyledFormulaBarWrapper, { ref: forwardedRef, className: className },
+        React.createElement("div", { className: "flex", style: {
+                height,
+            } }, children),
+        React.createElement(Resizer, { value: height, min: FORMULA_BAR_HEIGHT, onChange: setHeight })));
+}));
+export const FormulaBarLabel = StyledFormulaBarLabel;
+FormulaBar.displayName = "FormulaBar";

package/dist/esm/components/formula-bar/style.d.ts

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

package/dist/esm/components/formula-bar/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/formula-bar/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,uBAAuB,mKAYlC,CAAC;AAIH,eAAO,MAAM,qBAAqB,mKAYhC,CAAC"}

package/dist/esm/components/formula-bar/style.js

@@ -0,0 +1,6 @@
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledFormulaBarWrapper = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("relative border-b-0 bg-rnc-background text-rnc-foreground border-rnc-border border-solid border-t-[1px] border-r-[1px] border-l-[1px] print:hidden", className), ...props })));
+StyledFormulaBarWrapper.displayName = "StyledFormulaBarWrapper";
+export const StyledFormulaBarLabel = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: cn("text-xs py-1 px-2 border-l-0 border-t-0 border-b-0 italic opacity-80 text-rnc-foreground h-full border-r-[1px] border-rnc-border border-solid flex place-items-center select-none box-border font-system", className), ...props })));
+StyledFormulaBarLabel.displayName = "StyledFormulaBarLabel";

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

@@ -0,0 +1,17 @@
+import type { TextEditorRef } from "@rowsncolumns/ui";
+import type { ComponentProps } from "react";
+import React from "react";
+import { CellInput } from "../cell-input";
+type FormulaInputProps = ComponentProps<typeof CellInput> & {
+    placeholder?: string;
+    value?: string;
+    cellInputClassName?: string;
+};
+/**
+ * Controller cells selection input
+ * @param param0
+ * @returns
+ */
+export declare const FormulaInput: React.ForwardRefExoticComponent<Omit<FormulaInputProps, "ref"> & React.RefAttributes<TextEditorRef>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGAiIxB,CAAC"}

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

@@ -0,0 +1,85 @@
+import { cn } from "@rowsncolumns/ui";
+import { debug, isAFormula } from "@rowsncolumns/utils";
+import { forwardRef, useCallback } from "react";
+import React, { useRef } from "react";
+import { useActiveEditor, useFormulaMode, useGetGridRef, useGetSelectionsFromFormula, useOnEditorKeyDown, useSetActiveEditor, useSetFormulaSelections, } from "../../atoms";
+import { useCellInputContext } from "../../atoms/cell-input-context.atom";
+import { useMergeRefs } from "../../hooks/use-merge.refs";
+import { CellInput } from "../cell-input";
+/**
+ * Controller cells selection input
+ * @param param0
+ * @returns
+ */
+export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur, onFocus, placeholder = "Add a formula", className, cellInputClassName, ...rest }, forwardedRef) => {
+    const getGridRef = useGetGridRef();
+    const editorRef = useRef(null);
+    const [isFormulaMode, setFormulaMode] = useFormulaMode();
+    const setFormulaSelections = useSetFormulaSelections();
+    const activeEditor = useActiveEditor();
+    const setActiveEditor = useSetActiveEditor();
+    const getSelectionsFromFormula = useGetSelectionsFromFormula();
+    const onEditorKeyDown = useOnEditorKeyDown();
+    const { getTableNames, getTableColumnNames, getNamedRanges } = useCellInputContext();
+    const closeFormulaMode = useCallback(() => {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+        onCancel?.();
+    }, [onCancel, setFormulaMode, setFormulaSelections]);
+    const handleFocus = useCallback((e) => {
+        // Set formula mode
+        setFormulaMode(isAFormula(value));
+        // Get selections from formula
+        const selections = getSelectionsFromFormula?.(value);
+        if (selections) {
+            setFormulaSelections(selections);
+        }
+        // Move to end of input
+        editorRef.current?.moveCursorToEnd();
+        // Trigger change
+        onChange?.(value);
+        onFocus?.(e);
+    }, [
+        setFormulaMode,
+        setFormulaSelections,
+        getSelectionsFromFormula,
+        value,
+        onChange,
+        onFocus,
+    ]);
+    const handleBlur = useCallback((e) => {
+        if (isFormulaMode && e.relatedTarget === getGridRef?.()?.container) {
+            debug("Related target is null, hence formula mode is still active");
+            return;
+        }
+        closeFormulaMode();
+        // Resetting active editor will
+        // cause the dropdown to close if open
+        setActiveEditor(undefined);
+        onCancel?.();
+        onBlur?.(e);
+    }, [closeFormulaMode, isFormulaMode, setActiveEditor, onCancel, getGridRef, onBlur]);
+    const handleChange = useCallback((value, textFormatRuns) => {
+        onChange?.(value, textFormatRuns);
+        // Prevent selecting when there is no active editor
+        if (!activeEditor || activeEditor !== editorRef.current) {
+            return;
+        }
+        // Set formula mode
+        setFormulaMode(isAFormula(value));
+        // Get selections from formula
+        const selections = getSelectionsFromFormula?.(value);
+        if (selections) {
+            setFormulaSelections(selections);
+        }
+    }, [
+        activeEditor,
+        onChange,
+        setFormulaMode,
+        setFormulaSelections,
+        getSelectionsFromFormula,
+    ]);
+    const mergedEditorRef = useMergeRefs(editorRef, forwardedRef);
+    return (React.createElement("div", { className: cn("flex flex-row items-center mb-1", className) },
+        React.createElement(CellInput, { ref: mergedEditorRef, className: cn("text-rnc-foreground pt-0.5 pb-0.5 flex-1 border-rnc-input border border-solid rounded-sm", "focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-0", cellInputClassName), placeholder: placeholder, onSubmit: closeFormulaMode, onCancel: closeFormulaMode, value: value, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, getNamedRanges: getNamedRanges, onKeyDown: onEditorKeyDown, ...rest })));
+});

package/dist/esm/components/grid-footer/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type GridFooterProps = {
+    sheetId: number;
+    onRequestAddRows?: (sheetId: number, additionalRows: number) => void;
+};
+/**
+ * Default grid footer
+ * Usage
+ * footerComponent={<GridFooter onRequestAddRows={} />}
+ * @param param0
+ * @returns
+ */
+export declare const GridFooter: ({ sheetId, onRequestAddRows }: GridFooterProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/grid-footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/grid-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,+BAA+B,eAAe,sBA2CxE,CAAC"}

package/dist/esm/components/grid-footer/index.js

@@ -0,0 +1,33 @@
+import { Button, Input } from "@rowsncolumns/ui";
+import { isNil } from "@rowsncolumns/utils";
+import React, { useRef } from "react";
+import { useSpreadsheet } from "../../atoms";
+import { ROW_HEADER_WIDTH, SCROLLBAR_SIZE } from "../../config";
+/**
+ * Default grid footer
+ * Usage
+ * footerComponent={<GridFooter onRequestAddRows={} />}
+ * @param param0
+ * @returns
+ */
+export const GridFooter = ({ sheetId, onRequestAddRows }) => {
+    const numberInputRef = useRef(null);
+    const { scrollToBottom } = useSpreadsheet();
+    return (React.createElement("div", { className: "flex flex-1 flex-row items-start bg-rnc-muted/30 p-2 border-rnc-border border-solid border-l border-r border-t border-b", style: {
+            paddingLeft: ROW_HEADER_WIDTH,
+        } },
+        React.createElement("div", { className: "flex flex-row items-center gap-2 pt-2", style: {
+                marginBottom: SCROLLBAR_SIZE,
+            } },
+            React.createElement(Button, { type: "button", variant: "primary", onClick: () => {
+                    const numRows = numberInputRef.current?.value;
+                    if (!isNil(numRows) && !isNaN(Number(numRows))) {
+                        onRequestAddRows?.(sheetId, Number(numRows));
+                    }
+                    queueMicrotask(() => {
+                        scrollToBottom?.();
+                    });
+                } }, "Add"),
+            React.createElement(Input, { ref: numberInputRef, type: "number", className: "flex-shrink w-20", defaultValue: 1000 }),
+            React.createElement("div", { className: "text-sm font-system text-rnc-foreground" }, "more rows at the bottom"))));
+};

package/dist/esm/components/header-cell/index.d.ts

@@ -0,0 +1,10 @@
+import type { RendererProps } from "@rowsncolumns/grid";
+import React from "react";
+export type HeaderCellProps = RendererProps & {
+    scale?: number;
+    backgroundColor?: string;
+    color?: string;
+    value: string;
+};
+export declare const HeaderCell: React.MemoExoticComponent<(props: HeaderCellProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/header-cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,oCAAgB,eAAe,uBA2EpD,CAAC"}

package/dist/esm/components/header-cell/index.js

@@ -0,0 +1,21 @@
+import { isNull } from "@rowsncolumns/grid";
+import React, { memo } from "react";
+import { Group, Rect, Shape, Text } from "react-konva";
+export const HeaderCell = memo((props) => {
+    const { rowIndex, columnIndex, scale = 1, backgroundColor = "#eee", color = "#333", width, height, x, y, stroke, strokeWidth = 1, value, } = props;
+    const isCorner = rowIndex === columnIndex;
+    const fontSize = 10 * scale;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Rect, { x: x + 0.5, y: y + 0.5, height: height, width: width, fill: backgroundColor, stroke: stroke, strokeWidth: strokeWidth, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false }),
+        isNull(value) ? null : (React.createElement(Group, { clipY: y + strokeWidth, clipHeight: height, clipX: x + strokeWidth, clipWidth: width, listening: false },
+            React.createElement(Text, { x: x + 0.5, y: y + 0.5, height: height, width: width, text: value, fill: color, fontSize: fontSize, hitStrokeWidth: 0, align: "center", verticalAlign: "middle", wrap: "none", listening: false }))),
+        isCorner ? (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: (ctx) => {
+                ctx.beginPath();
+                ctx.lineTo(34.5 * scale, 22.5 * scale);
+                ctx.lineTo(44.5 * scale, 22.5 * scale);
+                ctx.lineTo(44.5 * scale, 12.5 * scale);
+                ctx.setAttr("fillStyle", "rgb(183,183,183)");
+                ctx.fill();
+            }, listening: false })) : null));
+});
+HeaderCell.displayName = "HeaderCell";

package/dist/esm/components/header-menu/index.d.ts

@@ -0,0 +1,13 @@
+import { IconButton } from "@rowsncolumns/ui";
+import type { ComponentProps } from "react";
+import React from "react";
+type HeadermenuProps = {
+    left: number;
+    top: number;
+    dimension: number;
+    isSelected?: boolean;
+    scale?: number;
+};
+export declare const Headermenu: ({ left, top, dimension, className, isSelected, scale, ...props }: HeadermenuProps & ComponentProps<typeof IconButton>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/header-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kEAQxB,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,sBAsBrD,CAAC"}

package/dist/esm/components/header-menu/index.js

@@ -0,0 +1,13 @@
+import { TriangleDownIcon } from "@rowsncolumns/icons";
+import { cn, IconButton } from "@rowsncolumns/ui";
+import React from "react";
+import { HEADER_MENU_DIM } from "../../config";
+export const Headermenu = ({ left, top, dimension, className, isSelected, scale = 1, ...props }) => {
+    return (React.createElement(IconButton, { className: cn("absolute top-0 left-0 min-w-0 min-h-0 p-0 pointer-events-auto hover:bg-rnc-background active:bg-rnc-background focus:bg-rnc-background", isSelected ? "text-background" : undefined, className), style: {
+            left,
+            top,
+            width: dimension,
+            height: dimension,
+        }, ...props },
+        React.createElement(TriangleDownIcon, { width: HEADER_MENU_DIM * scale, height: HEADER_MENU_DIM * scale })));
+};

package/dist/esm/components/header-move/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { AXIS } from "./../../types";
+export interface DragComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    isDragging: boolean;
+    offset?: number;
+    dragOffset?: number;
+    axis?: AXIS;
+    containerHeight: number;
+    containerWidth: number;
+}
+/**
+ * Drag entire row and column
+ * using this component
+ *
+ * Only displayed when user selects
+ * full column or row
+ */
+export declare const HeaderMoveDragComponent: React.MemoExoticComponent<({ x, y, width, height, isDragging, offset, dragOffset, axis, containerHeight, containerWidth, ...rest }: DragComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/header-move/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-move/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,sIAa/B,kBAAkB,uBA2DtB,CAAC"}

package/dist/esm/components/header-move/index.js

@@ -0,0 +1,48 @@
+import React, { memo } from "react";
+/**
+ * Drag entire row and column
+ * using this component
+ *
+ * Only displayed when user selects
+ * full column or row
+ */
+export const HeaderMoveDragComponent = memo(({ x = 0, y = 0, width = 0, height = 0, isDragging, offset = 0, dragOffset = 0, axis = "x", containerHeight, containerWidth, ...rest }) => {
+    return (React.createElement("div", { className: "rnc-drag-container absolute inset-0 overflow-hidden pointer-events-none" },
+        React.createElement("div", { style: {
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                width,
+                cursor: isDragging ? "grabbing" : "grab",
+                height,
+            }, className: "rowcol-drag-handle pointer-events-auto select-none absolute left-0 top-0", ...rest }),
+        isDragging ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "rowcol-drag-highlight absolute top-0 left-0", style: {
+                    ...(axis === "x"
+                        ? {
+                            transform: `translate3d(${dragOffset}px, ${y + height}px, 0)`,
+                            width,
+                            height: containerHeight - height,
+                        }
+                        : {
+                            transform: `translate3d(${x + width}px, ${dragOffset}px, 0)`,
+                            height: height,
+                            width: containerWidth - width,
+                        }),
+                    background: "#777",
+                    opacity: 0.2,
+                } }),
+            React.createElement("div", { className: "rowcol-drag-border absolute top-0 left-0", style: {
+                    ...(axis === "x"
+                        ? {
+                            transform: `translate3d(${offset}px, ${y + height}px, 0)`,
+                            height: containerHeight - height,
+                            width: 2,
+                        }
+                        : {
+                            transform: `translate3d(${x + width}px, ${offset}px, 0)`,
+                            height: 2,
+                            width: containerWidth - width,
+                        }),
+                    background: "#777",
+                } }))) : null));
+});
+HeaderMoveDragComponent.displayName = "HeaderDragMove";

package/dist/esm/components/header-resizer/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { AXIS } from "./../../types";
+type HeaderResizerProps = React.HTMLAttributes<HTMLDivElement> & {
+    axis: AXIS;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    isDragging?: boolean;
+    dimension?: number;
+    index?: number;
+    backgroundColor?: string;
+    containerWidth: number;
+    containerHeight: number;
+    onAutoFit?: (index: number, axis: AXIS) => void;
+};
+export declare const HeaderResizer: React.FC<HeaderResizerProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/header-resizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-resizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqEtD,CAAC"}

package/dist/esm/components/header-resizer/index.js

@@ -0,0 +1,33 @@
+import React, { memo } from "react";
+export const HeaderResizer = memo(({ axis, left = 0, top = 0, width = 0, height = 0, isDragging, dimension = 5, index = 0, onAutoFit, containerHeight, containerWidth, backgroundColor = "#1a73e8", ...rest }) => {
+    const spacing = Math.floor(dimension / 2);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "absolute left-0 top-0 will-change-transform group", style: {
+                width: axis === "y" ? width + spacing : width,
+                height: axis === "y" ? height : height + spacing,
+                transform: `translate3d(${axis === "y" ? left - spacing : left}px, ${axis === "y" ? top : top - spacing}px, 0)`,
+            }, onContextMenu: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, onDoubleClick: () => {
+                onAutoFit?.(index, axis);
+            }, ...rest },
+            React.createElement("button", { className: "absolute top-0 right-0 bottom-0 border-none p-0 m-0 rounded-md invisible group-hover:visible", tabIndex: -1, style: {
+                    backgroundColor,
+                    visibility: isDragging ? "visible" : undefined,
+                    top: axis === "y" ? 0 : spacing,
+                    left: axis === "y" ? spacing : 0,
+                    cursor: axis === "y" ? "ew-resize" : "ns-resize",
+                }, "aria-label": "Resize" })),
+        React.createElement("div", { className: "absolute", style: {
+                display: isDragging ? "block" : "none",
+                transform: `translate3d(${axis === "y" ? left + Math.floor(dimension / 2) : left}px, ${axis === "x" ? top + Math.floor(dimension / 2) : top}px, 0)`,
+                left: axis === "x" ? width : 0,
+                top: axis === "y" ? height : 0,
+                width: axis === "y" ? 1 : containerWidth - width,
+                height: axis === "x" ? 1 : containerHeight - height,
+                borderRight: axis === "y" ? `1px ${backgroundColor} solid` : "none",
+                borderBottom: axis === "x" ? `1px ${backgroundColor} solid` : "none",
+            } })));
+});
+HeaderResizer.displayName = "HeaderResizer";

package/dist/esm/components/hidden-markers/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type InputProps = {
+    hiddenDimensions: number[];
+    expandedDimensions: number[][];
+};
+export type HiddenColumnMarkersProps = InputProps & {
+    onShowColumn: (indexes: number[]) => void;
+};
+export type HiddenRowMarkersProps = InputProps & {
+    onShowRow: (indexes: number[]) => void;
+};
+export declare const HiddenColumnMarkers: ({ hiddenDimensions, expandedDimensions, onShowColumn, }: HiddenColumnMarkersProps) => React.JSX.Element;
+export declare const HiddenRowMarkers: ({ hiddenDimensions, expandedDimensions, onShowRow, }: HiddenRowMarkersProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/hidden-markers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG;IAClD,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG;IAC/C,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,yDAIjC,wBAAwB,sBAyB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sDAI9B,qBAAqB,sBA6BvB,CAAC"}