@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/toolbar/table-style-selector.js

@@ -0,0 +1,494 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableStyleSelector = exports.getTableBorderStyles = exports.findMatchingBandProperty = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+Object.defineProperty(exports, "findMatchingBandProperty", { enumerable: true, get: function () { return utils_1.findMatchingBandProperty; } });
+var react_1 = tslib_1.__importStar(require("react"));
+var banded_ranges_1 = require("../../api/banded-ranges");
+var sheet_context_atom_1 = require("../../atoms/sheet-context.atom");
+var themes_1 = require("../../themes");
+var stripeTint = 0.8;
+var colorIndexes = [1, 4, 5, 6, 7, 8, 9];
+var getTableBorderStyles = function (showRowStripes, showColumnStripes, theme) {
+    var runningLightIndex = 1;
+    var runningMediumIndex = 1;
+    var runningDarkIndex = 1;
+    return new Map([
+        [
+            "Light",
+            tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
+                ["None", 0, 0, undefined]
+            ], tslib_1.__read(colorIndexes.map(function (value) {
+                return [
+                    "TableStyleLight" + runningLightIndex++,
+                    stripeTint,
+                    1,
+                    {
+                        rowProperties: {
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? stripeTint : 1,
+                            },
+                            secondBandColor: showRowStripes
+                                ? {
+                                    theme: 0,
+                                }
+                                : undefined,
+                            headerBorder: {
+                                top: {
+                                    width: 1,
+                                    style: "solid",
+                                    color: {
+                                        theme: value,
+                                    },
+                                },
+                                bottom: {
+                                    width: 1,
+                                    style: "solid",
+                                    color: {
+                                        theme: value,
+                                    },
+                                },
+                            },
+                            footerBorder: {
+                                bottom: {
+                                    width: 1,
+                                    style: "solid",
+                                    color: {
+                                        theme: value,
+                                    },
+                                },
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? stripeTint : 1,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read(colorIndexes.map(function (value) {
+                return [
+                    "TableStyleLight" + runningLightIndex++,
+                    undefined,
+                    undefined,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                            },
+                        },
+                    },
+                    {
+                        border: theme
+                            ? "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: value }, theme))
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read(colorIndexes.map(function (value) {
+                var border = {
+                    width: 1,
+                    style: "solid",
+                    color: {
+                        theme: value,
+                    },
+                };
+                return [
+                    "TableStyleLight" + runningLightIndex++,
+                    stripeTint,
+                    1,
+                    {
+                        rowProperties: {
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? stripeTint : 1,
+                            },
+                            secondBandColor: showRowStripes
+                                ? {
+                                    theme: 0,
+                                }
+                                : undefined,
+                            firstBandBorder: {
+                                top: border,
+                                left: border,
+                                right: border,
+                                bottom: border,
+                            },
+                            headerBorder: {
+                                top: border,
+                                left: border,
+                                right: border,
+                                bottom: border,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? stripeTint : 1,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false),
+        ],
+        [
+            "Medium",
+            tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(colorIndexes.map(function (value) {
+                return [
+                    "TableStyleMedium" + runningMediumIndex++,
+                    stripeTint,
+                    1,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                            },
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? stripeTint : 1,
+                            },
+                            secondBandColor: showRowStripes
+                                ? {
+                                    theme: 0,
+                                }
+                                : undefined,
+                            firstBandBorder: {
+                                bottom: {
+                                    width: 1,
+                                    style: "solid",
+                                    color: {
+                                        theme: value,
+                                    },
+                                },
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? stripeTint : 1,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read(colorIndexes.map(function (value) {
+                return [
+                    "TableStyleMedium" + runningMediumIndex++,
+                    0.6,
+                    0.8,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                            },
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? 0.6 : 0.8,
+                            },
+                            secondBandColor: {
+                                theme: value,
+                                tint: 0.8,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? 0.6 : 0.8,
+                                },
+                                // secondBandColor: {
+                                //   theme: value,
+                                //   tint: 0.8,
+                                // },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read(colorIndexes.map(function (value) {
+                var border = {
+                    width: 2,
+                    style: "solid",
+                    color: {
+                        theme: 1,
+                    },
+                };
+                return [
+                    "TableStyleMedium" + runningMediumIndex++,
+                    -0.15,
+                    1,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                            },
+                            firstBandColor: {
+                                theme: 0,
+                                tint: showRowStripes ? -0.15 : 1,
+                            },
+                            secondBandColor: showRowStripes
+                                ? {
+                                    theme: 0,
+                                }
+                                : undefined,
+                            headerBorder: {
+                                top: border,
+                            },
+                            footerBorder: {
+                                bottom: border,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: 0,
+                                    tint: showColumnStripes ? -0.15 : 1,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read(colorIndexes.map(function (value) {
+                var border = {
+                    width: 1,
+                    style: "solid",
+                    color: {
+                        theme: value,
+                    },
+                };
+                return [
+                    "TableStyleMedium" + runningMediumIndex++,
+                    stripeTint,
+                    0.9,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                                tint: 0.9,
+                            },
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? stripeTint : 0.9,
+                            },
+                            secondBandColor: {
+                                theme: value,
+                                tint: 0.9,
+                            },
+                            firstBandBorder: {
+                                top: border,
+                                left: border,
+                                right: border,
+                                bottom: border,
+                            },
+                            headerBorder: {
+                                top: border,
+                                left: border,
+                                right: border,
+                                bottom: border,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? stripeTint : 0.9,
+                                },
+                            }
+                            : undefined,
+                    },
+                    {
+                        border: theme
+                            ? "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: value }, theme))
+                            : undefined,
+                    },
+                ];
+            })), false),
+        ],
+        [
+            "Dark",
+            tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(colorIndexes.map(function (value) {
+                var firstTint = value - 1 === 0 ? 0.25 : -0.25;
+                var secondTint = value - 1 === 0 ? 0.5 : 0;
+                return [
+                    "TableStyleDark" + runningDarkIndex++,
+                    firstTint,
+                    secondTint,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: 1,
+                            },
+                            firstBandColor: {
+                                theme: value,
+                                tint: showRowStripes ? firstTint : secondTint,
+                            },
+                            secondBandColor: {
+                                theme: value,
+                                tint: secondTint,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value,
+                                    tint: showColumnStripes ? firstTint : secondTint,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false), tslib_1.__read([1, 5, 7, 9].map(function (value) {
+                var firstTint = value - 1 === 0 ? -0.35 : 0.6;
+                var secondTint = value - 1 === 0 ? -0.15 : 0.8;
+                return [
+                    "TableStyleDark" + runningDarkIndex++,
+                    firstTint,
+                    secondTint,
+                    {
+                        rowProperties: {
+                            headerColor: {
+                                theme: value,
+                            },
+                            firstBandColor: {
+                                theme: value - 1,
+                                tint: showRowStripes ? firstTint : secondTint,
+                            },
+                            secondBandColor: {
+                                theme: value - 1,
+                                tint: secondTint,
+                            },
+                        },
+                        columnProperties: showColumnStripes
+                            ? {
+                                firstBandColor: {
+                                    theme: value - 1,
+                                    tint: showColumnStripes ? firstTint : secondTint,
+                                },
+                            }
+                            : undefined,
+                    },
+                ];
+            })), false),
+        ],
+    ]);
+};
+exports.getTableBorderStyles = getTableBorderStyles;
+exports.TableStyleSelector = (0, react_1.memo)(function (_a) {
+    var tables = _a.tables, sheetId = _a.sheetId, theme = _a.theme, activeCell = _a.activeCell, selections = _a.selections, onUpdateTable = _a.onUpdateTable, onCreateTable = _a.onCreateTable;
+    var shouldFocusSheetRef = (0, react_1.useRef)(true);
+    var focusSheet = (0, sheet_context_atom_1.useFocusSheet)();
+    var table = (0, react_1.useMemo)(function () {
+        return tables === null || tables === void 0 ? void 0 : tables.find(function (table) {
+            return table.sheetId === sheetId &&
+                (0, grid_1.isCellWithinBounds)(activeCell, table.range);
+        });
+    }, [tables, sheetId, activeCell]);
+    // Default showstripes is always true
+    var showRowStripes = table ? Boolean(table.showRowStripes) : true;
+    // Default showColumnStripes
+    var showColumnStripes = table ? Boolean(table.showColumnStripes) : false;
+    // Classes
+    var hoverClass = "rounded-none hover:outline-solid hover:outline-1 hover:outline hover:outline-offset-1 hover:outline-rnc-primary focus:outline focus:outline-offset-1 focus:outline-rnc-primary hover:bg-transparent focus:bg-transparent text-rnc-foreground p-1";
+    var headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
+    var gridClass = "grid grid-cols-3 md:grid-cols-7 gap-1 pb-1";
+    /**
+     * On Select style
+     */
+    var onSelectStyle = (0, react_1.useCallback)(function (theme, bandedRange) {
+        if (table) {
+            onUpdateTable === null || onUpdateTable === void 0 ? void 0 : onUpdateTable(sheetId, table.id, tslib_1.__assign(tslib_1.__assign({}, table), { theme: theme, bandedRange: bandedRange }));
+        }
+        else {
+            onCreateTable === null || onCreateTable === void 0 ? void 0 : onCreateTable(sheetId, activeCell, selections, undefined, theme, bandedRange);
+        }
+    }, [table, sheetId, activeCell, selections, onCreateTable, onUpdateTable]);
+    /**
+     * Get all table border styles
+     */
+    var tableBorderstyles = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([], tslib_1.__read((0, exports.getTableBorderStyles)(showRowStripes, showColumnStripes, theme).entries()), false); }, [showRowStripes, showColumnStripes, theme]);
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { size: "xl", tooltip: "Format as Table", className: "gap-1" },
+                react_1.default.createElement(icons_1.TableIcon, null),
+                react_1.default.createElement("div", { className: "text-xs" }, "Format as Table"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { loop: true, align: "start", onFocusOutside: function (event) { return event.preventDefault(); }, onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    }
+                }, onInteractOutside: function () {
+                    shouldFocusSheetRef.current = false;
+                } },
+                react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" }, tableBorderstyles.map(function (_a) {
+                    var _b = tslib_1.__read(_a, 2), category = _b[0], tableStyles = _b[1];
+                    return (react_1.default.createElement("div", { key: category },
+                        react_1.default.createElement("div", { className: headingClass }, category),
+                        react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                        react_1.default.createElement("div", { className: gridClass }, tableStyles.map(function (_a, index) {
+                            var _b = tslib_1.__read(_a, 5), tableTheme = _b[0], 
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            firstBandTint = _b[1], 
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            secondBandTint = _b[2], bandProperties = _b[3], style = _b[4];
+                            return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: index, onClick: function () {
+                                    return onSelectStyle(tableTheme, bandProperties);
+                                }, className: hoverClass, title: tableTheme },
+                                react_1.default.createElement(TableSkeleton, { rowProperties: bandProperties === null || bandProperties === void 0 ? void 0 : bandProperties.rowProperties, columnProperties: bandProperties === null || bandProperties === void 0 ? void 0 : bandProperties.columnProperties, theme: theme, style: style })));
+                        }))));
+                }))))));
+});
+/**
+ * Table skeleton
+ * @param param0
+ * @returns
+ */
+var TableSkeleton = function (_a) {
+    var rowProperties = _a.rowProperties, columnProperties = _a.columnProperties, theme = _a.theme, style = _a.style;
+    var headerColor = (0, themes_1.getStringifiedColor)(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerColor, theme);
+    return (react_1.default.createElement("div", { className: "table border-collapse table-fixed w-20 md:w-16", style: style },
+        react_1.default.createElement("div", { className: "table-row" }, tslib_1.__spreadArray([], tslib_1.__read(Array(5)), false).map(function (_, index) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var borderColor = (_c = (0, themes_1.getStringifiedColor)((_b = (_a = rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerBorder) === null || _a === void 0 ? void 0 : _a.bottom) === null || _b === void 0 ? void 0 : _b.color, theme)) !== null && _c !== void 0 ? _c : headerColor;
+            return (react_1.default.createElement("div", { className: (0, ui_1.cn)("table-cell border h-1 leading-none text-center", borderColor ? "border-solid" : ""), style: {
+                    color: headerColor
+                        ? (0, utils_1.getContrastColor)(headerColor, (0, themes_1.getStringifiedColor)({ theme: 1 }, theme), (0, themes_1.getStringifiedColor)({ theme: 0 }, theme))
+                        : undefined,
+                    borderColor: borderColor,
+                    backgroundColor: headerColor,
+                    borderLeftWidth: ((_e = (_d = rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerBorder) === null || _d === void 0 ? void 0 : _d.left) !== null && _e !== void 0 ? _e : rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerColor)
+                        ? 1
+                        : 0,
+                    borderRightWidth: ((_g = (_f = rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerBorder) === null || _f === void 0 ? void 0 : _f.right) !== null && _g !== void 0 ? _g : rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.headerColor)
+                        ? 1
+                        : 0,
+                }, key: index }, "-"));
+        })),
+        tslib_1.__spreadArray([], tslib_1.__read(Array(4)), false).map(function (_, rowIndex) {
+            return (react_1.default.createElement("div", { className: "table-row", key: rowIndex }, tslib_1.__spreadArray([], tslib_1.__read(Array(5)), false).map(function (_, columnIndex) {
+                var _a, _b, _c, _d, _e;
+                var defaultBackground = (0, themes_1.getStringifiedColor)({ theme: 0 }, theme);
+                var columnBackgroundColor = columnIndex % 2 === 0
+                    ? (0, themes_1.getStringifiedColor)((0, banded_ranges_1.parseTintedColor)(columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties.firstBandColor), theme)
+                    : (0, themes_1.getStringifiedColor)((0, banded_ranges_1.parseTintedColor)(columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties.secondBandColor), theme);
+                var rowBackgroundColor = rowIndex % 2 == 0
+                    ? (0, themes_1.getStringifiedColor)(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.firstBandColor, theme)
+                    : (0, themes_1.getStringifiedColor)(rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.secondBandColor, theme);
+                return (react_1.default.createElement("div", { key: columnIndex, className: "table-cell border border-solid leading-none text-center", style: {
+                        borderColor: (_c = (0, themes_1.getStringifiedColor)((_b = (_a = rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.firstBandBorder) === null || _a === void 0 ? void 0 : _a.bottom) === null || _b === void 0 ? void 0 : _b.color, theme)) !== null && _c !== void 0 ? _c : headerColor,
+                        borderWidth: ((_d = rowProperties === null || rowProperties === void 0 ? void 0 : rowProperties.firstBandBorder) === null || _d === void 0 ? void 0 : _d.bottom) ? 1 : 0,
+                        backgroundColor: (_e = columnBackgroundColor !== null && columnBackgroundColor !== void 0 ? columnBackgroundColor : rowBackgroundColor) !== null && _e !== void 0 ? _e : defaultBackground,
+                    } }, "-"));
+            })));
+        })));
+};

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

@@ -0,0 +1,20 @@
+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 TextColorSelectorProps = {
+    disabled?: boolean;
+    color?: Color | null;
+    isDarkMode?: boolean;
+    theme?: SpreadsheetTheme;
+    onChange?(color: Color | undefined): void;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const TextColorSelector: ({ theme, isDarkMode, color, onChange, userDefinedColors, onAddUserDefinedColor, disabled, ColorSelector: ColorSelectorComponent, }: TextColorSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-color-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-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,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,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,iBAAiB,GAAI,oIAS/B,sBAAsB,sBAoCxB,CAAC"}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextColorSelector = 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 TextColorSelector = function (_a) {
+    var _b = _a.theme, theme = _b === void 0 ? config_1.defaultSpreadsheetTheme : _b, isDarkMode = _a.isDarkMode, _c = _a.color, color = _c === void 0 ? { theme: 1, tint: isDarkMode ? 1 : 0 } : _c, onChange = _a.onChange, userDefinedColors = _a.userDefinedColors, onAddUserDefinedColor = _a.onAddUserDefinedColor, 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: "Text color", onClick: open, disabled: disabled },
+                react_1.default.createElement(icons_1.MdOutlineTextFields, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ColorSelectorComponent, { color: colorString, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    close();
+                }, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};
+exports.TextColorSelector = TextColorSelector;

package/dist/cjs/components/toolbar/text-format-selector.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { CellFormat } from "../../types";
+export type TextFormatSelectorProps = {
+    /**
+     * Current cell format
+     */
+    cellFormat?: CellFormat | null;
+    /**
+     * Current locale
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
+     */
+    locale?: string;
+    /**
+     * Currency code of the locale
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     * USD, EUR, GBP, INR
+     */
+    currency?: string;
+    onChangeFormatting: <T extends keyof CellFormat>(type: T, value: CellFormat[T]) => void;
+    onRequestFormatCells?(): void;
+};
+export declare const TextFormatSelector: React.MemoExoticComponent<({ locale, currency, cellFormat, onChangeFormatting, onRequestFormatCells, }: TextFormatSelectorProps) => React.JSX.Element>;
+//# sourceMappingURL=text-format-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-format-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-format-selector.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,CAAC,CAAC,SAAS,MAAM,UAAU,EAC7C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;IACV,oBAAoB,CAAC,IAAI,IAAI,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,0GAO1B,uBAAuB,uBAoY3B,CAAC"}