@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.8.1

package/dist/QueryFilter/useQueryFilter.js

@@ -1,36 +1,32 @@
-import { useState } from "react";
-import { DEFAULT_QUERY_FILTER } from "./QueryFilter.constants";
+import { useEffect, useState } from "react";
 import shortUUID from "short-uuid";
+const defaultFilter = {
+    combinator: "and",
+    rules: [],
+};
 export const useQueryFilter = (args) => {
-    var _a, _b, _c;
-    const controlledFilter = (_a = args.value) !== null && _a !== void 0 ? _a : args.filter;
-    const defaultValue = (_c = (_b = args.defaultValue) !== null && _b !== void 0 ? _b : args.defaultFilter) !== null && _c !== void 0 ? _c : DEFAULT_QUERY_FILTER;
-    const [internalFilter, setInternalFilter] = useState(defaultValue || DEFAULT_QUERY_FILTER);
-    const isControlled = controlledFilter !== undefined;
-    const filter = isControlled
-        ? controlledFilter || DEFAULT_QUERY_FILTER
-        : internalFilter;
-    const commitFilter = (updater) => {
-        var _a;
-        const nextFilter = updater(filter);
-        if (!isControlled) {
-            setInternalFilter(nextFilter);
-        }
-        (_a = args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, nextFilter);
-    };
+    const [filter, setFilter] = useState((args === null || args === void 0 ? void 0 : args.defaultFilter) || defaultFilter);
     const addRule = (rule) => {
-        const nextRule = Object.assign(Object.assign({}, rule), { id: rule.id || shortUUID.generate() });
-        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: [...currentFilter.rules, nextRule] })));
+        if (!rule.id) {
+            rule.id = shortUUID.generate();
+        }
+        setFilter(Object.assign(Object.assign({}, filter), { rules: [...filter.rules, rule] }));
     };
     const removeRule = (id) => {
-        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: currentFilter.rules.filter((r) => r.id !== id) })));
+        const rules = filter.rules.filter((r) => r.id !== id);
+        setFilter(Object.assign(Object.assign({}, filter), { rules }));
     };
     const updateRule = (rule) => {
-        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { rules: currentFilter.rules.map((r) => (r.id === rule.id ? rule : r)) })));
+        const rules = filter.rules.map((r) => (r.id === rule.id ? rule : r));
+        setFilter(Object.assign(Object.assign({}, filter), { rules }));
     };
     const updateRootCombinator = (combinator) => {
-        commitFilter((currentFilter) => (Object.assign(Object.assign({}, currentFilter), { combinator })));
+        setFilter(Object.assign(Object.assign({}, filter), { combinator }));
     };
+    useEffect(() => {
+        var _a;
+        (_a = args === null || args === void 0 ? void 0 : args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, filter);
+    }, [filter]);
     return {
         filter,
         filterDefinitions: args.filterDefinitions,

package/dist/RichTextEditor/Components/CodeBlockBaseButton.d.ts

@@ -0,0 +1,18 @@
+export declare const CodeBlockBaseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../../core").Size;
+    variant?: import("../../core").Variant;
+    color?: import("../../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>> & string & Omit<import("react").FC<import("../../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Components/CodeBlockBaseButton.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Button } from "../../Button";
+export const CodeBlockBaseButton = styled(Button) `
+  padding: 5px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+`;

package/dist/RichTextEditor/Components/CodeBlockCopyButton.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockCopyButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    text?: string;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockCopyButton: ({ className, editor, text, size, }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockCopyButton.js

@@ -0,0 +1,42 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { copyCodeBlockText, getActiveCodeBlockText, } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+const CodeBlockCopyButton = ({ className, editor, text, size = "xs", }) => {
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const code = text !== null && text !== void 0 ? text : getActiveCodeBlockText(editor || null);
+    useEffect(() => {
+        if (!copied && !copyFailed)
+            return;
+        const timeout = window.setTimeout(() => {
+            setCopied(false);
+            setCopyFailed(false);
+        }, 1400);
+        return () => window.clearTimeout(timeout);
+    }, [copied, copyFailed]);
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: copyFailed ? "Unable to copy" : copied ? "Copied" : "Copy code", "aria-label": copyFailed ? "Unable to copy code" : copied ? "Copied" : "Copy code", disabled: !code, onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            try {
+                yield copyCodeBlockText(code);
+                setCopied(true);
+                setCopyFailed(false);
+            }
+            catch (_a) {
+                setCopied(false);
+                setCopyFailed(true);
+            }
+        }), children: copied ? _jsx(CheckIcon, { size: 14 }) : _jsx(CopyIcon, { size: 14 }) }));
+};
+export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockFormatButton.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockFormatButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    language?: string;
+    onFormat?: () => Promise<void>;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockFormatButton: ({ className, editor, language, onFormat, size, }: CodeBlockFormatButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockFormatButton;

package/dist/RichTextEditor/Components/CodeBlockFormatButton.js

@@ -0,0 +1,60 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CheckIcon, TriangleAlertIcon, WandSparklesIcon } from "lucide-react";
+import { canFormatCodeBlockLanguage, formatActiveCodeBlock, getCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+const CodeBlockFormatButton = ({ className, editor, language, onFormat, size = "xs", }) => {
+    const [formatted, setFormatted] = useState(false);
+    const [formatFailed, setFormatFailed] = useState(false);
+    const codeLanguage = language !== null && language !== void 0 ? language : getCodeBlockLanguage(editor || null);
+    const canFormat = canFormatCodeBlockLanguage(codeLanguage);
+    useEffect(() => {
+        if (!formatted && !formatFailed)
+            return;
+        const timeout = window.setTimeout(() => {
+            setFormatted(false);
+            setFormatFailed(false);
+        }, 1400);
+        return () => window.clearTimeout(timeout);
+    }, [formatted, formatFailed]);
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: !canFormat
+            ? "Formatting is not supported for this language"
+            : formatFailed
+                ? "Unable to format code"
+                : formatted
+                    ? "Formatted"
+                    : "Format code", "aria-label": !canFormat
+            ? "Formatting is not supported for this language"
+            : formatFailed
+                ? "Unable to format code"
+                : formatted
+                    ? "Formatted"
+                    : "Format code", disabled: !canFormat || (!onFormat && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock"))), onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            try {
+                if (onFormat) {
+                    yield onFormat();
+                }
+                else {
+                    yield formatActiveCodeBlock(editor || null);
+                }
+                setFormatted(true);
+                setFormatFailed(false);
+            }
+            catch (_a) {
+                setFormatted(false);
+                setFormatFailed(true);
+            }
+        }), children: formatted ? (_jsx(CheckIcon, { size: 14 })) : formatFailed ? (_jsx(TriangleAlertIcon, { size: 14 })) : (_jsx(WandSparklesIcon, { size: 14 })) }));
+};
+export default CodeBlockFormatButton;

package/dist/RichTextEditor/Components/CodeBlockLanguageSelect.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockLanguageSelectProps = {
+    className?: string;
+    editor?: Editor | null;
+    language?: string;
+    onLanguageChange?: (language: string) => void;
+};
+declare const CodeBlockLanguageSelect: ({ className, editor, language, onLanguageChange, }: CodeBlockLanguageSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockLanguageSelect;

package/dist/RichTextEditor/Components/CodeBlockLanguageSelect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeXmlIcon } from "lucide-react";
+import { DropDownMenu } from "../../DropDownMenu";
+import { CODE_BLOCK_LANGUAGES, getCodeBlockLanguage, getCodeBlockLanguageOption, setCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+import { useTheme } from "styled-components";
+const CodeBlockLanguageSelect = ({ className, editor, language, onLanguageChange, }) => {
+    const theme = useTheme();
+    const codeLanguage = language !== null && language !== void 0 ? language : getCodeBlockLanguage(editor || null);
+    const selectedLanguage = getCodeBlockLanguageOption(codeLanguage);
+    return (_jsx(DropDownMenu, { className: className, data: CODE_BLOCK_LANGUAGES, value: [selectedLanguage], enableSelectedOptionStyling: true, size: "xs", variant: "outlined", disabled: !onLanguageChange && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onItemSelect: (item) => {
+            if (onLanguageChange) {
+                onLanguageChange(item.value);
+                return;
+            }
+            setCodeBlockLanguage(editor || null, item.value);
+        }, buttonProps: {
+            title: "Select code language",
+            leftSection: _jsx(CodeXmlIcon, { size: 12 }),
+            style: {
+                padding: "1px 6px",
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, dropDownProps: {
+            style: {
+                width: 150,
+                height: 250,
+            },
+        }, children: selectedLanguage.label }));
+};
+export default CodeBlockLanguageSelect;

package/dist/RichTextEditor/Components/CodeBlockNodeView.d.ts

@@ -0,0 +1,3 @@
+import { ReactNodeViewProps } from "@tiptap/react";
+declare const CodeBlockNodeView: ({ editor, getPos, node, updateAttributes, }: ReactNodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockNodeView;

package/dist/RichTextEditor/Components/CodeBlockNodeView.js

@@ -0,0 +1,28 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
+import CodeBlockCopyButton from "./CodeBlockCopyButton";
+import CodeBlockWrapButton from "./CodeBlockWrapButton";
+import CodeBlockFormatButton from "./CodeBlockFormatButton";
+import CodeBlockLanguageSelect from "./CodeBlockLanguageSelect";
+import { formatCodeBlockText, replaceCodeBlockContent, } from "../Utils/codeBlockUtils";
+const CodeBlockNodeView = ({ editor, getPos, node, updateAttributes, }) => {
+    const language = node.attrs.language;
+    const wrap = Boolean(node.attrs.wrap);
+    return (_jsxs(NodeViewWrapper, { as: "pre", className: "editor-code-block", "data-language": language || "plaintext", "data-wrap": wrap ? "true" : "false", children: [_jsxs("div", { className: "editor-code-block-actions", contentEditable: false, children: [_jsx(CodeBlockLanguageSelect, { language: language, onLanguageChange: (language) => updateAttributes({ language }) }), _jsx(CodeBlockWrapButton, { active: wrap, onToggle: () => updateAttributes({ wrap: !wrap }) }), _jsx(CodeBlockFormatButton, { className: "editor-code-block-action", language: language, onFormat: () => __awaiter(void 0, void 0, void 0, function* () {
+                            const pos = getPos();
+                            if (typeof pos !== "number")
+                                return;
+                            const formatted = yield formatCodeBlockText(node.textContent, language);
+                            replaceCodeBlockContent(editor, pos + 1, pos + node.nodeSize - 1, formatted);
+                        }) }), _jsx(CodeBlockCopyButton, { className: "editor-code-block-action", text: node.textContent })] }), _jsx(NodeViewContent, { as: "code", className: `hljs language-${language || "plaintext"}`, spellCheck: false })] }));
+};
+export default CodeBlockNodeView;

package/dist/RichTextEditor/Components/CodeBlockWrapButton.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockWrapButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    active?: boolean;
+    onToggle?: () => void;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockWrapButton: ({ className, editor, active, onToggle, size, }: CodeBlockWrapButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockWrapButton;

package/dist/RichTextEditor/Components/CodeBlockWrapButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrapTextIcon } from "lucide-react";
+import { getCodeBlockWrap, toggleCodeBlockWrap } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+const CodeBlockWrapButton = ({ className, editor, active, onToggle, size = "xs", }) => {
+    const isWrapped = active !== null && active !== void 0 ? active : getCodeBlockWrap(editor || null);
+    return (_jsx(CodeBlockBaseButton, { className: className, size: size, variant: "outlined", title: isWrapped ? "Disable code wrapping" : "Enable code wrapping", "aria-label": isWrapped ? "Disable code wrapping" : "Enable code wrapping", selected: isWrapped, disabled: !onToggle && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onToggle) {
+                onToggle();
+                return;
+            }
+            toggleCodeBlockWrap(editor || null);
+        }, children: _jsx(WrapTextIcon, { size: 14 }) }));
+};
+export default CodeBlockWrapButton;

package/dist/RichTextEditor/Components/LinkEditor.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/react";
+type LinkEditorProps = {
+    editor: Editor;
+    onClose?: () => void;
+    autoFocus?: boolean;
+};
+export declare const LinkEditor: React.FC<LinkEditorProps>;
+export default LinkEditor;

package/dist/RichTextEditor/Components/LinkEditor.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { ExternalLinkIcon, SaveIcon, UnlinkIcon } from "lucide-react";
+import Input from "../../Input";
+import { Button } from "../../Button";
+import { getLinkAttributes, normalizeLinkUrl, openLink, } from "../Utils/linkUtils";
+const LinkEditorContent = styled.form `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 280px;
+`;
+const LinkInput = styled(Input) `
+  min-width: 190px;
+`;
+const LinkActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const LinkEditorButton = styled(Button) `
+  padding: 0 6px;
+`;
+const getInitialHref = (editor) => editor.getAttributes("link").href || "";
+export const LinkEditor = ({ editor, onClose, autoFocus, }) => {
+    const inputRef = useRef(null);
+    const [href, setHref] = useState(() => getInitialHref(editor));
+    const currentHref = getInitialHref(editor);
+    const normalizedLink = useMemo(() => normalizeLinkUrl(href), [href]);
+    const hasLink = Boolean(currentHref);
+    useEffect(() => {
+        setHref(getInitialHref(editor));
+    }, [editor, editor.state.selection.from, editor.state.selection.to]);
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        window.requestAnimationFrame(() => {
+            var _a, _b;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+        });
+    }, [autoFocus]);
+    const handleSave = () => {
+        if (!normalizedLink.isValid)
+            return;
+        const { from, to, empty } = editor.state.selection;
+        const attributes = getLinkAttributes(normalizedLink.href);
+        if (empty && hasLink) {
+            editor.chain().focus().extendMarkRange("link").setLink(attributes).run();
+        }
+        else if (empty) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: "text",
+                text: normalizedLink.href,
+                marks: [
+                    {
+                        type: "link",
+                        attrs: attributes,
+                    },
+                ],
+            })
+                .run();
+        }
+        else {
+            editor
+                .chain()
+                .focus()
+                .setTextSelection({ from, to })
+                .setLink(attributes)
+                .run();
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleRemove = () => {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        handleSave();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (_jsxs(LinkEditorContent, { onSubmit: handleSubmit, children: [_jsx(LinkInput, { ref: inputRef, "aria-label": "Enter URL", placeholder: "https://example.com/", size: "xs", variant: "outlined", value: href, onChange: (event) => setHref(event.target.value), onKeyDown: handleKeyDown }), _jsxs(LinkActions, { children: [hasLink && (_jsxs(_Fragment, { children: [_jsx(LinkEditorButton, { "aria-label": "Open link", title: "Open link", size: "xs", variant: "subtle", type: "button", onClick: () => openLink(currentHref), children: _jsx(ExternalLinkIcon, { size: 14 }) }), _jsx(LinkEditorButton, { "aria-label": "Remove link", title: "Remove link", size: "xs", variant: "subtle", type: "button", onClick: handleRemove, children: _jsx(UnlinkIcon, { size: 14 }) })] })), _jsx(LinkEditorButton, { "aria-label": "Save link", title: "Save link", size: "xs", variant: "subtle", type: "submit", disabled: !normalizedLink.isValid, children: _jsx(SaveIcon, { size: 14 }) })] })] }));
+};
+export default LinkEditor;

package/dist/RichTextEditor/Components/TableTools/TableCornerMenu.d.ts

@@ -0,0 +1,2 @@
+import type { TableCornerMenuProps } from "./TableTools.types";
+export declare const TableCornerMenu: ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }: TableCornerMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableCornerMenu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TablePropertiesIcon } from "lucide-react";
+import { Button } from "../../../Button";
+import { Popover } from "../../../Popover";
+import { getTableActionGroups } from "./TableTools.actions";
+import { CornerRoot, MenuDropdown } from "./TableTools.styled";
+import { getCornerRect } from "./TableTools.geometry";
+import { TableToolMenu } from "./TableToolMenu";
+export const TableCornerMenu = ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }) => {
+    const rect = getCornerRect(target);
+    const groups = getTableActionGroups(editor, target);
+    return (_jsx(CornerRoot, { "data-monolith-table-rail": true, "$top": rect.top, "$left": rect.left, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsxs(Popover, { opened: opened, onChange: (nextOpened) => {
+                if (nextOpened) {
+                    onOpen();
+                    return;
+                }
+                onClose();
+            }, position: "bottom-start", width: 245, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { type: "button", size: "xs", variant: "outlined", title: "Table options", "aria-label": "Table options", selected: opened, onMouseDown: onMouseDown, children: _jsx(TablePropertiesIcon, { size: 12 }) }) }), _jsx(MenuDropdown, { children: _jsx(TableToolMenu, { groups: groups, onAction: onAction }) })] }) }));
+};

package/dist/RichTextEditor/Components/TableTools/TableInsertControls.d.ts

@@ -0,0 +1,2 @@
+import type { TableToolsContentProps } from "./TableTools.types";
+export declare const TableToolsContent: ({ editor, showInsert, onInsert, onAction, }: TableToolsContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Components/TableTools/TableInsertControls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../../Button";
+import Input from "../../../Input";
+import { Switch } from "../../../Switch";
+import { Field, InsertGrid, SwitchRow, TableToolsPanel, TableToolsSection, TableToolsSectionTitle, } from "./TableTools.styled";
+import { DEFAULT_TABLE_OPTIONS, MAX_TABLE_SIZE, MIN_TABLE_SIZE, } from "./TableTools.constants";
+import { runTableCommand } from "./TableTools.commands";
+import { clampTableSize, hasTableExtension } from "./TableTools.selectors";
+export const TableToolsContent = ({ editor, showInsert = false, onInsert, onAction, }) => {
+    const [insertOptions, setInsertOptions] = useState(DEFAULT_TABLE_OPTIONS);
+    const tableAvailable = hasTableExtension(editor) && (editor === null || editor === void 0 ? void 0 : editor.isEditable);
+    const updateInsertOption = (key, value) => {
+        setInsertOptions((current) => (Object.assign(Object.assign({}, current), { [key]: typeof value === "number" ? clampTableSize(value) : value })));
+    };
+    const insertTable = () => {
+        if (!tableAvailable)
+            return;
+        runTableCommand(editor, "insertTable", [insertOptions]);
+        onInsert === null || onInsert === void 0 ? void 0 : onInsert();
+        onAction === null || onAction === void 0 ? void 0 : onAction();
+    };
+    return (_jsx(TableToolsPanel, { children: showInsert && (_jsxs(TableToolsSection, { children: [_jsx(TableToolsSectionTitle, { description: "Create and insert a table at the current editor position.", children: "Insert Table" }), _jsxs(TableToolsSection, { style: { gap: "1rem" }, children: [_jsxs(InsertGrid, { children: [_jsxs(Field, { children: ["Rows", _jsx(Input, { type: "number", min: MIN_TABLE_SIZE, max: MAX_TABLE_SIZE, size: "xs", value: insertOptions.rows, onChange: (event) => updateInsertOption("rows", Number(event.target.value)) })] }), _jsxs(Field, { children: ["Columns", _jsx(Input, { type: "number", min: MIN_TABLE_SIZE, max: MAX_TABLE_SIZE, size: "xs", value: insertOptions.cols, onChange: (event) => updateInsertOption("cols", Number(event.target.value)) })] })] }), _jsx(SwitchRow, { children: _jsx(Switch, { size: "xs", label: "Include Header Row", description: "The first row will be formatted as a header.", value: insertOptions.withHeaderRow, onChange: (checked) => updateInsertOption("withHeaderRow", checked) }) }), _jsx(Button, { size: "xs", variant: "outlined", fullWidth: true, disabled: !tableAvailable, onClick: insertTable, children: "Insert Table" })] })] })) }));
+};

package/dist/RichTextEditor/Components/TableTools/TableRails.d.ts

@@ -0,0 +1,2 @@
+import type { TableRailsProps } from "./TableTools.types";
+export declare const TableRails: ({ editor }: TableRailsProps) => import("react/jsx-runtime").JSX.Element | null;