@rowsncolumns/ui 15.0.38

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

@@ -0,0 +1,71 @@
+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";
+var ACTIVE_COLOR = "#008000";
+export var FunctionInfo = function (_a) {
+    var activeFunction = _a.activeFunction, _b = _a.parameterIndex, parameterIndex = _b === void 0 ? 0 : _b, onHideFormulaHelp = _a.onHideFormulaHelp;
+    var _c = activeFunction !== null && activeFunction !== void 0 ? activeFunction : {}, syntax = _c.syntax, example = _c.example, description = _c.description, parameters = _c.parameters;
+    /**
+     * It can happen that formula list does not contain
+     * parameters, but syntax has
+     * Use syntax
+     */
+    var paramLen = useMemo(function () {
+        return tokenizeFunctionSyntax(syntax !== null && syntax !== void 0 ? syntax : "").parameters.length;
+    }, [syntax]);
+    var 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 === null || parameters === void 0 ? void 0 : parameters.length) ? (React.createElement(Separator, { orientation: "horizontal", color: "$gray7" })) : null, parameters === null || parameters === void 0 ? void 0 :
+            parameters.map(function (_a, index) {
+                var title = _a.title, description = _a.description;
+                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
+ */
+var TokenizedFunction = function (_a) {
+    var syntax = _a.syntax, parameterIndex = _a.parameterIndex;
+    if (!syntax) {
+        return null;
+    }
+    var _b = tokenizeFunctionSyntax(syntax), functionOpen = _b.functionOpen, parameters = _b.parameters, functionClose = _b.functionClose;
+    var paramLen = parameters.length;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", null, functionOpen),
+        parameters.map(function (param, i) {
+            var 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/cjs/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/cjs/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/cjs/function-info/style.js

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

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

package/dist/cjs/hex-color-picker/index.js

@@ -0,0 +1,47 @@
+import { __read } from "tslib";
+import React, { useState } from "react";
+import { IconButton } from "../icon-button";
+import { PlusCircledIcon } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Button } from "../button";
+import isNil from "lodash/isNil";
+import { HexColorPicker as ReactColorPicker } from "react-colorful";
+import { Input } from "../input";
+export var HexColorPicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var _b = __read(useState(false), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var close = function () { return onOpenChange(false); };
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange, modal: true },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { tooltip: "Add a custom color" },
+                React.createElement(PlusCircledIcon, null))),
+        React.createElement(PopoverContent, null,
+            React.createElement(ColorPickerContent, { initialValue: value, onCancel: function () {
+                    close();
+                }, onSubmit: function (value) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                    close();
+                } }))));
+};
+var ColorPickerContent = function (_a) {
+    var initialValue = _a.initialValue, onCancel = _a.onCancel, onSubmit = _a.onSubmit;
+    var defaultColor = isNil(initialValue) || initialValue === "transparent"
+        ? "#000000"
+        : initialValue;
+    var _b = __read(useState(defaultColor), 2), value = _b[0], onChange = _b[1];
+    return (React.createElement("div", { className: "flex flex-col gap-2" },
+        React.createElement(ReactColorPicker, { className: "rnc-colorpicker", color: value, onChange: function (color) { return onChange(color); } }),
+        React.createElement(Input, { value: value, onChange: function (e) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+            }, onFocus: function (e) {
+                // Select on focus
+                e.target.select();
+            }, className: "text-xs" }),
+        React.createElement("div", { className: "flex gap-2 justify-end" },
+            React.createElement(Button, { size: "xs", onClick: function () {
+                    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                } }, "Cancel"),
+            React.createElement(Button, { size: "xs", variant: "primary", onClick: function () {
+                    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value);
+                } }, "OK"))));
+};

package/dist/cjs/hooks/use-cycle-reference.d.ts

@@ -0,0 +1,16 @@
+import type { ParsedToken } from "@rowsncolumns/calculator";
+type UseCycleFormulaReferenceProps = {
+    onUpdate: (address: string, selectionMode?: string) => void;
+};
+/**
+ * Detect the current reference type from a cell address
+ * e.g. $A$1 -> absolute, A$1 -> absolute-row, $A1 -> absolute-column, A1 -> relative
+ */
+export declare const detectReferenceType: (address: string) => string;
+/**
+ * Get the next reference type in the cycle based on the current address
+ */
+export declare const getNextReference: (currentAddress: string) => string;
+export declare const useCycleFormulaReference: ({ onUpdate, }: UseCycleFormulaReferenceProps) => (token: ParsedToken | undefined) => void;
+export {};
+//# sourceMappingURL=use-cycle-reference.d.ts.map

package/dist/cjs/hooks/use-cycle-reference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cycle-reference.d.ts","sourceRoot":"","sources":["../../../hooks/use-cycle-reference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAS5D,KAAK,6BAA6B,GAAG;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AASF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,MAUrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,MAAM,KAAG,MAKzD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,eAEtC,6BAA6B,aAEpB,WAAW,GAAG,SAAS,SA8ClC,CAAC"}

package/dist/cjs/hooks/use-cycle-reference.js

@@ -0,0 +1,72 @@
+import { __read } from "tslib";
+import { tokenVocabulary } from "@rowsncolumns/fast-formula-parser";
+import { addressToCell, cellToAddress, sanitizeSheetName, } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+var referenceCycleOrder = [
+    "absolute",
+    "absolute-row",
+    "absolute-column",
+    "relative",
+];
+/**
+ * Detect the current reference type from a cell address
+ * e.g. $A$1 -> absolute, A$1 -> absolute-row, $A1 -> absolute-column, A1 -> relative
+ */
+export var detectReferenceType = function (address) {
+    // Check if column is absolute ($ before the letter)
+    var hasAbsoluteColumn = address.startsWith("$");
+    // Check if row is absolute ($ before the number)
+    var hasAbsoluteRow = /\$\d/.test(address);
+    if (hasAbsoluteColumn && hasAbsoluteRow)
+        return "absolute";
+    if (hasAbsoluteRow)
+        return "absolute-row";
+    if (hasAbsoluteColumn)
+        return "absolute-column";
+    return "relative";
+};
+/**
+ * Get the next reference type in the cycle based on the current address
+ */
+export var getNextReference = function (currentAddress) {
+    var currentType = detectReferenceType(currentAddress);
+    var currentIndex = referenceCycleOrder.indexOf(currentType);
+    var nextIndex = (currentIndex + 1) % referenceCycleOrder.length;
+    return referenceCycleOrder[nextIndex];
+};
+export var useCycleFormulaReference = function (_a) {
+    var onUpdate = _a.onUpdate;
+    return useCallback(function (token) {
+        // Cell token
+        if ((token === null || token === void 0 ? void 0 : token.tokenType.name) === tokenVocabulary.Cell.name && token.image) {
+            var sheetName = token.sheetName;
+            var sheetNameStr = sheetName
+                ? sanitizeSheetName(sheetName) + "!"
+                : "";
+            var _a = __read(token.image.split(":"), 2), from = _a[0], to = _a[1];
+            // Detect current reference type and get the next one in cycle
+            var reference = getNextReference(from);
+            var fromCell = addressToCell(from);
+            var toCell = to ? addressToCell(to) : undefined;
+            var fromCellAddress = null;
+            var toCellAddress = "";
+            fromCellAddress = cellToAddress(fromCell, reference === "relative"
+                ? false
+                : reference === "absolute" || reference === "absolute-column", reference === "relative"
+                ? false
+                : reference === "absolute" || reference === "absolute-row");
+            if (toCell) {
+                toCellAddress = cellToAddress(toCell, reference === "relative"
+                    ? false
+                    : reference === "absolute" || reference === "absolute-column", reference === "relative"
+                    ? false
+                    : reference === "absolute" || reference === "absolute-row");
+            }
+            var address = "".concat(sheetNameStr).concat(fromCellAddress).concat(toCellAddress ? ":" + toCellAddress : "");
+            onUpdate(address, "modify");
+        }
+        else {
+            console.log("Token not processed - not a Cell token or missing image");
+        }
+    }, [onUpdate]);
+};

package/dist/cjs/hooks/use-dropdown-categories.d.ts

@@ -0,0 +1,9 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import { OptionItem } from "../editor-pm/types";
+type InputProps = {
+    items: (OptionItem | CalculatorFunction)[];
+    formulaMode?: boolean;
+};
+export declare const useDropdownCategories: ({ items, formulaMode }: InputProps) => [OptionItem[], OptionItem[], CalculatorFunction[], OptionItem[], OptionItem[], OptionItem[]];
+export {};
+//# sourceMappingURL=use-dropdown-categories.d.ts.map

package/dist/cjs/hooks/use-dropdown-categories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dropdown-categories.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown-categories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,CAAC,UAAU,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wBAAwB,UAAU,iGAgEvE,CAAC"}

package/dist/cjs/hooks/use-dropdown-categories.js

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+export var useDropdownCategories = function (_a) {
+    var items = _a.items, formulaMode = _a.formulaMode;
+    return useMemo(function () {
+        // Structured references: table, column, specialitem
+        var structuredReferences = items.filter(function (item) {
+            return item.category === "table" ||
+                item.category === "column" ||
+                item.category === "specialitem" ||
+                item.category === "thisrow";
+        });
+        // Named ranges
+        var namedRanges = items.filter(function (item) { return item.category === "namedrange"; });
+        // Property references
+        var propertyReferences = items.filter(function (item) { return item.category === "property"; });
+        // Parameter references
+        var parameterSuggestions = items.filter(function (item) { return item.category === "parameter"; });
+        // Function suggestions (only CalculatorFunctions)
+        var functionSuggestions = formulaMode
+            ? items.filter(function (item) {
+                return item.title !== undefined &&
+                    !("category" in item);
+            })
+            : [];
+        // Dropdown options: everything else that is not structured, named, property, or function
+        var dropdownOptions = formulaMode
+            ? []
+            : items.filter(function (item) {
+                return !structuredReferences.includes(item) &&
+                    !namedRanges.includes(item) &&
+                    !propertyReferences.includes(item) &&
+                    !parameterSuggestions.includes(item) &&
+                    item.title !== undefined &&
+                    !("category" in item);
+            });
+        return [
+            structuredReferences,
+            dropdownOptions,
+            functionSuggestions,
+            namedRanges,
+            propertyReferences,
+            parameterSuggestions,
+        ];
+    }, [items, formulaMode]);
+};

package/dist/cjs/hooks/use-dropdown.d.ts

@@ -0,0 +1,38 @@
+import type React from "react";
+import { Maybe } from "@rowsncolumns/common-types";
+import { OptionItem } from "../editor-pm/types.js";
+type UseDropdownProps<T> = {
+    items: T[] | undefined;
+    initialQuery?: string;
+    initialOpen: boolean;
+    initialHighlightedIndex: number;
+    limit?: number;
+    showAllIfEmpty?: boolean;
+    isNewValue?: boolean;
+    itemsWhenEmpty?: T[];
+    itemToString(item: T): string;
+    onChange(value: T): void;
+    /**
+     * Marks the item that matches the current (pre-edit) value so the dropdown
+     * opens with it highlighted — e.g. a data-validation list highlighting the
+     * cell's current entry (Excel behavior). Only applied while the user hasn't
+     * typed yet; typing hands the highlight to the filter.
+     */
+    isItemSelected?(item: T): boolean;
+};
+export declare const sortByUnderscore: <T extends OptionItem>(a: Maybe<T>, b: Maybe<T>) => 0 | 1 | -1;
+export declare const sanitizeDropdownQuery: (value: string) => string;
+export declare const useDropdown: <T extends OptionItem>({ initialOpen, initialHighlightedIndex, initialQuery, onChange, items, isNewValue, itemToString, limit, showAllIfEmpty, itemsWhenEmpty, isItemSelected, }: UseDropdownProps<T>) => {
+    isOpen: boolean;
+    highlightedIndex: number;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onSelect: (value: T) => void;
+    onChangeHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+    items: T[];
+    setQuery: (value: string) => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    query: string;
+};
+export {};
+//# sourceMappingURL=use-dropdown.d.ts.map

package/dist/cjs/hooks/use-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dropdown.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,EACnD,GAAG,KAAK,CAAC,CAAC,CAAC,EACX,GAAG,KAAK,CAAC,CAAC,CAAC,eAQZ,CAAC;AAuDF,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,WACtB,CAAC;AAE9B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAAE,2JAY/C,gBAAgB,CAAC,CAAC,CAAC;;;mBAgGd,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;sBAd/B,CAAC;;;sBAoGgC,MAAM;;;;CAoBlD,CAAC"}

package/dist/cjs/hooks/use-dropdown.js

@@ -0,0 +1,236 @@
+import { __read, __spreadArray } from "tslib";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts";
+import { matchSorter } from "match-sorter";
+export var sortByUnderscore = function (a, b) {
+    var _a, _b;
+    var aUnderscore = (_a = String(a === null || a === void 0 ? void 0 : a.title)) === null || _a === void 0 ? void 0 : _a.startsWith("_");
+    var bUnderscore = (_b = String(b === null || b === void 0 ? void 0 : b.title)) === null || _b === void 0 ? void 0 : _b.startsWith("_");
+    if (aUnderscore === bUnderscore) {
+        return 0;
+    }
+    return aUnderscore ? 1 : -1;
+};
+// Keep dropdown ordering consistent with our UI grouping so keyboard selection
+// lines up with what the user sees.
+var reorderByPriority = function (list) {
+    var buckets = {
+        0: [], // structured references
+        1: [], // properties
+        2: [], // parameters
+        3: [], // named ranges
+        4: [], // functions
+        5: [], // everything else
+    };
+    list.forEach(function (item) {
+        var category = item === null || item === void 0 ? void 0 : item.category;
+        if (category === "table" ||
+            category === "column" ||
+            category === "specialitem" ||
+            category === "thisrow") {
+            buckets[0].push(item);
+            return;
+        }
+        if (category === "property") {
+            buckets[1].push(item);
+            return;
+        }
+        if (category === "parameter") {
+            buckets[2].push(item);
+            return;
+        }
+        if (category === "namedrange") {
+            buckets[3].push(item);
+            return;
+        }
+        // Functions are CalculatorFunction (no category) or explicit category
+        if (category === "function" || "syntax" in item) {
+            buckets[4].push(item);
+            return;
+        }
+        buckets[5].push(item);
+    });
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(buckets[0]), false), __read(buckets[1]), false), __read(buckets[2]), false), __read(buckets[3]), false), __read(buckets[4]), false), __read(buckets[5]), false);
+};
+export var sanitizeDropdownQuery = function (value) {
+    return value.replace(/["'`]/g, "");
+};
+export var useDropdown = function (_a) {
+    var initialOpen = _a.initialOpen, initialHighlightedIndex = _a.initialHighlightedIndex, initialQuery = _a.initialQuery, onChange = _a.onChange, _b = _a.items, items = _b === void 0 ? [] : _b, isNewValue = _a.isNewValue, itemToString = _a.itemToString, _c = _a.limit, limit = _c === void 0 ? 10 : _c, showAllIfEmpty = _a.showAllIfEmpty, itemsWhenEmpty = _a.itemsWhenEmpty, isItemSelected = _a.isItemSelected;
+    var _d = __read(useState(initialOpen), 2), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = __read(useState(initialQuery !== null && initialQuery !== void 0 ? initialQuery : ""), 2), query = _e[0], setQuery = _e[1];
+    var _f = __read(useState(initialHighlightedIndex), 2), highlightedIndex = _f[0], setHighlightedIndex = _f[1];
+    var openMenu = useCallback(function () { return setIsOpen(true); }, []);
+    var closeMenu = useCallback(function () { return setIsOpen(false); }, []);
+    // Refs
+    var isDirty = useRef(isNewValue);
+    var initialQueryRef = useRef(undefined);
+    var highlightedIndexRef = useRef(undefined);
+    var queryRef = useRef(undefined);
+    var filteredItemsRef = useRef(undefined);
+    useIsomorphicLayoutEffect(function () {
+        queryRef.current = query;
+    }, [query]);
+    useIsomorphicLayoutEffect(function () {
+        highlightedIndexRef.current = highlightedIndex;
+    }, [highlightedIndex]);
+    useIsomorphicLayoutEffect(function () {
+        initialQueryRef.current = initialQuery !== null && initialQuery !== void 0 ? initialQuery : "";
+        isDirty.current = Boolean(isNewValue);
+        // The hosting editor stays mounted (hidden) between editing sessions, so
+        // the query must be re-seeded when a new session starts — otherwise the
+        // previous session's filter narrows the next dropdown open.
+        setQuery(initialQuery !== null && initialQuery !== void 0 ? initialQuery : "");
+    }, [initialQuery, isNewValue]);
+    // Filtered items
+    var filteredItems = useMemo(function () {
+        if (!query) {
+            if (itemsWhenEmpty === null || itemsWhenEmpty === void 0 ? void 0 : itemsWhenEmpty.length) {
+                return reorderByPriority(__spreadArray([], __read(itemsWhenEmpty), false));
+            }
+            if (!showAllIfEmpty) {
+                return [];
+            }
+            return reorderByPriority(__spreadArray([], __read(items), false).sort(sortByUnderscore));
+        }
+        if (!isDirty.current) {
+            return reorderByPriority(__spreadArray([], __read(items), false).sort(sortByUnderscore));
+        }
+        var cleanedQuery = sanitizeDropdownQuery(query);
+        // Break ties (e.g. "SU" matching both SUM and SUBSTITUTE) by preferring
+        // an exact-prefix match, then the shorter name, before the default
+        // alphabetical order — so the closest function is highlighted first.
+        var queryLower = cleanedQuery.toLowerCase();
+        var dropdownBaseSort = function (a, b) {
+            var _a, _b;
+            var aValue = String((_a = a.rankedValue) !== null && _a !== void 0 ? _a : "");
+            var bValue = String((_b = b.rankedValue) !== null && _b !== void 0 ? _b : "");
+            var aPrefix = aValue.toLowerCase().startsWith(queryLower);
+            var bPrefix = bValue.toLowerCase().startsWith(queryLower);
+            if (aPrefix !== bPrefix) {
+                return aPrefix ? -1 : 1;
+            }
+            if (aValue.length !== bValue.length) {
+                return aValue.length - bValue.length;
+            }
+            return aValue.localeCompare(bValue);
+        };
+        var sorted = matchSorter(items, cleanedQuery, {
+            keys: ["title"],
+            baseSort: dropdownBaseSort,
+        });
+        return reorderByPriority(sorted).slice(0, limit);
+    }, [items, query, limit, itemToString, showAllIfEmpty, itemsWhenEmpty]);
+    useIsomorphicLayoutEffect(function () {
+        filteredItemsRef.current = filteredItems;
+    }, [filteredItems]);
+    // User selects a value from the dropdown
+    var onSelect = useCallback(function (value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        // Selecting an item consumes the filter; without this the selected
+        // text keeps filtering the list on the next dropdown open (e.g. a
+        // data-validation dropdown showing only the previously picked option).
+        isDirty.current = false;
+        setQuery("");
+        setHighlightedIndex(-1);
+    }, [onChange]);
+    var handleKeyDown = useCallback(function (e) {
+        var _a;
+        var query = queryRef.current;
+        var index = highlightedIndexRef.current;
+        var activeItems = (_a = filteredItemsRef.current) !== null && _a !== void 0 ? _a : [];
+        var hasValue = activeItems.length || query;
+        var len = activeItems.length - 1;
+        // If there are no items, lets skip hiding showing menu
+        if (!activeItems.length) {
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown": {
+                if (!isOpen && hasValue) {
+                    openMenu();
+                    return;
+                }
+                setHighlightedIndex(function (prev) {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                if (!isOpen && hasValue) {
+                    openMenu();
+                }
+                setHighlightedIndex(function (prev) {
+                    if (prev === 0) {
+                        return len;
+                    }
+                    return Math.max(0, prev - 1);
+                });
+                e.preventDefault();
+                break;
+            case "Escape":
+                if (isOpen) {
+                    closeMenu();
+                    e.preventDefault();
+                }
+                break;
+            case "Tab":
+            case "Enter": {
+                if (index === -1 || index === undefined) {
+                    return;
+                }
+                var selectedItem = activeItems[index];
+                onSelect(selectedItem);
+                e.preventDefault();
+                break;
+            }
+        }
+    }, [isOpen, openMenu, onSelect, closeMenu]);
+    useEffect(function () {
+        if (filteredItems.length) {
+            openMenu();
+        }
+        else {
+            closeMenu();
+        }
+        // If user clears the
+        if (!query) {
+            setHighlightedIndex(-1);
+        }
+    }, [query, filteredItems, closeMenu, openMenu]);
+    // Pre-select the item matching the current value (e.g. a data-validation
+    // dropdown highlighting the cell's current entry — Excel behavior). Runs
+    // only while the session is pristine (`isDirty` flips on the first typed
+    // change, handing the highlight to the filter). Declared AFTER the reset
+    // effect above so the seed wins the mount-time ordering when the query is
+    // empty (a blank cell selecting the list's empty/text-prefix entry).
+    useEffect(function () {
+        if (!isItemSelected || isDirty.current) {
+            return;
+        }
+        setHighlightedIndex(filteredItems.findIndex(isItemSelected));
+    }, [filteredItems, isItemSelected]);
+    var handleSetQuery = useCallback(function (value) {
+        setQuery(value);
+        setHighlightedIndex(0);
+        if (value !== initialQueryRef.current) {
+            isDirty.current = true;
+        }
+    }, []);
+    return {
+        isOpen: isOpen,
+        highlightedIndex: highlightedIndex,
+        onKeyDown: handleKeyDown,
+        onSelect: onSelect,
+        onChangeHighlightedIndex: setHighlightedIndex,
+        items: filteredItems,
+        setQuery: handleSetQuery,
+        openMenu: openMenu,
+        closeMenu: closeMenu,
+        query: query,
+    };
+};

package/dist/cjs/hooks/use-isomorphic-layout-effect.ts.d.ts

@@ -0,0 +1,6 @@
+import { useEffect } from "react";
+/**
+ * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+//# sourceMappingURL=use-isomorphic-layout-effect.ts.d.ts.map

package/dist/cjs/hooks/use-isomorphic-layout-effect.ts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.ts.d.ts","sourceRoot":"","sources":["../../../hooks/use-isomorphic-layout-effect.ts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD;;GAEG;AAEH,eAAO,MAAM,yBAAyB,kBAEzB,CAAC"}

package/dist/cjs/hooks/use-isomorphic-layout-effect.ts.js

@@ -0,0 +1,8 @@
+import { canUseDOM } from "@rowsncolumns/utils";
+import { useEffect, useLayoutEffect } from "react";
+/**
+ * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ */
+export var useIsomorphicLayoutEffect = canUseDOM
+    ? useLayoutEffect
+    : useEffect;

package/dist/cjs/hooks/use-modal.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+type ConfirmOptions = {
+    title?: string;
+    description?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    container?: HTMLElement | HTMLDivElement | null;
+};
+type PromptOptions = {
+    title?: string;
+    description?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    placeholder?: string;
+    inputType?: "text" | "password";
+    defaultValue?: string;
+    container?: HTMLElement | HTMLDivElement | null;
+};
+type ModalContextValue = {
+    confirm: (message: string, options?: ConfirmOptions) => Promise<boolean>;
+    prompt: (message: string, options?: PromptOptions) => Promise<string | null>;
+};
+export declare const ModalProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useModal: () => ModalContextValue;
+export {};
+//# sourceMappingURL=use-modal.d.ts.map

package/dist/cjs/hooks/use-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../../hooks/use-modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAON,MAAM,OAAO,CAAC;AAgBf,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9E,CAAC;AAIF,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAoKxE,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC"}