@rowsncolumns/spreadsheet 10.3.1 → 10.4.1

package/dist/cjs/components/toolbar/sparkline-actions.js

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparklineActions = exports.SPARKLINE_TYPES = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var selections_1 = require("../../api/selections");
+var atoms_1 = require("../../atoms");
+var sparkline_dialog_atom_1 = require("../../atoms/sparkline-dialog.atom");
+var themes_1 = require("../../themes");
+exports.SPARKLINE_TYPES = [
+    { value: "line", label: "Line" },
+    { value: "column", label: "Column" },
+    { value: "winloss", label: "Win/Loss" },
+];
+/** Excel's Show group: each point toggle and the colour option it highlights with. */
+var POINT_TOGGLES = [
+    { key: "high", colorKey: "colorHigh", label: "High Point" },
+    { key: "low", colorKey: "colorLow", label: "Low Point" },
+    { key: "negative", colorKey: "colorNegative", label: "Negative Points" },
+    { key: "first", colorKey: "colorFirst", label: "First Point" },
+    { key: "last", colorKey: "colorLast", label: "Last Point" },
+    { key: "markers", colorKey: "colorMarkers", label: "Markers" },
+];
+var EMPTY_CELLS = [
+    { value: undefined, label: "Gaps" },
+    { value: "zero", label: "Zero" },
+    { value: "span", label: "Connect data points with line" },
+];
+var AXIS_TYPES = [
+    { value: "individual", label: "Automatic for Each Sparkline" },
+    { value: "group", label: "Same for All Sparklines" },
+];
+var SparklineIcon = function () { return (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+    react_1.default.createElement("polyline", { points: "1,12 4,7 7,9 10,3 13,8 15,5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))); };
+var Check = function () { return (react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+    react_1.default.createElement(icons_1.CheckIcon, null))); };
+/**
+ * Excel's Sparklines ribbon: Insert → Sparklines (Line / Column / Win-Loss → the Create
+ * Sparklines dialog) and, when the active cell is in a sparkline group, the Sparkline Design tab —
+ * Edit Data & Location, Type, Show (points + markers), Sparkline / marker colours, Axis (show
+ * axis, right-to-left, hidden data, empty cells, vertical min/max) and Group / Clear.
+ */
+var SparklineActions = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, getSparklineGroup = _a.getSparklineGroup, onUpdateSparklineGroup = _a.onUpdateSparklineGroup, onDeleteSparklineGroup = _a.onDeleteSparklineGroup, onClearSparklines = _a.onClearSparklines, onGroupSparklines = _a.onGroupSparklines, readonly = _a.readonly;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var openDialog = (0, sparkline_dialog_atom_1.useOpenSparklineDialog)();
+    var shouldFocusSheetRef = (0, react_1.useRef)(true);
+    var group = (0, react_1.useMemo)(function () { return getSparklineGroup === null || getSparklineGroup === void 0 ? void 0 : getSparklineGroup(sheetId, activeCell); }, [getSparklineGroup, sheetId, activeCell]);
+    var selectedCells = (0, react_1.useMemo)(function () {
+        var e_1, _a, e_2, _b;
+        var cells = [];
+        try {
+            for (var _c = tslib_1.__values((0, selections_1.getUserSelections)(activeCell, selections)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var selection = _d.value;
+                try {
+                    for (var _e = (e_2 = void 0, tslib_1.__values((0, utils_1.iterateCellsInRange)(selection.range))), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var _g = tslib_1.__read(_f.value, 2), rowIndex = _g[0], columnIndex = _g[1];
+                        cells.push({ rowIndex: rowIndex, columnIndex: columnIndex });
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return cells;
+    }, [activeCell, selections]);
+    var update = (0, react_1.useCallback)(function (patch) {
+        if (group)
+            onUpdateSparklineGroup === null || onUpdateSparklineGroup === void 0 ? void 0 : onUpdateSparklineGroup(group, patch);
+    }, [group, onUpdateSparklineGroup]);
+    var setOption = (0, react_1.useCallback)(function (key, value) {
+        if (!group)
+            return;
+        var options = tslib_1.__assign({}, group.options);
+        if (value === undefined || value === false) {
+            delete options[key];
+        }
+        else {
+            options[key] = value;
+        }
+        update({ options: options });
+    }, [group, update]);
+    var colorSubmenu = function (label, key) { return (react_1.default.createElement(ui_1.DropdownMenuSub, null,
+        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+            label,
+            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+            react_1.default.createElement("div", { className: "p-2 flex flex-col gap-2" },
+                react_1.default.createElement(ui_1.ColorPicker, { colors: themes_1.STANDARD_COLORS, value: group === null || group === void 0 ? void 0 : group.options[key], onChange: function (color) { return setOption(key, color); } }),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onSelect: function () { return setOption(key, undefined); } }, "Automatic"))))); };
+    var axisBoundSubmenu = function (label, typeKey, valueKey) {
+        var _a, _b;
+        var current = (_a = group === null || group === void 0 ? void 0 : group.options[typeKey]) !== null && _a !== void 0 ? _a : ((group === null || group === void 0 ? void 0 : group.options[valueKey]) != null ? "custom" : "individual");
+        return (react_1.default.createElement(ui_1.DropdownMenuSub, null,
+            react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                label,
+                react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                    react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+            react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                AXIS_TYPES.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: entry.value, checked: current === entry.value, onSelect: function () {
+                        if (!group)
+                            return;
+                        var options = tslib_1.__assign({}, group.options);
+                        delete options[valueKey];
+                        if (entry.value === "individual")
+                            delete options[typeKey];
+                        else
+                            options[typeKey] = entry.value;
+                        update({ options: options });
+                    } },
+                    react_1.default.createElement(Check, null),
+                    entry.label)); }),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onSelect: function (event) { return event.preventDefault(); }, className: "flex items-center gap-2" },
+                    current === "custom" ? react_1.default.createElement(Check, null) : null,
+                    react_1.default.createElement("span", null, "Custom Value"),
+                    react_1.default.createElement("input", { type: "number", "aria-label": "".concat(label, " custom value"), className: "w-[70px] text-xs border border-rnc-border rounded px-1 bg-transparent", defaultValue: (_b = group === null || group === void 0 ? void 0 : group.options[valueKey]) !== null && _b !== void 0 ? _b : "", onKeyDown: function (event) {
+                            var _a;
+                            event.stopPropagation();
+                            if (event.key !== "Enter" || !group)
+                                return;
+                            var value = Number(event.target.value);
+                            if (!Number.isFinite(value))
+                                return;
+                            update({
+                                options: tslib_1.__assign(tslib_1.__assign({}, group.options), (_a = {}, _a[typeKey] = "custom", _a[valueKey] = value, _a)),
+                            });
+                        } })))));
+    };
+    var hasGroup = !!group;
+    var sparklineCellsSelected = hasGroup &&
+        selectedCells.filter(function (cell) { return getSparklineGroup === null || getSparklineGroup === void 0 ? void 0 : getSparklineGroup(sheetId, cell); }).length > 1;
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.Stack, { className: "shrink-0" },
+            react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: hasGroup ? "Sparkline Design" : "Insert sparklines", className: "gap-1", disabled: readonly },
+                    react_1.default.createElement(SparklineIcon, null),
+                    react_1.default.createElement("span", { className: "text-xs" }, "Sparklines"),
+                    react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", onCloseAutoFocus: function (event) {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current)
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        shouldFocusSheetRef.current = true;
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                            "Insert",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, exports.SPARKLINE_TYPES.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: entry.value, onSelect: function () {
+                                shouldFocusSheetRef.current = false;
+                                openDialog({
+                                    mode: "create",
+                                    sheetId: sheetId,
+                                    type: entry.value,
+                                    activeCell: activeCell,
+                                    selections: selections,
+                                });
+                            } }, entry.label)); }))),
+                    react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !hasGroup || readonly, onSelect: function () {
+                            if (!group)
+                                return;
+                            shouldFocusSheetRef.current = false;
+                            openDialog({ mode: "edit", group: group });
+                        } }, "Edit Group Location & Data\u2026"),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Type",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, exports.SPARKLINE_TYPES.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: entry.value, checked: (group === null || group === void 0 ? void 0 : group.type) === entry.value, onSelect: function () { return update({ type: entry.value }); } },
+                            react_1.default.createElement(Check, null),
+                            entry.label)); }))),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Show",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, POINT_TOGGLES.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: entry.key, checked: !!(group === null || group === void 0 ? void 0 : group.options[entry.key]), onSelect: function () { return setOption(entry.key, !(group === null || group === void 0 ? void 0 : group.options[entry.key])); } },
+                            react_1.default.createElement(Check, null),
+                            entry.label)); }))),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Style",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            colorSubmenu("Sparkline Color", "color"),
+                            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Marker Color",
+                                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, POINT_TOGGLES.map(function (entry) {
+                                    return colorSubmenu(entry.label, entry.colorKey);
+                                }))),
+                            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Weight",
+                                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, [0.25, 0.5, 0.75, 1, 1.5, 2.25, 3, 4.5, 6].map(function (weight) {
+                                    var _a;
+                                    return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: weight, checked: ((_a = group === null || group === void 0 ? void 0 : group.options.lineweight) !== null && _a !== void 0 ? _a : 1) === weight, onSelect: function () {
+                                            return setOption("lineweight", weight === 1 ? undefined : weight);
+                                        } },
+                                        react_1.default.createElement(Check, null),
+                                        weight,
+                                        " pt"));
+                                }))))),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Axis",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: !!(group === null || group === void 0 ? void 0 : group.options.axis), onSelect: function () { return setOption("axis", !(group === null || group === void 0 ? void 0 : group.options.axis)); } },
+                                react_1.default.createElement(Check, null),
+                                "Show Axis"),
+                            react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: !!(group === null || group === void 0 ? void 0 : group.options.rtl), onSelect: function () { return setOption("rtl", !(group === null || group === void 0 ? void 0 : group.options.rtl)); } },
+                                react_1.default.createElement(Check, null),
+                                "Plot Data Right-to-Left"),
+                            react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: !!(group === null || group === void 0 ? void 0 : group.options.displayhidden), onSelect: function () { return setOption("displayhidden", !(group === null || group === void 0 ? void 0 : group.options.displayhidden)); } },
+                                react_1.default.createElement(Check, null),
+                                "Show Data in Hidden Rows and Columns"),
+                            react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                                    "Show Empty Cells As",
+                                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, EMPTY_CELLS.map(function (entry) { return (react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { key: entry.label, checked: entry.value === undefined
+                                        ? (group === null || group === void 0 ? void 0 : group.options.emptycells) === undefined ||
+                                            (group === null || group === void 0 ? void 0 : group.options.emptycells) === "gap"
+                                        : (group === null || group === void 0 ? void 0 : group.options.emptycells) === entry.value, onSelect: function () { return setOption("emptycells", entry.value); } },
+                                    react_1.default.createElement(Check, null),
+                                    entry.label)); }))),
+                            axisBoundSubmenu("Vertical Axis Minimum", "minaxistype", "min"),
+                            axisBoundSubmenu("Vertical Axis Maximum", "maxaxistype", "max"))),
+                    react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !sparklineCellsSelected || readonly, onSelect: function () { return onGroupSparklines === null || onGroupSparklines === void 0 ? void 0 : onGroupSparklines(sheetId, activeCell, selectedCells); } }, "Group"),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: !hasGroup || readonly },
+                            "Clear",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                            react_1.default.createElement(ui_1.DropdownMenuItem, { onSelect: function () { return onClearSparklines === null || onClearSparklines === void 0 ? void 0 : onClearSparklines(sheetId, selectedCells); } }, "Clear Selected Sparklines"),
+                            react_1.default.createElement(ui_1.DropdownMenuItem, { onSelect: function () {
+                                    if (group)
+                                        onDeleteSparklineGroup === null || onDeleteSparklineGroup === void 0 ? void 0 : onDeleteSparklineGroup(group);
+                                } }, "Clear Selected Sparkline Groups"))))))));
+};
+exports.SparklineActions = SparklineActions;

package/dist/cjs/components/toolbar/table-actions.d.ts

@@ -9,7 +9,15 @@ type TableActionsProps = {
     activeCell: CellInterface;
     onRequestEditTable?(table: TableView): void;
     onCreateTable?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], tableProperties?: Partial<TableView>): void;
+    /** Opens the Create Table dialog; when absent, "Insert table" calls `onCreateTable` directly. */
+    onRequestCreateTable?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    /** "Convert to range" — same path as the context menu's item. */
+    onRemoveTable?(table: TableView): void;
+    /** "Resize table" — opens Excel's Resize Table dialog for the active table. */
+    onRequestResizeTable?(table: TableView): void;
+    /** "Insert slicer" — opens Excel's Insert Slicers dialog for the active table. */
+    onRequestInsertSlicer?(table: TableView): void;
 };
-export declare const TableActions: ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, }: TableActionsProps) => React.JSX.Element;
+export declare const TableActions: ({ tables, sheetId, activeCell, selections, onRequestEditTable, onCreateTable, onRequestCreateTable, onRemoveTable, onRequestResizeTable, onRequestInsertSlicer, }: TableActionsProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=table-actions.d.ts.map

package/dist/cjs/components/toolbar/table-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-actions.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYvE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,eAAe,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACnC,IAAI,CAAC;CACT,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iFAO1B,iBAAiB,sBA6DnB,CAAC"}
+{"version":3,"file":"table-actions.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAYvE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,UAAU,EAAE,aAAa,CAAC;IAC1B,kBAAkB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5C,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,eAAe,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACnC,IAAI,CAAC;IACR,iGAAiG;IACjG,oBAAoB,CAAC,CACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,iEAAiE;IACjE,aAAa,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACvC,+EAA+E;IAC/E,oBAAoB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9C,kFAAkF;IAClF,qBAAqB,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,mKAW1B,iBAAiB,sBAmFnB,CAAC"}

package/dist/cjs/components/toolbar/table-actions.js

@@ -8,7 +8,7 @@ var ui_1 = require("@rowsncolumns/ui");
 var react_1 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../../atoms");
 var TableActions = function (_a) {
-    var tables = _a.tables, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, onRequestEditTable = _a.onRequestEditTable, onCreateTable = _a.onCreateTable;
+    var tables = _a.tables, sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, onRequestEditTable = _a.onRequestEditTable, onCreateTable = _a.onCreateTable, onRequestCreateTable = _a.onRequestCreateTable, onRemoveTable = _a.onRemoveTable, onRequestResizeTable = _a.onRequestResizeTable, onRequestInsertSlicer = _a.onRequestInsertSlicer;
     var focusSheet = (0, atoms_1.useFocusSheet)();
     var table = (0, react_1.useMemo)(function () {
         return tables === null || tables === void 0 ? void 0 : tables.find(function (table) {
@@ -17,13 +17,13 @@ var TableActions = function (_a) {
         });
     }, [tables, sheetId, activeCell]);
     var disableMenu = !table;
-    var onConvertToRange = function () {
-        // Calling this will remove the table if present
-        onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections);
-    };
     return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
         react_1.default.createElement(ui_1.Stack, { className: "shrink-0" },
-            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Convert selection to a table", className: "gap-1", onClick: function () { return onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections); } },
+            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Convert selection to a table", className: "gap-1", onClick: function () {
+                    return onRequestCreateTable
+                        ? onRequestCreateTable(sheetId, activeCell, selections)
+                        : onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections);
+                } },
                 react_1.default.createElement(icons_1.TableIcon, null),
                 react_1.default.createElement("span", { className: "text-xs" }, "Insert table")),
             react_1.default.createElement(ui_1.DropdownMenuTrigger, { disabled: disableMenu, asChild: true },
@@ -37,9 +37,19 @@ var TableActions = function (_a) {
                                 focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
                             }
                         } }, "Edit table"),
+                    onRequestResizeTable ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            if (table) {
+                                onRequestResizeTable(table);
+                            }
+                        } }, "Resize table")) : null,
+                    onRequestInsertSlicer ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            if (table) {
+                                onRequestInsertSlicer(table);
+                            }
+                        } }, "Insert slicer")) : null,
                     react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
                             if (table) {
-                                onConvertToRange();
+                                onRemoveTable === null || onRemoveTable === void 0 ? void 0 : onRemoveTable(table);
                                 focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
                             }
                         } }, "Convert to range"))))));

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

@@ -2,7 +2,7 @@ import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
 import { findMatchingBandProperty } from "@rowsncolumns/utils";
 import React from "react";
 export { findMatchingBandProperty };
-import type { BandedDefinition, TableTheme, TableView } from "../../types";
+import type { BandedDefinition, CustomTableStyle, TableStylePreview, TableTheme, TableView } from "../../types";
 import type { CanvasGridProps, SelectionAttributes, SpreadsheetTheme } from "../canvas-grid/typings";
 export type TableStyleSelectorProps = {
     tables?: TableView[];
@@ -12,7 +12,39 @@ export type TableStyleSelectorProps = {
     activeCell: CellInterface;
     onUpdateTable?(sheetId: number, tableId: TableView["id"], updatedTable: Partial<TableView>): void;
     onCreateTable: CanvasGridProps["onCreateTable"];
+    /** Format as Table on a plain range opens the Create Table dialog with the picked style. */
+    onRequestCreateTable?: CanvasGridProps["onRequestCreateTable"];
+    /**
+     * Live preview: the hovered swatch's style is painted over the active table while the pointer
+     * rests on it (`null` reverts). UI-only — nothing is written to the table or its history.
+     */
+    onPreviewTableStyle?(preview: TableStylePreview | null): void;
+    /** Styles created with "New Table Style…", offered in the gallery's Custom section. */
+    customTableStyles?: CustomTableStyle[];
+    /**
+     * Called with the style "New Table Style…" creates so the host can keep it with the workbook;
+     * without it the selector keeps the styles it created for the session.
+     */
+    onCreateCustomTableStyle?(style: CustomTableStyle): void;
 };
+/** Excel's Table Style Options (Table Design tab), in ribbon order. */
+declare const STYLE_OPTIONS: Array<{
+    key: "headerRow" | "totalRow" | "showRowStripes" | "showColumnStripes" | "showFirstColumn" | "showLastColumn" | "filterButton";
+    label: string;
+    defaultValue: boolean;
+}>;
+/**
+ * The table update a Style Options toggle produces. Flipping Banded Rows / Banded Columns on a
+ * built-in style re-resolves the banding for the new stripe toggles (what the Edit Table dialog
+ * 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,
@@ -20,6 +52,10 @@ type TableStyleList = [
     bandDefinition: BandedDefinition | undefined,
     style?: React.CSSProperties
 ];
+/**
+ * The gallery's table styles: the shared palette (`@rowsncolumns/utils` — the same banding the
+ * 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, }: TableStyleSelectorProps) => React.JSX.Element>;
+export declare const TableStyleSelector: React.MemoExoticComponent<({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, onRequestCreateTable, onPreviewTableStyle, customTableStyles, onCreateCustomTableStyle, }: TableStyleSelectorProps) => React.JSX.Element>;
 //# sourceMappingURL=table-style-selector.d.ts.map

package/dist/cjs/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;AAavE,OAAO,EAEL,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAMpC,OAAO,KAAK,EACV,gBAAgB,EAGhB,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;CACjD,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;AAIF,eAAO,MAAM,oBAAoB,GAC/B,gBAAgB,OAAO,GAAG,SAAS,EACnC,mBAAmB,OAAO,GAAG,SAAS,EACtC,QAAQ,gBAAgB,kCAiYzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gHAS1B,uBAAuB,uBAsI3B,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;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"}