@rowsncolumns/spreadsheet 10.4.1 → 10.4.2

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

@@ -1,5 +1,5 @@
-import { Button, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
-import React, { useState } from "react";
+import { Button, Input, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import React, { useMemo, useState } from "react";
 import { CONDITION_LABELS, CONDITION_NONE } from "../../config";
 import { shouldShowFromValue, shouldShowToValue } from "../../helpers";
 import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
@@ -23,13 +23,79 @@ export const top10ConditionType = (direction, unit) => direction === "top"
 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)))))));
+export const DATE_PERIOD_GROUP_LABEL = "All dates in the period";
+const FOREIGN_GROUP_LABEL = "Applied filter";
+const isDatePeriodCondition = (type) => /^DATE_IN_[QM]\d+$/.test(type);
+/**
+ * Which Excel AutoFilter family a condition belongs to. Anything outside the
+ * text / number / date prefixes ("Is empty", "Errors", "Custom formula") is
+ * offered on every column.
+ */
+const conditionFamily = (type) => {
+    if (type.startsWith("TEXT_"))
+        return "text";
+    if (type.startsWith("NUMBER_"))
+        return "number";
+    if (type.startsWith("DATE_"))
+        return isDatePeriodCondition(type) ? "period" : "date";
+    return "generic";
+};
+/**
+ * The condition menu Excel shows for a column: one family — "Text Filters",
+ * "Number Filters" or "Date Filters" (with the sixteen period conditions
+ * grouped under "All Dates in the Period") — plus the generic items. With no
+ * `columnType` (an unclassified column) every family is offered, grouped.
+ * A `current` condition from another family (a date filter stored on a column
+ * that now holds text) stays listed and selected so the user can see and
+ * clear it instead of it silently vanishing from the menu.
+ */
+export const conditionOptionsFor = (labels, columnType, current) => {
+    const families = columnType
+        ? [columnType]
+        : ["text", "number", "date"];
+    const groups = [];
+    for (const family of families) {
+        groups.push({
+            key: family,
+            options: labels.filter(({ condition }) => conditionFamily(condition) === family),
+        });
+        if (family === "date") {
+            groups.push({
+                key: "period",
+                label: DATE_PERIOD_GROUP_LABEL,
+                options: labels.filter(({ condition }) => conditionFamily(condition) === "period"),
+            });
+        }
+    }
+    groups.push({
+        key: "generic",
+        options: labels.filter(({ condition }) => conditionFamily(condition) === "generic"),
+    });
+    const offered = groups.filter((group) => group.options.length > 0);
+    if (current &&
+        !offered.some((group) => group.options.some(({ condition }) => condition === current))) {
+        const foreign = labels.find(({ condition }) => condition === current) ??
+            CONDITION_LABELS.find(({ condition }) => condition === current);
+        if (foreign) {
+            offered.unshift({ key: "current", label: FOREIGN_GROUP_LABEL, options: [foreign] });
+        }
+    }
+    return offered;
+};
+const ConditionSelect = ({ value, labels, columnType, onChange, ariaLabel, }) => {
+    const groups = useMemo(() => conditionOptionsFor(labels, columnType, value), [labels, columnType, value]);
+    return (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"),
+                groups.map((group) => (React.createElement(React.Fragment, { key: group.key },
+                    React.createElement(SelectSeparator, null),
+                    React.createElement(SelectGroup, null,
+                        group.label ? React.createElement(SelectLabel, null, group.label) : null,
+                        group.options.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));
@@ -72,19 +138,19 @@ const Top10Fields = ({ conditionType, count, onChangeConditionType, onChangeCoun
                     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, }) => {
+export const FilterByCondition = ({ columnType, 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" }),
+        React.createElement(ConditionSelect, { value: conditionType, labels: CONDITION_LABELS, columnType: columnType, 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(ConditionSelect, { value: condition2Type, labels: SECOND_CLAUSE_LABELS, columnType: columnType, 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/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/filter-box/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,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,uBAmlBlB,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

@@ -5,8 +5,10 @@ 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 { BLANK_LABEL } from "../../config";
+import { StyledFakeTriggerButton } from "../context-menu/style";
+import { classifyFilterColumn } from "./date-tree";
 import { FilterByColor } from "./filter-by-color";
 import { FilterByCondition } from "./filter-by-condition";
 import { FilterByValue } from "./filter-by-value";
@@ -76,6 +78,9 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
     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);
+    // Excel offers one condition family per column (Text / Number / Date
+    // Filters), read from the same displayed values the checklist shows.
+    const columnType = useMemo(() => classifyFilterColumn(values, BLANK_LABEL), [values]);
     // 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.
@@ -377,7 +382,7 @@ export const FilterBoxWrapper = memo(({ dimensionIndex, onOpenChange, onSort, on
                 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, condition2Type: condition2Type, condition2From: condition2From, condition2To: condition2To, conditionJoin: conditionJoin, onChangeCondition2Type: onUserChangeCondition2Type, onChangeCondition2From: onUserChangeCondition2From, onChangeCondition2To: onUserChangeCondition2To, onChangeConditionJoin: onUserChangeConditionJoin }),
+            React.createElement(FilterByCondition, { columnType: columnType, 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/formula-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGAiIxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AActC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGA8JxB,CAAC"}

package/dist/esm/components/formula-input/index.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback } from "react";
 import React, { useRef } from "react";
 import { useActiveEditor, useFormulaMode, useGetGridRef, useGetSelectionsFromFormula, useOnEditorKeyDown, useSetActiveEditor, useSetFormulaSelections, } from "../../atoms";
 import { useCellInputContext } from "../../atoms/cell-input-context.atom";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
 import { useMergeRefs } from "../../hooks/use-merge.refs";
 import { CellInput } from "../cell-input";
 /**
@@ -21,14 +22,35 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
     const getSelectionsFromFormula = useGetSelectionsFromFormula();
     const onEditorKeyDown = useOnEditorKeyDown();
     const { getTableNames, getTableColumnNames, getNamedRanges } = useCellInputContext();
+    // Whether THIS input is the one holding formula mode on. `handleBlur` keeps the mode
+    // alive when focus moves to the grid — that is how a range gets picked — so an input
+    // that unmounts while the grid holds focus (Cancel / Save / the dialog's X / Esc) has
+    // to be the one to turn it off; otherwise the picked range keeps rendering and the
+    // grid stays in formula-selection mode with no editor left to receive the picks.
+    const ownsFormulaModeRef = useRef(false);
+    const enterFormulaMode = useCallback((nextValue) => {
+        const formulaMode = isAFormula(nextValue);
+        setFormulaMode(formulaMode);
+        ownsFormulaModeRef.current = formulaMode;
+    }, [setFormulaMode]);
     const closeFormulaMode = useCallback(() => {
         setFormulaMode(false);
         setFormulaSelections([]);
+        ownsFormulaModeRef.current = false;
         onCancel?.();
     }, [onCancel, setFormulaMode, setFormulaSelections]);
+    // Layout (not passive) cleanup: when a host re-keys its range inputs ("Add range"),
+    // the departing input must release the mode before the new one's autoFocus claims it.
+    useIsomorphicLayoutEffect(() => () => {
+        if (ownsFormulaModeRef.current) {
+            ownsFormulaModeRef.current = false;
+            setFormulaMode(false);
+            setFormulaSelections([]);
+        }
+    }, [setFormulaMode, setFormulaSelections]);
     const handleFocus = useCallback((e) => {
         // Set formula mode
-        setFormulaMode(isAFormula(value));
+        enterFormulaMode(value);
         // Get selections from formula
         const selections = getSelectionsFromFormula?.(value);
         if (selections) {
@@ -40,7 +62,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
         onChange?.(value);
         onFocus?.(e);
     }, [
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
         value,
@@ -66,7 +88,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
             return;
         }
         // Set formula mode
-        setFormulaMode(isAFormula(value));
+        enterFormulaMode(value);
         // Get selections from formula
         const selections = getSelectionsFromFormula?.(value);
         if (selections) {
@@ -75,7 +97,7 @@ export const FormulaInput = forwardRef(({ value = "", onChange, onCancel, onBlur
     }, [
         activeEditor,
         onChange,
-        setFormulaMode,
+        enterFormulaMode,
         setFormulaSelections,
         getSelectionsFromFormula,
     ]);

package/dist/esm/components/toolbar/table-style-editor.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import type { BandingProperties, CustomTableStyle, Maybe } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+export declare const TABLE_STYLE_ELEMENTS: readonly [{
+    readonly key: "header";
+    readonly label: "Header row";
+    readonly property: "headerColor";
+}, {
+    readonly key: "firstBand";
+    readonly label: "First row stripe";
+    readonly property: "firstBandColor";
+}, {
+    readonly key: "secondBand";
+    readonly label: "Second row stripe";
+    readonly property: "secondBandColor";
+}, {
+    readonly key: "firstColumn";
+    readonly label: "First column";
+    readonly property: "firstColumnColor";
+}, {
+    readonly key: "lastColumn";
+    readonly label: "Last column";
+    readonly property: "lastColumnColor";
+}, {
+    readonly key: "totalRow";
+    readonly label: "Total row";
+    readonly property: "totalRowColor";
+}];
+export type TableStyleElementKey = (typeof TABLE_STYLE_ELEMENTS)[number]["key"];
+/** The colour picked for each element; `undefined` leaves the element unpainted. */
+export type TableStyleColors = Partial<Record<TableStyleElementKey, string>>;
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+export declare const DEFAULT_TABLE_STYLE_COLORS: TableStyleColors;
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+export declare const buildCustomTableStyle: (name: string, colors: TableStyleColors) => CustomTableStyle;
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+export declare const getTableStyleColors: (style: CustomTableStyle, theme: SpreadsheetTheme) => TableStyleColors;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+export declare const getTableStyleNameError: (name: string, existingNames: readonly string[], currentName?: string) => string | undefined;
+export type TableStyleEditorProps = {
+    /** The custom style being modified; omit to create a new one. */
+    style?: CustomTableStyle;
+    /** The name a new style starts with (ignored when `style` is given). */
+    defaultName?: string;
+    theme: SpreadsheetTheme;
+    /** Names of the workbook's custom styles, for the duplicate-name check. */
+    existingNames?: readonly string[];
+    /** Create (or, when `style` is given, save) — receives the style the picks produce. */
+    onSubmit(style: CustomTableStyle): void;
+    onCancel(): void;
+    /** Offered as "Delete style" while editing; the footer omits it when absent. */
+    onDelete?(style: CustomTableStyle): void;
+    className?: string;
+};
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+export declare const TableStyleEditor: ({ style, defaultName, theme, existingNames, onSubmit, onCancel, onDelete, className, }: TableStyleEditorProps) => React.JSX.Element;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+export declare const TableStylePreviewCard: ({ rowProperties, theme, }: {
+    rowProperties: Maybe<BandingProperties>;
+    theme: SpreadsheetTheme;
+}) => React.JSX.Element;
+//# sourceMappingURL=table-style-editor.d.ts.map

package/dist/esm/components/toolbar/table-style-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-style-editor.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-editor.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EACV,iBAAiB,EAEjB,gBAAgB,EAChB,KAAK,EACN,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;EAW/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhF,oFAAoF;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE7E,iGAAiG;AACjG,eAAO,MAAM,0BAA0B,EAAE,gBAIxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ,gBAAgB,KACvB,gBAUF,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,gBAAgB,EACvB,OAAO,gBAAgB,KACtB,gBAWF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,MAAM,MAAM,EACZ,eAAe,SAAS,MAAM,EAAE,EAChC,cAAc,MAAM,KACnB,MAAM,GAAG,SAaX,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACxC,QAAQ,IAAI,IAAI,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,wFAS9B,qBAAqB,sBAuIvB,CAAC;AAkEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,2BAGnC;IACD,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACxC,KAAK,EAAE,gBAAgB,CAAC;CACzB,sBA2EA,CAAC"}

package/dist/esm/components/toolbar/table-style-editor.js

@@ -0,0 +1,189 @@
+import { ChevronDownIcon } from "@rowsncolumns/icons";
+import { Button, cn, Input, Popover, PopoverContent, PopoverTrigger, Separator, } from "@rowsncolumns/ui";
+import { getContrastColor } from "@rowsncolumns/utils";
+import React, { useId, useMemo, useState } from "react";
+import { parseTintedColor } from "../../api/banded-ranges";
+import { getStringifiedColor } from "../../themes";
+import { ColorSelector } from "./color-selector";
+/**
+ * The style elements a custom table style can colour — the `rowProperties` fields the grid's
+ * banding resolves (`api/banded-ranges.ts`), in the order of Excel's New Table Style dialog.
+ * The first three are what the gallery swatches show and what every created style carries; the
+ * rest are only written when the user picks a colour for them.
+ */
+export const TABLE_STYLE_ELEMENTS = [
+    { key: "header", label: "Header row", property: "headerColor" },
+    { key: "firstBand", label: "First row stripe", property: "firstBandColor" },
+    { key: "secondBand", label: "Second row stripe", property: "secondBandColor" },
+    { key: "firstColumn", label: "First column", property: "firstColumnColor" },
+    { key: "lastColumn", label: "Last column", property: "lastColumnColor" },
+    { key: "totalRow", label: "Total row", property: "totalRowColor" },
+];
+/** The colours a fresh style starts from (the default palette's accent 1 and its light tint). */
+export const DEFAULT_TABLE_STYLE_COLORS = {
+    header: "#4472c4",
+    firstBand: "#b4c6e7",
+    secondBand: "#ffffff",
+};
+/**
+ * The banding a custom table style paints from its element colours. Header and the two stripes
+ * are always present (unset ones stay unpainted); the optional elements are written only when
+ * coloured, so a style that only picks the first three keeps its historical shape.
+ */
+export const buildCustomTableStyle = (name, colors) => {
+    const rowProperties = {
+        headerColor: colors.header,
+        firstBandColor: colors.firstBand,
+        secondBandColor: colors.secondBand,
+    };
+    if (colors.firstColumn)
+        rowProperties.firstColumnColor = colors.firstColumn;
+    if (colors.lastColumn)
+        rowProperties.lastColumnColor = colors.lastColumn;
+    if (colors.totalRow)
+        rowProperties.totalRowColor = colors.totalRow;
+    return { name, bandedRange: { rowProperties } };
+};
+/** The element colours of an existing custom style (theme colours resolved to hex). */
+export const getTableStyleColors = (style, theme) => {
+    const rowProperties = style.bandedRange.rowProperties ?? {};
+    const colors = {};
+    for (const { key, property } of TABLE_STYLE_ELEMENTS) {
+        const color = getStringifiedColor(parseTintedColor(rowProperties[property]), theme);
+        if (color)
+            colors[key] = color;
+    }
+    return colors;
+};
+const BUILT_IN_STYLE_NAME = /^TableStyle(Light|Medium|Dark)\d+$/i;
+/**
+ * Why a style name cannot be used, or `undefined` when it can: empty, a built-in style's name
+ * (the gallery tells the two apart by name), or another custom style's name (case-insensitive,
+ * like Excel). `currentName` is the style being edited, which may keep its own name.
+ */
+export const getTableStyleNameError = (name, existingNames, currentName) => {
+    const trimmed = name.trim();
+    if (!trimmed)
+        return "Enter a name for the style.";
+    if (BUILT_IN_STYLE_NAME.test(trimmed)) {
+        return "That name belongs to a built-in style.";
+    }
+    const lower = trimmed.toLowerCase();
+    const taken = existingNames.some((existing) => existing.toLowerCase() === lower &&
+        existing.toLowerCase() !== currentName?.toLowerCase());
+    return taken ? `A table style named “${trimmed}” already exists.` : undefined;
+};
+/**
+ * Excel's New Table Style / Modify Table Style dialog, laid out for the Format as Table gallery:
+ * name row, the table elements with a colour button each (the toolbar's colour popover), a live
+ * preview of the table the picks produce, and an Excel-ordered footer.
+ */
+export const TableStyleEditor = ({ style, defaultName = "", theme, existingNames = [], onSubmit, onCancel, onDelete, className, }) => {
+    const isEditing = !!style;
+    const nameId = useId();
+    const [name, setName] = useState(style?.name ?? defaultName);
+    const [colors, setColors] = useState(() => style ? getTableStyleColors(style, theme) : DEFAULT_TABLE_STYLE_COLORS);
+    const nameError = getTableStyleNameError(name, existingNames, style?.name);
+    const preview = useMemo(() => buildCustomTableStyle(name.trim(), colors), [name, colors]);
+    const setColor = (key, color) => setColors((prev) => ({ ...prev, [key]: color }));
+    const hasAnyColor = TABLE_STYLE_ELEMENTS.some(({ key }) => colors[key]);
+    return (React.createElement("form", { "data-testid": "table-style-editor", "aria-label": isEditing ? "Edit table style" : "New table style", className: cn("m-0 p-2 flex flex-col gap-3 font-system text-xs", className), 
+        // The gallery is a Radix menu: keep typing in the fields from driving its typeahead.
+        onKeyDown: (event) => event.stopPropagation(), onSubmit: (event) => {
+            event.preventDefault();
+            if (!nameError) {
+                onSubmit(preview);
+            }
+        } },
+        React.createElement("div", { className: "font-medium text-sm" }, isEditing ? "Edit table style" : "New table style"),
+        React.createElement("div", { className: "grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-x-3 gap-y-1" },
+            React.createElement("label", { htmlFor: nameId, className: "truncate whitespace-nowrap" }, "Name"),
+            React.createElement(Input, { id: nameId, value: name, onChange: (event) => setName(event.target.value), autoComplete: "off", "aria-invalid": nameError ? true : undefined, "aria-describedby": nameError ? `${nameId}-error` : undefined, className: "text-xs" }),
+            nameError ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { "aria-hidden": "true" }),
+                React.createElement("p", { id: `${nameId}-error`, role: "alert", className: "m-0 text-rnc-destructive" }, nameError))) : null),
+        React.createElement("div", { className: "flex items-start gap-4" },
+            React.createElement("div", { role: "group", "aria-label": "Table elements", className: "flex-1 min-w-0 flex flex-col gap-1.5" },
+                React.createElement("div", { className: "text-rnc-muted-foreground" }, "Table element"),
+                TABLE_STYLE_ELEMENTS.map(({ key, label }) => (React.createElement("div", { key: key, className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 h-7" },
+                    React.createElement("span", { className: "truncate whitespace-nowrap", title: label }, label),
+                    React.createElement(ElementColorButton, { label: label, color: colors[key], theme: theme, onChange: (color) => setColor(key, color) }))))),
+            React.createElement("div", { className: "w-[180px] shrink-0 flex flex-col gap-1.5" },
+                React.createElement("div", { className: "text-rnc-muted-foreground" }, "Preview"),
+                React.createElement(TableStylePreviewCard, { rowProperties: preview.bandedRange.rowProperties, theme: theme }),
+                React.createElement(Button, { type: "button", variant: "link", size: "xs", className: "self-start no-underline hover:underline", disabled: !hasAnyColor, onClick: () => setColors({}) }, "Clear all colors"))),
+        React.createElement(Separator, null),
+        React.createElement("div", { className: "flex items-center gap-2" },
+            isEditing && onDelete ? (React.createElement(Button, { type: "button", variant: "ghost", size: "xs", className: "text-rnc-destructive hover:text-rnc-destructive", onClick: () => onDelete(style) }, "Delete style")) : null,
+            React.createElement("div", { className: "ml-auto flex items-center gap-2" },
+                React.createElement(Button, { type: "button", variant: "ghost", size: "xs", onClick: onCancel }, "Cancel"),
+                React.createElement(Button, { type: "submit", variant: "primary", size: "xs", disabled: !!nameError }, isEditing ? "Save" : "Create")))));
+};
+/** "No colour" swatch: a red diagonal on the popover background, as the toolbar's fill button. */
+const NO_COLOR_BACKGROUND = "linear-gradient(to top right, transparent 44%, #d32f2f 44%, #d32f2f 56%, transparent 56%)";
+/**
+ * One element's colour: a swatch button (current colour + chevron) opening the shared colour
+ * popover the toolbar's fill / text colour buttons use (theme colours, standard colours, custom,
+ * and "No color").
+ */
+const ElementColorButton = ({ label, color, theme, onChange, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { type: "button", variant: "outline", size: "xs", "aria-label": `${label} color: ${color ? color.toUpperCase() : "No color"}`, "aria-haspopup": "dialog", "aria-expanded": isOpen, className: "h-7 w-14 px-1 py-0 gap-1 justify-between rounded-sm" },
+                React.createElement("span", { "data-testid": "element-color-swatch", "aria-hidden": "true", className: "block w-5 h-5 rounded-sm border border-solid border-rnc-border", style: color
+                        ? { backgroundColor: color }
+                        : { backgroundImage: NO_COLOR_BACKGROUND } }),
+                React.createElement(ChevronDownIcon, { className: "w-3 h-3 text-rnc-muted-foreground" }))),
+        React.createElement(PopoverContent, { align: "end" },
+            React.createElement(ColorSelector, { color: color, theme: theme, resetButtonTitle: "No color", onChange: (next) => {
+                    onChange(next ? getStringifiedColor(next, theme) : undefined);
+                    setIsOpen(false);
+                } }))));
+};
+const PREVIEW_COLUMNS = 5;
+const PREVIEW_BODY_ROWS = 4;
+/**
+ * The table a style paints: a header row over four banded rows, with the first / last column and
+ * total row emphasis when the style colours them. Uses the grid's banding rules
+ * (`api/banded-ranges.ts`): the first body row is the first stripe, the last body row is the
+ * total row, and an edge column's colour outranks the stripe under it.
+ */
+export const TableStylePreviewCard = ({ rowProperties, theme, }) => {
+    const resolve = (color) => getStringifiedColor(parseTintedColor(color), theme) ?? undefined;
+    const headerColor = resolve(rowProperties?.headerColor);
+    const firstBand = resolve(rowProperties?.firstBandColor);
+    const secondBand = resolve(rowProperties?.secondBandColor);
+    const firstColumn = resolve(rowProperties?.firstColumnColor);
+    const lastColumn = resolve(rowProperties?.lastColumnColor);
+    const totalRow = resolve(rowProperties?.totalRowColor);
+    const dark = getStringifiedColor({ theme: 1 }, theme);
+    const light = getStringifiedColor({ theme: 0 }, theme);
+    const barColor = (background) => background ? getContrastColor(background, dark, light) : undefined;
+    const cellClass = "table-cell border border-solid border-rnc-border/70 align-middle px-1.5";
+    return (React.createElement("div", { "data-testid": "table-style-preview", className: "table border-collapse table-fixed w-full h-[108px] rounded-sm bg-rnc-popover" },
+        React.createElement("div", { className: "table-row", "data-testid": "preview-header-row" }, Array.from({ length: PREVIEW_COLUMNS }, (_, column) => (React.createElement("div", { key: column, className: cellClass, style: { backgroundColor: headerColor } },
+            React.createElement("span", { className: "block h-1.5 w-3/4 rounded-full", style: {
+                    backgroundColor: barColor(headerColor) ?? dark,
+                    opacity: headerColor ? 0.9 : 0.6,
+                } }))))),
+        Array.from({ length: PREVIEW_BODY_ROWS }, (_, row) => {
+            const isTotalRow = row === PREVIEW_BODY_ROWS - 1;
+            const stripe = row % 2 === 0 ? firstBand : secondBand;
+            const rowBackground = isTotalRow ? totalRow ?? stripe : stripe;
+            return (React.createElement("div", { className: "table-row", key: row, "data-testid": "preview-body-row" }, Array.from({ length: PREVIEW_COLUMNS }, (_, column) => {
+                const edge = column === 0
+                    ? firstColumn
+                    : column === PREVIEW_COLUMNS - 1
+                        ? lastColumn
+                        : undefined;
+                const background = edge ?? rowBackground;
+                return (React.createElement("div", { key: column, className: cellClass, style: { backgroundColor: background } },
+                    React.createElement("span", { className: "block h-1 rounded-full", style: {
+                            width: `${55 + ((row * 3 + column * 5) % 4) * 10}%`,
+                            backgroundColor: barColor(background) ?? dark,
+                            opacity: 0.35,
+                        } })));
+            })));
+        })));
+};

package/dist/esm/components/toolbar/table-style-selector.d.ts

@@ -2,6 +2,7 @@ import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
 import { findMatchingBandProperty } from "@rowsncolumns/utils";
 import React from "react";
 export { findMatchingBandProperty };
+export { buildCustomTableStyle } from "./table-style-editor";
 import type { BandedDefinition, CustomTableStyle, TableStylePreview, TableTheme, TableView } from "../../types";
 import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
 export type TableStyleSelectorProps = {
@@ -26,6 +27,11 @@ export type TableStyleSelectorProps = {
      * without it the selector keeps the styles it created for the session.
      */
     onCreateCustomTableStyle?(style: CustomTableStyle): void;
+    /**
+     * Called with a host-kept custom style the user deletes from the style editor (right-click a
+     * Custom swatch → Delete style); without it host-kept styles cannot be deleted from the gallery.
+     */
+    onDeleteCustomTableStyle?(style: CustomTableStyle): void;
 };
 /** Excel's Table Style Options (Table Design tab), in ribbon order. */
 declare const STYLE_OPTIONS: Array<{
@@ -39,12 +45,6 @@ declare const STYLE_OPTIONS: Array<{
  * does); a custom style has no palette to re-resolve from and keeps its banding.
  */
 export declare const getStyleOptionUpdate: (table: TableView, key: (typeof STYLE_OPTIONS)[number]["key"], checked: boolean) => Partial<TableView>;
-/** The banding a New Table Style paints from its three colours (unset elements stay unpainted). */
-export declare const buildCustomTableStyle: (name: string, colors: {
-    header?: string;
-    firstBand?: string;
-    secondBand?: string;
-}) => CustomTableStyle;
 type TableStyleList = [
     theme: TableTheme,
     firtBandStripeTint: number | undefined,
@@ -57,5 +57,5 @@ type TableStyleList = [
  * importers and both engines resolve a theme name into) plus a per-swatch preview style.
  */
 export declare const getTableBorderStyles: (showRowStripes: boolean | undefined, showColumnStripes: boolean | undefined, theme?: SpreadsheetTheme) => Map<string, TableStyleList[]>;
-export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, onDeleteCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
 //# sourceMappingURL=table-style-selector.d.ts.map

package/dist/esm/components/toolbar/table-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBvE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAKpC,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAsBF,mGAAmG;AACnG,eAAO,MAAM,qBAAqB,GAChC,MAAM,MAAM,EACZ,QAAQ;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,KACnE,gBASD,CAAC;AAEH,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,wMAa1B,uBAAuB,uBAoS3B,CAAC"}
+{"version":3,"file":"table-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-style-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAevE,OAAO,EACL,wBAAwB,EAGzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,wBAAwB,EAAE,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,KAAK,EACV,gBAAgB,EAEhB,gBAAgB,EAEhB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EACxB,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,GAC/B,IAAI,CAAC;IACR,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9D,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzD;;;OAGG;IACH,wBAAwB,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,uEAAuE;AACvE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC;IACzB,GAAG,EACC,WAAW,GACX,UAAU,GACV,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAQA,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,SAAS,EAChB,KAAK,CAAC,OAAO,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,EAC1C,SAAS,OAAO,KACf,OAAO,CAAC,SAAS,CAqBnB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS;IACtC,cAAc,EAAE,MAAM,GAAG,SAAS;IAClC,cAAc,EAAE,gBAAgB,GAAG,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAKF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAoBzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kOAc1B,uBAAuB,uBA+W3B,CAAC"}