@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/sort-range-dialog/index.js

@@ -0,0 +1,260 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortRangeDialogHost = exports.SortRangeDialog = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var sort_dialog_atom_1 = require("../../atoms/sort-dialog.atom");
+var CUSTOM_LIST_PREFIX = "custom:";
+var ColorSwatch = function (_a) {
+    var color = _a.color;
+    return (react_1.default.createElement("span", { className: "inline-block h-3.5 w-3.5 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }));
+};
+var IconSwatch = function (_a) {
+    var glyph = _a.glyph, color = _a.color;
+    return (react_1.default.createElement("span", { className: "inline-block h-3.5 w-3.5 leading-none text-center text-sm shrink-0", style: color ? { color: color } : undefined }, glyph));
+};
+var makeDefaultLevel = function (columns) {
+    var _a, _b;
+    return ({
+        dimensionIndex: (_b = (_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dimensionIndex) !== null && _b !== void 0 ? _b : 0,
+        sortBy: "value",
+        sortOrder: "ASCENDING",
+    });
+};
+var specToLevel = function (spec, customLists) {
+    var _a, _b, _c;
+    var sortBy = ((_a = spec.sortBy) !== null && _a !== void 0 ? _a : "value");
+    var customListIndex = spec.customList && spec.customList.length
+        ? customLists.findIndex(function (list) {
+            return list.length === spec.customList.length &&
+                list.every(function (v, i) { return v === spec.customList[i]; });
+        })
+        : -1;
+    return {
+        dimensionIndex: spec.dimensionIndex,
+        sortBy: sortBy,
+        sortOrder: spec.sortOrder,
+        sortColor: (_b = spec.sortColor) !== null && _b !== void 0 ? _b : undefined,
+        sortIcon: (_c = spec.sortIcon) !== null && _c !== void 0 ? _c : undefined,
+        customListIndex: customListIndex >= 0 ? customListIndex : undefined,
+    };
+};
+/**
+ * Custom multi-level sort dialog. Mirrors Excel's "Sort…" dialog and
+ * Google Sheets' "Sort range — advanced". Each row is a sort level:
+ * pick a column, what to sort on (value / cell color / font color /
+ * icon), and the direction (A→Z / Z→A) or — for color/icon — the
+ * swatch to surface. Levels apply as "then by" tiebreakers in order.
+ *
+ * UI-only: the dialog never mutates state. It emits the assembled
+ * `SortSpecs[]` via `onApply`; the host disambiguates table vs range and
+ * routes through its existing sort callbacks.
+ */
+exports.SortRangeDialog = (0, react_1.memo)(function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, columns = _a.columns, customLists = _a.customLists, initialSpecs = _a.initialSpecs, onApply = _a.onApply;
+    var lists = (0, react_1.useMemo)(function () { return customLists !== null && customLists !== void 0 ? customLists : []; }, [customLists]);
+    var _b = tslib_1.__read((0, react_1.useState)(function () {
+        return (initialSpecs === null || initialSpecs === void 0 ? void 0 : initialSpecs.length)
+            ? initialSpecs.map(function (spec) { return specToLevel(spec, lists); })
+            : [makeDefaultLevel(columns)];
+    }), 2), levels = _b[0], setLevels = _b[1];
+    // Re-seed when reopened with different columns / specs.
+    (0, react_1.useEffect)(function () {
+        if (open) {
+            setLevels((initialSpecs === null || initialSpecs === void 0 ? void 0 : initialSpecs.length)
+                ? initialSpecs.map(function (spec) { return specToLevel(spec, lists); })
+                : [makeDefaultLevel(columns)]);
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    var columnByIndex = (0, react_1.useMemo)(function () {
+        var e_1, _a;
+        var map = new Map();
+        try {
+            for (var columns_1 = tslib_1.__values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                var c = columns_1_1.value;
+                map.set(c.dimensionIndex, c);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return map;
+    }, [columns]);
+    var updateLevel = (0, react_1.useCallback)(function (rowIndex, patch) {
+        setLevels(function (prev) {
+            return prev.map(function (lvl, i) { return (i === rowIndex ? tslib_1.__assign(tslib_1.__assign({}, lvl), patch) : lvl); });
+        });
+    }, []);
+    var addLevel = (0, react_1.useCallback)(function () {
+        setLevels(function (prev) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prev), false), [makeDefaultLevel(columns)], false); });
+    }, [columns]);
+    var deleteLevel = (0, react_1.useCallback)(function (rowIndex) {
+        setLevels(function (prev) {
+            return prev.length > 1 ? prev.filter(function (_, i) { return i !== rowIndex; }) : prev;
+        });
+    }, []);
+    var moveLevel = (0, react_1.useCallback)(function (rowIndex, delta) {
+        setLevels(function (prev) {
+            var target = rowIndex + delta;
+            if (target < 0 || target >= prev.length)
+                return prev;
+            var next = prev.slice();
+            var _a = tslib_1.__read(next.splice(rowIndex, 1), 1), item = _a[0];
+            next.splice(target, 0, item);
+            return next;
+        });
+    }, []);
+    var commit = (0, react_1.useCallback)(function () {
+        var specs = levels.map(function (lvl) {
+            var spec = {
+                dimensionIndex: lvl.dimensionIndex,
+                sortOrder: lvl.sortOrder,
+                sortBy: lvl.sortBy,
+            };
+            if (lvl.sortBy === "cellColor" || lvl.sortBy === "fontColor") {
+                if (lvl.sortColor)
+                    spec.sortColor = lvl.sortColor;
+            }
+            else if (lvl.sortBy === "icon") {
+                if (lvl.sortIcon)
+                    spec.sortIcon = lvl.sortIcon;
+            }
+            else if (lvl.customListIndex != null &&
+                lists[lvl.customListIndex]) {
+                spec.customList = lists[lvl.customListIndex];
+            }
+            return spec;
+        });
+        onApply(specs);
+        onOpenChange(false);
+    }, [levels, lists, onApply, onOpenChange]);
+    return (react_1.default.createElement(ui_1.Dialog, { open: open, onOpenChange: onOpenChange },
+        react_1.default.createElement(ui_1.DialogContent, { className: "w-[640px] max-w-[92vw] pointer-events-auto" },
+            react_1.default.createElement(ui_1.DialogTitle, null, "Sort"),
+            react_1.default.createElement(ui_1.DialogCloseButton, { onClick: function () { return onOpenChange(false); } },
+                react_1.default.createElement(icons_1.Cross1Icon, null)),
+            react_1.default.createElement(ui_1.DialogBody, { className: "flex flex-col gap-3" },
+                react_1.default.createElement("div", { className: "flex flex-col gap-2" }, levels.map(function (lvl, rowIndex) {
+                    var _a, _b, _c, _d;
+                    var col = columnByIndex.get(lvl.dimensionIndex);
+                    var cellColors = (_a = col === null || col === void 0 ? void 0 : col.availableCellColors) !== null && _a !== void 0 ? _a : [];
+                    var fontColors = (_b = col === null || col === void 0 ? void 0 : col.availableFontColors) !== null && _b !== void 0 ? _b : [];
+                    var icons = (_c = col === null || col === void 0 ? void 0 : col.availableIcons) !== null && _c !== void 0 ? _c : [];
+                    var hasIcons = icons.length > 0;
+                    return (react_1.default.createElement("div", { key: rowIndex, className: "flex items-center gap-2 flex-wrap" },
+                        react_1.default.createElement("span", { className: "text-xs text-rnc-muted-foreground min-w-[48px]" }, rowIndex === 0 ? "Sort by" : "Then by"),
+                        react_1.default.createElement(ui_1.Select, { value: String(lvl.dimensionIndex), onValueChange: function (v) {
+                                return updateLevel(rowIndex, {
+                                    dimensionIndex: Number(v),
+                                    // Reset color/icon choices when column changes.
+                                    sortColor: undefined,
+                                    sortIcon: undefined,
+                                });
+                            } },
+                            react_1.default.createElement(ui_1.SelectTrigger, { className: "w-[160px]" },
+                                react_1.default.createElement(ui_1.SelectValue, { placeholder: "Column" })),
+                            react_1.default.createElement(ui_1.SelectPortal, null,
+                                react_1.default.createElement(ui_1.SelectContent, null, columns.map(function (c) { return (react_1.default.createElement(ui_1.SelectItem, { key: c.dimensionIndex, value: String(c.dimensionIndex) }, c.label)); })))),
+                        react_1.default.createElement(ui_1.Select, { value: lvl.customListIndex != null && lvl.sortBy === "value"
+                                ? "".concat(CUSTOM_LIST_PREFIX).concat(lvl.customListIndex)
+                                : lvl.sortBy, onValueChange: function (v) {
+                                if (v.startsWith(CUSTOM_LIST_PREFIX)) {
+                                    updateLevel(rowIndex, {
+                                        sortBy: "value",
+                                        customListIndex: Number(v.slice(CUSTOM_LIST_PREFIX.length)),
+                                    });
+                                }
+                                else {
+                                    updateLevel(rowIndex, {
+                                        sortBy: v,
+                                        customListIndex: undefined,
+                                    });
+                                }
+                            } },
+                            react_1.default.createElement(ui_1.SelectTrigger, { className: "w-[150px]" },
+                                react_1.default.createElement(ui_1.SelectValue, { placeholder: "Sort on" })),
+                            react_1.default.createElement(ui_1.SelectPortal, null,
+                                react_1.default.createElement(ui_1.SelectContent, null,
+                                    react_1.default.createElement(ui_1.SelectItem, { value: "value" }, "Values"),
+                                    cellColors.length ? (react_1.default.createElement(ui_1.SelectItem, { value: "cellColor" }, "Cell color")) : null,
+                                    fontColors.length ? (react_1.default.createElement(ui_1.SelectItem, { value: "fontColor" }, "Font color")) : null,
+                                    hasIcons ? (react_1.default.createElement(ui_1.SelectItem, { value: "icon" }, "Icon")) : null,
+                                    lists.map(function (list, i) { return (react_1.default.createElement(ui_1.SelectItem, { key: "custom-".concat(i), value: "".concat(CUSTOM_LIST_PREFIX).concat(i) }, "Custom: ".concat(list.slice(0, 3).join(", ")).concat(list.length > 3 ? "…" : ""))); })))),
+                        lvl.sortBy === "cellColor" ||
+                            lvl.sortBy === "fontColor" ? (react_1.default.createElement(ui_1.Select, { value: (_d = lvl.sortColor) !== null && _d !== void 0 ? _d : "", onValueChange: function (v) {
+                                return updateLevel(rowIndex, { sortColor: v });
+                            } },
+                            react_1.default.createElement(ui_1.SelectTrigger, { className: "w-[120px]" },
+                                react_1.default.createElement(ui_1.SelectValue, { placeholder: "Color" })),
+                            react_1.default.createElement(ui_1.SelectPortal, null,
+                                react_1.default.createElement(ui_1.SelectContent, null, (lvl.sortBy === "cellColor"
+                                    ? cellColors
+                                    : fontColors).map(function (color) { return (react_1.default.createElement(ui_1.SelectItem, { key: color, value: color },
+                                    react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                                        react_1.default.createElement(ColorSwatch, { color: color }),
+                                        color))); }))))) : lvl.sortBy === "icon" ? (react_1.default.createElement(ui_1.Select, { value: lvl.sortIcon
+                                ? "".concat(lvl.sortIcon.iconSet, ":").concat(lvl.sortIcon.iconId)
+                                : "", onValueChange: function (v) {
+                                var _a = tslib_1.__read(v.split(":"), 2), iconSet = _a[0], iconId = _a[1];
+                                updateLevel(rowIndex, {
+                                    sortIcon: { iconSet: iconSet, iconId: Number(iconId) },
+                                });
+                            } },
+                            react_1.default.createElement(ui_1.SelectTrigger, { className: "w-[120px]" },
+                                react_1.default.createElement(ui_1.SelectValue, { placeholder: "Icon" })),
+                            react_1.default.createElement(ui_1.SelectPortal, null,
+                                react_1.default.createElement(ui_1.SelectContent, null, icons.map(function (icon) { return (react_1.default.createElement(ui_1.SelectItem, { key: "".concat(icon.iconSet, ":").concat(icon.iconId), value: "".concat(icon.iconSet, ":").concat(icon.iconId) },
+                                    react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                                        react_1.default.createElement(IconSwatch, { glyph: icon.glyph, color: icon.color }), "".concat(icon.iconSet, " ").concat(icon.iconId)))); }))))) : (react_1.default.createElement("div", { className: "flex gap-1" },
+                            react_1.default.createElement(ui_1.IconButton, { tooltip: "Sort A \u2192 Z", isActive: lvl.sortOrder === "ASCENDING", onClick: function () {
+                                    return updateLevel(rowIndex, { sortOrder: "ASCENDING" });
+                                } },
+                                react_1.default.createElement(icons_1.SortDownIcon, null)),
+                            react_1.default.createElement(ui_1.IconButton, { tooltip: "Sort Z \u2192 A", isActive: lvl.sortOrder === "DESCENDING", onClick: function () {
+                                    return updateLevel(rowIndex, { sortOrder: "DESCENDING" });
+                                } },
+                                react_1.default.createElement(icons_1.SortUpIcon, null)))),
+                        react_1.default.createElement("div", { className: "flex gap-1 ml-auto" },
+                            react_1.default.createElement(ui_1.IconButton, { tooltip: "Move up", disabled: rowIndex === 0, onClick: function () { return moveLevel(rowIndex, -1); } },
+                                react_1.default.createElement(icons_1.ArrowUpIcon, null)),
+                            react_1.default.createElement(ui_1.IconButton, { tooltip: "Move down", disabled: rowIndex === levels.length - 1, onClick: function () { return moveLevel(rowIndex, 1); } },
+                                react_1.default.createElement(icons_1.ArrowDownIcon, null)),
+                            react_1.default.createElement(ui_1.IconButton, { tooltip: "Delete level", disabled: levels.length <= 1, onClick: function () { return deleteLevel(rowIndex); } },
+                                react_1.default.createElement(icons_1.TrashIcon, null)))));
+                })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ui_1.Button, { variant: "outline", size: "sm", onClick: addLevel, className: "gap-1" },
+                        react_1.default.createElement(icons_1.PlusIcon, null),
+                        "Add level")),
+                react_1.default.createElement(ui_1.Separator, null),
+                react_1.default.createElement("div", { className: "flex justify-end gap-2" },
+                    react_1.default.createElement(ui_1.Button, { variant: "outline", size: "sm", onClick: function () { return onOpenChange(false); } }, "Cancel"),
+                    react_1.default.createElement(ui_1.Button, { size: "sm", onClick: commit, disabled: levels.length === 0 }, "OK"))))));
+});
+exports.SortRangeDialog.displayName = "SortRangeDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link SortRangeDialog}. Mount this
+ * once in the host (alongside the other editor dialogs); the filter box opens
+ * it via `useOpenSortDialog`. This indirection is required because the filter
+ * box lives inside a popover that unmounts when it closes — a dialog rendered
+ * there would be torn down before it could appear.
+ */
+var SortRangeDialogHost = function () {
+    var _a;
+    var _b = tslib_1.__read((0, sort_dialog_atom_1.useSortDialogState)(), 2), request = _b[0], setRequest = _b[1];
+    var close = (0, react_1.useCallback)(function () { return setRequest(null); }, [setRequest]);
+    return (react_1.default.createElement(exports.SortRangeDialog, { open: request != null, onOpenChange: function (open) {
+            if (!open)
+                close();
+        }, columns: (_a = request === null || request === void 0 ? void 0 : request.columns) !== null && _a !== void 0 ? _a : [], customLists: request === null || request === void 0 ? void 0 : request.customLists, initialSpecs: request === null || request === void 0 ? void 0 : request.initialSpecs, onApply: function (specs) { return request === null || request === void 0 ? void 0 : request.onApply(specs); } }));
+};
+exports.SortRangeDialogHost = SortRangeDialogHost;
+exports.SortRangeDialogHost.displayName = "SortRangeDialogHost";

package/dist/cjs/components/toolbar/background-color-selector.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "./color-selector";
+import { ColorSelector } from "./color-selector";
+type BackgroundColorSelectorProps = {
+    disabled?: boolean;
+    color?: Color | null;
+    theme?: SpreadsheetTheme;
+    onChange?(color: Color | undefined): void;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BackgroundColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=background-color-selector.d.ts.map

package/dist/cjs/components/toolbar/background-color-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,wHAQrC,4BAA4B,sBAqC9B,CAAC"}

package/dist/cjs/components/toolbar/background-color-selector.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundColorSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_2 = require("react");
+var atoms_1 = require("../../atoms");
+var config_1 = require("../../config");
+var themes_1 = require("../../themes");
+var color_selector_1 = require("./color-selector");
+var BackgroundColorSelector = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "transparent" : _b, _c = _a.theme, theme = _c === void 0 ? config_1.defaultSpreadsheetTheme : _c, onChange = _a.onChange, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, disabled = _a.disabled, _d = _a.ColorSelector, ColorSelectorComponent = _d === void 0 ? color_selector_1.ColorSelector : _d;
+    var _e = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _e[0], setIsOpen = _e[1];
+    var close = function () { return setIsOpen(false); };
+    var open = function () { return setIsOpen(true); };
+    var colorString = (0, themes_1.getStringifiedColor)(color, theme);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_2.IconButton, { className: "text-base flex-row", style: {
+                    borderBottom: "4px ".concat(colorString, " solid"),
+                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+                react_1.default.createElement(icons_1.IoMdColorFill, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    close();
+                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};
+exports.BackgroundColorSelector = BackgroundColorSelector;

package/dist/cjs/components/toolbar/border-color-selector.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "./color-selector";
+import { ColorSelector } from "./color-selector";
+type BorderColorSelectorProps = {
+    color?: Color | null;
+    theme: SpreadsheetTheme;
+    onChange?(color: Color | undefined): void;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BorderColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, ColorSelector: ColorSelectorComponent, }: BorderColorSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-color-selector.d.ts.map

package/dist/cjs/components/toolbar/border-color-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,mBAAmB,GAAI,8GAOjC,wBAAwB,sBA+B1B,CAAC"}

package/dist/cjs/components/toolbar/border-color-selector.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderColorSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_2 = require("react");
+var themes_1 = require("../../themes");
+var color_selector_1 = require("./color-selector");
+var BorderColorSelector = function (_a) {
+    var color = _a.color, theme = _a.theme, onChange = _a.onChange, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, _b = _a.ColorSelector, ColorSelectorComponent = _b === void 0 ? color_selector_1.ColorSelector : _b;
+    var _c = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _c[0], setIsOpen = _c[1];
+    var close = function () { return setIsOpen(false); };
+    var open = function () { return setIsOpen(true); };
+    var colorString = (0, themes_1.getStringifiedColor)(color, theme);
+    return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_2.IconButton, { onClick: open, tooltip: "Border color" },
+                react_1.default.createElement(icons_1.MdEdit, { style: {
+                        borderBottom: "4px ".concat(colorString, " solid"),
+                    } }),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                    close();
+                }, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};
+exports.BorderColorSelector = BorderColorSelector;

package/dist/cjs/components/toolbar/border-line-style-options.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BorderStyle } from "../../types";
+type BorderLineStyleOptionsProps = {
+    borderStyle?: BorderStyle;
+    onChange?(style: BorderStyle): void;
+};
+export declare const BorderLineStyleOptions: ({ borderStyle, onChange, }: BorderLineStyleOptionsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-line-style-options.d.ts.map

package/dist/cjs/components/toolbar/border-line-style-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-line-style-options.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-line-style-options.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,KAAK,2BAA2B,GAAG;IACjC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,4BAGpC,2BAA2B,sBAuL7B,CAAC"}

package/dist/cjs/components/toolbar/border-line-style-options.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderLineStyleOptions = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var BorderLineStyleOptions = function (_a) {
+    var borderStyle = _a.borderStyle, onChange = _a.onChange;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("solid");
+                close();
+            }, tooltip: "Solid", isActive: borderStyle === "solid" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } }))),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("solid_medium");
+                close();
+            }, tooltip: "Solid medium", isActive: borderStyle === "solid_medium" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "2", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "1.0", x2: "50", y2: "1.0", strokeWidth: "2", stroke: "currentColor", style: { userSelect: "none" } }))),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("solid_thick");
+                close();
+            }, tooltip: "Solid thick", isActive: borderStyle === "solid_thick" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "3", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "1.5", x2: "50", y2: "1.5", strokeWidth: "3", stroke: "currentColor", style: { userSelect: "none" } }))),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("dashed");
+                close();
+            }, tooltip: "Dashed", isActive: borderStyle === "dashed" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", strokeDasharray: "2", style: { userSelect: "none" } }))),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("dotted");
+                close();
+            }, tooltip: "Dotted", isActive: borderStyle === "dotted" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", strokeDasharray: "1", style: { userSelect: "none" } }))),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", className: "py-2 px-2", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange("double");
+                close();
+            }, tooltip: "Double", isActive: borderStyle === "double" },
+            react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "4", style: { userSelect: "none" } },
+                react_1.default.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } }),
+                react_1.default.createElement("line", { x1: "0", y1: "3", x2: "50", y2: "3", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } })))));
+};
+exports.BorderLineStyleOptions = BorderLineStyleOptions;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BorderStyle } from "../../types";
+type BorderLineStyleSelectorProps = {
+    borderStyle?: BorderStyle;
+    onChange?(style: BorderStyle): void;
+};
+export declare const BorderLineStyleSelector: ({ borderStyle, onChange, }: BorderLineStyleSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-line-style-selector.d.ts.map

package/dist/cjs/components/toolbar/border-line-style-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-line-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-line-style-selector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,KAAK,4BAA4B,GAAG;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,4BAGrC,4BAA4B,sBAqB9B,CAAC"}

package/dist/cjs/components/toolbar/border-line-style-selector.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderLineStyleSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var ui_3 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_2 = require("react");
+var border_line_style_options_1 = require("./border-line-style-options");
+var BorderLineStyleSelector = function (_a) {
+    var _b = _a.borderStyle, borderStyle = _b === void 0 ? "solid" : _b, onChange = _a.onChange;
+    var _c = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _c[0], setIsOpen = _c[1];
+    var open = function () { return setIsOpen(true); };
+    return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_2.IconButton, { onClick: open, tooltip: "Border style" },
+                react_1.default.createElement(icons_1.MdLineStyle, null),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ui_3.Stack, { className: "gap-1", direction: "vertical" },
+                react_1.default.createElement(border_line_style_options_1.BorderLineStyleOptions, { borderStyle: borderStyle, onChange: onChange })))));
+};
+exports.BorderLineStyleSelector = BorderLineStyleSelector;

package/dist/cjs/components/toolbar/border-location-options.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { BorderLocation } from "./types";
+type BorderLocationOptionsProps = {
+    disabledBorderLocations?: BorderLocation[];
+    borderLocation?: BorderLocation;
+    onChange?(borderLocation: BorderLocation): void;
+    onClear?(): void;
+};
+export declare const BorderLocationOptions: ({ borderLocation, disabledBorderLocations, onChange, onClear, }: BorderLocationOptionsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-location-options.d.ts.map

package/dist/cjs/components/toolbar/border-location-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-location-options.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-location-options.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,0BAA0B,GAAG;IAChC,uBAAuB,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IAChD,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB,CAAC;AAsDF,eAAO,MAAM,qBAAqB,GAAI,iEAKnC,0BAA0B,sBA+B5B,CAAC"}

package/dist/cjs/components/toolbar/border-location-options.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderLocationOptions = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var BORDER_LOCATIONS = [
+    {
+        title: "All borders",
+        location: "all",
+        icon: icons_1.MdBorderAll,
+    },
+    {
+        title: "Inner borders",
+        location: "inner",
+        icon: icons_1.MdBorderInner,
+    },
+    {
+        title: "Horizontal borders",
+        location: "horizontal",
+        icon: icons_1.MdBorderHorizontal,
+    },
+    {
+        title: "Vertical borders",
+        location: "vertical",
+        icon: icons_1.MdBorderVertical,
+    },
+    {
+        title: "Outer borders",
+        location: "outer",
+        icon: icons_1.MdBorderOuter,
+    },
+    {
+        title: "Left border",
+        location: "left",
+        icon: icons_1.MdBorderLeft,
+    },
+    {
+        title: "Top border",
+        location: "top",
+        icon: icons_1.MdBorderTop,
+    },
+    {
+        title: "Right border",
+        location: "right",
+        icon: icons_1.MdBorderRight,
+    },
+    {
+        title: "Bottom border",
+        location: "bottom",
+        icon: icons_1.MdBorderBottom,
+    },
+];
+var BorderLocationOptions = function (_a) {
+    var borderLocation = _a.borderLocation, disabledBorderLocations = _a.disabledBorderLocations, onChange = _a.onChange, onClear = _a.onClear;
+    var isDisabled = (0, react_1.useCallback)(function (location) {
+        return disabledBorderLocations
+            ? disabledBorderLocations.includes(location)
+            : false;
+    }, [disabledBorderLocations]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        BORDER_LOCATIONS.map(function (_a) {
+            var title = _a.title, location = _a.location, Icon = _a.icon;
+            return (react_1.default.createElement(ui_1.IconButton, { size: "xl", isActive: borderLocation === location, onClick: function () { return onChange === null || onChange === void 0 ? void 0 : onChange(location); }, tooltip: title, key: location, disabled: isDisabled(location) },
+                react_1.default.createElement(Icon, null)));
+        }),
+        react_1.default.createElement(ui_1.IconButton, { size: "xl", onClick: function () { return onClear === null || onClear === void 0 ? void 0 : onClear(); }, tooltip: "No borders" },
+            react_1.default.createElement(icons_1.MdBorderClear, null))));
+};
+exports.BorderLocationOptions = BorderLocationOptions;

package/dist/cjs/components/toolbar/border-selector.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Borders, BorderStyle, Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelector, ColorSelectorProps } from "./color-selector";
+import type { BorderLocation } from "./types";
+type BorderSelectorProps = {
+    isDarkMode?: boolean;
+    disabledBorderLocations?: BorderLocation[];
+    onChange?(location: BorderLocation, color: Color | undefined, style: BorderStyle | undefined): void;
+    borders?: Borders | null;
+    theme: SpreadsheetTheme;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BorderSelector: ({ isDarkMode, theme, onChange, userDefinedColors, onAddUserDefinedColor, disabledBorderLocations, ColorSelector: ColorSelectorComponent, }: BorderSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-selector.d.ts.map

package/dist/cjs/components/toolbar/border-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-selector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3C,QAAQ,CAAC,CACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,GAAG,SAAS,EACxB,KAAK,EAAE,WAAW,GAAG,SAAS,GAC7B,IAAI,CAAC;IACR,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4IAQ5B,mBAAmB,sBA4FrB,CAAC"}