@verbb/plugin-kit-react 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## Unreleased
+
+## 1.0.4 - 2026-06-10
+
+### Added
+- Added `CodeEditor`, a CodeMirror 6-based code surface for HTML and plain text with line numbers, tab sizing, and validation styling.
+- Added `CodeEditorField` (`codeEditor`) for SchemaForm string fields that need syntax-aware editing.
+- Added `TiptapContent`, a read-only TipTap renderer for previews and summaries that accepts the same value shapes as `RichTextField`.
+
+### Fixed
+- Add icon support to Combobox.
+- Fix dropdown menu icon handling.
+
+## 1.0.2 - 2026-06-07
+
+### Added
+- Added `modifyRow` to `EditableTable`, a row-level companion to `modifyColumn`. Host apps can return optional `cellClassName` and `title` values based on row data; these are applied to all data cells in the row and the actions cell when present.
+- Added support for `cellClassName` and `title` return values from `modifyColumn`, applied to individual table cell wrappers alongside existing column overrides.
+
 ## 1.0.1 - 2026-06-07
 
 ### Added

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,13 @@
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+type CodeEditorLanguage = 'html' | 'text';
+type CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {
+    value: string;
+    onChange: (value: string) => void;
+    language?: CodeEditorLanguage;
+    tabSize?: number;
+    lineNumbers?: boolean;
+    isInvalid?: boolean;
+};
+export declare const CodeEditor: ({ value, onChange, language, tabSize, lineNumbers, rows, disabled, readOnly, isInvalid, className, ...props }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/components/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAGA,OAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAK9E,KAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1C,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAsCF,eAAO,MAAM,UAAU,GAAI,+GAYxB,eAAe,4CAqDjB,CAAC"}

package/dist/components/CodeEditor.js

@@ -0,0 +1,79 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { html } from "@codemirror/lang-html";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+//#region src/components/CodeEditor.tsx
+var LINE_HEIGHT_PX = 18;
+var editorTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "rgb(251, 252, 254)",
+		color: "rgb(31, 41, 51)",
+		fontSize: "12px"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+		lineHeight: `${LINE_HEIGHT_PX}px`
+	},
+	".cm-content": {
+		padding: "6px 8px",
+		caretColor: "rgb(31, 41, 51)"
+	},
+	".cm-gutters": {
+		backgroundColor: "rgb(245, 247, 250)",
+		borderRight: "1px solid rgba(96, 125, 159, 0.2)",
+		color: "#7c8793"
+	},
+	".cm-gutter.cm-lineNumbers .cm-gutterElement": {
+		padding: "0 8px",
+		minWidth: "3rem"
+	},
+	".cm-activeLine": { backgroundColor: "rgba(96, 125, 159, 0.06)" },
+	".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: "rgba(59, 130, 246, 0.35) !important" }
+});
+var CodeEditor = ({ value, onChange, language = "html", tabSize = 4, lineNumbers = true, rows = 12, disabled = false, readOnly = false, isInvalid = false, className, ...props }) => {
+	const extensions = useMemo(() => {
+		const next = [
+			editorTheme,
+			EditorState.tabSize.of(Math.max(1, tabSize)),
+			EditorView.lineWrapping
+		];
+		if (language === "html") next.push(html());
+		return next;
+	}, [language, tabSize]);
+	const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]", "focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]", isInvalid && "border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]", (disabled || readOnly) && "opacity-70", className),
+		style: { "--formie-code-editor-min-height": minHeight },
+		"data-slot": "code-editor",
+		children: /* @__PURE__ */ jsx(CodeMirror, {
+			value: value ?? "",
+			onChange,
+			extensions,
+			editable: !disabled && !readOnly,
+			readOnly: disabled || readOnly,
+			basicSetup: {
+				lineNumbers,
+				foldGutter: false,
+				dropCursor: false,
+				allowMultipleSelections: false,
+				indentOnInput: true,
+				bracketMatching: language === "html",
+				closeBrackets: language === "html",
+				autocompletion: false,
+				highlightSelectionMatches: false,
+				searchKeymap: false,
+				tabSize
+			},
+			...props
+		})
+	});
+};
+//#endregion
+export { CodeEditor };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/components/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../src/components/CodeEditor.tsx"],"sourcesContent":["import { html } from '@codemirror/lang-html';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport CodeMirror, { type ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { useMemo } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CodeEditorLanguage = 'html' | 'text';\n\ntype CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {\n    value: string;\n    onChange: (value: string) => void;\n    language?: CodeEditorLanguage;\n    tabSize?: number;\n    lineNumbers?: boolean;\n    isInvalid?: boolean;\n};\n\nconst LINE_HEIGHT_PX = 18;\n\nconst editorTheme = EditorView.theme({\n    '&': {\n        backgroundColor: 'rgb(251, 252, 254)',\n        color: 'rgb(31, 41, 51)',\n        fontSize: '12px',\n    },\n    '&.cm-focused': {\n        outline: 'none',\n    },\n    '.cm-scroller': {\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',\n        lineHeight: `${LINE_HEIGHT_PX}px`,\n    },\n    '.cm-content': {\n        padding: '6px 8px',\n        caretColor: 'rgb(31, 41, 51)',\n    },\n    '.cm-gutters': {\n        backgroundColor: 'rgb(245, 247, 250)',\n        borderRight: '1px solid rgba(96, 125, 159, 0.2)',\n        color: '#7c8793',\n    },\n    '.cm-gutter.cm-lineNumbers .cm-gutterElement': {\n        padding: '0 8px',\n        minWidth: '3rem',\n    },\n    '.cm-activeLine': {\n        backgroundColor: 'rgba(96, 125, 159, 0.06)',\n    },\n    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {\n        backgroundColor: 'rgba(59, 130, 246, 0.35) !important',\n    },\n});\n\nexport const CodeEditor = ({\n    value,\n    onChange,\n    language = 'html',\n    tabSize = 4,\n    lineNumbers = true,\n    rows = 12,\n    disabled = false,\n    readOnly = false,\n    isInvalid = false,\n    className,\n    ...props\n}: CodeEditorProps) => {\n    const extensions = useMemo(() => {\n        const next = [\n            editorTheme,\n            EditorState.tabSize.of(Math.max(1, tabSize)),\n            EditorView.lineWrapping,\n        ];\n\n        if (language === 'html') {\n            next.push(html());\n        }\n\n        return next;\n    }, [language, tabSize]);\n\n    const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;\n\n    return (\n        <div\n            className={cn(\n                'overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]',\n                'focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                '[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]',\n                isInvalid && 'border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]',\n                (disabled || readOnly) && 'opacity-70',\n                className,\n            )}\n            style={{ '--formie-code-editor-min-height': minHeight }}\n            data-slot=\"code-editor\"\n        >\n            <CodeMirror\n                value={value ?? ''}\n                onChange={onChange}\n                extensions={extensions}\n                editable={!disabled && !readOnly}\n                readOnly={disabled || readOnly}\n                basicSetup={{\n                    lineNumbers,\n                    foldGutter: false,\n                    dropCursor: false,\n                    allowMultipleSelections: false,\n                    indentOnInput: true,\n                    bracketMatching: language === 'html',\n                    closeBrackets: language === 'html',\n                    autocompletion: false,\n                    highlightSelectionMatches: false,\n                    searchKeymap: false,\n                    tabSize,\n                }}\n                {...props}\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAiB;AAEvB,IAAM,cAAc,WAAW,MAAM;CACjC,KAAK;EACD,iBAAiB;EACjB,OAAO;EACP,UAAU;EACb;CACD,gBAAgB,EACZ,SAAS,QACZ;CACD,gBAAgB;EACZ,YAAY;EACZ,YAAY,GAAG,eAAe;EACjC;CACD,eAAe;EACX,SAAS;EACT,YAAY;EACf;CACD,eAAe;EACX,iBAAiB;EACjB,aAAa;EACb,OAAO;EACV;CACD,+CAA+C;EAC3C,SAAS;EACT,UAAU;EACb;CACD,kBAAkB,EACd,iBAAiB,4BACpB;CACD,8EAA8E,EAC1E,iBAAiB,uCACpB;CACJ,CAAC;AAEF,IAAa,cAAc,EACvB,OACA,UACA,WAAW,QACX,UAAU,GACV,cAAc,MACd,OAAO,IACP,WAAW,OACX,WAAW,OACX,YAAY,OACZ,WACA,GAAG,YACgB;CACnB,MAAM,aAAa,cAAc;EAC7B,MAAM,OAAO;GACT;GACA,YAAY,QAAQ,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;GAC5C,WAAW;GACd;AAED,MAAI,aAAa,OACb,MAAK,KAAK,MAAM,CAAC;AAGrB,SAAO;IACR,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,YAAY,GAAG,KAAK,IAAI,OAAO,KAAK,IAAI,IAAI,EAAE,GAAG,iBAAiB,GAAG;AAE3E,QACI,oBAAC,OAAD;EACI,WAAW,GACP,yFACA,uIACA,+DACA,aAAa,2JACZ,YAAY,aAAa,cAC1B,UACH;EACD,OAAO,EAAE,mCAAmC,WAAW;EACvD,aAAU;YAEV,oBAAC,YAAD;GACI,OAAO,SAAS;GACN;GACE;GACZ,UAAU,CAAC,YAAY,CAAC;GACxB,UAAU,YAAY;GACtB,YAAY;IACR;IACA,YAAY;IACZ,YAAY;IACZ,yBAAyB;IACzB,eAAe;IACf,iBAAiB,aAAa;IAC9B,eAAe,aAAa;IAC5B,gBAAgB;IAChB,2BAA2B;IAC3B,cAAc;IACd;IACH;GACD,GAAI;GACN,CAAA;EACA,CAAA"}

package/dist/components/ComboboxInput.d.ts

@@ -1,6 +1,7 @@
 export type ComboboxInputOption = {
     label: string;
     value: string | number;
+    icon?: string | null;
     [key: string]: unknown;
 };
 export type ComboboxInputProps = {

package/dist/components/ComboboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CAyLpB,CAAC"}
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA2BF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CA6LpB,CAAC"}

package/dist/components/ComboboxInput.js

@@ -8,6 +8,14 @@ var optionsCache = /* @__PURE__ */ new Map();
 var toStringValue = (value) => {
 	return String(value ?? "");
 };
+var OptionIcon = ({ icon }) => {
+	if (!icon || typeof icon !== "string") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-hidden": "true",
+		dangerouslySetInnerHTML: { __html: icon }
+	});
+};
 var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multiple = false, disabled = false, placeholder = "Select an option", emptyMessage = "No options found.", className, contentClassName, withLoadingIndicator = true, showClear = true, open, defaultOpen, onOpenChange, onInputValueChange, cacheKey, cacheTtlMs = 300 * 1e3, disableCache = false }) => {
 	const [fetchedOptions, setFetchedOptions] = useState(null);
 	const [loading, setLoading] = useState(false);
@@ -135,7 +143,7 @@ var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multi
 				className,
 				children: /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => {
 					return /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item) => {
-						return /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, toStringValue(item.value));
+						return /* @__PURE__ */ jsxs(ComboboxChip, { children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), item.label] }, toStringValue(item.value));
 					}), /* @__PURE__ */ jsx(ComboboxChipsInput, { placeholder })] });
 				} })
 			}) : /* @__PURE__ */ jsx(ComboboxPrimitiveInput, {
@@ -149,9 +157,12 @@ var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multi
 				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
 					return /* @__PURE__ */ jsx(ComboboxItem, {
 						value: item,
-						children: /* @__PURE__ */ jsx(ComboboxHighlightedText, {
-							text: item.label,
-							search: searchValue
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), /* @__PURE__ */ jsx(ComboboxHighlightedText, {
+								text: item.label,
+								search: searchValue
+							})]
 						})
 					}, toStringValue(item.value));
 				} })]

package/dist/components/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    icon?: string | null;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nconst OptionIcon = ({ icon }: { icon?: string | null }) => {\n    if (!icon || typeof icon !== 'string') {\n        return null;\n    }\n\n    return (\n        <span\n            className=\"text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0\"\n            aria-hidden=\"true\"\n            dangerouslySetInnerHTML={{ __html: icon }}\n        />\n    );\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    <OptionIcon icon={item.icon} />\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <span className=\"flex items-center gap-2\">\n                                        <OptionIcon icon={item.icon} />\n                                        <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                    </span>\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/components/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/DropdownMenu.js

@@ -12,17 +12,15 @@ var dropdownMenuItemVariants = cva([
 	"relative flex w-full cursor-default items-center outline-hidden select-none",
 	"focus:bg-slate-100 data-[highlighted]:bg-slate-100",
 	"data-disabled:pointer-events-none data-disabled:opacity-50",
-	"[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]",
-	"[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
 ], {
 	variants: {
 		size: {
-			xs: "py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]",
-			sm: "py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]",
-			default: "py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]",
-			lg: "py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]",
-			xl: "py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]"
+			xs: "py-[3px] px-[8px] gap-1.5 text-[12px] [&_svg:not([class*='size-'])]:size-2.5",
+			sm: "py-[4px] px-[10px] gap-1.75 text-[13px] [&_svg:not([class*='size-'])]:size-3",
+			default: "py-[8px] px-[12px] gap-2.5 text-sm [&_svg:not([class*='size-'])]:size-3",
+			lg: "py-[10px] px-[14px] gap-3 text-base [&_svg:not([class*='size-'])]:size-3.5",
+			xl: "py-[12px] px-[16px] gap-3 text-lg [&_svg:not([class*='size-'])]:size-4"
 		},
 		variant: {
 			default: "",

package/dist/components/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst dropdownMenuItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n    // Focus\n    'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n    // Disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n    // SVG\n    '[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]',\n    '[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]',\n            sm: 'py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]',\n            default: 'py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]',\n            lg: 'py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]',\n            xl: 'py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst dropdownMenuLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'py-[0px] px-[8px] text-[11px]',\n            sm: 'py-[0px] px-[10px] text-[11px]',\n            default: 'py-[0px] px-[12px] text-[13px]',\n            lg: 'py-[0px] px-[14px] text-[14px]',\n            xl: 'py-[0px] px-[16px] text-[15px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst dropdownMenuShortcutVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'text-[11px]',\n            sm: 'text-xs',\n            default: 'text-sm',\n            lg: 'text-sm',\n            xl: 'text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];\n\nconst DropdownMenuContext = createContext<{ size?: DropdownMenuSize }>({});\n\nfunction DropdownMenu({\n    size,\n    children,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Root> & { size?: DropdownMenuSize }) {\n    return (\n        <DropdownMenuContext.Provider value={{ size }}>\n            <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n                {children}\n            </MenuPrimitive.Root>\n        </DropdownMenuContext.Provider>\n    );\n}\nfunction DropdownMenuPortal({\n    container,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Portal>) {\n    const resolvedPortalContainer = getPortalContainer(container);\n\n    return (\n        <MenuPrimitive.Portal\n            data-slot=\"dropdown-menu-portal\"\n            container={resolvedPortalContainer}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuTrigger({\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger> & { size?: DropdownMenuSize }) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"dropdown-menu-trigger\"\n            data-size={finalSize}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuContent({\n    align = 'start',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    className,\n    portalClassName,\n    portalContainer,\n    ...props\n}: MenuPrimitive.Popup.Props &\n    Pick<\n        MenuPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <MenuPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <MenuPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"z-[250]\"\n            >\n                <MenuPrimitive.Popup\n                    data-slot=\"dropdown-menu-content\"\n                    className={cn(\n                        // Reset\n                        'relative isolate z-[250] overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        // \"min-w-36 max-h-(--available-height) w-(--anchor-width)\",\n\n                        // Theme\n                        'py-1',\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Animation\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n                        'data-[align-trigger=true]:animate-none',\n                        'origin-(--transform-origin)',\n\n                        className,\n                    )}\n                    {...props}\n                />\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n};\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n    className,\n    inset,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.GroupLabel\n            data-slot=\"dropdown-menu-label\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuLabelVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuItem({\n    className,\n    inset,\n    size,\n    variant = 'default',\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {\n    inset?: boolean\n    variant?: 'default' | 'destructive'\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"dropdown-menu-item\"\n            data-inset={inset}\n            data-variant={variant}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, variant, className }),\n\n                inset && 'pl-8',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuSub({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n    className,\n    inset,\n    children,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean\n    size?: DropdownMenuSize\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"dropdown-menu-sub-trigger\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize }),\n\n                // Keep submenu triggers visually active while their child menu is open\n                'data-[popup-open]:bg-slate-100',\n\n                // SVG\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                inset && 'pl-8',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon icon={faChevronRight} className=\"ml-auto size-3 text-slate-700\" />\n        </MenuPrimitive.SubmenuTrigger>\n    );\n};\n\nfunction DropdownMenuSubContent({\n    align = 'start',\n    alignOffset = -3,\n    side = 'right',\n    sideOffset = 0,\n    className,\n    ...props\n}: ComponentProps<typeof DropdownMenuContent>) {\n\n    return (\n        <DropdownMenuContent\n            data-slot=\"dropdown-menu-sub-content\"\n            className={cn(\n                'min-w-32 w-auto',\n                className,\n            )}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuCheckboxItem({\n    className,\n    children,\n    checked,\n    inset,\n    ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"dropdown-menu-checkbox-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            checked={checked}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-checkbox-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.CheckboxItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.CheckboxItemIndicator>\n            </span>\n        </MenuPrimitive.CheckboxItem>\n    );\n};\n\nfunction DropdownMenuRadioGroup({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n    return (\n        <MenuPrimitive.RadioGroup\n            data-slot=\"dropdown-menu-radio-group\"\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuRadioItem({\n    className,\n    children,\n    inset,\n    ...props\n}: MenuPrimitive.RadioItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"dropdown-menu-radio-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-radio-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.RadioItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.RadioItemIndicator>\n            </span>\n        </MenuPrimitive.RadioItem>\n    );\n};\n\nfunction DropdownMenuSeparator({\n    className,\n    ...props\n}: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"dropdown-menu-separator\"\n            className={cn(\n                // Theme\n                'my-1 h-px bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <span\n            data-slot=\"dropdown-menu-shortcut\"\n            className={cn(\n                'text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest',\n\n                dropdownMenuShortcutVariants({ size: finalSize, className }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    DropdownMenu,\n    DropdownMenuPortal,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuLabel,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst dropdownMenuItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n    // Focus\n    'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n    // Disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n    // SVG — use single-quoted attribute selectors so Tailwind emits\n    // svg:not([class*=size-]) rather than a broken escaped form.\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'py-[3px] px-[8px] gap-1.5 text-[12px] [&_svg:not([class*=\\'size-\\'])]:size-2.5',\n            sm: 'py-[4px] px-[10px] gap-1.75 text-[13px] [&_svg:not([class*=\\'size-\\'])]:size-3',\n            default: 'py-[8px] px-[12px] gap-2.5 text-sm [&_svg:not([class*=\\'size-\\'])]:size-3',\n            lg: 'py-[10px] px-[14px] gap-3 text-base [&_svg:not([class*=\\'size-\\'])]:size-3.5',\n            xl: 'py-[12px] px-[16px] gap-3 text-lg [&_svg:not([class*=\\'size-\\'])]:size-4',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst dropdownMenuLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'py-[0px] px-[8px] text-[11px]',\n            sm: 'py-[0px] px-[10px] text-[11px]',\n            default: 'py-[0px] px-[12px] text-[13px]',\n            lg: 'py-[0px] px-[14px] text-[14px]',\n            xl: 'py-[0px] px-[16px] text-[15px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst dropdownMenuShortcutVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'text-[11px]',\n            sm: 'text-xs',\n            default: 'text-sm',\n            lg: 'text-sm',\n            xl: 'text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];\n\nconst DropdownMenuContext = createContext<{ size?: DropdownMenuSize }>({});\n\nfunction DropdownMenu({\n    size,\n    children,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Root> & { size?: DropdownMenuSize }) {\n    return (\n        <DropdownMenuContext.Provider value={{ size }}>\n            <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n                {children}\n            </MenuPrimitive.Root>\n        </DropdownMenuContext.Provider>\n    );\n}\nfunction DropdownMenuPortal({\n    container,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Portal>) {\n    const resolvedPortalContainer = getPortalContainer(container);\n\n    return (\n        <MenuPrimitive.Portal\n            data-slot=\"dropdown-menu-portal\"\n            container={resolvedPortalContainer}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuTrigger({\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger> & { size?: DropdownMenuSize }) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"dropdown-menu-trigger\"\n            data-size={finalSize}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuContent({\n    align = 'start',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    className,\n    portalClassName,\n    portalContainer,\n    ...props\n}: MenuPrimitive.Popup.Props &\n    Pick<\n        MenuPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <MenuPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <MenuPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"z-[250]\"\n            >\n                <MenuPrimitive.Popup\n                    data-slot=\"dropdown-menu-content\"\n                    className={cn(\n                        // Reset\n                        'relative isolate z-[250] overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        // \"min-w-36 max-h-(--available-height) w-(--anchor-width)\",\n\n                        // Theme\n                        'py-1',\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Animation\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n                        'data-[align-trigger=true]:animate-none',\n                        'origin-(--transform-origin)',\n\n                        className,\n                    )}\n                    {...props}\n                />\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n};\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n    className,\n    inset,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.GroupLabel\n            data-slot=\"dropdown-menu-label\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuLabelVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuItem({\n    className,\n    inset,\n    size,\n    variant = 'default',\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {\n    inset?: boolean\n    variant?: 'default' | 'destructive'\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"dropdown-menu-item\"\n            data-inset={inset}\n            data-variant={variant}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, variant, className }),\n\n                inset && 'pl-8',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuSub({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n    className,\n    inset,\n    children,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean\n    size?: DropdownMenuSize\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"dropdown-menu-sub-trigger\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize }),\n\n                // Keep submenu triggers visually active while their child menu is open\n                'data-[popup-open]:bg-slate-100',\n\n                // SVG\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                inset && 'pl-8',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon icon={faChevronRight} className=\"ml-auto size-3 text-slate-700\" />\n        </MenuPrimitive.SubmenuTrigger>\n    );\n};\n\nfunction DropdownMenuSubContent({\n    align = 'start',\n    alignOffset = -3,\n    side = 'right',\n    sideOffset = 0,\n    className,\n    ...props\n}: ComponentProps<typeof DropdownMenuContent>) {\n\n    return (\n        <DropdownMenuContent\n            data-slot=\"dropdown-menu-sub-content\"\n            className={cn(\n                'min-w-32 w-auto',\n                className,\n            )}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuCheckboxItem({\n    className,\n    children,\n    checked,\n    inset,\n    ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"dropdown-menu-checkbox-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            checked={checked}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-checkbox-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.CheckboxItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.CheckboxItemIndicator>\n            </span>\n        </MenuPrimitive.CheckboxItem>\n    );\n};\n\nfunction DropdownMenuRadioGroup({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n    return (\n        <MenuPrimitive.RadioGroup\n            data-slot=\"dropdown-menu-radio-group\"\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuRadioItem({\n    className,\n    children,\n    inset,\n    ...props\n}: MenuPrimitive.RadioItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"dropdown-menu-radio-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-radio-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.RadioItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.RadioItemIndicator>\n            </span>\n        </MenuPrimitive.RadioItem>\n    );\n};\n\nfunction DropdownMenuSeparator({\n    className,\n    ...props\n}: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"dropdown-menu-separator\"\n            className={cn(\n                // Theme\n                'my-1 h-px bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <span\n            data-slot=\"dropdown-menu-shortcut\"\n            className={cn(\n                'text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest',\n\n                dropdownMenuShortcutVariants({ size: finalSize, className }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    DropdownMenu,\n    DropdownMenuPortal,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuLabel,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/components/EditableTable.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { EditableTableColumn, EditableTableModifyColumn, EditableTableOnCellChange, EditableTableRow, EditableTableRowActionArgs } from './editable-table/types';
+import { EditableTableColumn, EditableTableModifyColumn, EditableTableModifyRow, EditableTableOnCellChange, EditableTableRow, EditableTableRowActionArgs } from './editable-table/types';
+export type { EditableTableColumn, EditableTableModifyColumn, EditableTableModifyColumnResult, EditableTableModifyRow, EditableTableOnCellChange, EditableTableRow, EditableTableRowActionArgs, } from './editable-table/types';
 export type EditableTableProps = {
     columns: EditableTableColumn[];
     rows: EditableTableRow[];
@@ -11,6 +12,7 @@ export type EditableTableProps = {
     allowDelete?: boolean;
     className?: string;
     modifyColumn?: EditableTableModifyColumn;
+    modifyRow?: EditableTableModifyRow;
     fieldName?: string;
     cellErrors?: Record<string, unknown>;
     newRowDefaults?: Record<string, unknown>;
@@ -24,5 +26,5 @@ export type EditableTableProps = {
     renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;
     renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;
 };
-export declare function EditableTable({ columns, rows, onChange, onCellChange, addRowLabel, allowReorder, allowAdd, allowDelete, className, modifyColumn, fieldName, cellErrors, newRowDefaults, renderActions, renderRowActions, renderRowMenuItemsBeforeCore, renderRowMenuItemsAfterCore, renderRowMenuItems, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditableTable({ columns, rows, onChange, onCellChange, addRowLabel, allowReorder, allowAdd, allowDelete, className, modifyColumn, modifyRow, fieldName, cellErrors, newRowDefaults, renderActions, renderRowActions, renderRowMenuItemsBeforeCore, renderRowMenuItemsAfterCore, renderRowMenuItems, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditableTable.d.ts.map

package/dist/components/EditableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTable.d.ts","sourceRoot":"","sources":["../../src/components/EditableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAoBpD,OAAO,KAAK,EACR,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,0BAA0B,EAC7B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,4BAA4B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,2BAA2B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9E,CAAC;AAwBF,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,YAAwB,EACxB,WAAW,EACX,YAAmB,EACnB,QAAe,EACf,WAAkB,EAClB,SAAc,EACd,YAAwB,EACxB,SAAqB,EACrB,UAAe,EACf,cAAmB,EACnB,aAAyB,EACzB,gBAA4B,EAC5B,4BAAwC,EACxC,2BAAuC,EACvC,kBAA8B,GACjC,EAAE,kBAAkB,2CA8KpB"}
+{"version":3,"file":"EditableTable.d.ts","sourceRoot":"","sources":["../../src/components/EditableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAoBpD,OAAO,KAAK,EACR,mBAAmB,EACnB,yBAAyB,EACzB,sBAAsB,EACtB,yBAAyB,EACzB,gBAAgB,EAChB,0BAA0B,EAC7B,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EACR,mBAAmB,EACnB,yBAAyB,EACzB,+BAA+B,EAC/B,sBAAsB,EACtB,yBAAyB,EACzB,gBAAgB,EAChB,0BAA0B,GAC7B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,4BAA4B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,2BAA2B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9E,CAAC;AAyBF,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,YAAwB,EACxB,WAAW,EACX,YAAmB,EACnB,QAAe,EACf,WAAkB,EAClB,SAAc,EACd,YAAwB,EACxB,SAAqB,EACrB,SAAqB,EACrB,UAAe,EACf,cAAmB,EACnB,aAAyB,EACzB,gBAA4B,EAC5B,4BAAwC,EACxC,2BAAuC,EACvC,kBAA8B,GACjC,EAAE,kBAAkB,2CA+KpB"}

package/dist/components/EditableTable.js

@@ -17,7 +17,7 @@ import { faPlus } from "@fortawesome/pro-solid-svg-icons";
 import { DragDropProvider } from "@dnd-kit/react";
 import { AutoScroller } from "@dnd-kit/dom";
 //#region src/components/EditableTable.tsx
-function EditableTable({ columns, rows, onChange, onCellChange = void 0, addRowLabel, allowReorder = true, allowAdd = true, allowDelete = true, className = "", modifyColumn = void 0, fieldName = void 0, cellErrors = {}, newRowDefaults = {}, renderActions = void 0, renderRowActions = void 0, renderRowMenuItemsBeforeCore = void 0, renderRowMenuItemsAfterCore = void 0, renderRowMenuItems = void 0 }) {
+function EditableTable({ columns, rows, onChange, onCellChange = void 0, addRowLabel, allowReorder = true, allowAdd = true, allowDelete = true, className = "", modifyColumn = void 0, modifyRow = void 0, fieldName = void 0, cellErrors = {}, newRowDefaults = {}, renderActions = void 0, renderRowActions = void 0, renderRowMenuItemsBeforeCore = void 0, renderRowMenuItemsAfterCore = void 0, renderRowMenuItems = void 0 }) {
 	const TableRowComponent = TableRow;
 	const t = useTranslation();
 	const normalizedColumns = useMemo(() => {
@@ -114,6 +114,7 @@ function EditableTable({ columns, rows, onChange, onCellChange = void 0, addRowL
 						showReorderControls: allowReorder,
 						allowDelete,
 						modifyColumn,
+						modifyRow,
 						getCellErrors,
 						onUpdateCell: handleCellValueChange,
 						moveRow,

package/dist/components/EditableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTable.js","names":[],"sources":["../../src/components/EditableTable.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { AutoScroller } from '@dnd-kit/dom';\nimport {\n    Button,\n    Table,\n    TableHeader,\n    TableBody,\n    TableRow as UITableRow,\n    TableHead,\n} from '@verbb/plugin-kit-react/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableRow } from './editable-table/TableRow';\nimport { isGeneratedColumn, isThinColumn } from './editable-table/helpers';\nimport { useEditableTableRows } from './editable-table/useEditableTableRows';\nimport { useEditableTableDnd } from './editable-table/useEditableTableDnd';\nimport { useEditableTableCellChange } from './editable-table/useEditableTableCellChange';\nimport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type EditableTableProps = {\n    columns: EditableTableColumn[];\n    rows: EditableTableRow[];\n    onChange: (rows: EditableTableRow[]) => void;\n    onCellChange?: EditableTableOnCellChange;\n    addRowLabel?: string;\n    allowReorder?: boolean;\n    allowAdd?: boolean;\n    allowDelete?: boolean;\n    className?: string;\n    modifyColumn?: EditableTableModifyColumn;\n    fieldName?: string;\n    cellErrors?: Record<string, unknown>;\n    newRowDefaults?: Record<string, unknown>;\n    renderActions?: (args: { rows: EditableTableRow[]; addRow: () => void; isDragging: boolean }) => React.ReactNode;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\ntype TableRowComponentProps = {\n    row: EditableTableRow;\n    rowIndex: number;\n    rowCount: number;\n    columns: EditableTableColumn[];\n    columnsSignature: string;\n    useDnd: boolean;\n    allowReorder: boolean;\n    showReorderControls: boolean;\n    allowDelete: boolean;\n    modifyColumn?: EditableTableModifyColumn;\n    getCellErrors: (rowIndex: number, columnName: string) => unknown[];\n    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;\n    moveRow: (row: EditableTableRow, direction: number) => void;\n    removeRow: (row: EditableTableRow) => void;\n    t: (key: string) => string;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\nexport function EditableTable({\n    columns,\n    rows,\n    onChange,\n    onCellChange = undefined,\n    addRowLabel,\n    allowReorder = true,\n    allowAdd = true,\n    allowDelete = true,\n    className = '',\n    modifyColumn = undefined,\n    fieldName = undefined,\n    cellErrors = {},\n    newRowDefaults = {},\n    renderActions = undefined,\n    renderRowActions = undefined,\n    renderRowMenuItemsBeforeCore = undefined,\n    renderRowMenuItemsAfterCore = undefined,\n    renderRowMenuItems = undefined,\n}: EditableTableProps) {\n    const TableRowComponent = TableRow as React.ComponentType<TableRowComponentProps>;\n    const t = useTranslation();\n    const normalizedColumns = useMemo(() => {\n        const sourceColumns = Array.isArray(columns) ? columns : [];\n        const validColumns = sourceColumns.filter((column) => {\n            return typeof column?.name === 'string' && column.name.trim() !== '';\n        });\n\n        if (validColumns.length !== sourceColumns.length) {\n            const invalidColumns = sourceColumns.filter((column) => {\n                return !(typeof column?.name === 'string' && column.name.trim() !== '');\n            });\n\n            console.error(\n                'EditableTable: column definitions must include a non-empty `name`.',\n                { invalidColumns, columns: sourceColumns },\n            );\n        }\n\n        return validColumns;\n    }, [columns]);\n\n    const generatedColumns = useMemo(() => {\n        return normalizedColumns.filter(isGeneratedColumn);\n    }, [normalizedColumns]);\n\n    const columnsSignature = useMemo(() => {\n        return JSON.stringify(normalizedColumns.map((column) => {\n            return {\n                name: column.name,\n                type: column.type,\n                label: column.label,\n                required: column.required,\n                placeholder: column.placeholder,\n                options: column.options,\n            };\n        }));\n    }, [normalizedColumns]);\n\n    const {\n        internalData,\n        setInternalData,\n        internalDataRef,\n        skipNextRowsSyncRef,\n        handleChange,\n        addRow,\n        removeRow,\n        updateRow,\n        moveRow,\n    } = useEditableTableRows({\n        rows,\n        onChange,\n        newRowDefaults,\n    });\n\n    const {\n        isDragging,\n        isDndHydrated,\n        effectiveAllowReorder,\n        handleDragStart,\n        handleDragEnd,\n    } = useEditableTableDnd({\n        allowReorder,\n        internalData,\n        handleChange,\n    });\n\n    const {\n        handleCellValueChange,\n    } = useEditableTableCellChange({\n        internalData,\n        internalDataRef,\n        setInternalData,\n        skipNextRowsSyncRef,\n        generatedColumns,\n        onCellChange,\n        updateRow,\n        handleChange,\n    });\n\n    const getCellErrors = useCallback((rowIndex: number, columnName: string) => {\n        if (!fieldName) {\n            return [];\n        }\n\n        const key = `${fieldName}.${rowIndex}.${columnName}`;\n        const errors = cellErrors?.[key];\n        if (!errors) {\n            return [];\n        }\n\n        return Array.isArray(errors) ? errors : [errors];\n    }, [cellErrors, fieldName]);\n\n    const actions = typeof renderActions === 'function'\n        ? renderActions({\n            rows: internalData,\n            addRow,\n            isDragging,\n        })\n        : null;\n\n    const dragDropPlugins = useCallback((defaults) => {\n        return defaults.filter((plugin) => { return plugin !== AutoScroller; });\n    }, []);\n\n    return (\n        <div className={className}>\n            {actions}\n\n            <DragDropProvider\n                plugins={dragDropPlugins}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <Table>\n                    <TableHeader>\n                        <UITableRow>\n                            {normalizedColumns.map((column) => {\n                                return (\n                                    <TableHead key={column.name} className={cn(column.className, isThinColumn(column) && 'w-[1%] whitespace-nowrap')}>\n                                        {column.label}\n                                        {column.required && <span className=\"text-error ml-1\">*</span>}\n                                    </TableHead>\n                                );\n                            })}\n                            {(allowReorder || allowDelete) && <TableHead className=\"p-0 w-0\"></TableHead>}\n                        </UITableRow>\n                    </TableHeader>\n                    <TableBody>\n                        {internalData.map((row, rowIndex) => {\n                            return (\n                                <TableRowComponent\n                                    key={row._id}\n                                    row={row}\n                                    rowIndex={rowIndex}\n                                    rowCount={internalData.length}\n                                    columns={normalizedColumns}\n                                    columnsSignature={columnsSignature}\n                                    useDnd={allowReorder && isDndHydrated}\n                                    allowReorder={effectiveAllowReorder && isDndHydrated}\n                                    showReorderControls={allowReorder}\n                                    allowDelete={allowDelete}\n                                    modifyColumn={modifyColumn}\n                                    getCellErrors={getCellErrors}\n                                    onUpdateCell={handleCellValueChange}\n                                    moveRow={moveRow}\n                                    removeRow={removeRow}\n                                    t={t}\n                                    renderRowActions={renderRowActions}\n                                    renderRowMenuItemsBeforeCore={renderRowMenuItemsBeforeCore}\n                                    renderRowMenuItemsAfterCore={renderRowMenuItemsAfterCore}\n                                    renderRowMenuItems={renderRowMenuItems}\n                                />\n                            );\n                        })}\n                    </TableBody>\n                </Table>\n            </DragDropProvider>\n\n            {allowAdd && (\n                <Button\n                    type=\"button\"\n                    variant=\"dashed\"\n                    onClick={addRow}\n                    className={cn('w-full rounded-t-none! border-t-0!', isDragging && 'pointer-events-none')}\n                >\n                    <FontAwesomeIcon icon={faPlus} className=\"size-3 mr-1\" />\n                    {addRowLabel || t('Add row')}\n                </Button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditableTable.js","names":[],"sources":["../../src/components/EditableTable.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { AutoScroller } from '@dnd-kit/dom';\nimport {\n    Button,\n    Table,\n    TableHeader,\n    TableBody,\n    TableRow as UITableRow,\n    TableHead,\n} from '@verbb/plugin-kit-react/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableRow } from './editable-table/TableRow';\nimport { isGeneratedColumn, isThinColumn } from './editable-table/helpers';\nimport { useEditableTableRows } from './editable-table/useEditableTableRows';\nimport { useEditableTableDnd } from './editable-table/useEditableTableDnd';\nimport { useEditableTableCellChange } from './editable-table/useEditableTableCellChange';\nimport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableModifyRow,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableModifyColumnResult,\n    EditableTableModifyRow,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type EditableTableProps = {\n    columns: EditableTableColumn[];\n    rows: EditableTableRow[];\n    onChange: (rows: EditableTableRow[]) => void;\n    onCellChange?: EditableTableOnCellChange;\n    addRowLabel?: string;\n    allowReorder?: boolean;\n    allowAdd?: boolean;\n    allowDelete?: boolean;\n    className?: string;\n    modifyColumn?: EditableTableModifyColumn;\n    modifyRow?: EditableTableModifyRow;\n    fieldName?: string;\n    cellErrors?: Record<string, unknown>;\n    newRowDefaults?: Record<string, unknown>;\n    renderActions?: (args: { rows: EditableTableRow[]; addRow: () => void; isDragging: boolean }) => React.ReactNode;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\ntype TableRowComponentProps = {\n    row: EditableTableRow;\n    rowIndex: number;\n    rowCount: number;\n    columns: EditableTableColumn[];\n    columnsSignature: string;\n    useDnd: boolean;\n    allowReorder: boolean;\n    showReorderControls: boolean;\n    allowDelete: boolean;\n    modifyColumn?: EditableTableModifyColumn;\n    modifyRow?: EditableTableModifyRow;\n    getCellErrors: (rowIndex: number, columnName: string) => unknown[];\n    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;\n    moveRow: (row: EditableTableRow, direction: number) => void;\n    removeRow: (row: EditableTableRow) => void;\n    t: (key: string) => string;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\nexport function EditableTable({\n    columns,\n    rows,\n    onChange,\n    onCellChange = undefined,\n    addRowLabel,\n    allowReorder = true,\n    allowAdd = true,\n    allowDelete = true,\n    className = '',\n    modifyColumn = undefined,\n    modifyRow = undefined,\n    fieldName = undefined,\n    cellErrors = {},\n    newRowDefaults = {},\n    renderActions = undefined,\n    renderRowActions = undefined,\n    renderRowMenuItemsBeforeCore = undefined,\n    renderRowMenuItemsAfterCore = undefined,\n    renderRowMenuItems = undefined,\n}: EditableTableProps) {\n    const TableRowComponent = TableRow as React.ComponentType<TableRowComponentProps>;\n    const t = useTranslation();\n    const normalizedColumns = useMemo(() => {\n        const sourceColumns = Array.isArray(columns) ? columns : [];\n        const validColumns = sourceColumns.filter((column) => {\n            return typeof column?.name === 'string' && column.name.trim() !== '';\n        });\n\n        if (validColumns.length !== sourceColumns.length) {\n            const invalidColumns = sourceColumns.filter((column) => {\n                return !(typeof column?.name === 'string' && column.name.trim() !== '');\n            });\n\n            console.error(\n                'EditableTable: column definitions must include a non-empty `name`.',\n                { invalidColumns, columns: sourceColumns },\n            );\n        }\n\n        return validColumns;\n    }, [columns]);\n\n    const generatedColumns = useMemo(() => {\n        return normalizedColumns.filter(isGeneratedColumn);\n    }, [normalizedColumns]);\n\n    const columnsSignature = useMemo(() => {\n        return JSON.stringify(normalizedColumns.map((column) => {\n            return {\n                name: column.name,\n                type: column.type,\n                label: column.label,\n                required: column.required,\n                placeholder: column.placeholder,\n                options: column.options,\n            };\n        }));\n    }, [normalizedColumns]);\n\n    const {\n        internalData,\n        setInternalData,\n        internalDataRef,\n        skipNextRowsSyncRef,\n        handleChange,\n        addRow,\n        removeRow,\n        updateRow,\n        moveRow,\n    } = useEditableTableRows({\n        rows,\n        onChange,\n        newRowDefaults,\n    });\n\n    const {\n        isDragging,\n        isDndHydrated,\n        effectiveAllowReorder,\n        handleDragStart,\n        handleDragEnd,\n    } = useEditableTableDnd({\n        allowReorder,\n        internalData,\n        handleChange,\n    });\n\n    const {\n        handleCellValueChange,\n    } = useEditableTableCellChange({\n        internalData,\n        internalDataRef,\n        setInternalData,\n        skipNextRowsSyncRef,\n        generatedColumns,\n        onCellChange,\n        updateRow,\n        handleChange,\n    });\n\n    const getCellErrors = useCallback((rowIndex: number, columnName: string) => {\n        if (!fieldName) {\n            return [];\n        }\n\n        const key = `${fieldName}.${rowIndex}.${columnName}`;\n        const errors = cellErrors?.[key];\n        if (!errors) {\n            return [];\n        }\n\n        return Array.isArray(errors) ? errors : [errors];\n    }, [cellErrors, fieldName]);\n\n    const actions = typeof renderActions === 'function'\n        ? renderActions({\n            rows: internalData,\n            addRow,\n            isDragging,\n        })\n        : null;\n\n    const dragDropPlugins = useCallback((defaults) => {\n        return defaults.filter((plugin) => { return plugin !== AutoScroller; });\n    }, []);\n\n    return (\n        <div className={className}>\n            {actions}\n\n            <DragDropProvider\n                plugins={dragDropPlugins}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <Table>\n                    <TableHeader>\n                        <UITableRow>\n                            {normalizedColumns.map((column) => {\n                                return (\n                                    <TableHead key={column.name} className={cn(column.className, isThinColumn(column) && 'w-[1%] whitespace-nowrap')}>\n                                        {column.label}\n                                        {column.required && <span className=\"text-error ml-1\">*</span>}\n                                    </TableHead>\n                                );\n                            })}\n                            {(allowReorder || allowDelete) && <TableHead className=\"p-0 w-0\"></TableHead>}\n                        </UITableRow>\n                    </TableHeader>\n                    <TableBody>\n                        {internalData.map((row, rowIndex) => {\n                            return (\n                                <TableRowComponent\n                                    key={row._id}\n                                    row={row}\n                                    rowIndex={rowIndex}\n                                    rowCount={internalData.length}\n                                    columns={normalizedColumns}\n                                    columnsSignature={columnsSignature}\n                                    useDnd={allowReorder && isDndHydrated}\n                                    allowReorder={effectiveAllowReorder && isDndHydrated}\n                                    showReorderControls={allowReorder}\n                                    allowDelete={allowDelete}\n                                    modifyColumn={modifyColumn}\n                                    modifyRow={modifyRow}\n                                    getCellErrors={getCellErrors}\n                                    onUpdateCell={handleCellValueChange}\n                                    moveRow={moveRow}\n                                    removeRow={removeRow}\n                                    t={t}\n                                    renderRowActions={renderRowActions}\n                                    renderRowMenuItemsBeforeCore={renderRowMenuItemsBeforeCore}\n                                    renderRowMenuItemsAfterCore={renderRowMenuItemsAfterCore}\n                                    renderRowMenuItems={renderRowMenuItems}\n                                />\n                            );\n                        })}\n                    </TableBody>\n                </Table>\n            </DragDropProvider>\n\n            {allowAdd && (\n                <Button\n                    type=\"button\"\n                    variant=\"dashed\"\n                    onClick={addRow}\n                    className={cn('w-full rounded-t-none! border-t-0!', isDragging && 'pointer-events-none')}\n                >\n                    <FontAwesomeIcon icon={faPlus} className=\"size-3 mr-1\" />\n                    {addRowLabel || t('Add row')}\n                </Button>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoFA,SAAgB,cAAc,EAC1B,SACA,MACA,UACA,eAAe,KAAA,GACf,aACA,eAAe,MACf,WAAW,MACX,cAAc,MACd,YAAY,IACZ,eAAe,KAAA,GACf,YAAY,KAAA,GACZ,YAAY,KAAA,GACZ,aAAa,EAAE,EACf,iBAAiB,EAAE,EACnB,gBAAgB,KAAA,GAChB,mBAAmB,KAAA,GACnB,+BAA+B,KAAA,GAC/B,8BAA8B,KAAA,GAC9B,qBAAqB,KAAA,KACF;CACnB,MAAM,oBAAoB;CAC1B,MAAM,IAAI,gBAAgB;CAC1B,MAAM,oBAAoB,cAAc;EACpC,MAAM,gBAAgB,MAAM,QAAQ,QAAQ,GAAG,UAAU,EAAE;EAC3D,MAAM,eAAe,cAAc,QAAQ,WAAW;AAClD,UAAO,OAAO,QAAQ,SAAS,YAAY,OAAO,KAAK,MAAM,KAAK;IACpE;AAEF,MAAI,aAAa,WAAW,cAAc,QAAQ;GAC9C,MAAM,iBAAiB,cAAc,QAAQ,WAAW;AACpD,WAAO,EAAE,OAAO,QAAQ,SAAS,YAAY,OAAO,KAAK,MAAM,KAAK;KACtE;AAEF,WAAQ,MACJ,sEACA;IAAE;IAAgB,SAAS;IAAe,CAC7C;;AAGL,SAAO;IACR,CAAC,QAAQ,CAAC;CAEb,MAAM,mBAAmB,cAAc;AACnC,SAAO,kBAAkB,OAAO,kBAAkB;IACnD,CAAC,kBAAkB,CAAC;CAEvB,MAAM,mBAAmB,cAAc;AACnC,SAAO,KAAK,UAAU,kBAAkB,KAAK,WAAW;AACpD,UAAO;IACH,MAAM,OAAO;IACb,MAAM,OAAO;IACb,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,SAAS,OAAO;IACnB;IACH,CAAC;IACJ,CAAC,kBAAkB,CAAC;CAEvB,MAAM,EACF,cACA,iBACA,iBACA,qBACA,cACA,QACA,WACA,WACA,YACA,qBAAqB;EACrB;EACA;EACA;EACH,CAAC;CAEF,MAAM,EACF,YACA,eACA,uBACA,iBACA,kBACA,oBAAoB;EACpB;EACA;EACA;EACH,CAAC;CAEF,MAAM,EACF,0BACA,2BAA2B;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACH,CAAC;CAEF,MAAM,gBAAgB,aAAa,UAAkB,eAAuB;AACxE,MAAI,CAAC,UACD,QAAO,EAAE;EAGb,MAAM,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG;EACxC,MAAM,SAAS,aAAa;AAC5B,MAAI,CAAC,OACD,QAAO,EAAE;AAGb,SAAO,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO;IACjD,CAAC,YAAY,UAAU,CAAC;AAc3B,QACI,qBAAC,OAAD;EAAgB;YAAhB;GAbY,OAAO,kBAAkB,aACnC,cAAc;IACZ,MAAM;IACN;IACA;IACH,CAAC,GACA;GAUE,oBAAC,kBAAD;IACI,SATY,aAAa,aAAa;AAC9C,YAAO,SAAS,QAAQ,WAAW;AAAE,aAAO,WAAW;OAAgB;OACxE,EAAE,CAOgB;IACT,aAAa;IACb,WAAW;cAEX,qBAAC,OAAD,EAAA,UAAA,CACI,oBAAC,aAAD,EAAA,UACI,qBAAC,YAAD,EAAA,UAAA,CACK,kBAAkB,KAAK,WAAW;AAC/B,YACI,qBAAC,WAAD;MAA6B,WAAW,GAAG,OAAO,WAAW,aAAa,OAAO,IAAI,2BAA2B;gBAAhH,CACK,OAAO,OACP,OAAO,YAAY,oBAAC,QAAD;OAAM,WAAU;iBAAkB;OAAQ,CAAA,CACtD;QAHI,OAAO,KAGX;MAElB,GACA,gBAAgB,gBAAgB,oBAAC,WAAD,EAAW,WAAU,WAAsB,CAAA,CACpE,EAAA,CAAA,EACH,CAAA,EACd,oBAAC,WAAD,EAAA,UACK,aAAa,KAAK,KAAK,aAAa;AACjC,YACI,oBAAC,mBAAD;MAES;MACK;MACV,UAAU,aAAa;MACvB,SAAS;MACS;MAClB,QAAQ,gBAAgB;MACxB,cAAc,yBAAyB;MACvC,qBAAqB;MACR;MACC;MACH;MACI;MACf,cAAc;MACL;MACE;MACR;MACe;MACY;MACD;MACT;MACtB,EArBO,IAAI,IAqBX;MAER,EACM,CAAA,CACR,EAAA,CAAA;IACO,CAAA;GAElB,YACG,qBAAC,QAAD;IACI,MAAK;IACL,SAAQ;IACR,SAAS;IACT,WAAW,GAAG,sCAAsC,cAAc,sBAAsB;cAJ5F,CAMI,oBAAC,iBAAD;KAAiB,MAAM;KAAQ,WAAU;KAAgB,CAAA,EACxD,eAAe,EAAE,UAAU,CACvB;;GAEX"}

package/dist/components/TiptapContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapContent.d.ts","sourceRoot":"","sources":["../../src/components/TiptapContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAa,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,gCAAqC,kBAAkB,4CAwBpF,CAAC"}
+{"version":3,"file":"TiptapContent.d.ts","sourceRoot":"","sources":["../../src/components/TiptapContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAa,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAcF,eAAO,MAAM,aAAa,GAAI,gCAAqC,kBAAkB,4CA4CpF,CAAC"}

package/dist/components/TiptapContent.js

@@ -1,19 +1,38 @@
 import { cn } from "../utils/classes.js";
 import "../utils/index.js";
 import { createTiptapExtensions, valueToContent } from "./tiptap/editorConfig.js";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EditorContent, useEditor } from "@tiptap/react";
 //#region src/components/TiptapContent.tsx
+var serializeDocContent = (content) => {
+	if (!content) return "[]";
+	if (Array.isArray(content.content)) return JSON.stringify(content.content);
+	return JSON.stringify(content);
+};
 var TiptapContent = ({ value = "", className, ...props }) => {
+	const extensions = useMemo(() => {
+		return createTiptapExtensions();
+	}, []);
+	const editorContent = useMemo(() => {
+		return valueToContent(value);
+	}, [value]);
+	const editor = useEditor({
+		extensions,
+		content: editorContent,
+		editable: false
+	});
+	useEffect(() => {
+		if (!editor) return;
+		const incomingContent = editorContent ?? {
+			type: "doc",
+			content: []
+		};
+		if (serializeDocContent(editorContent) === serializeDocContent(editor.getJSON())) return;
+		editor.commands.setContent(incomingContent);
+	}, [editor, editorContent]);
 	return /* @__PURE__ */ jsx(EditorContent, {
-		editor: useEditor({
-			extensions: useMemo(() => {
-				return createTiptapExtensions();
-			}, []),
-			content: valueToContent(value),
-			editable: false
-		}),
+		editor,
 		className: cn("[&_.ProseMirror]:outline-none", "[&_.ProseMirror_p]:m-0", "[&_.ProseMirror_p]:leading-[1.4]", "[&_.ProseMirror]:text-sm", className),
 		...props
 	});

package/dist/components/TiptapContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapContent.js","names":[],"sources":["../../src/components/TiptapContent.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { createTiptapExtensions, valueToContent } from './tiptap/editorConfig';\n\ntype TiptapContentProps = Omit<ComponentProps<typeof EditorContent>, 'editor'> & {\n    value?: unknown;\n    className?: string;\n};\n\nexport const TiptapContent = ({ value = '', className, ...props }: TiptapContentProps) => {\n    const extensions = useMemo(() => {\n        return createTiptapExtensions();\n    }, []);\n\n    const editor = useEditor({\n        extensions,\n        content: valueToContent(value),\n        editable: false,\n    });\n\n    return (\n        <EditorContent\n            editor={editor}\n            className={cn(\n                '[&_.ProseMirror]:outline-none',\n                '[&_.ProseMirror_p]:m-0',\n                '[&_.ProseMirror_p]:leading-[1.4]',\n                '[&_.ProseMirror]:text-sm',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAWA,IAAa,iBAAiB,EAAE,QAAQ,IAAI,WAAW,GAAG,YAAgC;AAWtF,QACI,oBAAC,eAAD;EACY,QARD,UAAU;GACrB,YALe,cAAc;AAC7B,WAAO,wBAAwB;MAChC,EAAE,CAGD;GACA,SAAS,eAAe,MAAM;GAC9B,UAAU;GACb,CAIe;EACR,WAAW,GACP,iCACA,0BACA,oCACA,4BACA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"TiptapContent.js","names":[],"sources":["../../src/components/TiptapContent.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { createTiptapExtensions, valueToContent } from './tiptap/editorConfig';\n\ntype TiptapContentProps = Omit<ComponentProps<typeof EditorContent>, 'editor'> & {\n    value?: unknown;\n    className?: string;\n};\n\nconst serializeDocContent = (content: ReturnType<typeof valueToContent>) => {\n    if (!content) {\n        return '[]';\n    }\n\n    if (Array.isArray(content.content)) {\n        return JSON.stringify(content.content);\n    }\n\n    return JSON.stringify(content);\n};\n\nexport const TiptapContent = ({ value = '', className, ...props }: TiptapContentProps) => {\n    const extensions = useMemo(() => {\n        return createTiptapExtensions();\n    }, []);\n\n    const editorContent = useMemo(() => {\n        return valueToContent(value);\n    }, [value]);\n\n    const editor = useEditor({\n        extensions,\n        content: editorContent,\n        editable: false,\n    });\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n\n        const incomingContent = editorContent ?? { type: 'doc', content: [] };\n        const incomingSerialized = serializeDocContent(editorContent);\n        const currentSerialized = serializeDocContent(editor.getJSON() as ReturnType<typeof valueToContent>);\n\n        if (incomingSerialized === currentSerialized) {\n            return;\n        }\n\n        editor.commands.setContent(incomingContent);\n    }, [editor, editorContent]);\n\n    return (\n        <EditorContent\n            editor={editor}\n            className={cn(\n                '[&_.ProseMirror]:outline-none',\n                '[&_.ProseMirror_p]:m-0',\n                '[&_.ProseMirror_p]:leading-[1.4]',\n                '[&_.ProseMirror]:text-sm',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAWA,IAAM,uBAAuB,YAA+C;AACxE,KAAI,CAAC,QACD,QAAO;AAGX,KAAI,MAAM,QAAQ,QAAQ,QAAQ,CAC9B,QAAO,KAAK,UAAU,QAAQ,QAAQ;AAG1C,QAAO,KAAK,UAAU,QAAQ;;AAGlC,IAAa,iBAAiB,EAAE,QAAQ,IAAI,WAAW,GAAG,YAAgC;CACtF,MAAM,aAAa,cAAc;AAC7B,SAAO,wBAAwB;IAChC,EAAE,CAAC;CAEN,MAAM,gBAAgB,cAAc;AAChC,SAAO,eAAe,MAAM;IAC7B,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,UAAU;EACrB;EACA,SAAS;EACT,UAAU;EACb,CAAC;AAEF,iBAAgB;AACZ,MAAI,CAAC,OACD;EAGJ,MAAM,kBAAkB,iBAAiB;GAAE,MAAM;GAAO,SAAS,EAAE;GAAE;AAIrE,MAH2B,oBAAoB,cAG3C,KAFsB,oBAAoB,OAAO,SAAS,CAEnC,CACvB;AAGJ,SAAO,SAAS,WAAW,gBAAgB;IAC5C,CAAC,QAAQ,cAAc,CAAC;AAE3B,QACI,oBAAC,eAAD;EACY;EACR,WAAW,GACP,iCACA,0BACA,oCACA,4BACA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/editable-table/RowDataCells.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowDataCells.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/RowDataCells.jsx"],"names":[],"mappings":"AASA,8DAqCG;kBA9Ce,OAAO"}
+{"version":3,"file":"RowDataCells.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/RowDataCells.jsx"],"names":[],"mappings":"AASA,8DA6CG;kBAtDe,OAAO"}

package/dist/components/editable-table/RowDataCells.js

@@ -6,13 +6,13 @@ import "../index.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/editable-table/RowDataCells.jsx
-var isThinColumn = (column) => {
-	return Boolean(column?.thin || column?.type === "checkbox" || column?.type === "lightswitch" || column?.type === "radio");
-};
-var RowDataCells = React.memo(({ row, rowIndex, columns, columnsSignature, modifyColumn, getCellErrors, onUpdateCell }) => {
+var RowDataCells = React.memo(({ row, rowIndex, columns, columnsSignature, modifyColumn, modifyRow, getCellErrors, onUpdateCell }) => {
+	const rowModifications = modifyRow ? modifyRow(row, rowIndex) : null;
 	return columns.map((column) => {
+		const columnModifications = modifyColumn ? modifyColumn(row, column.name) : null;
 		return /* @__PURE__ */ jsx(TableCell$1, {
-			className: cn(column.className, isThinColumn(column) && "w-[1%] whitespace-nowrap"),
+			className: cn(column.className, rowModifications?.cellClassName, columnModifications?.cellClassName),
+			title: rowModifications?.title ?? columnModifications?.title,
 			children: /* @__PURE__ */ jsx(TableCell, {
 				row,
 				rowIndex,
@@ -25,7 +25,7 @@ var RowDataCells = React.memo(({ row, rowIndex, columns, columnsSignature, modif
 		}, column.name);
 	});
 }, (prevProps, nextProps) => {
-	return prevProps.row === nextProps.row && prevProps.rowIndex === nextProps.rowIndex && prevProps.columnsSignature === nextProps.columnsSignature && prevProps.getCellErrors === nextProps.getCellErrors;
+	return prevProps.row === nextProps.row && prevProps.rowIndex === nextProps.rowIndex && prevProps.columnsSignature === nextProps.columnsSignature && prevProps.getCellErrors === nextProps.getCellErrors && prevProps.modifyRow === nextProps.modifyRow;
 });
 //#endregion
 export { RowDataCells };

package/dist/components/editable-table/RowDataCells.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowDataCells.js","names":[],"sources":["../../../src/components/editable-table/RowDataCells.jsx"],"sourcesContent":["import React from 'react';\nimport { TableCell as UITableCell } from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableCell } from './TableCell';\n\nconst isThinColumn = (column) => {\n    return Boolean(column?.thin || column?.type === 'checkbox' || column?.type === 'lightswitch' || column?.type === 'radio');\n};\n\nexport const RowDataCells = React.memo(({\n    row,\n    rowIndex,\n    columns,\n    columnsSignature,\n    modifyColumn,\n    getCellErrors,\n    onUpdateCell,\n}) => {\n    return columns.map((column) => {\n        return (\n            <UITableCell\n                key={column.name}\n                className={cn(\n                    column.className,\n                    isThinColumn(column) && 'w-[1%] whitespace-nowrap',\n                )}\n            >\n                <TableCell\n                    row={row}\n                    rowIndex={rowIndex}\n                    column={column}\n                    value={row[column.name]}\n                    modifyColumn={modifyColumn}\n                    getCellErrors={getCellErrors}\n                    onUpdateCell={onUpdateCell}\n                />\n            </UITableCell>\n        );\n    });\n}, (prevProps, nextProps) => {\n    return (\n        prevProps.row === nextProps.row\n        && prevProps.rowIndex === nextProps.rowIndex\n        && prevProps.columnsSignature === nextProps.columnsSignature\n        && prevProps.getCellErrors === nextProps.getCellErrors\n    );\n});\n"],"mappings":";;;;;;;;AAKA,IAAM,gBAAgB,WAAW;AAC7B,QAAO,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,cAAc,QAAQ,SAAS,iBAAiB,QAAQ,SAAS,QAAQ;;AAG7H,IAAa,eAAe,MAAM,MAAM,EACpC,KACA,UACA,SACA,kBACA,cACA,eACA,mBACE;AACF,QAAO,QAAQ,KAAK,WAAW;AAC3B,SACI,oBAAC,aAAD;GAEI,WAAW,GACP,OAAO,WACP,aAAa,OAAO,IAAI,2BAC3B;aAED,oBAAC,WAAD;IACS;IACK;IACF;IACR,OAAO,IAAI,OAAO;IACJ;IACC;IACD;IAChB,CAAA;GACQ,EAfL,OAAO,KAeF;GAEpB;IACF,WAAW,cAAc;AACzB,QACI,UAAU,QAAQ,UAAU,OACzB,UAAU,aAAa,UAAU,YACjC,UAAU,qBAAqB,UAAU,oBACzC,UAAU,kBAAkB,UAAU;EAE/C"}
+{"version":3,"file":"RowDataCells.js","names":[],"sources":["../../../src/components/editable-table/RowDataCells.jsx"],"sourcesContent":["import React from 'react';\nimport { TableCell as UITableCell } from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableCell } from './TableCell';\n\nconst isThinColumn = (column) => {\n    return Boolean(column?.thin || column?.type === 'checkbox' || column?.type === 'lightswitch' || column?.type === 'radio');\n};\n\nexport const RowDataCells = React.memo(({\n    row,\n    rowIndex,\n    columns,\n    columnsSignature,\n    modifyColumn,\n    modifyRow,\n    getCellErrors,\n    onUpdateCell,\n}) => {\n    const rowModifications = modifyRow ? modifyRow(row, rowIndex) : null;\n\n    return columns.map((column) => {\n        const columnModifications = modifyColumn ? modifyColumn(row, column.name) : null;\n\n        return (\n            <UITableCell\n                key={column.name}\n                className={cn(\n                    column.className,\n                    rowModifications?.cellClassName,\n                    columnModifications?.cellClassName,\n                )}\n                title={rowModifications?.title ?? columnModifications?.title}\n            >\n                <TableCell\n                    row={row}\n                    rowIndex={rowIndex}\n                    column={column}\n                    value={row[column.name]}\n                    modifyColumn={modifyColumn}\n                    getCellErrors={getCellErrors}\n                    onUpdateCell={onUpdateCell}\n                />\n            </UITableCell>\n        );\n    });\n}, (prevProps, nextProps) => {\n    return (\n        prevProps.row === nextProps.row\n        && prevProps.rowIndex === nextProps.rowIndex\n        && prevProps.columnsSignature === nextProps.columnsSignature\n        && prevProps.getCellErrors === nextProps.getCellErrors\n        && prevProps.modifyRow === nextProps.modifyRow\n    );\n});\n"],"mappings":";;;;;;;;AASA,IAAa,eAAe,MAAM,MAAM,EACpC,KACA,UACA,SACA,kBACA,cACA,WACA,eACA,mBACE;CACF,MAAM,mBAAmB,YAAY,UAAU,KAAK,SAAS,GAAG;AAEhE,QAAO,QAAQ,KAAK,WAAW;EAC3B,MAAM,sBAAsB,eAAe,aAAa,KAAK,OAAO,KAAK,GAAG;AAE5E,SACI,oBAAC,aAAD;GAEI,WAAW,GACP,OAAO,WACP,kBAAkB,eAClB,qBAAqB,cACxB;GACD,OAAO,kBAAkB,SAAS,qBAAqB;aAEvD,oBAAC,WAAD;IACS;IACK;IACF;IACR,OAAO,IAAI,OAAO;IACJ;IACC;IACD;IAChB,CAAA;GACQ,EAjBL,OAAO,KAiBF;GAEpB;IACF,WAAW,cAAc;AACzB,QACI,UAAU,QAAQ,UAAU,OACzB,UAAU,aAAa,UAAU,YACjC,UAAU,qBAAqB,UAAU,oBACzC,UAAU,kBAAkB,UAAU,iBACtC,UAAU,cAAc,UAAU;EAE3C"}

package/dist/components/editable-table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/TableRow.jsx"],"names":[],"mappings":"AA4DA,0DAoLG;kBAhPe,OAAO"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/TableRow.jsx"],"names":[],"mappings":"AA4DA,0DA2LG;kBAvPe,OAAO"}

package/dist/components/editable-table/TableRow.js

@@ -34,7 +34,7 @@ var PlainRow = ({ className, children }) => {
 		children: typeof children === "function" ? children({ handleRef: void 0 }) : children
 	});
 };
-var TableRow = React.memo(({ row, rowIndex, rowCount, columns, columnsSignature, useDnd, allowReorder, showReorderControls, allowDelete, modifyColumn, getCellErrors, onUpdateCell, moveRow, removeRow, t, renderRowActions, renderRowMenuItemsBeforeCore, renderRowMenuItemsAfterCore, renderRowMenuItems }) => {
+var TableRow = React.memo(({ row, rowIndex, rowCount, columns, columnsSignature, useDnd, allowReorder, showReorderControls, allowDelete, modifyColumn, modifyRow, getCellErrors, onUpdateCell, moveRow, removeRow, t, renderRowActions, renderRowMenuItemsBeforeCore, renderRowMenuItemsAfterCore, renderRowMenuItems }) => {
 	return /* @__PURE__ */ jsx(useDnd ? SortableRow : PlainRow, {
 		row,
 		rowIndex,
@@ -42,6 +42,7 @@ var TableRow = React.memo(({ row, rowIndex, rowCount, columns, columnsSignature,
 		className: "bg-white",
 		children: ({ handleRef }) => {
 			const dragHandleRef = useDnd ? handleRef : void 0;
+			const rowModifications = modifyRow ? modifyRow(row, rowIndex) : null;
 			const legacyBeforeRowMenuItems = renderRowMenuItems?.({
 				row,
 				rowIndex,
@@ -67,10 +68,12 @@ var TableRow = React.memo(({ row, rowIndex, rowCount, columns, columnsSignature,
 				columns,
 				columnsSignature,
 				modifyColumn,
+				modifyRow,
 				getCellErrors,
 				onUpdateCell
 			}), (showReorderControls || allowDelete) && /* @__PURE__ */ jsx(TableCell, {
-				className: cn("bg-[#fbfcfe]"),
+				className: cn(rowModifications?.cellClassName ?? "bg-[#fbfcfe]"),
+				title: rowModifications?.title,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center px-1",
 					children: [
@@ -155,7 +158,7 @@ var TableRow = React.memo(({ row, rowIndex, rowCount, columns, columnsSignature,
 		}
 	});
 }, (prevProps, nextProps) => {
-	return prevProps.row === nextProps.row && prevProps.rowIndex === nextProps.rowIndex && prevProps.rowCount === nextProps.rowCount && prevProps.columnsSignature === nextProps.columnsSignature && prevProps.getCellErrors === nextProps.getCellErrors && prevProps.useDnd === nextProps.useDnd && prevProps.allowReorder === nextProps.allowReorder && prevProps.showReorderControls === nextProps.showReorderControls && prevProps.allowDelete === nextProps.allowDelete && prevProps.renderRowActions === nextProps.renderRowActions && prevProps.renderRowMenuItemsBeforeCore === nextProps.renderRowMenuItemsBeforeCore && prevProps.renderRowMenuItemsAfterCore === nextProps.renderRowMenuItemsAfterCore && prevProps.renderRowMenuItems === nextProps.renderRowMenuItems;
+	return prevProps.row === nextProps.row && prevProps.rowIndex === nextProps.rowIndex && prevProps.rowCount === nextProps.rowCount && prevProps.columnsSignature === nextProps.columnsSignature && prevProps.getCellErrors === nextProps.getCellErrors && prevProps.useDnd === nextProps.useDnd && prevProps.allowReorder === nextProps.allowReorder && prevProps.showReorderControls === nextProps.showReorderControls && prevProps.allowDelete === nextProps.allowDelete && prevProps.modifyRow === nextProps.modifyRow && prevProps.renderRowActions === nextProps.renderRowActions && prevProps.renderRowMenuItemsBeforeCore === nextProps.renderRowMenuItemsBeforeCore && prevProps.renderRowMenuItemsAfterCore === nextProps.renderRowMenuItemsAfterCore && prevProps.renderRowMenuItems === nextProps.renderRowMenuItems;
 });
 //#endregion
 export { TableRow };

package/dist/components/editable-table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/editable-table/TableRow.jsx"],"sourcesContent":["import React from 'react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';\nimport { RestrictToElement } from '@dnd-kit/dom/modifiers';\nimport {\n    Button,\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n    TableRow as UITableRow,\n    TableCell,\n} from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n    faXmark, faArrowUp, faArrowDown, faEllipsis,\n} from '@fortawesome/pro-solid-svg-icons';\nimport { RowDataCells } from './RowDataCells';\n\nconst SortableRow = ({\n    row, rowIndex, allowReorder, className, children,\n}) => {\n    const sortable = useSortable({\n        id: row._id,\n        index: rowIndex,\n        disabled: !allowReorder,\n        modifiers: [\n            RestrictToVerticalAxis,\n            RestrictToElement.configure({\n                element: (operation) => {\n                    const sourceElement = operation?.source?.element;\n                    return sourceElement?.parentElement ?? null;\n                },\n            }),\n        ],\n    });\n\n    return (\n        <UITableRow\n            ref={sortable.ref}\n            className={cn(\n                sortable.isDragging && 'shadow-lg',\n                className,\n            )}\n        >\n            {children({ handleRef: sortable.handleRef })}\n        </UITableRow>\n    );\n};\n\nconst PlainRow = ({ className, children }) => {\n    return (\n        <UITableRow className={className}>\n            {typeof children === 'function' ? children({ handleRef: undefined }) : children}\n        </UITableRow>\n    );\n};\n\nexport const TableRow = React.memo(({\n    row,\n    rowIndex,\n    rowCount,\n    columns,\n    columnsSignature,\n    useDnd,\n    allowReorder,\n    showReorderControls,\n    allowDelete,\n    modifyColumn,\n    getCellErrors,\n    onUpdateCell,\n    moveRow,\n    removeRow,\n    t,\n    renderRowActions,\n    renderRowMenuItemsBeforeCore,\n    renderRowMenuItemsAfterCore,\n    renderRowMenuItems,\n}) => {\n    const RowComponent = useDnd ? SortableRow : PlainRow;\n\n    return (\n        <RowComponent\n            row={row}\n            rowIndex={rowIndex}\n            allowReorder={allowReorder}\n            className=\"bg-white\"\n        >\n            {({ handleRef }) => {\n                const dragHandleRef = useDnd ? handleRef : undefined;\n                const legacyBeforeRowMenuItems = renderRowMenuItems?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                });\n                const customRowMenuItemsBeforeCore = renderRowMenuItemsBeforeCore?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                }) ?? legacyBeforeRowMenuItems;\n                const customRowMenuItemsAfterCore = renderRowMenuItemsAfterCore?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                });\n                const hasCustomRowMenuItemsBeforeCore = Boolean(customRowMenuItemsBeforeCore);\n                const hasCustomRowMenuItemsAfterCore = Boolean(customRowMenuItemsAfterCore);\n                const hasMoveActions = showReorderControls && rowCount > 1;\n                const hasMenuActions = hasMoveActions || hasCustomRowMenuItemsBeforeCore || hasCustomRowMenuItemsAfterCore;\n\n                return (\n                    <>\n                        <RowDataCells\n                            row={row}\n                            rowIndex={rowIndex}\n                            columns={columns}\n                            columnsSignature={columnsSignature}\n                            modifyColumn={modifyColumn}\n                            getCellErrors={getCellErrors}\n                            onUpdateCell={onUpdateCell}\n                        />\n                        {(showReorderControls || allowDelete) && (\n                            <TableCell className={cn(\n                                'bg-[#fbfcfe]',\n                            )}>\n                                <div className=\"flex items-center px-1\">\n                                    {showReorderControls && (\n                                        <span ref={dragHandleRef}>\n                                            <Button\n                                                type=\"button\"\n                                                variant=\"none\"\n                                                size=\"xs\"\n                                                disabled={!useDnd}\n                                                className={cn(\n                                                    'cursor-move',\n                                                    'p-0 w-[24px] h-[24px]',\n                                                    'text-gray-500',\n                                                    'hover:bg-transparent',\n                                                    'active:bg-transparent',\n                                                    'hover:text-blue-500',\n                                                    !useDnd && 'opacity-40 cursor-default',\n                                                )}\n                                            >\n                                                <div className=\"size-3\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" focusable=\"false\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M71.3 295.6c-21.9-21.9-21.9-57.3 0-79.2s57.3-21.9 79.2 0 21.9 57.3 0 79.2s-57.4 21.9-79.2 0zM184.4 182.5c-21.9-21.9-21.9-57.3 0-79.2s57.3-21.9 79.2 0 21.9 57.3 0 79.2-57.3 21.8-79.2 0zm0 147c21.9-21.9 57.3-21.9 79.2 0s21.9 57.3 0 79.2s-57.3 21.9-79.2 0c-21.9-21.8-21.9-57.3 0-79.2zM297.5 216.4c21.9-21.9 57.3-21.9 79.2 0s21.9 57.3 0 79.2s-57.3 21.9-79.2 0c-21.8-21.9-21.8-57.3 0-79.2z\"></path></svg>\n                                                </div>\n                                            </Button>\n                                        </span>\n                                    )}\n                                    {showReorderControls && (\n                                        <DropdownMenu>\n                                            <DropdownMenuTrigger\n                                                render={(\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"none\"\n                                                        size=\"xs\"\n                                                        disabled={!hasMenuActions}\n                                                        className={cn(\n                                                            'p-0 w-[24px] h-[24px]',\n                                                            'text-gray-500',\n                                                            'hover:bg-transparent',\n                                                            'active:bg-transparent',\n                                                            'hover:text-blue-500',\n                                                            !hasMenuActions && 'opacity-40 cursor-not-allowed',\n                                                        )}\n                                                        aria-label={t('Row actions')}\n                                                    />\n                                                )}\n                                            >\n                                                <FontAwesomeIcon icon={faEllipsis} className=\"size-[12px]\" />\n                                            </DropdownMenuTrigger>\n                                            <DropdownMenuContent align=\"end\">\n                                                {customRowMenuItemsBeforeCore}\n                                                {hasCustomRowMenuItemsBeforeCore && hasMoveActions && <DropdownMenuSeparator />}\n                                                {showReorderControls && rowIndex > 0 && (\n                                                    <DropdownMenuItem onClick={() => { return moveRow(row, -1); }}>\n                                                        <FontAwesomeIcon icon={faArrowUp} />\n                                                        {t('Move up')}\n                                                    </DropdownMenuItem>\n                                                )}\n                                                {showReorderControls && rowIndex < rowCount - 1 && (\n                                                    <DropdownMenuItem onClick={() => { return moveRow(row, 1); }}>\n                                                        <FontAwesomeIcon icon={faArrowDown} />\n                                                        {t('Move down')}\n                                                    </DropdownMenuItem>\n                                                )}\n                                                {hasMoveActions && hasCustomRowMenuItemsAfterCore && <DropdownMenuSeparator />}\n                                                {customRowMenuItemsAfterCore}\n                                            </DropdownMenuContent>\n                                        </DropdownMenu>\n                                    )}\n                                    {renderRowActions?.({\n                                        row,\n                                        rowIndex,\n                                        rowCount,\n                                    })}\n                                    {allowDelete && (\n                                        <Button\n                                            type=\"button\"\n                                            variant=\"none\"\n                                            size=\"xs\"\n                                            onClick={() => { return removeRow(row); }}\n                                            className={cn(\n                                                'p-0 w-[24px] h-[24px]',\n                                                'text-gray-500',\n                                                'hover:bg-transparent',\n                                                'active:bg-transparent',\n                                                'hover:text-red-500',\n                                            )}\n                                        >\n                                            <FontAwesomeIcon icon={faXmark} className=\"size-[12px] mt-[2px]\" />\n                                        </Button>\n                                    )}\n                                </div>\n                            </TableCell>\n                        )}\n                    </>\n                );\n            }}\n        </RowComponent>\n    );\n}, (prevProps, nextProps) => {\n    return (\n        prevProps.row === nextProps.row\n        && prevProps.rowIndex === nextProps.rowIndex\n        && prevProps.rowCount === nextProps.rowCount\n        && prevProps.columnsSignature === nextProps.columnsSignature\n        && prevProps.getCellErrors === nextProps.getCellErrors\n        && prevProps.useDnd === nextProps.useDnd\n        && prevProps.allowReorder === nextProps.allowReorder\n        && prevProps.showReorderControls === nextProps.showReorderControls\n        && prevProps.allowDelete === nextProps.allowDelete\n        && prevProps.renderRowActions === nextProps.renderRowActions\n        && prevProps.renderRowMenuItemsBeforeCore === nextProps.renderRowMenuItemsBeforeCore\n        && prevProps.renderRowMenuItemsAfterCore === nextProps.renderRowMenuItemsAfterCore\n        && prevProps.renderRowMenuItems === nextProps.renderRowMenuItems\n    );\n});\n"],"mappings":"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"}
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../src/components/editable-table/TableRow.jsx"],"sourcesContent":["import React from 'react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';\nimport { RestrictToElement } from '@dnd-kit/dom/modifiers';\nimport {\n    Button,\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n    TableRow as UITableRow,\n    TableCell,\n} from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n    faXmark, faArrowUp, faArrowDown, faEllipsis,\n} from '@fortawesome/pro-solid-svg-icons';\nimport { RowDataCells } from './RowDataCells';\n\nconst SortableRow = ({\n    row, rowIndex, allowReorder, className, children,\n}) => {\n    const sortable = useSortable({\n        id: row._id,\n        index: rowIndex,\n        disabled: !allowReorder,\n        modifiers: [\n            RestrictToVerticalAxis,\n            RestrictToElement.configure({\n                element: (operation) => {\n                    const sourceElement = operation?.source?.element;\n                    return sourceElement?.parentElement ?? null;\n                },\n            }),\n        ],\n    });\n\n    return (\n        <UITableRow\n            ref={sortable.ref}\n            className={cn(\n                sortable.isDragging && 'shadow-lg',\n                className,\n            )}\n        >\n            {children({ handleRef: sortable.handleRef })}\n        </UITableRow>\n    );\n};\n\nconst PlainRow = ({ className, children }) => {\n    return (\n        <UITableRow className={className}>\n            {typeof children === 'function' ? children({ handleRef: undefined }) : children}\n        </UITableRow>\n    );\n};\n\nexport const TableRow = React.memo(({\n    row,\n    rowIndex,\n    rowCount,\n    columns,\n    columnsSignature,\n    useDnd,\n    allowReorder,\n    showReorderControls,\n    allowDelete,\n    modifyColumn,\n    modifyRow,\n    getCellErrors,\n    onUpdateCell,\n    moveRow,\n    removeRow,\n    t,\n    renderRowActions,\n    renderRowMenuItemsBeforeCore,\n    renderRowMenuItemsAfterCore,\n    renderRowMenuItems,\n}) => {\n    const RowComponent = useDnd ? SortableRow : PlainRow;\n\n    return (\n        <RowComponent\n            row={row}\n            rowIndex={rowIndex}\n            allowReorder={allowReorder}\n            className=\"bg-white\"\n        >\n            {({ handleRef }) => {\n                const dragHandleRef = useDnd ? handleRef : undefined;\n                const rowModifications = modifyRow ? modifyRow(row, rowIndex) : null;\n                const legacyBeforeRowMenuItems = renderRowMenuItems?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                });\n                const customRowMenuItemsBeforeCore = renderRowMenuItemsBeforeCore?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                }) ?? legacyBeforeRowMenuItems;\n                const customRowMenuItemsAfterCore = renderRowMenuItemsAfterCore?.({\n                    row,\n                    rowIndex,\n                    rowCount,\n                });\n                const hasCustomRowMenuItemsBeforeCore = Boolean(customRowMenuItemsBeforeCore);\n                const hasCustomRowMenuItemsAfterCore = Boolean(customRowMenuItemsAfterCore);\n                const hasMoveActions = showReorderControls && rowCount > 1;\n                const hasMenuActions = hasMoveActions || hasCustomRowMenuItemsBeforeCore || hasCustomRowMenuItemsAfterCore;\n\n                return (\n                    <>\n                        <RowDataCells\n                            row={row}\n                            rowIndex={rowIndex}\n                            columns={columns}\n                            columnsSignature={columnsSignature}\n                            modifyColumn={modifyColumn}\n                            modifyRow={modifyRow}\n                            getCellErrors={getCellErrors}\n                            onUpdateCell={onUpdateCell}\n                        />\n                        {(showReorderControls || allowDelete) && (\n                            <TableCell\n                                className={cn(\n                                    rowModifications?.cellClassName ?? 'bg-[#fbfcfe]',\n                                )}\n                                title={rowModifications?.title}\n                            >\n                                <div className=\"flex items-center px-1\">\n                                    {showReorderControls && (\n                                        <span ref={dragHandleRef}>\n                                            <Button\n                                                type=\"button\"\n                                                variant=\"none\"\n                                                size=\"xs\"\n                                                disabled={!useDnd}\n                                                className={cn(\n                                                    'cursor-move',\n                                                    'p-0 w-[24px] h-[24px]',\n                                                    'text-gray-500',\n                                                    'hover:bg-transparent',\n                                                    'active:bg-transparent',\n                                                    'hover:text-blue-500',\n                                                    !useDnd && 'opacity-40 cursor-default',\n                                                )}\n                                            >\n                                                <div className=\"size-3\">\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" focusable=\"false\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M71.3 295.6c-21.9-21.9-21.9-57.3 0-79.2s57.3-21.9 79.2 0 21.9 57.3 0 79.2s-57.4 21.9-79.2 0zM184.4 182.5c-21.9-21.9-21.9-57.3 0-79.2s57.3-21.9 79.2 0 21.9 57.3 0 79.2-57.3 21.8-79.2 0zm0 147c21.9-21.9 57.3-21.9 79.2 0s21.9 57.3 0 79.2s-57.3 21.9-79.2 0c-21.9-21.8-21.9-57.3 0-79.2zM297.5 216.4c21.9-21.9 57.3-21.9 79.2 0s21.9 57.3 0 79.2s-57.3 21.9-79.2 0c-21.8-21.9-21.8-57.3 0-79.2z\"></path></svg>\n                                                </div>\n                                            </Button>\n                                        </span>\n                                    )}\n                                    {showReorderControls && (\n                                        <DropdownMenu>\n                                            <DropdownMenuTrigger\n                                                render={(\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"none\"\n                                                        size=\"xs\"\n                                                        disabled={!hasMenuActions}\n                                                        className={cn(\n                                                            'p-0 w-[24px] h-[24px]',\n                                                            'text-gray-500',\n                                                            'hover:bg-transparent',\n                                                            'active:bg-transparent',\n                                                            'hover:text-blue-500',\n                                                            !hasMenuActions && 'opacity-40 cursor-not-allowed',\n                                                        )}\n                                                        aria-label={t('Row actions')}\n                                                    />\n                                                )}\n                                            >\n                                                <FontAwesomeIcon icon={faEllipsis} className=\"size-[12px]\" />\n                                            </DropdownMenuTrigger>\n                                            <DropdownMenuContent align=\"end\">\n                                                {customRowMenuItemsBeforeCore}\n                                                {hasCustomRowMenuItemsBeforeCore && hasMoveActions && <DropdownMenuSeparator />}\n                                                {showReorderControls && rowIndex > 0 && (\n                                                    <DropdownMenuItem onClick={() => { return moveRow(row, -1); }}>\n                                                        <FontAwesomeIcon icon={faArrowUp} />\n                                                        {t('Move up')}\n                                                    </DropdownMenuItem>\n                                                )}\n                                                {showReorderControls && rowIndex < rowCount - 1 && (\n                                                    <DropdownMenuItem onClick={() => { return moveRow(row, 1); }}>\n                                                        <FontAwesomeIcon icon={faArrowDown} />\n                                                        {t('Move down')}\n                                                    </DropdownMenuItem>\n                                                )}\n                                                {hasMoveActions && hasCustomRowMenuItemsAfterCore && <DropdownMenuSeparator />}\n                                                {customRowMenuItemsAfterCore}\n                                            </DropdownMenuContent>\n                                        </DropdownMenu>\n                                    )}\n                                    {renderRowActions?.({\n                                        row,\n                                        rowIndex,\n                                        rowCount,\n                                    })}\n                                    {allowDelete && (\n                                        <Button\n                                            type=\"button\"\n                                            variant=\"none\"\n                                            size=\"xs\"\n                                            onClick={() => { return removeRow(row); }}\n                                            className={cn(\n                                                'p-0 w-[24px] h-[24px]',\n                                                'text-gray-500',\n                                                'hover:bg-transparent',\n                                                'active:bg-transparent',\n                                                'hover:text-red-500',\n                                            )}\n                                        >\n                                            <FontAwesomeIcon icon={faXmark} className=\"size-[12px] mt-[2px]\" />\n                                        </Button>\n                                    )}\n                                </div>\n                            </TableCell>\n                        )}\n                    </>\n                );\n            }}\n        </RowComponent>\n    );\n}, (prevProps, nextProps) => {\n    return (\n        prevProps.row === nextProps.row\n        && prevProps.rowIndex === nextProps.rowIndex\n        && prevProps.rowCount === nextProps.rowCount\n        && prevProps.columnsSignature === nextProps.columnsSignature\n        && prevProps.getCellErrors === nextProps.getCellErrors\n        && prevProps.useDnd === nextProps.useDnd\n        && prevProps.allowReorder === nextProps.allowReorder\n        && prevProps.showReorderControls === nextProps.showReorderControls\n        && prevProps.allowDelete === nextProps.allowDelete\n        && prevProps.modifyRow === nextProps.modifyRow\n        && prevProps.renderRowActions === nextProps.renderRowActions\n        && prevProps.renderRowMenuItemsBeforeCore === nextProps.renderRowMenuItemsBeforeCore\n        && prevProps.renderRowMenuItemsAfterCore === nextProps.renderRowMenuItemsAfterCore\n        && prevProps.renderRowMenuItems === nextProps.renderRowMenuItems\n    );\n});\n"],"mappings":"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"}

package/dist/components/editable-table/types.d.ts

@@ -24,7 +24,19 @@ export type EditableTableColumn = {
     renderCell?: (args: EditableTableRenderCellArgs) => React.ReactNode;
     [key: string]: unknown;
 };
-export type EditableTableModifyColumn = (row: EditableTableRow, columnName: string) => Partial<EditableTableColumn> | null | undefined;
+export type EditableTableModifyColumn = (row: EditableTableRow, columnName: string) => EditableTableModifyColumnResult | null | undefined;
+export type EditableTableModifyColumnResult = Partial<EditableTableColumn> & {
+    /** Applied to the table cell wrapper for this column. */
+    cellClassName?: string;
+    /** Native title attribute for the table cell wrapper. */
+    title?: string;
+};
+export type EditableTableModifyRow = (row: EditableTableRow, rowIndex: number) => {
+    /** Applied to every data cell in the row, and the actions cell when present. */
+    cellClassName?: string;
+    /** Native title attribute for affected cells. */
+    title?: string;
+} | null | undefined;
 export type EditableTableRowActionArgs = {
     row: EditableTableRow;
     rowIndex: number;

package/dist/components/editable-table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAErG,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IACrD,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,CACpC,GAAG,EAAE,gBAAgB,EACrB,UAAU,EAAE,MAAM,KACjB,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAErD,MAAM,MAAM,0BAA0B,GAAG;IACrC,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,CACpC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,gBAAgB,KACpB,IAAI,CAAC;AAEV,MAAM,MAAM,2BAA2B,GAAG;IACtC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,OAAO,EAAE,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAErG,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IACrD,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,CACpC,GAAG,EAAE,gBAAgB,EACrB,UAAU,EAAE,MAAM,KACjB,+BAA+B,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,MAAM,MAAM,+BAA+B,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG;IACzE,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CACjC,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,MAAM,KACf;IACD,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,GAAG,SAAS,CAAC;AAErB,MAAM,MAAM,0BAA0B,GAAG;IACrC,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,CACpC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,gBAAgB,KACpB,IAAI,CAAC;AAEV,MAAM,MAAM,2BAA2B,GAAG;IACtC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,OAAO,EAAE,CAAC;CACzB,CAAC"}

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Calendar';
+export * from './CodeEditor';
 export * from './Checkbox';
 export * from './CheckboxInput';
 export * from './CheckboxSelect';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC"}

package/dist/components/index.js

@@ -1,6 +1,7 @@
 import { Separator } from "./Separator.js";
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./ButtonGroup.js";
 import { Calendar, CalendarDayButton } from "./Calendar.js";
+import { CodeEditor } from "./CodeEditor.js";
 import { Checkbox } from "./Checkbox.js";
 import { CheckboxInput } from "./CheckboxInput.js";
 import { ALL_VALUE, CheckboxSelect } from "./CheckboxSelect.js";
@@ -42,4 +43,4 @@ import { Toggle, toggleVariants } from "./Toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 import { VirtualizedScrollArea } from "./VirtualizedScrollArea.js";
 import { Button, buttonVariants } from "./Button.js";
-export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Checkbox, CheckboxInput, CheckboxSelect, ColorInput, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTable, FadeIn, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Lightswitch, Markdown, MenuButton, ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger, PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SlideUp, Spinner, Status, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualizedScrollArea, buttonGroupVariants, buttonVariants, copyToClipboardWithMeta, toggleVariants, useComboboxAnchor, useCommandState };
+export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Checkbox, CheckboxInput, CheckboxSelect, CodeEditor, ColorInput, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTable, FadeIn, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Lightswitch, Markdown, MenuButton, ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger, PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SlideUp, Spinner, Status, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualizedScrollArea, buttonGroupVariants, buttonVariants, copyToClipboardWithMeta, toggleVariants, useComboboxAnchor, useCommandState };

package/dist/forms/fields/CodeEditorField.d.ts

@@ -0,0 +1,20 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type CodeEditorFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        rows?: number;
+        tabSize?: number;
+        lineNumbers?: boolean;
+        language?: 'html' | 'text';
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const CodeEditorField: ({ form, field }: CodeEditorFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeEditorField.d.ts.map

package/dist/forms/fields/CodeEditorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditorField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/CodeEditorField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,iBAAiB,oBAAoB,4CA4BpE,CAAC"}

package/dist/forms/fields/CodeEditorField.js

@@ -0,0 +1,33 @@
+import { CodeEditor } from "../../components/CodeEditor.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/CodeEditorField.tsx
+var CodeEditorField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(CodeEditor, {
+			value: String(value ?? ""),
+			onChange: setValue,
+			onBlur: setTouched,
+			placeholder: field.placeholder,
+			disabled: field.disabled,
+			rows: field.rows,
+			tabSize: field.tabSize,
+			lineNumbers: field.lineNumbers,
+			language: field.language,
+			isInvalid
+		})
+	});
+};
+//#endregion
+export { CodeEditorField };
+
+//# sourceMappingURL=CodeEditorField.js.map

package/dist/forms/fields/CodeEditorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditorField.js","names":[],"sources":["../../../src/forms/fields/CodeEditorField.tsx"],"sourcesContent":["import { CodeEditor } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype CodeEditorFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        rows?: number;\n        tabSize?: number;\n        lineNumbers?: boolean;\n        language?: 'html' | 'text';\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const CodeEditorField = ({ form, field }: CodeEditorFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <CodeEditor\n                value={String(value ?? '')}\n                onChange={setValue}\n                onBlur={setTouched}\n                placeholder={field.placeholder}\n                disabled={field.disabled}\n                rows={field.rows}\n                tabSize={field.tabSize}\n                lineNumbers={field.lineNumbers}\n                language={field.language}\n                isInvalid={isInvalid}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAsBA,IAAa,mBAAmB,EAAE,MAAM,YAAkC;CACtE,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;AAEpC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,YAAD;GACI,OAAO,OAAO,SAAS,GAAG;GAC1B,UAAU;GACV,QAAQ;GACR,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,SAAS,MAAM;GACf,aAAa,MAAM;GACnB,UAAU,MAAM;GACL;GACb,CAAA;EACQ,CAAA"}

package/dist/forms/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/forms/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AA6EtF,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,EAAE,WAAW,wBAAwB,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,EAAE,WAAW,mBAAmB,KAAG,IAEpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAG,IAExF,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAkC,CAAC;AAElH,eAAO,MAAM,wBAAwB,QAAO,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAsC,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/forms/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AA+EtF,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,EAAE,WAAW,wBAAwB,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,EAAE,WAAW,mBAAmB,KAAG,IAEpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAG,IAExF,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAkC,CAAC;AAElH,eAAO,MAAM,wBAAwB,QAAO,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAsC,CAAC"}

package/dist/forms/registry.js

@@ -8,6 +8,7 @@ import { ListField } from "./fields/ListField.js";
 import { EditableTableField } from "./fields/EditableTableField.js";
 import { DateTimeField } from "./fields/DateTimeField.js";
 import { RichTextField } from "./fields/RichTextField.js";
+import { CodeEditorField } from "./fields/CodeEditorField.js";
 import { VariablePickerField } from "./fields/VariablePickerField.js";
 import { CalculationsField } from "./fields/CalculationsField.js";
 import { ElementSelectField } from "./fields/ElementSelectField.js";
@@ -33,6 +34,7 @@ var formFieldRegistry = {
 	table: EditableTableField,
 	date: DateTimeField,
 	richText: RichTextField,
+	codeEditor: CodeEditorField,
 	variablePicker: VariablePickerField,
 	calculations: CalculationsField,
 	elementSelect: ElementSelectField,

package/dist/forms/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../src/forms/registry.ts"],"sourcesContent":["import type { SchemaFormComponent, SchemaFormFieldComponent } from './engine/context';\nimport { TextField } from './fields/TextField';\nimport { TextareaField } from './fields/TextareaField';\nimport { NumberField } from './fields/NumberField';\nimport { SelectField } from './fields/SelectField';\nimport { LightswitchField } from './fields/LightswitchField';\nimport { HandleField } from './fields/HandleField';\nimport { ListField } from './fields/ListField';\nimport { EditableTableField } from './fields/EditableTableField';\nimport { DateTimeField } from './fields/DateTimeField';\nimport { RichTextField } from './fields/RichTextField';\nimport { VariablePickerField } from './fields/VariablePickerField';\nimport { CalculationsField } from './fields/CalculationsField';\nimport { ElementSelectField } from './fields/ElementSelectField';\nimport { ColorField } from './fields/ColorField';\nimport { CheckboxSelectField } from './fields/CheckboxSelectField';\nimport { ComboboxField } from './fields/ComboboxField';\nimport { GroupField } from './fields/GroupField';\nimport { StaticTableField } from './fields/StaticTableField';\nimport { RadioGroupField } from './fields/RadioGroupField';\nimport {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsContent,\n    ModalTabsList,\n    ModalTabsTrigger,\n} from './components';\n\ntype RegistryHotData = {\n    formRegistry?: {\n        fields?: Record<string, SchemaFormFieldComponent>;\n        components?: Record<string, SchemaFormComponent>;\n    };\n};\n\nconst hmrData = (import.meta.hot?.data as RegistryHotData | undefined)?.formRegistry ?? {};\nconst formFieldRegistry: Record<string, SchemaFormFieldComponent> = {\n    text: TextField,\n    textarea: TextareaField,\n    number: NumberField,\n    select: SelectField,\n    lightswitch: LightswitchField,\n    handle: HandleField,\n    list: ListField,\n    table: EditableTableField,\n    date: DateTimeField,\n    richText: RichTextField,\n    variablePicker: VariablePickerField,\n    calculations: CalculationsField,\n    elementSelect: ElementSelectField,\n    color: ColorField,\n    checkboxSelect: CheckboxSelectField,\n    combobox: ComboboxField,\n    radioGroup: RadioGroupField,\n    group: GroupField,\n    staticTable: StaticTableField,\n    ...(hmrData.fields ?? {}),\n};\n\nconst formComponentRegistry: Record<string, SchemaFormComponent> = {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsList,\n    ModalTabsTrigger,\n    ModalTabsContent,\n    ...(hmrData.components ?? {}),\n};\n\nif (import.meta.hot) {\n    import.meta.hot.dispose((data: RegistryHotData) => {\n        data.formRegistry = {\n            fields: formFieldRegistry,\n            components: formComponentRegistry,\n        };\n    });\n}\n\nexport const registerFormField = (name: string, component: SchemaFormFieldComponent): void => {\n    formFieldRegistry[name] = component;\n};\n\nexport const registerFormFields = (fields: Record<string, SchemaFormFieldComponent>): void => {\n    Object.assign(formFieldRegistry, fields);\n};\n\nexport const registerFormComponent = (name: string, component: SchemaFormComponent): void => {\n    formComponentRegistry[name] = component;\n};\n\nexport const registerFormComponents = (components: Record<string, SchemaFormComponent>): void => {\n    Object.assign(formComponentRegistry, components);\n};\n\nexport const getFormFieldRegistry = (): Record<string, SchemaFormFieldComponent> => { return formFieldRegistry; };\n\nexport const getFormComponentRegistry = (): Record<string, SchemaFormComponent> => { return formComponentRegistry; };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAM,UAAkF,EAAE;AAC1F,IAAM,oBAA8D;CAChE,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,UAAU;CACV,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,YAAY;CACZ,OAAO;CACP,aAAa;CACb,GAAI,QAAQ,UAAU,EAAE;CAC3B;AAED,IAAM,wBAA6D;CAC/D;CACA;CACA;CACA;CACA;CACA,GAAI,QAAQ,cAAc,EAAE;CAC/B;AAWD,IAAa,qBAAqB,MAAc,cAA8C;AAC1F,mBAAkB,QAAQ;;AAG9B,IAAa,sBAAsB,WAA2D;AAC1F,QAAO,OAAO,mBAAmB,OAAO;;AAG5C,IAAa,yBAAyB,MAAc,cAAyC;AACzF,uBAAsB,QAAQ;;AAGlC,IAAa,0BAA0B,eAA0D;AAC7F,QAAO,OAAO,uBAAuB,WAAW;;AAGpD,IAAa,6BAAuE;AAAE,QAAO;;AAE7F,IAAa,iCAAsE;AAAE,QAAO"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../src/forms/registry.ts"],"sourcesContent":["import type { SchemaFormComponent, SchemaFormFieldComponent } from './engine/context';\nimport { TextField } from './fields/TextField';\nimport { TextareaField } from './fields/TextareaField';\nimport { NumberField } from './fields/NumberField';\nimport { SelectField } from './fields/SelectField';\nimport { LightswitchField } from './fields/LightswitchField';\nimport { HandleField } from './fields/HandleField';\nimport { ListField } from './fields/ListField';\nimport { EditableTableField } from './fields/EditableTableField';\nimport { DateTimeField } from './fields/DateTimeField';\nimport { RichTextField } from './fields/RichTextField';\nimport { CodeEditorField } from './fields/CodeEditorField';\nimport { VariablePickerField } from './fields/VariablePickerField';\nimport { CalculationsField } from './fields/CalculationsField';\nimport { ElementSelectField } from './fields/ElementSelectField';\nimport { ColorField } from './fields/ColorField';\nimport { CheckboxSelectField } from './fields/CheckboxSelectField';\nimport { ComboboxField } from './fields/ComboboxField';\nimport { GroupField } from './fields/GroupField';\nimport { StaticTableField } from './fields/StaticTableField';\nimport { RadioGroupField } from './fields/RadioGroupField';\nimport {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsContent,\n    ModalTabsList,\n    ModalTabsTrigger,\n} from './components';\n\ntype RegistryHotData = {\n    formRegistry?: {\n        fields?: Record<string, SchemaFormFieldComponent>;\n        components?: Record<string, SchemaFormComponent>;\n    };\n};\n\nconst hmrData = (import.meta.hot?.data as RegistryHotData | undefined)?.formRegistry ?? {};\nconst formFieldRegistry: Record<string, SchemaFormFieldComponent> = {\n    text: TextField,\n    textarea: TextareaField,\n    number: NumberField,\n    select: SelectField,\n    lightswitch: LightswitchField,\n    handle: HandleField,\n    list: ListField,\n    table: EditableTableField,\n    date: DateTimeField,\n    richText: RichTextField,\n    codeEditor: CodeEditorField,\n    variablePicker: VariablePickerField,\n    calculations: CalculationsField,\n    elementSelect: ElementSelectField,\n    color: ColorField,\n    checkboxSelect: CheckboxSelectField,\n    combobox: ComboboxField,\n    radioGroup: RadioGroupField,\n    group: GroupField,\n    staticTable: StaticTableField,\n    ...(hmrData.fields ?? {}),\n};\n\nconst formComponentRegistry: Record<string, SchemaFormComponent> = {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsList,\n    ModalTabsTrigger,\n    ModalTabsContent,\n    ...(hmrData.components ?? {}),\n};\n\nif (import.meta.hot) {\n    import.meta.hot.dispose((data: RegistryHotData) => {\n        data.formRegistry = {\n            fields: formFieldRegistry,\n            components: formComponentRegistry,\n        };\n    });\n}\n\nexport const registerFormField = (name: string, component: SchemaFormFieldComponent): void => {\n    formFieldRegistry[name] = component;\n};\n\nexport const registerFormFields = (fields: Record<string, SchemaFormFieldComponent>): void => {\n    Object.assign(formFieldRegistry, fields);\n};\n\nexport const registerFormComponent = (name: string, component: SchemaFormComponent): void => {\n    formComponentRegistry[name] = component;\n};\n\nexport const registerFormComponents = (components: Record<string, SchemaFormComponent>): void => {\n    Object.assign(formComponentRegistry, components);\n};\n\nexport const getFormFieldRegistry = (): Record<string, SchemaFormFieldComponent> => { return formFieldRegistry; };\n\nexport const getFormComponentRegistry = (): Record<string, SchemaFormComponent> => { return formComponentRegistry; };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,UAAkF,EAAE;AAC1F,IAAM,oBAA8D;CAChE,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,YAAY;CACZ,OAAO;CACP,aAAa;CACb,GAAI,QAAQ,UAAU,EAAE;CAC3B;AAED,IAAM,wBAA6D;CAC/D;CACA;CACA;CACA;CACA;CACA,GAAI,QAAQ,cAAc,EAAE;CAC/B;AAWD,IAAa,qBAAqB,MAAc,cAA8C;AAC1F,mBAAkB,QAAQ;;AAG9B,IAAa,sBAAsB,WAA2D;AAC1F,QAAO,OAAO,mBAAmB,OAAO;;AAG5C,IAAa,yBAAyB,MAAc,cAAyC;AACzF,uBAAsB,QAAQ;;AAGlC,IAAa,0BAA0B,eAA0D;AAC7F,QAAO,OAAO,uBAAuB,WAAW;;AAGpD,IAAa,6BAAuE;AAAE,QAAO;;AAE7F,IAAa,iCAAsE;AAAE,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-react",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -82,13 +82,13 @@
     },
     "license": "MIT",
     "devDependencies": {
-        "@verbb/vitepress-theme": "1.0.0",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.2.4",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^25.6.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
+        "@verbb/vitepress-theme": "1.0.0",
         "@vitejs/plugin-react": "^6.0.1",
         "@vitest/browser": "^4.1.5",
         "@vitest/coverage-v8": "^4.1.5",
@@ -109,6 +109,9 @@
     },
     "dependencies": {
         "@base-ui/react": "^1.4.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.43.1",
         "@dnd-kit/abstract": "^0.4.0",
         "@dnd-kit/dom": "^0.4.0",
         "@dnd-kit/helpers": "^0.4.0",
@@ -150,6 +153,7 @@
         "@tiptap/pm": "^3.22.4",
         "@tiptap/react": "^3.22.4",
         "@types/prismjs": "^1.26.6",
+        "@uiw/react-codemirror": "^4.25.10",
         "@verbb/plugin-kit": "1.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",