@rowsncolumns/ui 15.0.38

package/dist/cjs/editor-pm/use-editor-decorator-pm.d.ts

@@ -0,0 +1,17 @@
+import type { ParsedToken } from "@rowsncolumns/calculator";
+import { EditorState } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { type LeafDecorator } from "./helpers";
+export type DecoratorRange = LeafDecorator & {
+    from: number;
+    to: number;
+};
+type UseDecoratorPMProps = {
+    cursorPosition: number | undefined;
+    formulaMode?: boolean;
+    isActive?: boolean;
+    tokenizer(value: string): ParsedToken[];
+};
+export declare const useEditorDecoratorPM: ({ cursorPosition, formulaMode, tokenizer, isActive, }: UseDecoratorPMProps) => (state: EditorState) => DecorationSet;
+export {};
+//# sourceMappingURL=use-editor-decorator-pm.d.ts.map

package/dist/cjs/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/cjs/editor-pm/use-editor-decorator-pm.js

@@ -0,0 +1,59 @@
+import { getSelectionColorAtIndex, isNil } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { isNumberToken, isStringToken, isTableColumnToken, } from "./helpers";
+export var useEditorDecoratorPM = function (_a) {
+    var cursorPosition = _a.cursorPosition, formulaMode = _a.formulaMode, tokenizer = _a.tokenizer, isActive = _a.isActive;
+    return useCallback(function (state) {
+        var decorations = [];
+        if (!formulaMode) {
+            return DecorationSet.create(state.doc, []);
+        }
+        // Only for formulas
+        var text = state.doc.textContent;
+        var tokens = tokenizer(text);
+        // Adds a cell suggestion cursor
+        if (isActive && cursorPosition !== undefined && text) {
+            decorations.push(Decoration.widget(cursorPosition, function () {
+                var 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 }));
+        }
+        var prevToken;
+        var offset = 0;
+        tokens.forEach(function (token, idx) {
+            var _a;
+            var add = token.startOffset + (idx === 0 ? 1 : 0) - ((_a = prevToken === null || prevToken === void 0 ? void 0 : prevToken.endColumn) !== null && _a !== void 0 ? _a : 0);
+            var from = offset + add;
+            var to = from + token.image.length;
+            // Get color for the token
+            var 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: ".concat(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/cjs/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/cjs/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/cjs/editor-pm/use-editor-keydown-pm.js

@@ -0,0 +1,81 @@
+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 var useEditorKeyDownPM = function (_a) {
+    var formulaMode = _a.formulaMode, isNewValue = _a.isNewValue, isCursorAtEnd = _a.isCursorAtEnd, onInsertBreak = _a.onInsertBreak, onSubmit = _a.onSubmit, onCancel = _a.onCancel, onKeyDown = _a.onKeyDown, getView = _a.getView, isActive = _a.isActive, value = _a.value, _b = _a.canSubmit, canSubmit = _b === void 0 ? true : _b, _c = _a.canCancel, canCancel = _c === void 0 ? true : _c, isDropdownOpen = _a.isDropdownOpen;
+    var valueRef = useRef(undefined);
+    // Used in keydown handler, closure
+    useIsomorphicLayoutEffect(function () {
+        valueRef.current = value;
+    }, [value]);
+    return useCallback(function (e) {
+        var _a;
+        var nativeEvent = e.nativeEvent;
+        var view = getView();
+        var isComposing = nativeEvent.isComposing ||
+            nativeEvent.keyCode === 229 ||
+            nativeEvent.key === "Process" ||
+            (view === null || view === void 0 ? void 0 : view.composing);
+        if (isComposing &&
+            (e.key === "Enter" ||
+                e.key === "Tab" ||
+                e.key === "Escape" ||
+                isAnArrowKey(e.key))) {
+            return;
+        }
+        // Handle line breaks
+        var key = e.key;
+        var isEnter = key === "Enter";
+        var isTab = key === "Tab";
+        var isEscape = key === "Escape";
+        var isArrow = isAnArrowKey(key);
+        var 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. */
+            var submitView = getView();
+            var submitValue = !formulaMode && submitView
+                ? serializeEditorValue(submitView.state.doc)
+                : (_a = valueRef.current) !== null && _a !== void 0 ? _a : "";
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(submitValue, extractTextFormatRuns(submitView === null || submitView === void 0 ? void 0 : submitView.state.doc), e);
+        }
+        // Cancel handler
+        if (canCancel && isEscape) {
+            /* Trigger cancel */
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        }
+        // Callback
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [
+        onKeyDown,
+        onSubmit,
+        onCancel,
+        getView,
+        isNewValue,
+        isCursorAtEnd,
+        formulaMode,
+        isDropdownOpen,
+        onInsertBreak,
+        canSubmit,
+        canCancel,
+    ]);
+};

package/dist/cjs/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/cjs/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/cjs/editor-pm/use-mention-keydown.js

@@ -0,0 +1,59 @@
+import { __read } from "tslib";
+import { useCallback, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.ts";
+export var useMentionKeyDown = function (_a) {
+    var mentions = _a.mentions, mentionState = _a.mentionState, onSelect = _a.onSelect;
+    var _b = __read(useState(0), 2), highlightedIndex = _b[0], setHighlightedIndex = _b[1];
+    var highlightedIndexRef = useRef(undefined);
+    useIsomorphicLayoutEffect(function () {
+        highlightedIndexRef.current = highlightedIndex;
+    }, [highlightedIndex]);
+    var onMentionKeydown = useCallback(function (e) {
+        var len = mentions.length - 1;
+        var index = highlightedIndexRef.current;
+        // No items
+        if (len === 0) {
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown": {
+                setHighlightedIndex(function (prev) {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                setHighlightedIndex(function (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;
+                }
+                var selectedItem = mentions[index];
+                onSelect(selectedItem);
+                e.preventDefault();
+                break;
+            }
+        }
+    }, [mentions, mentionState, onSelect]);
+    return {
+        onMentionKeydown: onMentionKeydown,
+        highlightedIndex: highlightedIndex,
+    };
+};

package/dist/cjs/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/cjs/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/cjs/editor-pm/use-parameter-suggestions.js

@@ -0,0 +1,79 @@
+import { __awaiter, __generator, __read } from "tslib";
+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 var useParameterSuggestions = function (_a) {
+    var _b;
+    var functionToken = _a.functionToken, parameterIndex = _a.parameterIndex, parameterArguments = _a.parameterArguments, shouldFetchFunctionParameters = _a.shouldFetchFunctionParameters, getFunctionParameterSuggestions = _a.getFunctionParameterSuggestions;
+    var _c = __read(useState([]), 2), parameterSuggestions = _c[0], setSuggestions = _c[1];
+    var _d = __read(useState(false), 2), isFetchingParameters = _d[0], setIsFetchingParameters = _d[1];
+    var requestIdRef = useRef(0);
+    var functionName = (_b = functionToken === null || functionToken === void 0 ? void 0 : functionToken.image) !== null && _b !== void 0 ? _b : "";
+    var hasFunctionToken = Boolean(functionToken);
+    var parameterArgsKey = useMemo(function () { return JSON.stringify(parameterArguments !== null && parameterArguments !== void 0 ? parameterArguments : []); }, [parameterArguments]);
+    useEffect(function () {
+        requestIdRef.current += 1;
+        var requestId = requestIdRef.current;
+        if (!hasFunctionToken || !getFunctionParameterSuggestions) {
+            setIsFetchingParameters(false);
+            setSuggestions(DEFAULT_ARRAY);
+            return;
+        }
+        if (shouldFetchFunctionParameters &&
+            !shouldFetchFunctionParameters(functionName, parameterIndex, parameterArguments)) {
+            setIsFetchingParameters(false);
+            setSuggestions(DEFAULT_ARRAY);
+            return;
+        }
+        var cancelled = false;
+        var run = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var result, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, 3, 4]);
+                        setIsFetchingParameters(true);
+                        return [4 /*yield*/, getFunctionParameterSuggestions(functionName, parameterIndex, parameterArguments)];
+                    case 1:
+                        result = _a.sent();
+                        if (!cancelled && requestIdRef.current === requestId) {
+                            setSuggestions(result !== null && result !== void 0 ? result : []);
+                        }
+                        return [3 /*break*/, 4];
+                    case 2:
+                        error_1 = _a.sent();
+                        // Keep dropdown stable on errors instead of throwing
+                        if (!cancelled && requestIdRef.current === requestId) {
+                            console.warn("Error fetching parameter suggestions", error_1);
+                            setSuggestions([]);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        if (!cancelled && requestIdRef.current === requestId) {
+                            setIsFetchingParameters(false);
+                        }
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        run();
+        return function () {
+            cancelled = true;
+        };
+    }, [
+        functionName,
+        hasFunctionToken,
+        parameterIndex,
+        parameterArgsKey,
+        shouldFetchFunctionParameters,
+        getFunctionParameterSuggestions,
+    ]);
+    return {
+        parameterSuggestions: parameterSuggestions,
+        isFetchingParameters: isFetchingParameters,
+    };
+};

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

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

package/dist/cjs/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/cjs/editor-pm/use-parameter-suggestions.test.js

@@ -0,0 +1,122 @@
+import { __awaiter, __generator } from "tslib";
+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";
+var TestHarness = function (_a) {
+    var functionToken = _a.functionToken, fetcher = _a.fetcher;
+    var parameterSuggestions = useParameterSuggestions({
+        functionToken: functionToken,
+        parameterIndex: 0,
+        parameterArguments: [],
+        getFunctionParameterSuggestions: fetcher,
+    }).parameterSuggestions;
+    return (React.createElement("div", { "data-testid": "items" }, parameterSuggestions.map(function (item) { return item.title; }).join(",")));
+};
+var makeFunctionToken = function (name) {
+    if (name === void 0) { name = "SUM"; }
+    return ({
+        image: name,
+        tokenType: { name: "Function", PATTERN: "" },
+        startColumn: 0,
+        endColumn: 0,
+        startOffset: 0,
+        endOffset: 0,
+        endLine: 0,
+        tokenTypeIdx: 0,
+    });
+};
+afterEach(function () { return cleanup(); });
+describe("useParameterSuggestions", function () {
+    it("returns async suggestions for an active function", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var fetcher;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    fetcher = vi
+                        .fn()
+                        .mockResolvedValue([{ title: "paramA", category: "parameter" }]);
+                    render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher }));
+                    return [4 /*yield*/, waitFor(function () {
+                            return expect(screen.getByTestId("items").textContent).toBe("paramA");
+                        })];
+                case 1:
+                    _a.sent();
+                    expect(fetcher).toHaveBeenCalledWith("SUM", 0, []);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("ignores stale responses when function token changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resolveFirst, resolveSecond, fetcher, rerender;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    resolveFirst = function () { };
+                    resolveSecond = function () { };
+                    fetcher = vi
+                        .fn()
+                        .mockImplementationOnce(function () {
+                        return new Promise(function (res) {
+                            resolveFirst = res;
+                        });
+                    })
+                        .mockImplementationOnce(function () {
+                        return new Promise(function (res) {
+                            resolveSecond = res;
+                        });
+                    });
+                    rerender = render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher })).rerender;
+                    // Trigger second request with a new token
+                    rerender(React.createElement(TestHarness, { functionToken: makeFunctionToken("AVG"), fetcher: fetcher }));
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                resolveFirst([{ title: "first", category: "parameter" }]);
+                                return [2 /*return*/];
+                            });
+                        }); })];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByTestId("items").textContent).toBe("");
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                resolveSecond([{ title: "second", category: "parameter" }]);
+                                return [2 /*return*/];
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, waitFor(function () {
+                            return expect(screen.getByTestId("items").textContent).toBe("second");
+                        })];
+                case 3:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("clears suggestions when there is no active function", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var fetcher, rerender;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    fetcher = vi
+                        .fn()
+                        .mockResolvedValue([{ title: "paramA", category: "parameter" }]);
+                    rerender = render(React.createElement(TestHarness, { functionToken: makeFunctionToken(), fetcher: fetcher })).rerender;
+                    return [4 /*yield*/, waitFor(function () {
+                            return expect(screen.getByTestId("items").textContent).toBe("paramA");
+                        })];
+                case 1:
+                    _a.sent();
+                    rerender(React.createElement(TestHarness, { fetcher: fetcher }));
+                    return [4 /*yield*/, waitFor(function () {
+                            return expect(screen.getByTestId("items").textContent).toBe("");
+                        })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/cjs/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/cjs/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/cjs/eye-dropper/index.js

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

package/dist/cjs/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/cjs/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/cjs/function-info/helpers.js

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

package/dist/cjs/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/cjs/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"}