@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/toolbar/text-format-selector.js

@@ -0,0 +1,257 @@
+import { CheckIcon, ChevronRightIcon, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, } from "@rowsncolumns/ui";
+import { getDefaultDateFormat, getLongDateFormat } from "@rowsncolumns/utils";
+import React, { memo } from "react";
+import { useFocusSheet } from "../../atoms";
+import { getCurrencySymbol } from "../../helpers";
+export const TextFormatSelector = memo(({ locale = "en-US", currency = "USD", cellFormat, onChangeFormatting, onRequestFormatCells, }) => {
+    const localeDateFormat = getDefaultDateFormat(locale);
+    const longDateFormat = getLongDateFormat(locale);
+    const focusSheet = useFocusSheet();
+    const date = new Date(Date.UTC(2023, 8, 26, 0, 0, 0));
+    const dateformat = new Intl.DateTimeFormat(locale).format(date);
+    const currencySymbol = getCurrencySymbol(locale, currency);
+    const longDate = new Intl.DateTimeFormat(locale, {
+        dateStyle: "full",
+    }).format(date);
+    const percentPattern = "0%";
+    const scientficPattern = "0.00E+00";
+    const isScientific = cellFormat?.numberFormat?.pattern === scientficPattern;
+    const accountingPattern = `"${currencySymbol}"* #,##0.00;_("${currencySymbol}"* (#,##0.00);_("${currencySymbol}"* "-"??_);_(@_)`;
+    const isAccounting = cellFormat?.numberFormat?.pattern === accountingPattern;
+    const financialPattern = "#,##0.00;(#,##0.00)";
+    const isFinancial = cellFormat?.numberFormat?.pattern === financialPattern;
+    const currencyPattern = `"${currencySymbol}"#,##0.00`;
+    // financial is of type currency too
+    const isCurrency = cellFormat?.numberFormat?.pattern === currencyPattern ||
+        (cellFormat?.numberFormat?.type === "CURRENCY" && !isFinancial);
+    const timePattern = `[$-${locale}]h:mm AM/PM;@`;
+    const isTimePattern = cellFormat?.numberFormat?.pattern === timePattern;
+    const dateTimePattern = `[$-${locale}]${localeDateFormat} hh:mm:ss`;
+    const isDateTimePattern = cellFormat?.numberFormat?.pattern === dateTimePattern;
+    const durationPattern = `[$-${locale}][h]:mm:ss`;
+    const isDurationPattern = cellFormat?.numberFormat?.pattern === durationPattern;
+    const currencyRoundedPattern = `"${currencySymbol}"#,##0`;
+    const isCurrencyRounded = cellFormat?.numberFormat?.pattern === currencyRoundedPattern;
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(IconButton, { tooltip: "More formats" },
+                React.createElement("div", { className: "text-xs" }, "123"),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { align: "start" },
+                React.createElement(DropdownMenuCheckboxItem, { checked: !cellFormat?.numberFormat?.type ||
+                        cellFormat?.numberFormat?.type === "GENERAL", onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", undefined);
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "General"),
+                React.createElement(DropdownMenuCheckboxItem, { checked: cellFormat?.numberFormat?.type === "TEXT", onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "TEXT",
+                            pattern: "General",
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Plain text"),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuCheckboxItem, { checked: cellFormat?.numberFormat?.type === "NUMBER", onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "NUMBER",
+                            pattern: "#,##0.00",
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Number",
+                    React.createElement(DropdownRightSlot, null, "1,000.12")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: cellFormat?.numberFormat?.type === "PERCENT", onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "PERCENT",
+                            pattern: percentPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Percent",
+                    React.createElement(DropdownRightSlot, null, "10.12%")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isScientific, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "SCIENTIFIC",
+                            pattern: scientficPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Scientific",
+                    React.createElement(DropdownRightSlot, null, "1.01E+03")),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isAccounting, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: accountingPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Accounting",
+                    React.createElement(DropdownRightSlot, null,
+                        currencySymbol,
+                        "(1000.12)")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isFinancial, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: financialPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Financial",
+                    React.createElement(DropdownRightSlot, null, "(1000.12)")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isCurrency, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: currencyPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Currency",
+                    React.createElement(DropdownRightSlot, null,
+                        currencySymbol,
+                        "1,000.12")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isCurrencyRounded, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: currencyRoundedPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Currency rounded",
+                    React.createElement(DropdownRightSlot, null,
+                        currencySymbol,
+                        "1000")),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { className: "pl-8" },
+                        "More currency",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"$"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "$ US Dollar"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"€"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "\u20AC Euro"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"₤"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "\u20A4 Pound"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"¥"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "\u00A5 Yen"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"CN¥"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "CN\u00A5 Chinese Yuan"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: `"₹"#,##0`,
+                                });
+                                focusSheet?.();
+                            } }, "\u20B9 Rupee"))),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuCheckboxItem, { checked: cellFormat?.numberFormat?.pattern === localeDateFormat, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE",
+                            pattern: localeDateFormat,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Date",
+                    React.createElement(DropdownRightSlot, null, dateformat)),
+                React.createElement(DropdownMenuCheckboxItem, { checked: cellFormat?.numberFormat?.pattern === longDateFormat, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE",
+                            pattern: longDateFormat,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Long date",
+                    React.createElement(DropdownRightSlot, null, longDate)),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isTimePattern, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE_TIME",
+                            pattern: timePattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Time",
+                    React.createElement(DropdownRightSlot, null, "3:59 AM")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isDateTimePattern, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE_TIME",
+                            pattern: dateTimePattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Date time",
+                    React.createElement(DropdownRightSlot, null,
+                        dateformat,
+                        " 15:59:00")),
+                React.createElement(DropdownMenuCheckboxItem, { checked: isDurationPattern, onCheckedChange: () => {
+                        onChangeFormatting("numberFormat", {
+                            type: "TIME",
+                            pattern: durationPattern,
+                        });
+                        focusSheet?.();
+                    } },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    "Duration",
+                    React.createElement(DropdownRightSlot, null, "24:01:00")),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { className: "pl-8", onClick: () => {
+                        onRequestFormatCells?.();
+                    } }, "Custom format")))));
+});
+TextFormatSelector.displayName = "TextFormatSelector";

package/dist/esm/components/toolbar/text-horizontal-align-selector.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HorizontalAlign } from "../../types";
+type TextHorizontalAlignSelectorProps = {
+    disabled?: boolean;
+    value: HorizontalAlign | undefined | null;
+    onChange(value: HorizontalAlign): void;
+};
+export declare const TextHorizontalAlignSelector: ({ value, onChange, disabled, }: TextHorizontalAlignSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-horizontal-align-selector.d.ts.map

package/dist/esm/components/toolbar/text-horizontal-align-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-horizontal-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-horizontal-align-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,KAAK,gCAAgC,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,gCAIzC,gCAAgC,sBA0DlC,CAAC"}

package/dist/esm/components/toolbar/text-horizontal-align-selector.js

@@ -0,0 +1,36 @@
+import { MdFormatAlignCenter, MdFormatAlignLeft, MdFormatAlignRight, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { Stack } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+import { useFocusSheet } from "../../atoms";
+export const TextHorizontalAlignSelector = ({ value = "left", onChange, disabled, }) => {
+    const focusSheet = useFocusSheet();
+    const [isOpen, onOpenChange] = useState(false);
+    const close = () => onOpenChange(false);
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "lg", tooltip: "Horizontal align", disabled: disabled },
+                value === "right" ? (React.createElement(MdFormatAlignRight, null)) : value === "center" ? (React.createElement(MdFormatAlignCenter, null)) : (React.createElement(MdFormatAlignLeft, null)),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { direction: "horizontal", className: "gap-1 max-w-[140px] flex-wrap" },
+                React.createElement(IconButton, { size: "lg", isActive: value === "left", onClick: () => {
+                        onChange("left");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdFormatAlignLeft, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "center", onClick: () => {
+                        onChange("center");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdFormatAlignCenter, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "right", onClick: () => {
+                        onChange("right");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdFormatAlignRight, null))))));
+};

package/dist/esm/components/toolbar/text-vertical-align-selector.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { VerticalAlign } from "../../types";
+type TextVerticalAlignSelectorProps = {
+    value: VerticalAlign | undefined | null;
+    onChange(value: VerticalAlign): void;
+};
+export declare const TextVerticalAlignSelector: ({ value, onChange, }: TextVerticalAlignSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-vertical-align-selector.d.ts.map

package/dist/esm/components/toolbar/text-vertical-align-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-vertical-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-vertical-align-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,8BAA8B,GAAG;IACpC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,sBAGvC,8BAA8B,sBA0DhC,CAAC"}

package/dist/esm/components/toolbar/text-vertical-align-selector.js

@@ -0,0 +1,36 @@
+import { MdOutlineArrowDropDown, MdVerticalAlignBottom, MdVerticalAlignCenter, MdVerticalAlignTop, } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { Stack } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+import { useFocusSheet } from "../../atoms";
+export const TextVerticalAlignSelector = ({ value = "bottom", onChange, }) => {
+    const focusSheet = useFocusSheet();
+    const [isOpen, onOpenChange] = useState(false);
+    const close = () => onOpenChange(false);
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "lg", tooltip: "Vertical align" },
+                value === "top" ? (React.createElement(MdVerticalAlignTop, null)) : value === "middle" ? (React.createElement(MdVerticalAlignCenter, null)) : (React.createElement(MdVerticalAlignBottom, null)),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { direction: "horizontal", className: "gap-1 flex-wrap max-w-[140px]" },
+                React.createElement(IconButton, { size: "lg", isActive: value === "top", onClick: () => {
+                        onChange("top");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdVerticalAlignTop, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "middle", onClick: () => {
+                        onChange("middle");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdVerticalAlignCenter, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "bottom", onClick: () => {
+                        onChange("bottom");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(MdVerticalAlignBottom, null))))));
+};

package/dist/esm/components/toolbar/text-wrap-selector.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WrapStrategy } from "../../types";
+type TextWrapSelectorProps = {
+    value?: WrapStrategy | null;
+    onChange(value: WrapStrategy): void;
+};
+export declare const TextWrapSelector: ({ value, onChange, }: TextWrapSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-wrap-selector.d.ts.map

package/dist/esm/components/toolbar/text-wrap-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-wrap-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,sBA8DvB,CAAC"}

package/dist/esm/components/toolbar/text-wrap-selector.js

@@ -0,0 +1,35 @@
+import { TextoverflowClipIcon, TextOverflowIcon, TextOverflowWrapIcon, } from "@rowsncolumns/icons";
+import { MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { IconButton, Popover, PopoverContent, PopoverTrigger, Stack, } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+import { useFocusSheet } from "../../atoms";
+export const TextWrapSelector = ({ value = "overflow", onChange, }) => {
+    const focusSheet = useFocusSheet();
+    const [isOpen, onOpenChange] = useState(false);
+    const close = () => onOpenChange(false);
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "lg", tooltip: "Text wrapping" },
+                value === "overflow" ? (React.createElement(TextOverflowIcon, null)) : value === "wrap" ? (React.createElement(TextOverflowWrapIcon, null)) : (React.createElement(TextoverflowClipIcon, null)),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { direction: "horizontal", className: "flex-wrap gap-1 max-w-[140px]" },
+                React.createElement(IconButton, { size: "lg", isActive: value === "overflow", tooltip: "Overflow", onClick: () => {
+                        onChange("overflow");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(TextOverflowIcon, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "wrap", tooltip: "Wrap", onClick: () => {
+                        onChange("wrap");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(TextOverflowWrapIcon, null)),
+                React.createElement(IconButton, { size: "lg", isActive: value === "clip", tooltip: "Clip", onClick: () => {
+                        onChange("clip");
+                        focusSheet?.();
+                        close();
+                    } },
+                    React.createElement(TextoverflowClipIcon, null))))));
+};

package/dist/esm/components/toolbar/theme-selector.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+type ThemeSelectorProps = {
+    theme?: SpreadsheetTheme;
+    themes?: SpreadsheetTheme[];
+    onChangeTheme?(theme: SpreadsheetTheme): void;
+};
+export declare const ThemeSelector: React.MemoExoticComponent<({ onChangeTheme, theme: selectedTheme, themes, }: ThemeSelectorProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=theme-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/theme-selector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,aAAa,+EAKrB,kBAAkB,uBAwCtB,CAAC"}

package/dist/esm/components/toolbar/theme-selector.js

@@ -0,0 +1,27 @@
+import { CheckIcon, MdOutlineArrowDropDown, MdPalette, } from "@rowsncolumns/icons";
+import { ColorPicker, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuTrigger, IconButton, } from "@rowsncolumns/ui";
+import React, { memo } from "react";
+import { useFocusSheet } from "../../atoms";
+import { availableThemes, colorKeys } from "../../themes";
+export const ThemeSelector = memo(({ onChangeTheme, theme: selectedTheme, themes = availableThemes, }) => {
+    const focusSheet = useFocusSheet();
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "xl", tooltip: "Themes", className: "gap-1" },
+                React.createElement(MdPalette, null),
+                React.createElement("div", { className: "text-xs" }, "Theme"),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { align: "start" }, themes.map((theme, idx) => {
+                const themeColors = [...colorKeys.values()].map((value) => theme.themeColors[value]?.toLowerCase());
+                return (React.createElement(DropdownMenuCheckboxItem, { key: idx, onClick: () => {
+                        onChangeTheme?.(theme);
+                        focusSheet?.();
+                    }, checked: theme === selectedTheme },
+                    React.createElement(DropdownMenuItemIndicator, null,
+                        React.createElement(CheckIcon, null)),
+                    React.createElement("div", { className: "flex-1 text-xs pr-4" }, theme.name),
+                    React.createElement(ColorPicker, { size: 10, colors: themeColors })));
+            })))));
+});
+ThemeSelector.displayName = "ThemeSelector";

package/dist/esm/components/toolbar/toolbar.d.ts

@@ -0,0 +1,12 @@
+import type { Stack } from "@rowsncolumns/ui";
+import type { FC } from "react";
+import React from "react";
+export declare const Toolbar: FC<{
+    children?: React.ReactNode;
+    enableFloating?: boolean;
+    gap?: number;
+    padding?: number;
+    moreButtonWidth?: number;
+} & React.ComponentProps<typeof Stack>>;
+export declare const ToolbarSeparator: () => React.JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/esm/components/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAU9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,EAAE,CACtB;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CA6MvC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yBAE5B,CAAC"}

package/dist/esm/components/toolbar/toolbar.js

@@ -0,0 +1,133 @@
+import { DotsVerticalIcon } from "@rowsncolumns/icons";
+import { cn, IconButton, Popover, PopoverContent, PopoverPortal, PopoverTrigger, Separator, } from "@rowsncolumns/ui";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+export const Toolbar = ({ className, children, 
+// 0.5rem = 8px (gap-2)
+gap = 8, 
+// p-1 = 4px on each side = 8px total horizontal
+padding = 6, enableFloating = false, moreButtonWidth = 30, ...props }) => {
+    const containerRef = useRef(null);
+    const itemsRef = useRef(null);
+    const itemWidthsRef = useRef([]);
+    const containerWidthRef = useRef(0);
+    const [overflow, setOverflow] = useState({
+        visibleCount: React.Children.count(children),
+        isOverflowing: false,
+    });
+    // Memoize child array to prevent recalculation on every render
+    const childArray = useMemo(() => React.Children.toArray(children), [children]);
+    const visibleCount = useMemo(() => React.Children.count(children), [children]);
+    const calculateVisibleItems = useCallback(() => {
+        if (!enableFloating || !containerRef.current || !itemsRef.current) {
+            setOverflow({
+                visibleCount,
+                isOverflowing: false,
+            });
+            return;
+        }
+        const container = containerRef.current;
+        const items = Array.from(itemsRef.current.children);
+        if (items.length === 0) {
+            setOverflow({
+                visibleCount: 0,
+                isOverflowing: false,
+            });
+            return;
+        }
+        const containerWidth = containerWidthRef.current || container.offsetWidth;
+        const availableWidth = containerWidth - padding;
+        // Use cached measurements to avoid repeated layout reads on resize.
+        const itemWidths = itemWidthsRef.current.length === items.length
+            ? itemWidthsRef.current
+            : items.map((item) => item.offsetWidth);
+        // First, check if all items can fit
+        let allItemsWidth = 0;
+        for (let i = 0; i < itemWidths.length; i++) {
+            allItemsWidth += itemWidths[i];
+            if (i > 0)
+                allItemsWidth += gap;
+        }
+        // If all items fit, no overflow needed
+        if (allItemsWidth <= availableWidth) {
+            setOverflow({
+                visibleCount: items.length,
+                isOverflowing: false,
+            });
+            return;
+        }
+        // Otherwise, calculate how many items can fit with the more button
+        const maxWidth = availableWidth - moreButtonWidth;
+        let totalWidth = 0;
+        let visible = 0;
+        for (let i = 0; i < itemWidths.length; i++) {
+            const itemWidth = itemWidths[i];
+            const gapWidth = i > 0 ? gap : 0;
+            const neededWidth = totalWidth + gapWidth + itemWidth;
+            if (neededWidth <= maxWidth) {
+                totalWidth = neededWidth;
+                visible++;
+            }
+            else {
+                break;
+            }
+        }
+        setOverflow({
+            visibleCount: visible,
+            isOverflowing: visible < items.length,
+        });
+    }, [visibleCount, enableFloating, moreButtonWidth, padding, gap]);
+    useEffect(() => {
+        if (!enableFloating || !itemsRef.current) {
+            return;
+        }
+        const items = Array.from(itemsRef.current.children);
+        if (items.length === 0) {
+            itemWidthsRef.current = [];
+            return;
+        }
+        itemWidthsRef.current = items.map((item) => item.offsetWidth);
+        calculateVisibleItems();
+    }, [visibleCount, enableFloating, calculateVisibleItems]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Single ResizeObserver instance for the component lifecycle
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            containerWidthRef.current = entry.contentRect.width;
+            requestAnimationFrame(() => {
+                calculateVisibleItems();
+            });
+        });
+        // Initial calculation
+        requestAnimationFrame(() => {
+            calculateVisibleItems();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [calculateVisibleItems]);
+    const visibleChildren = enableFloating
+        ? childArray.slice(0, overflow.visibleCount)
+        : childArray;
+    const hiddenChildren = enableFloating
+        ? childArray.slice(overflow.visibleCount)
+        : [];
+    if (!enableFloating) {
+        return (React.createElement("div", { ref: containerRef, className: cn("flex border-b-0 border-rnc-border border-t border-l border-r border-solid min-w-0 flex-wrap bg-rnc-background p-1 gap-2 print:hidden", className), ...props }, children));
+    }
+    return (React.createElement("div", { ref: containerRef, className: cn("flex border-b-0 border-rnc-border border-t border-l border-r border-solid min-w-0 bg-rnc-background p-1 gap-2 print:hidden", className), style: { willChange: "contents" }, ...props },
+        React.createElement("div", { ref: itemsRef, className: "absolute invisible flex gap-2 p-1", "aria-hidden": "true", style: { top: -9999, left: -9999 } }, childArray),
+        visibleChildren,
+        overflow.isOverflowing && hiddenChildren.length > 0 && (React.createElement(Popover, null,
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(IconButton, { "aria-label": "More options" },
+                    React.createElement(DotsVerticalIcon, { className: "h-4 w-4" }))),
+            React.createElement(PopoverPortal, null,
+                React.createElement(PopoverContent, { className: "flex flex-row gap-2 p-2 flex-wrap max-w-[var(--radix-popover-content-available-width)]", align: "end" }, hiddenChildren))))));
+};
+Toolbar.displayName = "Toolbar";
+export const ToolbarSeparator = () => {
+    return React.createElement(Separator, { orientation: "vertical", color: "$gray6" });
+};

package/dist/esm/components/toolbar/types.d.ts

@@ -0,0 +1,2 @@
+export type BorderLocation = "all" | "outer" | "inner" | "vertical" | "horizontal" | "left" | "right" | "bottom" | "top";
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/toolbar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,OAAO,GACP,OAAO,GACP,UAAU,GACV,YAAY,GACZ,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,CAAC"}

package/dist/esm/components/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/toolbar/view-menu.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type ViewMenuProps = {
+    /** Current value of the gridlines toggle. */
+    showGridLines?: boolean;
+    /** Current value of the show-formulas toggle. */
+    showFormulas?: boolean;
+    /** Current value of the row/column headings toggle. */
+    showHeaders?: boolean;
+    onToggleGridLines?(next: boolean): void;
+    onToggleShowFormulas?(next: boolean): void;
+    onToggleHeaders?(next: boolean): void;
+};
+/**
+ * View menu — workbook-level view toggles. Mirrors Excel / Sheets'
+ * "View" menu. Today exposes:
+ *   - Show gridlines  → `showGridLines` prop on canvas grid
+ *   - Show formulas   → `showFormulas` prop on canvas grid
+ *                       (Ctrl+\` continues to work)
+ *
+ * Hosts that don't pass the toggle callbacks see the corresponding
+ * item rendered as a disabled, read-only indicator of state.
+ */
+export declare const ViewMenu: React.MemoExoticComponent<({ showGridLines, showFormulas, showHeaders, onToggleGridLines, onToggleShowFormulas, onToggleHeaders, }: ViewMenuProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=view-menu.d.ts.map