@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,501 @@
+import { isCellWithinBounds } from "@rowsncolumns/grid";
+import { MdOutlineArrowDropDown, TableIcon } from "@rowsncolumns/icons";
+import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, Separator, } from "@rowsncolumns/ui";
+import { getContrastColor, findMatchingBandProperty, } from "@rowsncolumns/utils";
+import React, { memo, useCallback, useMemo, useRef } from "react";
+// Re-export the shared function for backwards compatibility
+export { findMatchingBandProperty };
+import { parseTintedColor } from "../../api/banded-ranges";
+import { useFocusSheet } from "../../atoms/sheet-context.atom";
+import { getStringifiedColor } from "../../themes";
+const stripeTint = 0.8;
+const colorIndexes = [1, 4, 5, 6, 7, 8, 9];
+export const getTableBorderStyles = (showRowStripes, showColumnStripes, theme) => {
+    let runningLightIndex = 1;
+    let runningMediumIndex = 1;
+    let runningDarkIndex = 1;
+    return new Map([
+        [
+            "Light",
+            [
+                ["None", 0, 0, undefined],
+                ...colorIndexes.map((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,
+                        },
+                    ];
+                }),
+                ...colorIndexes.map((value) => {
+                    return [
+                        "TableStyleLight" + runningLightIndex++,
+                        undefined,
+                        undefined,
+                        {
+                            rowProperties: {
+                                headerColor: {
+                                    theme: value,
+                                },
+                            },
+                        },
+                        {
+                            border: theme
+                                ? `1px solid ${getStringifiedColor({ theme: value }, theme)}`
+                                : undefined,
+                        },
+                    ];
+                }),
+                ...colorIndexes.map((value) => {
+                    const 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,
+                        },
+                    ];
+                }),
+            ],
+        ],
+        [
+            "Medium",
+            [
+                ...colorIndexes.map((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,
+                        },
+                    ];
+                }),
+                ...colorIndexes.map((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,
+                        },
+                    ];
+                }),
+                ...colorIndexes.map((value) => {
+                    const 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,
+                        },
+                    ];
+                }),
+                ...colorIndexes.map((value) => {
+                    const 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 ${getStringifiedColor({ theme: value }, theme)}`
+                                : undefined,
+                        },
+                    ];
+                }),
+            ],
+        ],
+        [
+            "Dark",
+            [
+                ...colorIndexes.map((value) => {
+                    const firstTint = value - 1 === 0 ? 0.25 : -0.25;
+                    const 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,
+                        },
+                    ];
+                }),
+                ...[1, 5, 7, 9].map((value) => {
+                    const firstTint = value - 1 === 0 ? -0.35 : 0.6;
+                    const 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,
+                        },
+                    ];
+                }),
+            ],
+        ],
+    ]);
+};
+export const TableStyleSelector = memo(({ tables, sheetId, theme, activeCell, selections, onUpdateTable, onCreateTable, }) => {
+    const shouldFocusSheetRef = useRef(true);
+    const focusSheet = useFocusSheet();
+    const table = useMemo(() => {
+        return tables?.find((table) => table.sheetId === sheetId &&
+            isCellWithinBounds(activeCell, table.range));
+    }, [tables, sheetId, activeCell]);
+    // Default showstripes is always true
+    const showRowStripes = table ? Boolean(table.showRowStripes) : true;
+    // Default showColumnStripes
+    const showColumnStripes = table ? Boolean(table.showColumnStripes) : false;
+    // Classes
+    const 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";
+    const headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
+    const gridClass = "grid grid-cols-3 md:grid-cols-7 gap-1 pb-1";
+    /**
+     * On Select style
+     */
+    const onSelectStyle = useCallback((theme, bandedRange) => {
+        if (table) {
+            onUpdateTable?.(sheetId, table.id, {
+                ...table,
+                theme,
+                bandedRange,
+            });
+        }
+        else {
+            onCreateTable?.(sheetId, activeCell, selections, undefined, theme, bandedRange);
+        }
+    }, [table, sheetId, activeCell, selections, onCreateTable, onUpdateTable]);
+    /**
+     * Get all table border styles
+     */
+    const tableBorderstyles = useMemo(() => [
+        ...getTableBorderStyles(showRowStripes, showColumnStripes, theme).entries(),
+    ], [showRowStripes, showColumnStripes, theme]);
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "xl", tooltip: "Format as Table", className: "gap-1" },
+                React.createElement(TableIcon, null),
+                React.createElement("div", { className: "text-xs" }, "Format as Table"),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { loop: true, align: "start", onFocusOutside: (event) => event.preventDefault(), onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet?.();
+                    }
+                }, onInteractOutside: () => {
+                    shouldFocusSheetRef.current = false;
+                } },
+                React.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" }, tableBorderstyles.map(([category, tableStyles]) => {
+                    return (React.createElement("div", { key: category },
+                        React.createElement("div", { className: headingClass }, category),
+                        React.createElement(Separator, { className: "mb-2" }),
+                        React.createElement("div", { className: gridClass }, tableStyles.map(([tableTheme, 
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        firstBandTint, 
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        secondBandTint, bandProperties, style,], index) => {
+                            return (React.createElement(DropdownMenuItem, { key: index, onClick: () => onSelectStyle(tableTheme, bandProperties), className: hoverClass, title: tableTheme },
+                                React.createElement(TableSkeleton, { rowProperties: bandProperties?.rowProperties, columnProperties: bandProperties?.columnProperties, theme: theme, style: style })));
+                        }))));
+                }))))));
+});
+/**
+ * Table skeleton
+ * @param param0
+ * @returns
+ */
+const TableSkeleton = ({ rowProperties, columnProperties, theme, style, }) => {
+    const headerColor = getStringifiedColor(rowProperties?.headerColor, theme);
+    return (React.createElement("div", { className: "table border-collapse table-fixed w-20 md:w-16", style: style },
+        React.createElement("div", { className: "table-row" }, [...Array(5)].map((_, index) => {
+            const borderColor = getStringifiedColor(rowProperties?.headerBorder?.bottom?.color, theme) ?? headerColor;
+            return (React.createElement("div", { className: cn("table-cell border h-1 leading-none text-center", borderColor ? "border-solid" : ""), style: {
+                    color: headerColor
+                        ? getContrastColor(headerColor, getStringifiedColor({ theme: 1 }, theme), getStringifiedColor({ theme: 0 }, theme))
+                        : undefined,
+                    borderColor,
+                    backgroundColor: headerColor,
+                    borderLeftWidth: rowProperties?.headerBorder?.left ??
+                        rowProperties?.headerColor
+                        ? 1
+                        : 0,
+                    borderRightWidth: rowProperties?.headerBorder?.right ??
+                        rowProperties?.headerColor
+                        ? 1
+                        : 0,
+                }, key: index }, "-"));
+        })),
+        [...Array(4)].map((_, rowIndex) => {
+            return (React.createElement("div", { className: "table-row", key: rowIndex }, [...Array(5)].map((_, columnIndex) => {
+                const defaultBackground = getStringifiedColor({ theme: 0 }, theme);
+                const columnBackgroundColor = columnIndex % 2 === 0
+                    ? getStringifiedColor(parseTintedColor(columnProperties?.firstBandColor), theme)
+                    : getStringifiedColor(parseTintedColor(columnProperties?.secondBandColor), theme);
+                const rowBackgroundColor = rowIndex % 2 == 0
+                    ? getStringifiedColor(rowProperties?.firstBandColor, theme)
+                    : getStringifiedColor(rowProperties?.secondBandColor, theme);
+                return (React.createElement("div", { key: columnIndex, className: "table-cell border border-solid leading-none text-center", style: {
+                        borderColor: getStringifiedColor(rowProperties?.firstBandBorder?.bottom?.color, theme) ?? headerColor,
+                        borderWidth: rowProperties?.firstBandBorder?.bottom ? 1 : 0,
+                        backgroundColor: columnBackgroundColor ??
+                            rowBackgroundColor ??
+                            defaultBackground,
+                    } }, "-"));
+            })));
+        })));
+};

package/dist/esm/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/esm/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/esm/components/toolbar/text-color-selector.js

@@ -0,0 +1,28 @@
+import { MdOutlineTextFields } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+import { useState } from "react";
+import { useFocusSheet } from "../../atoms";
+import { defaultSpreadsheetTheme } from "../../config";
+import { getStringifiedColor } from "../../themes";
+import { ColorSelector } from "./color-selector";
+export const TextColorSelector = ({ theme = defaultSpreadsheetTheme, isDarkMode, color = { theme: 1, tint: isDarkMode ? 1 : 0 }, onChange, userDefinedColors, onAddUserDefinedColor, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const close = () => setIsOpen(false);
+    const open = () => setIsOpen(true);
+    const colorString = getStringifiedColor(color, theme);
+    const focusSheet = useFocusSheet();
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { className: "text-base flex-row", style: {
+                    borderBottom: `4px ${colorString} solid`,
+                }, tooltip: "Text color", onClick: open, disabled: disabled },
+                React.createElement(MdOutlineTextFields, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(ColorSelectorComponent, { color: colorString, onChange: (color) => {
+                    onChange?.(color);
+                    focusSheet?.();
+                    close();
+                }, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};

package/dist/esm/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/esm/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"}