@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

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

@@ -1,9 +1,36 @@
-import { Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import { Button, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
 import React, { useState } from "react";
 import { CONDITION_LABELS, CONDITION_NONE } from "../../config";
 import { shouldShowFromValue, shouldShowToValue } from "../../helpers";
 import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
-export const FilterByCondition = ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, }) => {
+/** Excel's "Top 10…" AutoFilter: the four `NUMBER_TOP_*` / `NUMBER_BOTTOM_*` condition types. */
+export const isTop10ConditionType = (type) => type === "NUMBER_TOP_N" ||
+    type === "NUMBER_BOTTOM_N" ||
+    type === "NUMBER_TOP_PERCENT" ||
+    type === "NUMBER_BOTTOM_PERCENT";
+export const top10ConditionType = (direction, unit) => direction === "top"
+    ? unit === "items"
+        ? "NUMBER_TOP_N"
+        : "NUMBER_TOP_PERCENT"
+    : unit === "items"
+        ? "NUMBER_BOTTOM_N"
+        : "NUMBER_BOTTOM_PERCENT";
+/**
+ * Conditions Excel's Custom AutoFilter offers for its second clause: the
+ * per-cell comparisons. Column-ranked filters (Top 10, above / below
+ * average) are whole-column criteria and can't be And/Or-ed with another.
+ */
+const SECOND_CLAUSE_LABELS = CONDITION_LABELS.filter(({ condition }) => !isTop10ConditionType(condition) &&
+    condition !== "NUMBER_ABOVE_AVERAGE" &&
+    condition !== "NUMBER_BELOW_AVERAGE");
+const ConditionSelect = ({ value, labels, onChange, ariaLabel, }) => (React.createElement(Select, { value: value ?? CONDITION_NONE, onValueChange: (next) => onChange(next === CONDITION_NONE ? undefined : next) },
+    React.createElement(SelectTrigger, { className: "mb-1", "aria-label": ariaLabel },
+        React.createElement(SelectValue, { placeholder: "None" })),
+    React.createElement(SelectPortal, null,
+        React.createElement(SelectContent, null,
+            React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+            labels.map(({ condition, label }) => (React.createElement(SelectItem, { key: condition, value: condition }, label)))))));
+const ValueInputs = ({ conditionType, fromValue, toValue, onChangeFromValue, onChangeToValue, namePrefix, }) => {
     const [showToValue, setShowToValue] = useState(() => shouldShowToValue(conditionType));
     const [showFromValue, setShowFromValue] = useState(() => shouldShowFromValue(conditionType));
     useIsomorphicLayoutEffect(() => {
@@ -15,20 +42,49 @@ export const FilterByCondition = ({ conditionType, fromValue, toValue, onChangeT
             onChangeToValue("");
         }
     }, [conditionType, onChangeToValue, onChangeFromValue]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by condition"),
-        React.createElement(Select, { value: conditionType ?? CONDITION_NONE, onValueChange: (value) => onChangeConditionType?.(value === CONDITION_NONE
-                ? undefined
-                : value) },
-            React.createElement(SelectTrigger, { className: "mb-1" },
-                React.createElement(SelectValue, { placeholder: "None" })),
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+        showFromValue ? (React.createElement(Input, { value: fromValue, type: "text", name: `${namePrefix}fromValue`, onChange: (e) => onChangeFromValue?.(e.target.value), className: "text-xs", placeholder: "Enter value" })) : null,
+        showToValue ? (React.createElement(Input, { value: toValue, type: "text", name: `${namePrefix}toValue`, onChange: (e) => onChangeToValue?.(e.target.value), className: "text-xs", placeholder: "" })) : null));
+};
+/** Excel's Top 10 AutoFilter dialog: [Top | Bottom] [N] [Items | Percent]. */
+const Top10Fields = ({ conditionType, count, onChangeConditionType, onChangeCount, }) => {
+    const direction = conditionType === "NUMBER_TOP_N" || conditionType === "NUMBER_TOP_PERCENT"
+        ? "top"
+        : "bottom";
+    const unit = conditionType === "NUMBER_TOP_PERCENT" ||
+        conditionType === "NUMBER_BOTTOM_PERCENT"
+        ? "percent"
+        : "items";
+    return (React.createElement(Stack, { className: "gap-1 items-center" },
+        React.createElement(Select, { value: direction, onValueChange: (next) => onChangeConditionType(top10ConditionType(next === "bottom" ? "bottom" : "top", unit)) },
+            React.createElement(SelectTrigger, { className: "w-24", "aria-label": "Top or bottom" },
+                React.createElement(SelectValue, null)),
+            React.createElement(SelectPortal, null,
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectItem, { value: "top" }, "Top"),
+                    React.createElement(SelectItem, { value: "bottom" }, "Bottom")))),
+        React.createElement(Input, { value: count, type: "number", min: 1, name: "top10Count", "aria-label": "Top 10 count", onChange: (e) => onChangeCount(e.target.value), className: "text-xs w-16" }),
+        React.createElement(Select, { value: unit, onValueChange: (next) => onChangeConditionType(top10ConditionType(direction, next === "percent" ? "percent" : "items")) },
+            React.createElement(SelectTrigger, { className: "w-24", "aria-label": "Items or percent" },
+                React.createElement(SelectValue, null)),
             React.createElement(SelectPortal, null,
                 React.createElement(SelectContent, null,
-                    React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
-                    CONDITION_LABELS.map(({ condition, label }) => {
-                        return (React.createElement(SelectItem, { key: condition, value: condition }, label));
-                    })))),
-        React.createElement(Stack, { direction: "vertical", className: "gap-1" },
-            showFromValue ? (React.createElement(Input, { value: fromValue, type: "text", name: "fromValue", onChange: (e) => onChangeFromValue?.(e.target.value), className: "text-xs", placeholder: "Enter value" })) : null,
-            showToValue ? (React.createElement(Input, { value: toValue, type: "text", name: "toValue", onChange: (e) => onChangeToValue?.(e.target.value), className: "text-xs", placeholder: "" })) : null)));
+                    React.createElement(SelectItem, { value: "items" }, "Items"),
+                    React.createElement(SelectItem, { value: "percent" }, "Percent"))))));
+};
+export const FilterByCondition = ({ conditionType, fromValue, toValue, onChangeToValue, onChangeFromValue, onChangeConditionType, condition2Type, condition2From, condition2To, conditionJoin, onChangeCondition2Type, onChangeCondition2From, onChangeCondition2To, onChangeConditionJoin, }) => {
+    // Excel's Custom AutoFilter shows the second clause row only on request;
+    // it stays open while a second clause is stored on the column.
+    const [showSecondClause, setShowSecondClause] = useState(() => condition2Type !== undefined);
+    const isTop10 = isTop10ConditionType(conditionType);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: "text-sm font-semibold pb-1 block" }, "Filter by condition"),
+        React.createElement(ConditionSelect, { value: conditionType, labels: CONDITION_LABELS, onChange: (type) => onChangeConditionType?.(type), ariaLabel: "Condition" }),
+        isTop10 && conditionType ? (React.createElement(Top10Fields, { conditionType: conditionType, count: fromValue, onChangeConditionType: (type) => onChangeConditionType?.(type), onChangeCount: onChangeFromValue })) : (React.createElement(ValueInputs, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeFromValue: onChangeFromValue, onChangeToValue: onChangeToValue, namePrefix: "" })),
+        conditionType && !isTop10 ? (showSecondClause ? (React.createElement("div", { className: "mt-1 flex flex-col gap-1" },
+            React.createElement("div", { role: "radiogroup", "aria-label": "Combine conditions", className: "flex gap-3 text-xs px-1" }, ["AND", "OR"].map((join) => (React.createElement("label", { key: join, className: "flex items-center gap-1 cursor-pointer" },
+                React.createElement("input", { type: "radio", name: "conditionJoin", value: join, checked: conditionJoin === join, onChange: () => onChangeConditionJoin(join) }),
+                join === "AND" ? "And" : "Or")))),
+            React.createElement(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, onChange: onChangeCondition2Type, ariaLabel: "Second condition" }),
+            React.createElement(ValueInputs, { conditionType: condition2Type, fromValue: condition2From, toValue: condition2To, onChangeFromValue: onChangeCondition2From, onChangeToValue: onChangeCondition2To, namePrefix: "second" }))) : (React.createElement(Button, { type: "button", variant: "link", className: "text-xs px-1 mt-1 self-start", onClick: () => setShowSecondClause(true) }, "Custom filter (And / Or)\u2026"))) : null));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"filter-by-value.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-value.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,CAClD,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,mDAI3B,kBAAkB,sBA8GpB,CAAC"}
+{"version":3,"file":"filter-by-value.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/filter-by-value.tsx"],"names":[],"mappings":"AASA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,CAClD,CAAC;CACH,CAAC;AAcF,eAAO,MAAM,aAAa,GAAI,mDAI3B,kBAAkB,sBA+PpB,CAAC"}

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

@@ -1,67 +1,138 @@
-import { CheckIcon } from "@rowsncolumns/icons";
-import { Input } from "@rowsncolumns/ui";
-import { Button, Stack } from "@rowsncolumns/ui";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, DividerHorizontalIcon, } from "@rowsncolumns/icons";
+import { Button, Input } 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";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { BLANK_LABEL, DEFAULT_ARRAY } from "../../config";
+import { buildDateTree, triState } from "./date-tree";
+/** Excel's checklist glyph: checked, unchecked, or the "some children" dash. */
+const TriStateMark = ({ state }) => (React.createElement("span", { className: "min-w-[15px] h-[15px] block leading-none border border-gray-400 rounded-sm text-center shrink-0", "aria-hidden": true }, state === true ? React.createElement(CheckIcon, null) : state === "mixed" ? React.createElement(DividerHorizontalIcon, null) : null));
+const rowClassName = "justify-start px-2 py-0 gap-1 text-sm text-left w-full h-6";
 export const FilterByValue = ({ visibleValues, values = DEFAULT_ARRAY, onChangeVisibleValues, }) => {
     const [query, setQuery] = useState("");
+    // Excel's "Add current selection to filter": while searching, checking the
+    // results ADDS them to the values already shown instead of replacing them.
+    const [addToSelection, setAddToSelection] = useState(false);
+    const [expanded, setExpanded] = useState(() => new Set());
     const parentRef = useRef(null);
     const filteredValues = useMemo(() => {
         const regex = new RegExp(escapeCharacters(query), "i");
-        return values.filter((value) => {
-            return regex.test(String(value));
-        });
+        return values.filter((value) => regex.test(String(value)));
     }, [values, query]);
+    // A date column's checklist is a Year → Month → Day tree; a search flattens
+    // it to the matching values, as Excel does.
+    const dateTree = useMemo(() => (query ? undefined : buildDateTree(values, BLANK_LABEL)), [values, query]);
+    const hasBlank = values.includes(BLANK_LABEL);
+    const visibleSet = useMemo(() => (visibleValues ? new Set(visibleValues) : undefined), [visibleValues]);
+    const isVisible = useCallback((value) => !visibleSet || visibleSet.has(value), [visibleSet]);
+    // `undefined` visible values = everything shown; collapse back to it once
+    // every value is checked so a full checklist never becomes a whitelist.
+    const normalize = useCallback((next) => values.every((value) => next.has(value)) ? undefined : [...next], [values]);
+    const setChecked = useCallback((targets, checked) => {
+        onChangeVisibleValues((prev) => {
+            const next = new Set(prev ?? values);
+            for (const value of targets) {
+                if (checked)
+                    next.add(value);
+                else
+                    next.delete(value);
+            }
+            return normalize(next);
+        });
+    }, [onChangeVisibleValues, values, normalize]);
+    const selectAllState = triState(filteredValues, isVisible);
+    const onToggleSelectAll = useCallback(() => {
+        if (selectAllState === true) {
+            setChecked(filteredValues, false);
+            return;
+        }
+        if (query && !addToSelection) {
+            // Checking the search results shows ONLY them (Excel replaces the
+            // selection unless "Add current selection to filter" is on).
+            onChangeVisibleValues(normalize(new Set(filteredValues)));
+            return;
+        }
+        setChecked(filteredValues, true);
+    }, [
+        selectAllState,
+        setChecked,
+        filteredValues,
+        query,
+        addToSelection,
+        onChangeVisibleValues,
+        normalize,
+    ]);
     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));
+    const toggleExpanded = (key) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        return next;
+    });
+    const renderTreeNode = (node, depth) => {
+        const state = triState(node.values, isVisible);
+        const isExpanded = expanded.has(node.key);
+        return (React.createElement(React.Fragment, { key: node.key },
+            React.createElement("div", { className: "flex items-center", style: { paddingLeft: depth * 14 } },
+                node.children ? (React.createElement("button", { type: "button", "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${node.label}`, className: "w-4 h-4 flex items-center justify-center shrink-0", onClick: (e) => {
+                        e.stopPropagation();
+                        toggleExpanded(node.key);
+                    } }, isExpanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null))) : (React.createElement("span", { className: "w-4 shrink-0" })),
+                React.createElement(Button, { type: "button", role: "checkbox", "aria-checked": state, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setChecked(node.values, state !== true);
+                    }, className: rowClassName, title: node.label },
+                    React.createElement(TriStateMark, { state: state }),
+                    React.createElement("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, node.label))),
+            isExpanded
+                ? node.children?.map((child) => renderTreeNode(child, depth + 1))
+                : null));
     };
     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(Input, { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search", "aria-label": "Search values", className: "text-xs" }),
+        React.createElement(Button, { type: "button", role: "checkbox", "aria-checked": selectAllState, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onToggleSelectAll();
+            }, className: `${rowClassName} mt-1 font-medium` },
+            React.createElement(TriStateMark, { state: selectAllState }),
+            React.createElement("span", null, query ? "(Select All Search Results)" : "(Select All)")),
+        query ? (React.createElement("label", { className: "flex items-center gap-2 text-xs px-2 py-0.5 select-none cursor-pointer" },
+            React.createElement("input", { type: "checkbox", checked: addToSelection, onChange: (e) => setAddToSelection(e.target.checked) }),
+            "Add current selection to filter")) : null,
+        dateTree ? (React.createElement("div", { className: "overflow-auto mt-1 flex flex-col", style: { maxHeight: 160 } },
+            dateTree.map((node) => renderTreeNode(node, 0)),
+            hasBlank ? (React.createElement("div", { className: "flex items-center" },
+                React.createElement("span", { className: "w-4 shrink-0" }),
+                React.createElement(Button, { type: "button", role: "checkbox", "aria-checked": isVisible(BLANK_LABEL), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setChecked([BLANK_LABEL], !isVisible(BLANK_LABEL));
+                    }, className: rowClassName, title: BLANK_LABEL },
+                    React.createElement(TriStateMark, { state: isVisible(BLANK_LABEL) }),
+                    React.createElement("span", null, BLANK_LABEL)))) : null)) : (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) => {
+                const checked = isVisible(value);
+                return (React.createElement(Button, { key: virtualItem.key, type: "button", role: "checkbox", "aria-checked": checked, onMouseDown: (e) => {
                         e.stopPropagation();
                     }, onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        if (isVisible) {
-                            onUnCheck(value);
-                        }
-                        else {
-                            onCheck(value);
-                        }
+                        setChecked([value], !checked);
                     }, className: "justify-start px-2 py-0 gap-1 text-sm text-left", title: value, style: {
                         position: "absolute",
                         top: 0,
@@ -70,7 +141,7 @@ export const FilterByValue = ({ visibleValues, values = DEFAULT_ARRAY, onChangeV
                         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(TriStateMark, { state: checked }),
                     React.createElement("div", { className: "whitespace-nowrap overflow-hidden text-ellipsis" }, String(value))));
-            })))));
+            }))))));
 };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { UseFilterProps } from "../../hooks/use-filter";
-import type { FilterView, TableView } from "../../types";
+import type { FilterCriteria, FilterView, TableView } from "../../types";
 import type { AvailableIcon } from "./filter-by-color";
 export type { AvailableIcon } from "./filter-by-color";
 export type FilterBoxBaseProps = {
@@ -32,6 +32,12 @@ export type FilterBoxBaseProps = {
     customLists?: string[][];
 };
 export declare const isTableView: (filter: FilterView | TableView) => filter is TableView;
+/**
+ * Whether a column's stored criteria still filter anything — what enables
+ * Excel's "Clear Filter From <column>" item. Same test as the state layer's
+ * `isFilterCriteriaActive`.
+ */
+export declare const hasActiveFilterCriteria: (criteria: FilterCriteria | undefined) => boolean;
 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;

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAMV,cAAc,EACd,UAAU,EAGV,SAAS,EACV,MAAM,aAAa,CAAC;AAKrB,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;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,cAAc,GAAG,SAAS,KACnC,OAQA,CAAC;AA0BJ,eAAO,MAAM,gBAAgB,4NAexB,cAAc,uBA4kBlB,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

@@ -1,5 +1,5 @@
 import { Direction } from "@rowsncolumns/grid";
-import { ArrowLeftIcon, ArrowRightIcon, SortDownIcon, SortUpIcon, TrashIcon, } from "@rowsncolumns/icons";
+import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, Cross2Icon, 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";
@@ -14,6 +14,17 @@ import { FilterByValue } from "./filter-by-value";
 export const isTableView = (filter) => {
     return "columns" in filter;
 };
+/**
+ * Whether a column's stored criteria still filter anything — what enables
+ * Excel's "Clear Filter From <column>" item. Same test as the state layer's
+ * `isFilterCriteriaActive`.
+ */
+export const hasActiveFilterCriteria = (criteria) => Boolean(criteria &&
+    (criteria.condition?.type ||
+        criteria.condition2?.type ||
+        criteria.visibleValues?.length ||
+        criteria.colorFilter ||
+        criteria.iconFilter));
 // 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.
@@ -58,6 +69,13 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
     // existing criterion from the spec".
     const [colorFilter, onChangeColorFilter] = useState(undefined);
     const [iconFilter, onChangeIconFilter] = useState(undefined);
+    // Excel's Custom AutoFilter second clause + And / Or join.
+    const [condition2Type, onChangeCondition2Type] = useState(filterCriteria?.condition2?.type ?? undefined);
+    const [condition2From, onChangeCondition2From] = useState(filterCriteria?.condition2?.values?.[0]?.userEnteredValue ?? "");
+    const [condition2To, onChangeCondition2To] = useState(filterCriteria?.condition2?.values?.[1]?.userEnteredValue ?? "");
+    const [conditionJoin, onChangeConditionJoin] = useState(filterCriteria?.conditionJoin ?? "AND");
+    // "Sort by Color" is a collapsed sub-menu of the dropdown, like Excel's.
+    const [showSortByColor, setShowSortByColor] = useState(false);
     // 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.
@@ -161,9 +179,22 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
             }
             return undefined;
         })();
+        const condition2Values = [];
+        if (condition2From) {
+            condition2Values.push({ userEnteredValue: condition2From });
+        }
+        if (condition2To) {
+            condition2Values.push({ userEnteredValue: condition2To });
+        }
+        // A second clause without a first is applied as the only clause.
+        const condition2 = condition2Type
+            ? { type: condition2Type, values: condition2Values }
+            : null;
         onFilter?.(sheetId, filter, dimensionIndex, conditionType, conditionValues, normalizedVisibleValues, {
             colorFilter,
             iconFilter,
+            condition2,
+            conditionJoin: condition2 ? conditionJoin : null,
         });
     }, [
         sheetId,
@@ -173,11 +204,40 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
         fromValue,
         toValue,
         conditionType,
+        condition2Type,
+        condition2From,
+        condition2To,
+        conditionJoin,
         visibleValues,
         values,
         colorFilter,
         iconFilter,
     ]);
+    // Excel's "Clear Filter From <column>": drop every criterion on this
+    // column only — the filter (and the other columns' criteria) stay.
+    const columnLabel = isTable
+        ? filter.columns?.[dimensionIndex]?.name
+        : undefined;
+    const clearLabel = `Clear Filter From "${columnLabel ??
+        `Column ${number2Alpha(filter.range.startColumnIndex + dimensionIndex)}`}"`;
+    const canClearColumn = hasActiveFilterCriteria(filterCriteria);
+    const onClearColumnFilter = useCallback(() => {
+        onFilter?.(sheetId, filter, dimensionIndex, undefined, undefined, undefined, {
+            colorFilter: null,
+            iconFilter: null,
+            condition2: null,
+        });
+        onClose();
+    }, [onFilter, sheetId, filter, dimensionIndex, onClose]);
+    // Excel's "Sort by Color": surface the picked fill / font colour or CF icon
+    // to the top of the column (one level, ascending).
+    const onSortByColor = useCallback((options) => {
+        onSort?.(sheetId, filter, dimensionIndex, "ASCENDING", options);
+        onClose();
+    }, [onSort, sheetId, filter, dimensionIndex, onClose]);
+    const hasSortColors = Boolean(availableCellColors?.length ||
+        availableFontColors?.length ||
+        availableIcons?.length);
     // 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.
@@ -231,6 +291,10 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
     const onUserChangeColorFilter = useMemo(() => wrapWithAutoApply(onChangeColorFilter), [wrapWithAutoApply]);
     const onUserChangeIconFilter = useMemo(() => wrapWithAutoApply(onChangeIconFilter), [wrapWithAutoApply]);
     const onUserChangeVisibleValues = useMemo(() => wrapWithAutoApply(onChangeVisibleValues), [wrapWithAutoApply]);
+    const onUserChangeCondition2Type = useMemo(() => wrapWithAutoApply(onChangeCondition2Type), [wrapWithAutoApply]);
+    const onUserChangeCondition2From = useMemo(() => wrapWithAutoApply(onChangeCondition2From), [wrapWithAutoApply]);
+    const onUserChangeCondition2To = useMemo(() => wrapWithAutoApply(onChangeCondition2To), [wrapWithAutoApply]);
+    const onUserChangeConditionJoin = useMemo(() => wrapWithAutoApply(onChangeConditionJoin), [wrapWithAutoApply]);
     // Apply
     const onSubmit = useCallback((event) => {
         event.preventDefault();
@@ -290,8 +354,30 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
             React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
                 React.createElement(SortDownIcon, null)),
             "Custom sort\u2026"),
+        React.createElement(PopoverMenuItem, { type: "button", disabled: !hasSortColors, "aria-expanded": showSortByColor, onClick: () => setShowSortByColor((open) => !open) },
+            React.createElement(DropdownLeftSlot, { className: "text-base leading-4" }, showSortByColor ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null)),
+            "Sort by Color"),
+        showSortByColor && hasSortColors ? (React.createElement("div", { className: "flex flex-col pl-6 pb-1", role: "group", "aria-label": "Sort by Color" },
+            availableCellColors?.map((color) => (React.createElement(Button, { key: `cell-${color}`, type: "button", "aria-label": `Sort by cell color ${color}`, title: `Sort by cell color ${color}`, onClick: () => onSortByColor({ sortBy: "cellColor", sortColor: color }), className: "justify-start px-2 py-0 gap-2 text-sm text-left w-full h-6" },
+                React.createElement("span", { className: "inline-block h-4 w-4 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }),
+                "Cell color ",
+                color))),
+            availableFontColors?.map((color) => (React.createElement(Button, { key: `font-${color}`, type: "button", "aria-label": `Sort by font color ${color}`, title: `Sort by font color ${color}`, onClick: () => onSortByColor({ sortBy: "fontColor", sortColor: color }), className: "justify-start px-2 py-0 gap-2 text-sm text-left w-full h-6" },
+                React.createElement("span", { className: "inline-block h-4 w-4 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }),
+                "Font color ",
+                color))),
+            availableIcons?.map((icon) => (React.createElement(Button, { key: `icon-${icon.iconSet}-${icon.iconId}`, type: "button", "aria-label": `Sort by ${icon.iconSet} icon ${icon.iconId}`, title: `Sort by ${icon.iconSet} icon ${icon.iconId}`, onClick: () => onSortByColor({
+                    sortBy: "icon",
+                    sortIcon: { iconSet: icon.iconSet, iconId: icon.iconId },
+                }), className: "justify-start px-2 py-0 gap-2 text-sm text-left w-full h-6" },
+                React.createElement("span", { className: "inline-block h-4 w-4 leading-none text-center text-sm shrink-0", style: icon.color ? { color: icon.color } : undefined }, icon.glyph),
+                "Icon"))))) : null,
+        React.createElement(PopoverMenuItem, { type: "button", disabled: !canClearColumn, onClick: onClearColumnFilter },
+            React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                React.createElement(Cross2Icon, null)),
+            clearLabel),
         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(FilterByCondition, { conditionType: conditionType, fromValue: fromValue, toValue: toValue, onChangeConditionType: onUserChangeConditionType, onChangeFromValue: onUserChangeFromValue, onChangeToValue: onUserChangeToValue, condition2Type: condition2Type, condition2From: condition2From, condition2To: condition2To, conditionJoin: conditionJoin, onChangeCondition2Type: onUserChangeCondition2Type, onChangeCondition2From: onUserChangeCondition2From, onChangeCondition2To: onUserChangeCondition2To, onChangeConditionJoin: onUserChangeConditionJoin }),
             React.createElement(Separator, { className: "mt-2 mb-2" }),
             React.createElement(FilterByColor, { colorFilter: colorFilter === undefined
                     ? filterCriteria?.colorFilter

package/dist/esm/components/move-chart-dialog/index.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { EmbeddedChart, MoveChartTarget, Sheet } from "../../types";
+export type MoveChartDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /** The chart being moved; its `position.sheetId` is the source sheet. */
+    chart: EmbeddedChart;
+    /** Every sheet of the workbook (chartsheets are not offered as "Object in" targets). */
+    sheets: Sheet[];
+    onSubmit(target: MoveChartTarget): void;
+};
+/**
+ * Excel's "Move Chart…" dialog: "New sheet: [Chart1]" creates a chartsheet
+ * (a tab that is the chart, no cells) or "Object in: [Sheet]" moves the chart
+ * onto another worksheet. UI-only — the host turns the target into the move.
+ */
+export declare const MoveChartDialog: React.MemoExoticComponent<({ open, onOpenChange, chart, sheets, onSubmit }: MoveChartDialogProps) => React.JSX.Element>;
+export type MoveChartDialogHostProps = {
+    sheets: Sheet[];
+    /** `useCharts().onMoveChartToSheet` / the engine hook's `onMoveChartToSheet`. */
+    onMoveChartToSheet(chart: EmbeddedChart, target: MoveChartTarget): unknown;
+};
+/**
+ * Host-mounted, atom-driven wrapper around {@link MoveChartDialog}. Mount it
+ * once alongside the other editor dialogs; the chart context menu and the
+ * chart editor open it. Remounted per request so each opening starts from the
+ * chart's current sheet.
+ */
+export declare const MoveChartDialogHost: {
+    ({ sheets, onMoveChartToSheet, }: MoveChartDialogHostProps): React.JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/move-chart-dialog/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG;IACjC,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,yEAAyE;IACzE,KAAK,EAAE,aAAa,CAAC;IACrB,wFAAwF;IACxF,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,QAAQ,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;CACzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,8EACwB,oBAAoB,uBAgIvE,CAAC;AAIF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,iFAAiF;IACjF,kBAAkB,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,eAAe,GAAG,OAAO,CAAC;CAC5E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;sCAG7B,wBAAwB;;CAiB1B,CAAC"}

package/dist/esm/components/move-chart-dialog/index.js

@@ -0,0 +1,88 @@
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Separator, } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useState } from "react";
+import { getNextChartSheetTitle } from "../../api/chart-sheet";
+import { useMoveChartDialogState, useRegisterMoveChartDialogHost, } from "../../atoms/move-chart-dialog.atom";
+/**
+ * Excel's "Move Chart…" dialog: "New sheet: [Chart1]" creates a chartsheet
+ * (a tab that is the chart, no cells) or "Object in: [Sheet]" moves the chart
+ * onto another worksheet. UI-only — the host turns the target into the move.
+ */
+export const MoveChartDialog = memo(({ open, onOpenChange, chart, sheets, onSubmit }) => {
+    const sourceSheetId = chart.position.sheetId;
+    const sourceSheet = sheets.find((sheet) => sheet.sheetId === sourceSheetId);
+    const sourceIsChartSheet = sourceSheet?.type === "chartsheet";
+    const worksheets = sheets.filter((sheet) => sheet.type !== "chartsheet" && !sheet.hidden);
+    // Excel pre-selects where the chart currently is: "New sheet" (with the
+    // chartsheet's own name) for a chartsheet chart, "Object in" otherwise.
+    const [mode, setMode] = useState(sourceIsChartSheet ? "newSheet" : "sheet");
+    const [title, setTitle] = useState(sourceIsChartSheet && sourceSheet
+        ? sourceSheet.title
+        : getNextChartSheetTitle(sheets));
+    const [targetSheetId, setTargetSheetId] = useState(worksheets.some((sheet) => sheet.sheetId === sourceSheetId)
+        ? sourceSheetId
+        : worksheets[0]?.sheetId);
+    const commit = useCallback(() => {
+        if (mode === "newSheet") {
+            const trimmed = title.trim();
+            // Keeping a chartsheet's own name is not a move.
+            if (!(sourceIsChartSheet && trimmed === sourceSheet?.title)) {
+                onSubmit({ kind: "newSheet", title: trimmed || undefined });
+            }
+        }
+        else if (targetSheetId !== undefined && targetSheetId !== sourceSheetId) {
+            onSubmit({ kind: "sheet", sheetId: targetSheetId });
+        }
+        onOpenChange(false);
+    }, [
+        mode,
+        title,
+        targetSheetId,
+        sourceSheetId,
+        sourceIsChartSheet,
+        sourceSheet,
+        onSubmit,
+        onOpenChange,
+    ]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange, modal: true },
+        React.createElement(DialogContent, { className: "w-[360px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Move Chart"),
+            React.createElement(DialogCloseButton, null),
+            React.createElement(DialogBody, { className: "flex flex-col gap-4" },
+                React.createElement("form", { className: "flex flex-col gap-4", onSubmit: (e) => {
+                        e.preventDefault();
+                        commit();
+                    } },
+                    React.createElement("fieldset", { className: "flex flex-col gap-2 min-w-0 border-0 p-0 m-0" },
+                        React.createElement("legend", { className: "text-xs font-medium mb-1" }, "Choose where you want the chart to be placed:"),
+                        React.createElement("label", { className: "flex items-center gap-2 text-xs py-0.5 cursor-pointer" },
+                            React.createElement("input", { type: "radio", name: "move-chart-target", value: "newSheet", checked: mode === "newSheet", onChange: () => setMode("newSheet") }),
+                            React.createElement("span", { className: "w-20 shrink-0" }, "New sheet:"),
+                            React.createElement("input", { type: "text", "aria-label": "New sheet name", className: "flex-1 min-w-0 rounded border border-rnc-border bg-transparent px-2 py-1 text-xs", value: title, disabled: mode !== "newSheet", onChange: (e) => setTitle(e.target.value), onFocus: () => setMode("newSheet") })),
+                        React.createElement("label", { className: "flex items-center gap-2 text-xs py-0.5 cursor-pointer" },
+                            React.createElement("input", { type: "radio", name: "move-chart-target", value: "sheet", checked: mode === "sheet", disabled: worksheets.length === 0, onChange: () => setMode("sheet") }),
+                            React.createElement("span", { className: "w-20 shrink-0" }, "Object in:"),
+                            React.createElement("select", { "aria-label": "Object in sheet", className: "flex-1 min-w-0 rounded border border-rnc-border bg-transparent px-2 py-1 text-xs", value: targetSheetId ?? "", disabled: mode !== "sheet" || worksheets.length === 0, onChange: (e) => setTargetSheetId(Number(e.target.value)) }, worksheets.map((sheet) => (React.createElement("option", { key: sheet.sheetId, value: sheet.sheetId }, sheet.title)))))),
+                    React.createElement(Separator, null),
+                    React.createElement("div", { className: "flex justify-end gap-2" },
+                        React.createElement(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onOpenChange(false) }, "Cancel"),
+                        React.createElement(Button, { type: "submit", size: "sm", autoFocus: true }, "OK")))))));
+});
+MoveChartDialog.displayName = "MoveChartDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link MoveChartDialog}. Mount it
+ * once alongside the other editor dialogs; the chart context menu and the
+ * chart editor open it. Remounted per request so each opening starts from the
+ * chart's current sheet.
+ */
+export const MoveChartDialogHost = ({ sheets, onMoveChartToSheet, }) => {
+    useRegisterMoveChartDialogHost();
+    const [request, setRequest] = useMoveChartDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    if (!request)
+        return null;
+    return (React.createElement(MoveChartDialog, { key: String(request.chart.chartId), open: true, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, chart: request.chart, sheets: sheets, onSubmit: (target) => onMoveChartToSheet(request.chart, target) }));
+};
+MoveChartDialogHost.displayName = "MoveChartDialogHost";