@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/filter-box/filter-by-value.js

@@ -0,0 +1,76 @@
+import { CheckIcon } from "@rowsncolumns/icons";
+import { Input } from "@rowsncolumns/ui";
+import { Button, Stack } from "@rowsncolumns/ui";
+import { escapeCharacters } from "@rowsncolumns/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React, { useMemo } from "react";
+import { useCallback } from "react";
+import { useRef } from "react";
+import { useState } from "react";
+import { DEFAULT_ARRAY } from "../../config";
+export const FilterByValue = ({ visibleValues, values = DEFAULT_ARRAY, onChangeVisibleValues, }) => {
+    const [query, setQuery] = useState("");
+    const parentRef = useRef(null);
+    const filteredValues = useMemo(() => {
+        const regex = new RegExp(escapeCharacters(query), "i");
+        return values.filter((value) => {
+            return regex.test(String(value));
+        });
+    }, [values, query]);
+    const rowVirtualizer = useVirtualizer({
+        count: filteredValues.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: useCallback(() => 24, []),
+        overscan: 5,
+    });
+    const onCheck = (value) => {
+        onChangeVisibleValues((prev = []) => {
+            const newVisibleValues = prev?.concat(value);
+            if (newVisibleValues?.length === values.length) {
+                return undefined;
+            }
+            return newVisibleValues;
+        });
+    };
+    const onUnCheck = (value) => {
+        onChangeVisibleValues((prev = values) => prev?.filter((cur) => cur !== value));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by value"),
+        React.createElement(Stack, { className: "pb-2 gap-2" },
+            React.createElement(Button, { variant: "link", onClick: () => onChangeVisibleValues(undefined) }, "Select all"),
+            React.createElement(Button, { variant: "link", onClick: () => onChangeVisibleValues([]) }, "Clear")),
+        React.createElement(Input, { type: "text", value: query, onChange: (e) => setQuery(e.target.value), className: "text-xs" }),
+        React.createElement("div", { className: "overflow-auto mt-1", style: { maxHeight: 160 }, ref: parentRef },
+            React.createElement("div", { style: {
+                    height: `${rowVirtualizer.getTotalSize()}px`,
+                    width: "100%",
+                    position: "relative",
+                } }, rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                const value = filteredValues[virtualItem.index];
+                const isVisible = visibleValues
+                    ? visibleValues.indexOf(value) !== -1
+                    : true;
+                return (React.createElement(Button, { key: virtualItem.key, type: "button", onMouseDown: (e) => {
+                        e.stopPropagation();
+                    }, onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (isVisible) {
+                            onUnCheck(value);
+                        }
+                        else {
+                            onCheck(value);
+                        }
+                    }, className: "justify-start px-2 py-0 gap-1 text-sm text-left", title: value, style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: `${virtualItem.size}px`,
+                        transform: `translateY(${virtualItem.start}px)`,
+                    } },
+                    React.createElement("span", { className: "min-w-[15px] block leading-none" }, isVisible ? React.createElement(CheckIcon, null) : null),
+                    React.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, String(value))));
+            })))));
+};

package/dist/esm/components/filter-box/index.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { UseFilterProps } from "../../hooks/use-filter";
+import type { FilterView, TableView } from "../../types";
+import type { AvailableIcon } from "./filter-by-color";
+export type { AvailableIcon } from "./filter-by-color";
+export type FilterBoxBaseProps = {
+    x: number;
+    y: number;
+    dimensionIndex: number;
+    isOpen: boolean;
+    onOpenChange(value: boolean): void;
+    onSort: UseFilterProps["onSortTable"];
+    onFilter: UseFilterProps["onFilterTable"];
+    onInsertTableColumn: UseFilterProps["onInsertTableColumn"];
+    onDeleteTableColumn: UseFilterProps["onDeleteTableColumn"];
+    filter: FilterView | TableView;
+    values: string[];
+    /**
+     * Optional — distinct cell-background colors present in this column.
+     * When omitted, the "Filter by cell color" picker section is hidden.
+     * Integrators compute this by walking the column's effective formats.
+     */
+    availableCellColors?: string[];
+    /** Distinct font colors. Same shape as availableCellColors. */
+    availableFontColors?: string[];
+    /** Distinct CF iconSet+iconId+glyph triples present in the column. */
+    availableIcons?: AvailableIcon[];
+    /**
+     * Optional predefined custom sort orders (e.g. Mon, Tue, Wed…). Passed
+     * to the custom Sort dialog. Typically the host's `customAutofillLists`.
+     */
+    customLists?: string[][];
+};
+export declare const isTableView: (filter: FilterView | TableView) => filter is TableView;
+export declare const FilterBoxWrapper: React.MemoExoticComponent<({ dimensionIndex, onOpenChange, onSort, onFilter, onDeleteTableColumn, onInsertTableColumn, sheetId, filter, values, availableCellColors, availableFontColors, availableIcons, customLists, }: FilterBoxProps) => React.JSX.Element>;
+export type FilterBoxProps = FilterBoxBaseProps & {
+    sheetId: number;
+    filter?: FilterView | TableView;
+    dimensionIndex?: number;
+};
+/**
+ * For popover positioning
+ * @param props
+ * @returns
+ */
+export declare const FilterBox: {
+    (props: FilterBoxProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/filter-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAIV,UAAU,EAGV,SAAS,EACV,MAAM,aAAa,CAAC;AAIrB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IACtC,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC1C,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,mBAAmB,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,sEAAsE;IACtE,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,WAAW,GACtB,QAAQ,UAAU,GAAG,SAAS,KAC7B,MAAM,IAAI,SAEZ,CAAC;AA0BF,eAAO,MAAM,gBAAgB,4NAexB,cAAc,uBAkalB,CAAC;AAIF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS;YAAW,cAAc;;CAuC9C,CAAC"}

package/dist/esm/components/filter-box/index.js

@@ -0,0 +1,337 @@
+import { Direction } from "@rowsncolumns/grid";
+import { ArrowLeftIcon, ArrowRightIcon, SortDownIcon, SortUpIcon, TrashIcon, } from "@rowsncolumns/icons";
+import { Button, cn, DropdownLeftSlot, DropdownMenuSeparator, Popover, PopoverContent, PopoverMenuItem, PopoverPortal, PopoverTrigger, Separator, } from "@rowsncolumns/ui";
+import { isNil, number2Alpha } from "@rowsncolumns/utils";
+import React, { useEffect, useRef, useState } from "react";
+import { memo, useCallback, useMemo } from "react";
+import { useFocusSheet } from "../../atoms";
+import { StyledFakeTriggerButton } from "../context-menu/style";
+import { useOpenSortDialog } from "../../atoms/sort-dialog.atom";
+import { FilterByColor } from "./filter-by-color";
+import { FilterByCondition } from "./filter-by-condition";
+import { FilterByValue } from "./filter-by-value";
+// Check if a filter view is tableview
+export const isTableView = (filter) => {
+    return "columns" in filter;
+};
+// Excel-style "Auto apply": changes in the filter box apply live without
+// pressing Apply. On by default like Excel; unchecking it survives across
+// filter boxes and sessions, matching Excel's sticky checkbox.
+const AUTO_APPLY_STORAGE_KEY = "rnc-filter-auto-apply";
+// Coalesces bursts of checklist toggles (e.g. Clear + re-check a few values)
+// into a single onFilter call — each apply can re-filter the whole sheet.
+const AUTO_APPLY_DEBOUNCE_MS = 150;
+const readAutoApplyPreference = () => {
+    try {
+        return globalThis.localStorage?.getItem(AUTO_APPLY_STORAGE_KEY) !== "0";
+    }
+    catch {
+        return true;
+    }
+};
+const storeAutoApplyPreference = (value) => {
+    try {
+        globalThis.localStorage?.setItem(AUTO_APPLY_STORAGE_KEY, value ? "1" : "0");
+    }
+    catch {
+        // Storage unavailable (private mode / SSR) — preference just won't stick.
+    }
+};
+export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, onFilter, onDeleteTableColumn, onInsertTableColumn, sheetId, filter, values, availableCellColors, availableFontColors, availableIcons, customLists, }) => {
+    // Opens the host-mounted multi-level Sort dialog.
+    const openSortDialog = useOpenSortDialog();
+    // Active filter spec
+    const filterSpec = filter?.filterSpecs?.find((spec) => spec.columnIndex === dimensionIndex);
+    // Criteria
+    const filterCriteria = filterSpec?.filterCriteria;
+    // Table view
+    const isTable = isTableView(filter);
+    // State
+    const [conditionType, onChangeConditionType] = useState(filterCriteria?.condition?.type ?? undefined);
+    // Hidden values
+    const [visibleValues, onChangeVisibleValues] = useState(filterCriteria?.visibleValues ?? values);
+    const [fromValue, onChangeFromValue] = useState(filterCriteria?.condition?.values?.[0]?.userEnteredValue ?? "");
+    // For range : Between type
+    const [toValue, onChangeToValue] = useState(filterCriteria?.condition?.values?.[1]?.userEnteredValue ?? "");
+    // Color & icon filter criteria (Phase 3). `null` means "cleared this
+    // turn"; `undefined` (initial) means "no change — preserve any
+    // existing criterion from the spec".
+    const [colorFilter, onChangeColorFilter] = useState(undefined);
+    const [iconFilter, onChangeIconFilter] = useState(undefined);
+    // Auto apply (Excel parity). `pendingAutoApplyTick` counts user edits made
+    // while auto apply is on; the debounced effect below applies the newest
+    // state once per burst.
+    const [autoApply, setAutoApply] = useState(readAutoApplyPreference);
+    const autoApplyRef = useRef(autoApply);
+    const [pendingAutoApplyTick, setPendingAutoApplyTick] = useState(0);
+    // Armed only after mount: FilterByCondition clears its To value via a
+    // mount-time layout effect — a programmatic write, not a user edit.
+    // Without this guard, just opening the filter box would fire an apply.
+    const autoApplyArmedRef = useRef(false);
+    useEffect(() => {
+        autoApplyArmedRef.current = true;
+    }, []);
+    const scheduleAutoApply = useCallback(() => {
+        if (autoApplyArmedRef.current && autoApplyRef.current) {
+            setPendingAutoApplyTick((tick) => tick + 1);
+        }
+    }, []);
+    // Re-sync the value checklist when the host supplies
+    // distinct values asynchronously. For windowed sheets `values` arrives
+    // incrementally (loaded viewport first, full column once the worker scan resolves),
+    // so the mount-time `visibleValues` snapshot goes stale and its length diverges
+    // from `values`. Left alone, onSubmit's length-mismatch fast path emits that stale
+    // partial as an explicit value whitelist, corrupting condition/color filters the
+    // user never customized. Only re-sync while the user hasn't touched the checklist
+    // (visibleValues still references the previous `values`); once they customize,
+    // preserve their selection.
+    const prevValuesRef = useRef(values);
+    useEffect(() => {
+        if (values === prevValuesRef.current) {
+            return;
+        }
+        if (visibleValues === prevValuesRef.current) {
+            onChangeVisibleValues(values);
+        }
+        prevValuesRef.current = values;
+    }, [values, visibleValues, onChangeVisibleValues]);
+    // Close
+    const onClose = useCallback(() => {
+        onOpenChange?.(false);
+    }, [onOpenChange]);
+    // Columns for the custom Sort dialog — one per column in the filter's
+    // range. Color/icon pickers are only populated for the column the
+    // filter box is currently anchored on (that's the column we computed
+    // distinct colors/icons for). Other columns expose value + custom-list
+    // sort only.
+    const sortDialogColumns = useMemo(() => {
+        const { startColumnIndex, endColumnIndex } = filter.range;
+        const cols = [];
+        for (let c = startColumnIndex; c <= endColumnIndex; c++) {
+            const dim = c - startColumnIndex;
+            const isActive = dim === dimensionIndex;
+            cols.push({
+                dimensionIndex: dim,
+                label: `Column ${number2Alpha(c)}`,
+                ...(isActive
+                    ? {
+                        availableCellColors,
+                        availableFontColors,
+                        availableIcons,
+                    }
+                    : {}),
+            });
+        }
+        return cols;
+    }, [
+        filter.range,
+        dimensionIndex,
+        availableCellColors,
+        availableFontColors,
+        availableIcons,
+    ]);
+    // Apply assembled multi-level specs through the host sort callback. The
+    // popover is already closed by the time the dialog applies, so this does
+    // not call onClose.
+    const onApplySort = useCallback((specs) => {
+        onSort?.(sheetId, filter, specs);
+    }, [onSort, sheetId, filter]);
+    // Apply the current filter state without closing the popover. Shared by
+    // the Apply button (which also closes) and the auto-apply effect.
+    const applyFilter = useCallback(() => {
+        const conditionValues = [];
+        if (fromValue) {
+            conditionValues.push({ userEnteredValue: fromValue });
+        }
+        if (toValue) {
+            conditionValues.push({ userEnteredValue: toValue });
+        }
+        const normalizedVisibleValues = (() => {
+            if (!visibleValues) {
+                return visibleValues;
+            }
+            if (visibleValues.length !== values.length) {
+                return visibleValues;
+            }
+            const allValues = new Set(values);
+            for (const value of visibleValues) {
+                if (!allValues.has(value)) {
+                    return visibleValues;
+                }
+            }
+            return undefined;
+        })();
+        onFilter?.(sheetId, filter, dimensionIndex, conditionType, conditionValues, normalizedVisibleValues, {
+            colorFilter,
+            iconFilter,
+        });
+    }, [
+        sheetId,
+        filter,
+        onFilter,
+        dimensionIndex,
+        fromValue,
+        toValue,
+        conditionType,
+        visibleValues,
+        values,
+        colorFilter,
+        iconFilter,
+    ]);
+    // Debounced auto-apply. `appliedTickRef` keeps applyFilter identity
+    // changes that carry no user edit (e.g. the async values re-sync above)
+    // from re-applying an already-flushed tick.
+    const appliedTickRef = useRef(0);
+    const pendingApplyRef = useRef(null);
+    useEffect(() => {
+        if (pendingAutoApplyTick === 0 ||
+            appliedTickRef.current === pendingAutoApplyTick) {
+            return;
+        }
+        const run = () => {
+            appliedTickRef.current = pendingAutoApplyTick;
+            pendingApplyRef.current = null;
+            // Auto apply may have been unchecked while this tick was pending —
+            // the edit then waits for the manual Apply button instead.
+            if (!autoApplyRef.current) {
+                return;
+            }
+            applyFilter();
+        };
+        pendingApplyRef.current = run;
+        const id = setTimeout(run, AUTO_APPLY_DEBOUNCE_MS);
+        return () => clearTimeout(id);
+    }, [pendingAutoApplyTick, applyFilter]);
+    // Flush a mid-debounce edit if the popover closes before the timer fires,
+    // so a checkbox toggle right before dismissing is never lost.
+    useEffect(() => {
+        return () => {
+            pendingApplyRef.current?.();
+        };
+    }, []);
+    const onToggleAutoApply = useCallback((checked) => {
+        autoApplyRef.current = checked;
+        setAutoApply(checked);
+        storeAutoApplyPreference(checked);
+        if (checked) {
+            // Excel applies any pending edits the moment auto apply turns on.
+            scheduleAutoApply();
+        }
+    }, [scheduleAutoApply]);
+    // Setter wrappers handed to the child sections: forward the state update,
+    // then schedule an auto-apply. The values re-sync effect above bypasses
+    // these on purpose — only user edits should trigger an apply.
+    const wrapWithAutoApply = useCallback((setter) => (action) => {
+        setter(action);
+        scheduleAutoApply();
+    }, [scheduleAutoApply]);
+    const onUserChangeConditionType = useMemo(() => wrapWithAutoApply(onChangeConditionType), [wrapWithAutoApply]);
+    const onUserChangeFromValue = useMemo(() => wrapWithAutoApply(onChangeFromValue), [wrapWithAutoApply]);
+    const onUserChangeToValue = useMemo(() => wrapWithAutoApply(onChangeToValue), [wrapWithAutoApply]);
+    const onUserChangeColorFilter = useMemo(() => wrapWithAutoApply(onChangeColorFilter), [wrapWithAutoApply]);
+    const onUserChangeIconFilter = useMemo(() => wrapWithAutoApply(onChangeIconFilter), [wrapWithAutoApply]);
+    const onUserChangeVisibleValues = useMemo(() => wrapWithAutoApply(onChangeVisibleValues), [wrapWithAutoApply]);
+    // Apply
+    const onSubmit = useCallback((event) => {
+        event.preventDefault();
+        applyFilter();
+        // Close popover
+        onClose();
+    }, [applyFilter, onClose]);
+    return (React.createElement("form", { className: "flex flex-col", onSubmit: onSubmit },
+        isTable && onInsertTableColumn && onDeleteTableColumn ? (React.createElement(React.Fragment, null,
+            React.createElement(PopoverMenuItem, { onClick: () => {
+                    onInsertTableColumn?.(filter, dimensionIndex, Direction.Left);
+                    onClose();
+                } },
+                React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                    React.createElement(ArrowLeftIcon, null)),
+                "Insert 1 table column left"),
+            React.createElement(PopoverMenuItem, { onClick: () => {
+                    onInsertTableColumn?.(filter, dimensionIndex, Direction.Right);
+                    onClose();
+                } },
+                React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                    React.createElement(ArrowRightIcon, null)),
+                "Insert 1 table column right"),
+            React.createElement(PopoverMenuItem, { onClick: () => {
+                    onDeleteTableColumn?.(filter, dimensionIndex);
+                    onClose();
+                } },
+                React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                    React.createElement(TrashIcon, null)),
+                "Delete table column"),
+            React.createElement(DropdownMenuSeparator, null))) : null,
+        React.createElement(PopoverMenuItem, { onClick: () => {
+                onSort?.(sheetId, filter, dimensionIndex, "ASCENDING");
+                onClose();
+            } },
+            React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                React.createElement(SortDownIcon, null)),
+            "Sort A \u2192 Z"),
+        React.createElement(PopoverMenuItem, { onClick: () => {
+                onSort?.(sheetId, filter, dimensionIndex, "DESCENDING");
+                onClose();
+            } },
+            React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                React.createElement(SortUpIcon, null)),
+            "Sort Z \u2192 A"),
+        React.createElement(PopoverMenuItem, { type: "button", onClick: () => {
+                // Open the host-mounted Sort dialog, then close the popover. The
+                // dialog is atom-driven and host-mounted, so it survives the
+                // popover unmounting (rendering it here would tear it down).
+                openSortDialog({
+                    columns: sortDialogColumns,
+                    customLists,
+                    onApply: onApplySort,
+                });
+                onClose();
+            } },
+            React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                React.createElement(SortDownIcon, null)),
+            "Custom sort\u2026"),
+        React.createElement("div", { className: "py-2 px-2" },
+            React.createElement(FilterByCondition, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeConditionType: onUserChangeConditionType, onChangeFromValue: onUserChangeFromValue, onChangeToValue: onUserChangeToValue }),
+            React.createElement(Separator, { className: "mt-2 mb-2" }),
+            React.createElement(FilterByColor, { colorFilter: colorFilter === undefined
+                    ? filterCriteria?.colorFilter
+                    : colorFilter, iconFilter: iconFilter === undefined ? filterCriteria?.iconFilter : iconFilter, availableCellColors: availableCellColors, availableFontColors: availableFontColors, availableIcons: availableIcons, onChangeColorFilter: onUserChangeColorFilter, onChangeIconFilter: onUserChangeIconFilter }),
+            availableCellColors?.length ||
+                availableFontColors?.length ||
+                availableIcons?.length ? (React.createElement(Separator, { className: "mt-2 mb-2" })) : null,
+            React.createElement(FilterByValue, { values: values, visibleValues: visibleValues, onChangeVisibleValues: onUserChangeVisibleValues })),
+        React.createElement("label", { className: "flex items-center gap-2 text-xs px-2 pt-1 select-none cursor-pointer" },
+            React.createElement("input", { type: "checkbox", checked: autoApply, onChange: (e) => onToggleAutoApply(e.target.checked) }),
+            "Auto apply"),
+        React.createElement("div", { className: "px-2 py-2 flex gap-1" },
+            React.createElement(Button, { size: "xs", variant: "primary", type: "submit", disabled: autoApply }, "Apply"),
+            React.createElement(Button, { size: "xs", variant: "ghost", onClick: onClose, type: "reset" }, autoApply ? "Close" : "Cancel"))));
+});
+FilterBoxWrapper.displayName = "FilterBoxWrapper";
+/**
+ * For popover positioning
+ * @param props
+ * @returns
+ */
+export const FilterBox = (props) => {
+    const { isOpen, onOpenChange, x, y, dimensionIndex } = props;
+    const shouldFocusSheetRef = useRef(true);
+    const focusSheet = useFocusSheet();
+    return (React.createElement("div", { className: cn("absolute left-0 top-0", isOpen ? undefined : "invisible"), style: {
+            transform: `translate3d(${x}px, ${y}px, 0)`,
+            minWidth: 220,
+        } },
+        React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange, modal: false },
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(StyledFakeTriggerButton, null, "trigger")),
+            React.createElement(PopoverPortal, null,
+                React.createElement(PopoverContent, { align: "start", className: "min-w-[220px] p-1", onContextMenu: (e) => e.stopPropagation(), onCloseAutoFocus: (event) => {
+                        if (shouldFocusSheetRef.current && !isOpen) {
+                            focusSheet?.();
+                        }
+                        event.preventDefault();
+                    }, onInteractOutside: () => {
+                        shouldFocusSheetRef.current = false;
+                    } }, props.filter && !isNil(dimensionIndex) ? (React.createElement(FilterBoxWrapper, { ...props })) : null)))));
+};
+FilterBox.displayName = "FilterBox";

package/dist/esm/components/floating-cell-editor/index.d.ts

@@ -0,0 +1,83 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import type { TextFormatRun } from "@rowsncolumns/ui";
+import type { ComponentType } from "react";
+import React from "react";
+import type { CellFormat } from "../../types";
+import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "../toolbar";
+export type FloatingCellEditorProps = {
+    /**
+     * Initial value of the editor
+     */
+    initialValue?: string;
+    /**
+     * Initial value of text format run
+     */
+    initialTextFormatRuns?: TextFormatRun[] | null;
+    /**
+     * Root classname
+     */
+    className?: string;
+    /**
+     * Active sheet Id
+     */
+    sheetId: number;
+    /**
+     * Active cell coordinates
+     */
+    activeCell: CellInterface;
+    /**
+     * Cell selections
+     */
+    selections?: SelectionArea<SelectionAttributes>[];
+    /**
+     * Active cell format
+     */
+    cellFormat?: CellFormat | null;
+    /**
+     * Spreadsheet theme
+     */
+    theme?: SpreadsheetTheme;
+    /**
+     * Dark mode indicator to set default color
+     */
+    isDarkMode?: boolean;
+    /**
+     * Available calculator functions
+     */
+    functionDescriptions?: CalculatorFunction[];
+    /**
+     * onChange callback
+     * @param sheetId
+     * @param activeCell
+     * @param value
+     */
+    onChange: CanvasGridProps["onChange"];
+    /**
+     * Callback when user changes formatting
+     */
+    onChangeFormatting?: CanvasGridProps["onChangeFormatting"];
+    /**
+     * Insert row callback
+     */
+    onInsertRow?: CanvasGridProps["onInsertRow"];
+    /**
+     * Insert column
+     */
+    onInsertColumn?: CanvasGridProps["onInsertColumn"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions?: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters?: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Custom color selector component for the text and fill color pickers
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+};
+export declare const FloatingCellEditor: React.MemoExoticComponent<({ initialValue, initialTextFormatRuns, className, activeCell, sheetId, cellFormat, theme, isDarkMode, functionDescriptions, selections, onChange, onChangeFormatting: onChangeFormattingProp, onInsertRow, onInsertColumn, ColorSelector, ...props }: FloatingCellEditorProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/floating-cell-editor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGvE,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAErE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAU3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgBrD,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,qBAAqB,CAAC,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAC/C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,aAAa,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClD;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5C;;;;;OAKG;IACH,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC3D;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;OAEG;IACH,+BAA+B,CAAC,EAAE,eAAe,CAAC,iCAAiC,CAAC,CAAC;IACrF;;OAEG;IACH,6BAA6B,CAAC,EAAE,eAAe,CAAC,+BAA+B,CAAC,CAAC;IACjF;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,mRAkB1B,uBAAuB,uBAgW3B,CAAC"}