@rowsncolumns/ui 15.0.38

package/dist/esm/editor-pm/use-editor-decorator-pm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editor-decorator-pm.d.ts","sourceRoot":"","sources":["../../../editor-pm/use-editor-decorator-pm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,uDAKlC,mBAAmB,aAEV,WAAW,KAAG,aAoFzB,CAAC"}

package/dist/esm/editor-pm/use-editor-decorator-pm.js

@@ -0,0 +1,57 @@
+import { getSelectionColorAtIndex, isNil } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { isNumberToken, isStringToken, isTableColumnToken, } from "./helpers";
+export const useEditorDecoratorPM = ({ cursorPosition, formulaMode, tokenizer, isActive, }) => {
+    return useCallback((state) => {
+        const decorations = [];
+        if (!formulaMode) {
+            return DecorationSet.create(state.doc, []);
+        }
+        // Only for formulas
+        const text = state.doc.textContent;
+        const tokens = tokenizer(text);
+        // Adds a cell suggestion cursor
+        if (isActive && cursorPosition !== undefined && text) {
+            decorations.push(Decoration.widget(cursorPosition, () => {
+                const span = document.createElement("span");
+                span.className =
+                    "bg-contain w-[8px] h-[12px] cursor-default inline-block leading-3 align-bottom";
+                span.style.background =
+                    "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjMiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNjY2MiPjxwYXRoIGQ9Ik0wLjUgMEwwLjUgM00wIDIuNUw4IDIuNU03LjUgM0w3LjUgMCIvPjwvc3ZnPg==) bottom no-repeat";
+                return span;
+            }, { side: 0 }));
+        }
+        let prevToken;
+        let offset = 0;
+        tokens.forEach((token, idx) => {
+            const add = token.startOffset + (idx === 0 ? 1 : 0) - (prevToken?.endColumn ?? 0);
+            const from = offset + add;
+            const to = from + token.image.length;
+            // Get color for the token
+            const color = !isNil(token.index)
+                ? getSelectionColorAtIndex(token.index)
+                : isTableColumnToken(token)
+                    ? "#2653BA"
+                    : isStringToken(token)
+                        ? "#008000"
+                        : isNumberToken(token)
+                            ? "#15c"
+                            : undefined;
+            if (color) {
+                decorations.push(Decoration.inline(from, to, {
+                    style: `color: ${color}`,
+                }, {}));
+            }
+            // Handle bold tokens if needed (if the token type supports it)
+            if (token.bold) {
+                decorations.push(Decoration.inline(from, to, {
+                    style: "font-weight: bold",
+                }, {}));
+            }
+            prevToken = token;
+            offset = to;
+        });
+        return DecorationSet.create(state.doc, decorations);
+    }, [cursorPosition, isActive, formulaMode, tokenizer]);
+};

package/dist/esm/editor-pm/use-editor-keydown-pm.d.ts

@@ -0,0 +1,21 @@
+import { EditorView } from "prosemirror-view";
+import { TextFormatRun } from "./types.js";
+type UseEditorKeyDownPMProps = {
+    value: string;
+    formulaMode?: boolean;
+    isNewValue?: boolean;
+    isCursorAtEnd(): boolean;
+    onInsertBreak(): void;
+    onSubmit?(value: string, textFormatRuns: TextFormatRun[] | undefined | null, e: React.KeyboardEvent<HTMLDivElement>): void;
+    onCancel?(e: React.KeyboardEvent<HTMLDivElement>): void;
+    onKeyDown?(e: React.KeyboardEvent<HTMLDivElement>): void;
+    canSubmit?: boolean;
+    canCancel?: boolean;
+    isActive?: boolean;
+    isDropdownOpen?: boolean;
+    isMentionDropdownOpen?: boolean;
+    getView(): EditorView | null;
+};
+export declare const useEditorKeyDownPM: ({ formulaMode, isNewValue, isCursorAtEnd, onInsertBreak, onSubmit, onCancel, onKeyDown, getView, isActive, value, canSubmit, canCancel, isDropdownOpen, }: UseEditorKeyDownPMProps) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
+export {};
+//# sourceMappingURL=use-editor-keydown-pm.d.ts.map

package/dist/esm/editor-pm/use-editor-keydown-pm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editor-keydown-pm.d.ts","sourceRoot":"","sources":["../../../editor-pm/use-editor-keydown-pm.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,IAAI,OAAO,CAAC;IACzB,aAAa,IAAI,IAAI,CAAC;IACtB,QAAQ,CAAC,CACP,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,aAAa,EAAE,GAAG,SAAS,GAAG,IAAI,EAClD,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,GACrC,IAAI,CAAC;IACR,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACxD,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,IAAI,UAAU,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,2JAchC,uBAAuB,SASlB,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,SAmF1C,CAAC"}

package/dist/esm/editor-pm/use-editor-keydown-pm.js

@@ -0,0 +1,79 @@
+import { isAnArrowKey } from "@rowsncolumns/utils";
+import { useCallback, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.ts";
+import { extractTextFormatRuns, serializeEditorValue } from "./helpers.js";
+export const useEditorKeyDownPM = ({ formulaMode, isNewValue, isCursorAtEnd, onInsertBreak, onSubmit, onCancel, onKeyDown, getView, isActive, value, canSubmit = true, canCancel = true, isDropdownOpen, }) => {
+    const valueRef = useRef(undefined);
+    // Used in keydown handler, closure
+    useIsomorphicLayoutEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    return useCallback((e) => {
+        const nativeEvent = e.nativeEvent;
+        const view = getView();
+        const isComposing = nativeEvent.isComposing ||
+            nativeEvent.keyCode === 229 ||
+            nativeEvent.key === "Process" ||
+            view?.composing;
+        if (isComposing &&
+            (e.key === "Enter" ||
+                e.key === "Tab" ||
+                e.key === "Escape" ||
+                isAnArrowKey(e.key))) {
+            return;
+        }
+        // Handle line breaks
+        const key = e.key;
+        const isEnter = key === "Enter";
+        const isTab = key === "Tab";
+        const isEscape = key === "Escape";
+        const isArrow = isAnArrowKey(key);
+        const smartSubmit = !formulaMode &&
+            isArrow &&
+            isNewValue &&
+            isCursorAtEnd() &&
+            !isDropdownOpen;
+        // Insert an in-cell line break on Alt+Enter (universal Excel/Sheets) or
+        // Cmd+Enter (Mac). Ctrl+Enter is deliberately NOT a line break — it
+        // commits (and on Windows is the only commit chord), matching Excel.
+        // Previously this fired on metaKey||ctrlKey, so Alt+Enter fell through
+        // to the submit path and destructively committed instead of newlining.
+        if (isEnter && (e.altKey || e.metaKey)) {
+            onInsertBreak();
+            e.preventDefault();
+            return;
+        }
+        // Submit handler
+        if (canSubmit && (isEnter || isTab || smartSubmit)) {
+            /* Commit the value from the live ProseMirror doc instead of the
+               lagging React-state mirror (valueRef), which dropped fast/long
+               type-to-edit input and committed blank cells (and bled the stale
+               buffer into the next cell). Formula commits keep valueRef so
+               cell-reference token state is unchanged. */
+            const submitView = getView();
+            const submitValue = !formulaMode && submitView
+                ? serializeEditorValue(submitView.state.doc)
+                : valueRef.current ?? "";
+            onSubmit?.(submitValue, extractTextFormatRuns(submitView?.state.doc), e);
+        }
+        // Cancel handler
+        if (canCancel && isEscape) {
+            /* Trigger cancel */
+            onCancel?.(e);
+        }
+        // Callback
+        onKeyDown?.(e);
+    }, [
+        onKeyDown,
+        onSubmit,
+        onCancel,
+        getView,
+        isNewValue,
+        isCursorAtEnd,
+        formulaMode,
+        isDropdownOpen,
+        onInsertBreak,
+        canSubmit,
+        canCancel,
+    ]);
+};

package/dist/esm/editor-pm/use-mention-keydown.d.ts

@@ -0,0 +1,11 @@
+import { MentionState } from "./mentions-plugin";
+import { Mention } from "@rowsncolumns/common-types";
+export declare const useMentionKeyDown: ({ mentions, mentionState, onSelect, }: {
+    mentions: Mention[];
+    mentionState: MentionState;
+    onSelect: (mention: Mention) => void;
+}) => {
+    onMentionKeydown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    highlightedIndex: number;
+};
+//# sourceMappingURL=use-mention-keydown.d.ts.map

package/dist/esm/editor-pm/use-mention-keydown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mention-keydown.d.ts","sourceRoot":"","sources":["../../../editor-pm/use-mention-keydown.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,eAAO,MAAM,iBAAiB,GAAI,uCAI/B;IACD,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;0BAOO,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;;CAsD1C,CAAC"}

package/dist/esm/editor-pm/use-mention-keydown.js

@@ -0,0 +1,57 @@
+import { useCallback, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.ts";
+export const useMentionKeyDown = ({ mentions, mentionState, onSelect, }) => {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const highlightedIndexRef = useRef(undefined);
+    useIsomorphicLayoutEffect(() => {
+        highlightedIndexRef.current = highlightedIndex;
+    }, [highlightedIndex]);
+    const onMentionKeydown = useCallback((e) => {
+        const len = mentions.length - 1;
+        const index = highlightedIndexRef.current;
+        // No items
+        if (len === 0) {
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown": {
+                setHighlightedIndex((prev) => {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                setHighlightedIndex((prev) => {
+                    if (prev === 0) {
+                        return len;
+                    }
+                    return Math.max(0, prev - 1);
+                });
+                e.preventDefault();
+                break;
+            case "Escape":
+                if (mentionState.active) {
+                    e.preventDefault();
+                }
+                break;
+            case "Tab":
+            case "Enter": {
+                if (index === -1 || index === undefined) {
+                    return;
+                }
+                const selectedItem = mentions[index];
+                onSelect(selectedItem);
+                e.preventDefault();
+                break;
+            }
+        }
+    }, [mentions, mentionState, onSelect]);
+    return {
+        onMentionKeydown,
+        highlightedIndex,
+    };
+};

package/dist/esm/editor-pm/use-parameter-suggestions.d.ts

@@ -0,0 +1,19 @@
+import type { ParsedToken } from "@rowsncolumns/calculator";
+import type { OptionItem } from "./types";
+type Params = {
+    functionToken: ParsedToken | undefined;
+    parameterIndex: number;
+    parameterArguments: string[];
+    shouldFetchFunctionParameters?: (functionName: string, parameterIndex: number, parameters: string[]) => boolean;
+    getFunctionParameterSuggestions?: (functionName: string, parameterIndex: number, parameters: string[]) => OptionItem[] | undefined | Promise<OptionItem[] | undefined> | Promise<OptionItem[]>;
+};
+/**
+ * Fetch parameter suggestions (sync or async) for the active function.
+ * Ensures stale responses are ignored when dependency changes mid-flight.
+ */
+export declare const useParameterSuggestions: ({ functionToken, parameterIndex, parameterArguments, shouldFetchFunctionParameters, getFunctionParameterSuggestions, }: Params) => {
+    parameterSuggestions: OptionItem[];
+    isFetchingParameters: boolean;
+};
+export {};
+//# sourceMappingURL=use-parameter-suggestions.d.ts.map

package/dist/esm/editor-pm/use-parameter-suggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-parameter-suggestions.d.ts","sourceRoot":"","sources":["../../../editor-pm/use-parameter-suggestions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,KAAK,MAAM,GAAG;IACZ,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,6BAA6B,CAAC,EAAE,CAC9B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAAE,KACjB,OAAO,CAAC;IACb,+BAA+B,CAAC,EAAE,CAChC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAAE,KAElB,UAAU,EAAE,GACZ,SAAS,GACT,OAAO,CAAC,UAAU,EAAE,GAAG,SAAS,CAAC,GACjC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,wHAMrC,MAAM;;;CA4ER,CAAC"}

package/dist/esm/editor-pm/use-parameter-suggestions.js

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { DEFAULT_ARRAY } from "@rowsncolumns/spreadsheet";
+/**
+ * Fetch parameter suggestions (sync or async) for the active function.
+ * Ensures stale responses are ignored when dependency changes mid-flight.
+ */
+export const useParameterSuggestions = ({ functionToken, parameterIndex, parameterArguments, shouldFetchFunctionParameters, getFunctionParameterSuggestions, }) => {
+    const [parameterSuggestions, setSuggestions] = useState([]);
+    const [isFetchingParameters, setIsFetchingParameters] = useState(false);
+    const requestIdRef = useRef(0);
+    const functionName = functionToken?.image ?? "";
+    const hasFunctionToken = Boolean(functionToken);
+    const parameterArgsKey = useMemo(() => JSON.stringify(parameterArguments ?? []), [parameterArguments]);
+    useEffect(() => {
+        requestIdRef.current += 1;
+        const requestId = requestIdRef.current;
+        if (!hasFunctionToken || !getFunctionParameterSuggestions) {
+            setIsFetchingParameters(false);
+            setSuggestions(DEFAULT_ARRAY);
+            return;
+        }
+        if (shouldFetchFunctionParameters &&
+            !shouldFetchFunctionParameters(functionName, parameterIndex, parameterArguments)) {
+            setIsFetchingParameters(false);
+            setSuggestions(DEFAULT_ARRAY);
+            return;
+        }
+        let cancelled = false;
+        const run = async () => {
+            try {
+                setIsFetchingParameters(true);
+                const result = await getFunctionParameterSuggestions(functionName, parameterIndex, parameterArguments);
+                if (!cancelled && requestIdRef.current === requestId) {
+                    setSuggestions(result ?? []);
+                }
+            }
+            catch (error) {
+                // Keep dropdown stable on errors instead of throwing
+                if (!cancelled && requestIdRef.current === requestId) {
+                    console.warn("Error fetching parameter suggestions", error);
+                    setSuggestions([]);
+                }
+            }
+            finally {
+                if (!cancelled && requestIdRef.current === requestId) {
+                    setIsFetchingParameters(false);
+                }
+            }
+        };
+        run();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        functionName,
+        hasFunctionToken,
+        parameterIndex,
+        parameterArgsKey,
+        shouldFetchFunctionParameters,
+        getFunctionParameterSuggestions,
+    ]);
+    return {
+        parameterSuggestions,
+        isFetchingParameters,
+    };
+};

package/dist/esm/editor-pm/use-parameter-suggestions.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-parameter-suggestions.test.d.ts.map

package/dist/esm/editor-pm/use-parameter-suggestions.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-parameter-suggestions.test.d.ts","sourceRoot":"","sources":["../../../editor-pm/use-parameter-suggestions.test.tsx"],"names":[],"mappings":""}

package/dist/esm/editor-pm/use-parameter-suggestions.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { cleanup, render, screen, waitFor, act } from "@testing-library/react";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { useParameterSuggestions } from "./use-parameter-suggestions";
+const TestHarness = ({ functionToken, fetcher, }) => {
+    const { parameterSuggestions } = useParameterSuggestions({
+        functionToken,
+        parameterIndex: 0,
+        parameterArguments: [],
+        getFunctionParameterSuggestions: fetcher,
+    });
+    return (React.createElement("div", { "data-testid": "items" }, parameterSuggestions.map((item) => item.title).join(",")));
+};
+const makeFunctionToken = (name = "SUM") => ({
+    image: name,
+    tokenType: { name: "Function", PATTERN: "" },
+    startColumn: 0,
+    endColumn: 0,
+    startOffset: 0,
+    endOffset: 0,
+    endLine: 0,
+    tokenTypeIdx: 0,
+});
+afterEach(() => cleanup());
+describe("useParameterSuggestions", () => {
+    it("returns async suggestions for an active function", async () => {
+        const fetcher = vi
+            .fn()
+            .mockResolvedValue([{ title: "paramA", category: "parameter" }]);
+        render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher }));
+        await waitFor(() => expect(screen.getByTestId("items").textContent).toBe("paramA"));
+        expect(fetcher).toHaveBeenCalledWith("SUM", 0, []);
+    });
+    it("ignores stale responses when function token changes", async () => {
+        let resolveFirst = () => { };
+        let resolveSecond = () => { };
+        const fetcher = vi
+            .fn()
+            .mockImplementationOnce(() => new Promise((res) => {
+            resolveFirst = res;
+        }))
+            .mockImplementationOnce(() => new Promise((res) => {
+            resolveSecond = res;
+        }));
+        const { rerender } = render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher }));
+        // Trigger second request with a new token
+        rerender(React.createElement(TestHarness, { functionToken: makeFunctionToken("AVG"), fetcher: fetcher }));
+        await act(async () => {
+            resolveFirst([{ title: "first", category: "parameter" }]);
+        });
+        expect(screen.getByTestId("items").textContent).toBe("");
+        await act(async () => {
+            resolveSecond([{ title: "second", category: "parameter" }]);
+        });
+        await waitFor(() => expect(screen.getByTestId("items").textContent).toBe("second"));
+    });
+    it("clears suggestions when there is no active function", async () => {
+        const fetcher = vi
+            .fn()
+            .mockResolvedValue([{ title: "paramA", category: "parameter" }]);
+        const { rerender } = render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher }));
+        await waitFor(() => expect(screen.getByTestId("items").textContent).toBe("paramA"));
+        rerender(React.createElement(TestHarness, { fetcher: fetcher }));
+        await waitFor(() => expect(screen.getByTestId("items").textContent).toBe(""));
+    });
+});

package/dist/esm/eye-dropper/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type EyeDropperProps = {
+    value?: string;
+    onBeforeOpen?: () => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+};
+export declare const EyeDropper: ({ onChange, onCancel, onBeforeOpen, }: EyeDropperProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/eye-dropper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../eye-dropper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,uCAIxB,eAAe,6BAuBjB,CAAC"}

package/dist/esm/eye-dropper/index.js

@@ -0,0 +1,23 @@
+import { MdColorize } from "@rowsncolumns/icons";
+import { IconButton } from "../icon-button";
+import React from "react";
+import { canUseDOM } from "@rowsncolumns/utils";
+export const EyeDropper = ({ onChange, onCancel, onBeforeOpen, }) => {
+    if (!canUseDOM || !window.EyeDropper) {
+        return null;
+    }
+    const onOpen = () => {
+        const eyeDropper = new window.EyeDropper();
+        onBeforeOpen?.();
+        eyeDropper
+            .open()
+            .then((result) => {
+            onChange?.(result.sRGBHex);
+        })
+            .catch((err) => {
+            onCancel?.();
+        });
+    };
+    return (React.createElement(IconButton, { onClick: onOpen, tooltip: "Pick a custom color" },
+        React.createElement(MdColorize, null)));
+};

package/dist/esm/function-info/helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Tokenizes function syntax
+ * @param syntax
+ */
+export declare const tokenizeFunctionSyntax: (syntax: string) => {
+    functionOpen: string;
+    parameters: string[];
+    functionClose: string;
+};
+//# sourceMappingURL=helpers.d.ts.map

package/dist/esm/function-info/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../function-info/helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM;;;;CAepD,CAAC"}

package/dist/esm/function-info/helpers.js

@@ -0,0 +1,20 @@
+/**
+ * Tokenizes function syntax
+ * @param syntax
+ */
+export const tokenizeFunctionSyntax = (syntax) => {
+    const openParen = "(";
+    const closeParen = ")";
+    const index = syntax.indexOf(openParen) + 1;
+    const functionOpen = syntax.substr(0, index);
+    const parameters = syntax
+        .substr(index, syntax.length - index - 1)
+        // https://regex101.com/r/ymosUf/1 : Exclude comma inside square braces
+        .split(/,\s*(?=[^)^\]^}]*(?:\(|\[|\{|$))/gi)
+        .map((a) => a.trim());
+    return {
+        functionOpen,
+        parameters,
+        functionClose: closeParen,
+    };
+};

package/dist/esm/function-info/index.d.ts

@@ -0,0 +1,11 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import React from "react";
+type FunctionInfoProps = {
+    activeFunction?: CalculatorFunction;
+    parameterIndex?: number;
+    showFormulaHelp?: boolean;
+    onHideFormulaHelp?(): void;
+};
+export declare const FunctionInfo: React.FC<FunctionInfoProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/function-info/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../function-info/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,KAAK,iBAAiB,GAAG;IACvB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,IAAI,IAAI,CAAC;CAC5B,CAAC;AASF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoEpD,CAAC"}

package/dist/esm/function-info/index.js

@@ -0,0 +1,68 @@
+import { CrossCircledIcon } from "@rowsncolumns/icons";
+import React, { useMemo } from "react";
+import { IconButton } from "../icon-button";
+import { Separator } from "../separator";
+import { tokenizeFunctionSyntax } from "./helpers";
+import { StyledFunctionParameterTitle, StyledFunctionSubtitle } from "./style";
+const ACTIVE_COLOR = "#008000";
+export const FunctionInfo = ({ activeFunction, parameterIndex = 0, onHideFormulaHelp, }) => {
+    const { syntax, example, description, parameters } = activeFunction ?? {};
+    /**
+     * It can happen that formula list does not contain
+     * parameters, but syntax has
+     * Use syntax
+     */
+    const paramLen = useMemo(() => {
+        return tokenizeFunctionSyntax(syntax ?? "").parameters.length;
+    }, [syntax]);
+    const paramIndex = Math.min(parameterIndex, paramLen - 1);
+    /**
+     * If Function is not documented,
+     */
+    if (!syntax) {
+        return null;
+    }
+    return (React.createElement("div", { className: "break-words text-rnc-foreground" },
+        React.createElement("div", { className: "py-1 px-2 text-sm rounded-t-sm place-items-center flex bg-rnc-accent -mt-1 font-formula" },
+            React.createElement("div", { className: "flex-1" },
+                React.createElement(TokenizedFunction, { syntax: syntax, parameterIndex: paramIndex })),
+            React.createElement(IconButton, { onClick: onHideFormulaHelp, title: "Hide formula suggestions for this cell" },
+                React.createElement(CrossCircledIcon, null))),
+        React.createElement(Separator, { orientation: "horizontal", color: "$gray7" }),
+        React.createElement("div", { className: "overflow-auto max-h-[300px]" },
+            example ? (React.createElement("div", { className: "px-2 py-2" },
+                React.createElement(StyledFunctionSubtitle, null, "Example"),
+                React.createElement(StyledFunctionParameterTitle, { active: true }, example))) : null,
+            React.createElement("div", { className: "px-2 py-2" },
+                React.createElement(StyledFunctionSubtitle, null, "About"),
+                React.createElement("div", { className: "text-xs font-system" }, description)),
+            parameters?.length ? (React.createElement(Separator, { orientation: "horizontal", color: "$gray7" })) : null,
+            parameters?.map(({ title, description }, index) => {
+                return (React.createElement("div", { className: "px-2 py-2", key: title },
+                    React.createElement(StyledFunctionParameterTitle, { active: paramIndex === index }, title),
+                    React.createElement("div", { className: "text-xs font-system" }, description)));
+            }))));
+};
+/**
+ * Convert string function to tokens
+ * @param param0
+ */
+const TokenizedFunction = ({ syntax, parameterIndex, }) => {
+    if (!syntax) {
+        return null;
+    }
+    const { functionOpen, parameters, functionClose } = tokenizeFunctionSyntax(syntax);
+    const paramLen = parameters.length;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", null, functionOpen),
+        parameters.map((param, i) => {
+            const sep = i < paramLen - 1 ? ", " : "";
+            return (React.createElement(React.Fragment, { key: i },
+                React.createElement("span", { style: {
+                        color: parameterIndex === i ? ACTIVE_COLOR : void 0,
+                        fontWeight: parameterIndex === i ? "bold" : "normal",
+                    } }, param),
+                sep));
+        }),
+        React.createElement("span", null, functionClose)));
+};

package/dist/esm/function-info/style.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+import React from "react";
+export declare const StyledFunctionSubtitle: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const StyledFunctionParameterTitle: ({ className, active, ...props }: ComponentProps<typeof StyledFunctionSubtitle> & {
+    active?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/function-info/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../function-info/style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,sBAAsB,GAAI,yBAGpC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,sBAUtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,iCAI1C,cAAc,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,sBAatE,CAAC"}

package/dist/esm/function-info/style.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { cn } from "../utils";
+export const StyledFunctionSubtitle = ({ className, ...props }) => {
+    return (React.createElement("div", { className: cn("uppercase pb-1 font-formula font-semibold text-xs text-rnc-foreground/60 tracking-wide", className), ...props }));
+};
+export const StyledFunctionParameterTitle = ({ className, active, ...props }) => {
+    return (React.createElement(StyledFunctionSubtitle, { className: cn("normal-case text-sm", active
+            ? "text-green-700 font-semibold tracking-wide font-formula"
+            : undefined, className), ...props }));
+};

package/dist/esm/hex-color-picker/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type HexColorPickerProps = {
+    value?: string;
+    onChange?(color: string): void;
+};
+export declare const HexColorPicker: ({ value, onChange }: HexColorPickerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hex-color-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../hex-color-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,qBAAqB,mBAAmB,sBAwBtE,CAAC"}