@verbb/plugin-kit-react 1.0.1 → 1.0.3

package/dist/components/TiptapInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapInput.js","names":[],"sources":["../../src/components/TiptapInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useEditor, EditorContent } from '@tiptap/react';\n\nimport Document from '@tiptap/extension-document';\nimport Text from '@tiptap/extension-text';\n\nimport VariableTag from '@verbb/plugin-kit-react/components/tiptap/VariableTag';\nimport { VariableDropdown } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport type { VariableTransformerRegistry } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { VariablePickerProvider } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { InlineVariablePickerPopover } from '@verbb/plugin-kit-react/components/tiptap/InlineVariablePickerPopover';\nimport { useInlineVariablePicker } from '@verbb/plugin-kit-react/components/tiptap/useInlineVariablePicker';\nimport {\n    contentToValue,\n    dedupeVariableOptions,\n    flattenVariableOptions,\n    valueToContent,\n} from '@verbb/plugin-kit-react/components/tiptap/variableSerialization';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst OneLinerDocument = Document.extend({\n    content: 'inline*',\n});\n\nexport const TiptapInput = ({\n    value = '',\n    onChange,\n    className,\n    isInvalid,\n    disabled = false,\n    readOnly = false,\n    variableCategories = {},\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    variablePickerTriggerCharacters = ['@'],\n    ...props\n}) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);\n    const handleKeyDownRef = useRef<import('./tiptap/useInlineVariablePicker').InlineVariablePickerHandleKeyDown | null>(null);\n\n    const topLevelVariables = useMemo(() => {\n        const values = Object.values(variableCategories ?? {}).flatMap(items => {\n            return Array.isArray(items) ? items : [];\n        },\n        );\n        return dedupeVariableOptions(values);\n    }, [variableCategories]);\n\n    const variables = useMemo(() => {\n        return flattenVariableOptions(topLevelVariables);\n    }, [topLevelVariables]);\n\n    const extensions = useMemo(\n        () => {\n            return [OneLinerDocument, Text, VariableTag.configure({})];\n        },\n        [],\n    );\n\n    const editor = useEditor({\n        extensions,\n        content: valueToContent(value, topLevelVariables, variables) as Parameters<typeof useEditor>[0]['content'],\n        editable: !disabled && !readOnly,\n        editorProps: {\n            handleKeyDown: (view, event) => {\n                return handleKeyDownRef.current?.(view, event) ?? false;\n            },\n        } as Parameters<typeof useEditor>[0]['editorProps'],\n        onUpdate: ({ editor: ed }) => {\n            if (onChange) {\n                onChange(contentToValue(ed.getJSON().content));\n            }\n        },\n    });\n\n    const inlinePicker = useInlineVariablePicker(editor, {\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variablePickerTriggerCharacters,\n        disabled,\n        readOnly,\n        wrapperRef,\n        onOpenDropdown: () => {\n            return setIsVariablePickerOpen(true);\n        },\n    });\n\n    useEffect(() => {\n        handleKeyDownRef.current = inlinePicker.handleKeyDown;\n    }, [inlinePicker.handleKeyDown]);\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n        if (!readOnly && editor.isFocused) {\n            return;\n        }\n\n        const newContent = valueToContent(value, topLevelVariables, variables);\n        const currentContent = editor.getJSON();\n        if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) {\n            queueMicrotask(() => {\n                const content = newContent ?? { type: 'doc' as const, content: [] as const };\n                editor.commands.setContent(content);\n            });\n        }\n    }, [editor, value, readOnly, topLevelVariables, variables]);\n\n    const hasVariables = variables.length > 0;\n\n    return (\n        <VariablePickerProvider\n            variableCategories={variableCategories}\n            variableCategoryLabels={variableCategoryLabels}\n            variableCategoryOrder={variableCategoryOrder}\n            variableTransformerRegistry={variableTransformerRegistry as VariableTransformerRegistry | undefined}\n        >\n            <div ref={wrapperRef} className={cn('relative', className)}>\n                <EditorContent\n                    editor={editor}\n                    className={cn(\n                        !readOnly && [\n                            '[&_.ProseMirror]:outline-none [&_.ProseMirror]:bg-clip-padding',\n                            '[&_.ProseMirror]:rounded-sm',\n                            '[&_.ProseMirror]:border [&_.ProseMirror]:border-[rgba(96,125,159,0.4)]',\n                            '[&_.ProseMirror]:bg-[rgb(251,252,254)]',\n                            '[&_.ProseMirror]:whitespace-pre-wrap',\n                            '[&_.ProseMirror]:w-full [&_.ProseMirror]:h-[34px] [&_.ProseMirror]:px-2 [&_.ProseMirror]:pr-10 [&_.ProseMirror]:pt-[6px] [&_.ProseMirror]:text-sm',\n                            '[&_.ProseMirror]:whitespace-nowrap [&_.ProseMirror]:overflow-x-auto [&_.ProseMirror]:overflow-y-hidden',\n                            '[&_.ProseMirror]:[scrollbar-width:none] [&_.ProseMirror::-webkit-scrollbar]:hidden',\n                            '[&_.ProseMirror]:placeholder:text-[#7c8793]',\n                            '[&_.ProseMirror]:focus-visible:border-sky-600 [&_.ProseMirror]:focus-visible: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                            '[&_.ProseMirror]:disabled:cursor-not-allowed [&_.ProseMirror]:disabled:opacity-50',\n                        ],\n                        isInvalid && [\n                            '[&_.ProseMirror]:border-rose-600',\n                            '[&_.ProseMirror]:focus-visible: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                        ],\n                        '[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:inline',\n                        '[&_.ProseMirror_p]:leading-tight',\n                        '[&_.ProseMirror-trailingBreak]:inline [&_.ProseMirror-trailingBreak]:leading-none [&_.ProseMirror-trailingBreak]:w-0 [&_.ProseMirror-trailingBreak]:h-0',\n                    )}\n                    {...props}\n                />\n\n                {hasVariables && !readOnly && (\n                    <VariableDropdown\n                        editor={editor}\n                        variableCategories={variableCategories}\n                        variableCategoryLabels={variableCategoryLabels}\n                        variableCategoryOrder={variableCategoryOrder}\n                        triggerMode=\"input\"\n                        open={isVariablePickerOpen}\n                        onOpenChange={setIsVariablePickerOpen}\n                    />\n                )}\n\n                {hasVariables && !readOnly && (\n                    <InlineVariablePickerPopover\n                        open={inlinePicker.state.open}\n                        onOpenChange={(open) => {\n                            if (!open) {\n                                inlinePicker.closePicker();\n                            }\n                        }}\n                        position={{ top: inlinePicker.state.top, left: inlinePicker.state.left }}\n                        isChildMode={inlinePicker.filteredVariables.isChildMode}\n                        query={inlinePicker.state.query}\n                        onQueryChange={inlinePicker.setQuery}\n                        filteredVariables={inlinePicker.filteredVariables}\n                        onSelect={inlinePicker.handleSelect}\n                        onBack={inlinePicker.goBack}\n                    />\n                )}\n            </div>\n        </VariablePickerProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TiptapInput.js","names":[],"sources":["../../src/components/TiptapInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useEditor, EditorContent } from '@tiptap/react';\n\nimport Document from '@tiptap/extension-document';\nimport Text from '@tiptap/extension-text';\n\nimport VariableTag from '@verbb/plugin-kit-react/components/tiptap/VariableTag';\nimport { VariableDropdown } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport type { VariableCategories } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport type { VariableConfigureSectionProps, VariableTransformerRegistry, VariableTagLabelResolver } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { VariablePickerProvider } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { InlineVariablePickerPopover } from '@verbb/plugin-kit-react/components/tiptap/InlineVariablePickerPopover';\nimport { useInlineVariablePicker } from '@verbb/plugin-kit-react/components/tiptap/useInlineVariablePicker';\nimport {\n    contentToValue,\n    dedupeVariableOptions,\n    flattenVariableOptions,\n    valueToContent,\n} from '@verbb/plugin-kit-react/components/tiptap/variableSerialization';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst OneLinerDocument = Document.extend({\n    content: 'inline*',\n});\n\nexport const TiptapInput = ({\n    value = '',\n    onChange,\n    className,\n    isInvalid,\n    disabled = false,\n    readOnly = false,\n    variableCategories = {},\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    variablePickerTriggerCharacters = ['@'],\n    renderVariableConfigureSection,\n    resolveVariableTagLabel,\n    ...props\n}: {\n    value?: string;\n    onChange?: (value: string) => void;\n    className?: string;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    variableCategories?: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variableTransformerRegistry?: VariableTransformerRegistry;\n    variablePickerTriggerCharacters?: string[];\n    renderVariableConfigureSection?: (props: VariableConfigureSectionProps) => ReactNode;\n    resolveVariableTagLabel?: VariableTagLabelResolver;\n    [key: string]: unknown;\n}) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);\n    const handleKeyDownRef = useRef<import('./tiptap/useInlineVariablePicker').InlineVariablePickerHandleKeyDown | null>(null);\n\n    const topLevelVariables = useMemo(() => {\n        const values = Object.values(variableCategories ?? {}).flatMap(items => {\n            return Array.isArray(items) ? items : [];\n        },\n        );\n        return dedupeVariableOptions(values);\n    }, [variableCategories]);\n\n    const variables = useMemo(() => {\n        return flattenVariableOptions(topLevelVariables);\n    }, [topLevelVariables]);\n\n    const extensions = useMemo(\n        () => {\n            return [OneLinerDocument, Text, VariableTag.configure({})];\n        },\n        [],\n    );\n\n    const editor = useEditor({\n        extensions,\n        content: valueToContent(value, topLevelVariables, variables) as Parameters<typeof useEditor>[0]['content'],\n        editable: !disabled && !readOnly,\n        editorProps: {\n            handleKeyDown: (view, event) => {\n                return handleKeyDownRef.current?.(view, event) ?? false;\n            },\n        } as Parameters<typeof useEditor>[0]['editorProps'],\n        onUpdate: ({ editor: ed }) => {\n            if (onChange) {\n                onChange(contentToValue(ed.getJSON().content));\n            }\n        },\n    });\n\n    const inlinePicker = useInlineVariablePicker(editor, {\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variablePickerTriggerCharacters,\n        disabled,\n        readOnly,\n        wrapperRef,\n        onOpenDropdown: () => {\n            return setIsVariablePickerOpen(true);\n        },\n    });\n\n    useEffect(() => {\n        handleKeyDownRef.current = inlinePicker.handleKeyDown;\n    }, [inlinePicker.handleKeyDown]);\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n        if (!readOnly && editor.isFocused) {\n            return;\n        }\n\n        const newContent = valueToContent(value, topLevelVariables, variables);\n        const currentContent = editor.getJSON();\n        if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) {\n            queueMicrotask(() => {\n                const content = newContent ?? { type: 'doc' as const, content: [] as const };\n                editor.commands.setContent(content);\n            });\n        }\n    }, [editor, value, readOnly, topLevelVariables, variables]);\n\n    const hasVariables = variables.length > 0;\n\n    return (\n        <VariablePickerProvider\n            variableCategories={variableCategories}\n            variableCategoryLabels={variableCategoryLabels}\n            variableCategoryOrder={variableCategoryOrder}\n            variableTransformerRegistry={variableTransformerRegistry as VariableTransformerRegistry | undefined}\n            renderVariableConfigureSection={renderVariableConfigureSection}\n            resolveVariableTagLabel={resolveVariableTagLabel}\n        >\n            <div ref={wrapperRef} className={cn('relative', className)}>\n                <EditorContent\n                    editor={editor}\n                    className={cn(\n                        !readOnly && [\n                            '[&_.ProseMirror]:outline-none [&_.ProseMirror]:bg-clip-padding',\n                            '[&_.ProseMirror]:rounded-sm',\n                            '[&_.ProseMirror]:border [&_.ProseMirror]:border-[rgba(96,125,159,0.4)]',\n                            '[&_.ProseMirror]:bg-[rgb(251,252,254)]',\n                            '[&_.ProseMirror]:whitespace-pre-wrap',\n                            '[&_.ProseMirror]:w-full [&_.ProseMirror]:h-[34px] [&_.ProseMirror]:px-2 [&_.ProseMirror]:pr-10 [&_.ProseMirror]:pt-[6px] [&_.ProseMirror]:text-sm',\n                            '[&_.ProseMirror]:whitespace-nowrap [&_.ProseMirror]:overflow-x-auto [&_.ProseMirror]:overflow-y-hidden',\n                            '[&_.ProseMirror]:[scrollbar-width:none] [&_.ProseMirror::-webkit-scrollbar]:hidden',\n                            '[&_.ProseMirror]:placeholder:text-[#7c8793]',\n                            '[&_.ProseMirror]:focus-visible:border-sky-600 [&_.ProseMirror]:focus-visible: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                            '[&_.ProseMirror]:disabled:cursor-not-allowed [&_.ProseMirror]:disabled:opacity-50',\n                        ],\n                        isInvalid && [\n                            '[&_.ProseMirror]:border-rose-600',\n                            '[&_.ProseMirror]:focus-visible: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                        ],\n                        '[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:inline',\n                        '[&_.ProseMirror_p]:leading-tight',\n                        '[&_.ProseMirror-trailingBreak]:inline [&_.ProseMirror-trailingBreak]:leading-none [&_.ProseMirror-trailingBreak]:w-0 [&_.ProseMirror-trailingBreak]:h-0',\n                    )}\n                    {...props}\n                />\n\n                {hasVariables && !readOnly && (\n                    <VariableDropdown\n                        editor={editor}\n                        variableCategories={variableCategories}\n                        variableCategoryLabels={variableCategoryLabels}\n                        variableCategoryOrder={variableCategoryOrder}\n                        triggerMode=\"input\"\n                        open={isVariablePickerOpen}\n                        onOpenChange={setIsVariablePickerOpen}\n                    />\n                )}\n\n                {hasVariables && !readOnly && (\n                    <InlineVariablePickerPopover\n                        open={inlinePicker.state.open}\n                        onOpenChange={(open) => {\n                            if (!open) {\n                                inlinePicker.closePicker();\n                            }\n                        }}\n                        position={{ top: inlinePicker.state.top, left: inlinePicker.state.left }}\n                        isChildMode={inlinePicker.filteredVariables.isChildMode}\n                        query={inlinePicker.state.query}\n                        onQueryChange={inlinePicker.setQuery}\n                        filteredVariables={inlinePicker.filteredVariables}\n                        onSelect={inlinePicker.handleSelect}\n                        onBack={inlinePicker.goBack}\n                    />\n                )}\n            </div>\n        </VariablePickerProvider>\n    );\n};\n"],"mappings":"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"}

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/tiptap/VariableDropdown.d.ts

@@ -7,8 +7,15 @@ export type VariableOption = {
     pageLabel?: string;
     /** For child items: selector | format | value. Used by variableSerialization. */
     group?: string;
+    /** Raw variable source value types from the server (e.g. text, number, date, url). */
+    types?: string[];
     /** Supported transform value types for this variable (e.g. text, number, date, url). */
     transformValueTypes?: string[];
+    /** Explicitly disables transforms for aggregate/content variables such as field summaries. */
+    allowTransforms?: boolean;
+    /** Application-specific metadata consumed by custom configure/label resolvers. */
+    meta?: Record<string, unknown>;
+    [key: string]: unknown;
 };
 export type VariableCategories = {
     [key: string]: VariableOption[] | undefined;

package/dist/components/tiptap/VariableDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAa3C,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,GAAG,MAAM,CAEvG;AAED,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7G,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,WAAuB,GAC1B,EAAE,qBAAqB,kDA2HvB"}
+{"version":3,"file":"VariableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAa3C,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,GAAG,MAAM,CAEvG;AAED,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7G,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,WAAuB,GAC1B,EAAE,qBAAqB,kDA2HvB"}

package/dist/components/tiptap/VariableDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableDropdown.js","names":[],"sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useEditorState } from '@tiptap/react';\nimport type { Editor } from '@tiptap/core';\nimport { Button } from '@verbb/plugin-kit-react/components/Button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@verbb/plugin-kit-react/components';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@verbb/plugin-kit-react/components/Tooltip';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlusCircle } from '@fortawesome/pro-regular-svg-icons';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nimport { buildVariableTagAttrs } from './variableSerialization';\nimport { VariableCommandList } from './VariableCommandList';\nimport { useVariablePicker } from './useVariablePicker';\n\nexport type VariableOption = {\n    label: string;\n    value?: string;\n    children?: VariableOption[];\n    /** Optional display bucket for first-level grouping (e.g. page headings). */\n    pageLabel?: string;\n    /** For child items: selector | format | value. Used by variableSerialization. */\n    group?: string;\n    /** Supported transform value types for this variable (e.g. text, number, date, url). */\n    transformValueTypes?: string[];\n};\n\nexport type VariableCategories = {\n    [key: string]: VariableOption[] | undefined;\n};\n\nexport function formatVariableCategoryLabel(key: string, labels?: Record<string, string> | null): string {\n    return labels?.[key] ?? key;\n}\n\ntype VariableDropdownProps = {\n    editor: Editor | null | undefined;\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    title?: string;\n    buttonLabel?: string;\n    buttonVariant?: 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'link' | 'none';\n    buttonSize?: 'default' | 'none' | 'xs' | 'sm' | 'lg' | 'xl';\n    buttonClassName?: string;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    triggerMode?: 'toolbar' | 'input';\n};\n\nexport function VariableDropdown({\n    editor,\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    title,\n    buttonLabel,\n    buttonVariant,\n    buttonSize,\n    buttonClassName,\n    open,\n    onOpenChange,\n    triggerMode = 'toolbar',\n}: VariableDropdownProps) {\n    const t = useTranslation();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n    const isControlledOpen = typeof open === 'boolean';\n    const isOpen = isControlledOpen ? open : uncontrolledOpen;\n\n    const picker = useVariablePicker({\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        isOpen,\n        onApply: (baseVariable, variable) => {\n            const attrs = buildVariableTagAttrs(baseVariable, variable);\n            const chain = editor?.chain();\n            chain?.focus?.()?.setVariableTag?.(attrs)?.run?.();\n            if (!isControlledOpen) {\n                setUncontrolledOpen(false);\n            }\n            onOpenChange?.(false);\n            picker.reset();\n        },\n    });\n\n    const isVariableActive = useEditorState({\n        editor: editor as import('@tiptap/core').Editor | null,\n        selector: ({ editor: ed }) => {\n            return (ed?.isFocused && ed?.isActive('variableTag')) ?? false;\n        },\n    });\n\n    const handleOpenChange = (nextOpen: boolean) => {\n        if (!nextOpen) {\n            picker.reset();\n        }\n        if (!isControlledOpen) {\n            setUncontrolledOpen(nextOpen);\n        }\n        onOpenChange?.(nextOpen);\n    };\n\n    const hasAnyVariables = Object.values(variableCategories ?? {}).some(\n        items => {\n            return Array.isArray(items) && items.length > 0;\n        },\n    );\n\n    if (!hasAnyVariables) {\n        return null;\n    }\n\n    const triggerButton = (\n        <Button\n            variant={buttonVariant ?? 'none'}\n            size={buttonSize}\n            className={cn(\n                triggerMode === 'toolbar' && [\n                    buttonLabel ? 'h-[32px] px-[8px] gap-1.5' : 'w-[32px] h-[32px]',\n                    'text-[#1c2e36]',\n                    'hover:bg-slate-100!',\n                    isVariableActive && 'bg-slate-250! hover:bg-slate-250!',\n                ],\n                triggerMode === 'input' && [\n                    'absolute right-[1px] top-1/2 -translate-y-1/2',\n                    'border-l border-transparent',\n                    'rounded-[3px] rounded-l-none',\n                    'h-[calc(100%-2px)]',\n                    'text-[#8d959b]',\n                    'bg-white hover:bg-slate-50',\n                    'border-[#d7dfe7]',\n                    'text-[#1c2e36]',\n                ],\n\n                buttonClassName ?? '',\n            )}\n        >\n            <FontAwesomeIcon icon={faPlusCircle} className=\"size-4\" />\n            {buttonLabel && <span>{buttonLabel}</span>}\n        </Button>\n    );\n\n    const content = (\n        <Popover modal={false} open={isOpen} onOpenChange={handleOpenChange}>\n            {(buttonLabel || title) ? (\n                <Tooltip>\n                    <TooltipTrigger render={<PopoverTrigger nativeButton={true} render={triggerButton} />} />\n                    <TooltipContent sideOffset={4}>{buttonLabel || title}</TooltipContent>\n                </Tooltip>\n            ) : (\n                <PopoverTrigger nativeButton={true} render={triggerButton} />\n            )}\n            <PopoverContent\n                align={triggerMode === 'input' ? 'end' : 'start'}\n                side=\"bottom\"\n                sideOffset={6}\n                positionMethod=\"fixed\"\n                collisionAvoidance={{\n                    side: 'flip',\n                    align: 'shift',\n                    fallbackAxisSide: 'none',\n                }}\n                className=\"min-w-[260px] max-w-[360px] p-0 overflow-hidden flex flex-col\"\n                portalClassName=\"z-250\"\n            >\n                <VariableCommandList\n                    search={picker.search}\n                    onSearchChange={picker.setSearch}\n                    groups={picker.groups}\n                    options={picker.options}\n                    onSelect={picker.handleSelect}\n                    placeholder={t('Search variables')}\n                    showSearch\n                    shouldFilter={false}\n                    onBack={picker.page ? picker.handleBack : undefined}\n                    isChildMode={!!picker.page}\n                    selectFirstItem={triggerMode === 'input'}\n                    autoFocusSearchInput={triggerMode !== 'input'}\n                />\n            </PopoverContent>\n        </Popover>\n    );\n\n    return content;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAgB,4BAA4B,KAAa,QAAgD;AACrG,QAAO,SAAS,QAAQ;;AAkB5B,SAAgB,iBAAiB,EAC7B,QACA,oBACA,wBACA,uBACA,OACA,aACA,eACA,YACA,iBACA,MACA,cACA,cAAc,aACQ;CACtB,MAAM,IAAI,gBAAgB;CAC1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,mBAAmB,OAAO,SAAS;CACzC,MAAM,SAAS,mBAAmB,OAAO;CAEzC,MAAM,SAAS,kBAAkB;EAC7B;EACA;EACA;EACA;EACA,UAAU,cAAc,aAAa;GACjC,MAAM,QAAQ,sBAAsB,cAAc,SAAS;AAE3D,IADc,QAAQ,OAAO,GACtB,SAAS,EAAE,iBAAiB,MAAM,EAAE,OAAO;AAClD,OAAI,CAAC,iBACD,qBAAoB,MAAM;AAE9B,kBAAe,MAAM;AACrB,UAAO,OAAO;;EAErB,CAAC;CAEF,MAAM,mBAAmB,eAAe;EAC5B;EACR,WAAW,EAAE,QAAQ,SAAS;AAC1B,WAAQ,IAAI,aAAa,IAAI,SAAS,cAAc,KAAK;;EAEhE,CAAC;CAEF,MAAM,oBAAoB,aAAsB;AAC5C,MAAI,CAAC,SACD,QAAO,OAAO;AAElB,MAAI,CAAC,iBACD,qBAAoB,SAAS;AAEjC,iBAAe,SAAS;;AAS5B,KAAI,CANoB,OAAO,OAAO,sBAAsB,EAAE,CAAC,CAAC,MAC5D,UAAS;AACL,SAAO,MAAM,QAAQ,MAAM,IAAI,MAAM,SAAS;GAIjD,CACD,QAAO;CAGX,MAAM,gBACF,qBAAC,QAAD;EACI,SAAS,iBAAiB;EAC1B,MAAM;EACN,WAAW,GACP,gBAAgB,aAAa;GACzB,cAAc,8BAA8B;GAC5C;GACA;GACA,oBAAoB;GACvB,EACD,gBAAgB,WAAW;GACvB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EAED,mBAAmB,GACtB;YAtBL,CAwBI,oBAAC,iBAAD;GAAiB,MAAM;GAAc,WAAU;GAAW,CAAA,EACzD,eAAe,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CACrC;;AA4Cb,QAxCI,qBAAC,SAAD;EAAS,OAAO;EAAO,MAAM;EAAQ,cAAc;YAAnD,CACM,eAAe,QACb,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,gBAAD,EAAgB,QAAQ,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAAI,CAAA,EACzF,oBAAC,gBAAD;GAAgB,YAAY;aAAI,eAAe;GAAuB,CAAA,CAChE,EAAA,CAAA,GAEV,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAEjE,oBAAC,gBAAD;GACI,OAAO,gBAAgB,UAAU,QAAQ;GACzC,MAAK;GACL,YAAY;GACZ,gBAAe;GACf,oBAAoB;IAChB,MAAM;IACN,OAAO;IACP,kBAAkB;IACrB;GACD,WAAU;GACV,iBAAgB;aAEhB,oBAAC,qBAAD;IACI,QAAQ,OAAO;IACf,gBAAgB,OAAO;IACvB,QAAQ,OAAO;IACf,SAAS,OAAO;IAChB,UAAU,OAAO;IACjB,aAAa,EAAE,mBAAmB;IAClC,YAAA;IACA,cAAc;IACd,QAAQ,OAAO,OAAO,OAAO,aAAa,KAAA;IAC1C,aAAa,CAAC,CAAC,OAAO;IACtB,iBAAiB,gBAAgB;IACjC,sBAAsB,gBAAgB;IACxC,CAAA;GACW,CAAA,CACX;GAGP"}
+{"version":3,"file":"VariableDropdown.js","names":[],"sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useEditorState } from '@tiptap/react';\nimport type { Editor } from '@tiptap/core';\nimport { Button } from '@verbb/plugin-kit-react/components/Button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@verbb/plugin-kit-react/components';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@verbb/plugin-kit-react/components/Tooltip';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlusCircle } from '@fortawesome/pro-regular-svg-icons';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nimport { buildVariableTagAttrs } from './variableSerialization';\nimport { VariableCommandList } from './VariableCommandList';\nimport { useVariablePicker } from './useVariablePicker';\n\nexport type VariableOption = {\n    label: string;\n    value?: string;\n    children?: VariableOption[];\n    /** Optional display bucket for first-level grouping (e.g. page headings). */\n    pageLabel?: string;\n    /** For child items: selector | format | value. Used by variableSerialization. */\n    group?: string;\n    /** Raw variable source value types from the server (e.g. text, number, date, url). */\n    types?: string[];\n    /** Supported transform value types for this variable (e.g. text, number, date, url). */\n    transformValueTypes?: string[];\n    /** Explicitly disables transforms for aggregate/content variables such as field summaries. */\n    allowTransforms?: boolean;\n    /** Application-specific metadata consumed by custom configure/label resolvers. */\n    meta?: Record<string, unknown>;\n    [key: string]: unknown;\n};\n\nexport type VariableCategories = {\n    [key: string]: VariableOption[] | undefined;\n};\n\nexport function formatVariableCategoryLabel(key: string, labels?: Record<string, string> | null): string {\n    return labels?.[key] ?? key;\n}\n\ntype VariableDropdownProps = {\n    editor: Editor | null | undefined;\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    title?: string;\n    buttonLabel?: string;\n    buttonVariant?: 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'link' | 'none';\n    buttonSize?: 'default' | 'none' | 'xs' | 'sm' | 'lg' | 'xl';\n    buttonClassName?: string;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    triggerMode?: 'toolbar' | 'input';\n};\n\nexport function VariableDropdown({\n    editor,\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    title,\n    buttonLabel,\n    buttonVariant,\n    buttonSize,\n    buttonClassName,\n    open,\n    onOpenChange,\n    triggerMode = 'toolbar',\n}: VariableDropdownProps) {\n    const t = useTranslation();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n    const isControlledOpen = typeof open === 'boolean';\n    const isOpen = isControlledOpen ? open : uncontrolledOpen;\n\n    const picker = useVariablePicker({\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        isOpen,\n        onApply: (baseVariable, variable) => {\n            const attrs = buildVariableTagAttrs(baseVariable, variable);\n            const chain = editor?.chain();\n            chain?.focus?.()?.setVariableTag?.(attrs)?.run?.();\n            if (!isControlledOpen) {\n                setUncontrolledOpen(false);\n            }\n            onOpenChange?.(false);\n            picker.reset();\n        },\n    });\n\n    const isVariableActive = useEditorState({\n        editor: editor as import('@tiptap/core').Editor | null,\n        selector: ({ editor: ed }) => {\n            return (ed?.isFocused && ed?.isActive('variableTag')) ?? false;\n        },\n    });\n\n    const handleOpenChange = (nextOpen: boolean) => {\n        if (!nextOpen) {\n            picker.reset();\n        }\n        if (!isControlledOpen) {\n            setUncontrolledOpen(nextOpen);\n        }\n        onOpenChange?.(nextOpen);\n    };\n\n    const hasAnyVariables = Object.values(variableCategories ?? {}).some(\n        items => {\n            return Array.isArray(items) && items.length > 0;\n        },\n    );\n\n    if (!hasAnyVariables) {\n        return null;\n    }\n\n    const triggerButton = (\n        <Button\n            variant={buttonVariant ?? 'none'}\n            size={buttonSize}\n            className={cn(\n                triggerMode === 'toolbar' && [\n                    buttonLabel ? 'h-[32px] px-[8px] gap-1.5' : 'w-[32px] h-[32px]',\n                    'text-[#1c2e36]',\n                    'hover:bg-slate-100!',\n                    isVariableActive && 'bg-slate-250! hover:bg-slate-250!',\n                ],\n                triggerMode === 'input' && [\n                    'absolute right-[1px] top-1/2 -translate-y-1/2',\n                    'border-l border-transparent',\n                    'rounded-[3px] rounded-l-none',\n                    'h-[calc(100%-2px)]',\n                    'text-[#8d959b]',\n                    'bg-white hover:bg-slate-50',\n                    'border-[#d7dfe7]',\n                    'text-[#1c2e36]',\n                ],\n\n                buttonClassName ?? '',\n            )}\n        >\n            <FontAwesomeIcon icon={faPlusCircle} className=\"size-4\" />\n            {buttonLabel && <span>{buttonLabel}</span>}\n        </Button>\n    );\n\n    const content = (\n        <Popover modal={false} open={isOpen} onOpenChange={handleOpenChange}>\n            {(buttonLabel || title) ? (\n                <Tooltip>\n                    <TooltipTrigger render={<PopoverTrigger nativeButton={true} render={triggerButton} />} />\n                    <TooltipContent sideOffset={4}>{buttonLabel || title}</TooltipContent>\n                </Tooltip>\n            ) : (\n                <PopoverTrigger nativeButton={true} render={triggerButton} />\n            )}\n            <PopoverContent\n                align={triggerMode === 'input' ? 'end' : 'start'}\n                side=\"bottom\"\n                sideOffset={6}\n                positionMethod=\"fixed\"\n                collisionAvoidance={{\n                    side: 'flip',\n                    align: 'shift',\n                    fallbackAxisSide: 'none',\n                }}\n                className=\"min-w-[260px] max-w-[360px] p-0 overflow-hidden flex flex-col\"\n                portalClassName=\"z-250\"\n            >\n                <VariableCommandList\n                    search={picker.search}\n                    onSearchChange={picker.setSearch}\n                    groups={picker.groups}\n                    options={picker.options}\n                    onSelect={picker.handleSelect}\n                    placeholder={t('Search variables')}\n                    showSearch\n                    shouldFilter={false}\n                    onBack={picker.page ? picker.handleBack : undefined}\n                    isChildMode={!!picker.page}\n                    selectFirstItem={triggerMode === 'input'}\n                    autoFocusSearchInput={triggerMode !== 'input'}\n                />\n            </PopoverContent>\n        </Popover>\n    );\n\n    return content;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,SAAgB,4BAA4B,KAAa,QAAgD;AACrG,QAAO,SAAS,QAAQ;;AAkB5B,SAAgB,iBAAiB,EAC7B,QACA,oBACA,wBACA,uBACA,OACA,aACA,eACA,YACA,iBACA,MACA,cACA,cAAc,aACQ;CACtB,MAAM,IAAI,gBAAgB;CAC1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,mBAAmB,OAAO,SAAS;CACzC,MAAM,SAAS,mBAAmB,OAAO;CAEzC,MAAM,SAAS,kBAAkB;EAC7B;EACA;EACA;EACA;EACA,UAAU,cAAc,aAAa;GACjC,MAAM,QAAQ,sBAAsB,cAAc,SAAS;AAE3D,IADc,QAAQ,OAAO,GACtB,SAAS,EAAE,iBAAiB,MAAM,EAAE,OAAO;AAClD,OAAI,CAAC,iBACD,qBAAoB,MAAM;AAE9B,kBAAe,MAAM;AACrB,UAAO,OAAO;;EAErB,CAAC;CAEF,MAAM,mBAAmB,eAAe;EAC5B;EACR,WAAW,EAAE,QAAQ,SAAS;AAC1B,WAAQ,IAAI,aAAa,IAAI,SAAS,cAAc,KAAK;;EAEhE,CAAC;CAEF,MAAM,oBAAoB,aAAsB;AAC5C,MAAI,CAAC,SACD,QAAO,OAAO;AAElB,MAAI,CAAC,iBACD,qBAAoB,SAAS;AAEjC,iBAAe,SAAS;;AAS5B,KAAI,CANoB,OAAO,OAAO,sBAAsB,EAAE,CAAC,CAAC,MAC5D,UAAS;AACL,SAAO,MAAM,QAAQ,MAAM,IAAI,MAAM,SAAS;GAIjD,CACD,QAAO;CAGX,MAAM,gBACF,qBAAC,QAAD;EACI,SAAS,iBAAiB;EAC1B,MAAM;EACN,WAAW,GACP,gBAAgB,aAAa;GACzB,cAAc,8BAA8B;GAC5C;GACA;GACA,oBAAoB;GACvB,EACD,gBAAgB,WAAW;GACvB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EAED,mBAAmB,GACtB;YAtBL,CAwBI,oBAAC,iBAAD;GAAiB,MAAM;GAAc,WAAU;GAAW,CAAA,EACzD,eAAe,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CACrC;;AA4Cb,QAxCI,qBAAC,SAAD;EAAS,OAAO;EAAO,MAAM;EAAQ,cAAc;YAAnD,CACM,eAAe,QACb,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,gBAAD,EAAgB,QAAQ,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAAI,CAAA,EACzF,oBAAC,gBAAD;GAAgB,YAAY;aAAI,eAAe;GAAuB,CAAA,CAChE,EAAA,CAAA,GAEV,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAEjE,oBAAC,gBAAD;GACI,OAAO,gBAAgB,UAAU,QAAQ;GACzC,MAAK;GACL,YAAY;GACZ,gBAAe;GACf,oBAAoB;IAChB,MAAM;IACN,OAAO;IACP,kBAAkB;IACrB;GACD,WAAU;GACV,iBAAgB;aAEhB,oBAAC,qBAAD;IACI,QAAQ,OAAO;IACf,gBAAgB,OAAO;IACvB,QAAQ,OAAO;IACf,SAAS,OAAO;IAChB,UAAU,OAAO;IACjB,aAAa,EAAE,mBAAmB;IAClC,YAAA;IACA,cAAc;IACd,QAAQ,OAAO,OAAO,OAAO,aAAa,KAAA;IAC1C,aAAa,CAAC,CAAC,OAAO;IACtB,iBAAiB,gBAAgB;IACjC,sBAAsB,gBAAgB;IACxC,CAAA;GACW,CAAA,CACX;GAGP"}

package/dist/components/tiptap/VariablePickerContext.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariableCategories } from './VariableDropdown';
+import { VariableCategories, VariableOption } from './VariableDropdown';
 export type VariableTransformerParam = {
     name: string;
     type: string;
@@ -25,13 +25,33 @@ export type VariableTransformerDefinition = {
     appliesTo?: string[];
 };
 export type VariableTransformerRegistry = Record<string, VariableTransformerDefinition[]>;
+export type VariableConfigureSectionProps = {
+    tokenValue: string;
+    variableOption: VariableOption | null;
+    onPendingTokenChange?: (tokenValue: string) => void;
+    configureResetKey?: string;
+    /** Synchronously updated ref for custom configure-section state. */
+    configureStateRef?: React.MutableRefObject<Record<string, unknown> | null>;
+    /** Called before save to flush custom configure-section state into the pending token. */
+    prepareSaveRef?: React.MutableRefObject<(() => void) | null>;
+    /** Read the latest pending token value (may differ from tokenValue while configuring). */
+    getPendingTokenValue?: () => string;
+};
+export type VariableTagLabelResolver = (props: {
+    tokenValue: string;
+    variableOption: VariableOption | null;
+    defaultLabel: string;
+    storedLabel?: string;
+}) => string;
 export type VariablePickerContextValue = {
     variableCategories: VariableCategories;
     variableCategoryLabels?: Record<string, string>;
     variableCategoryOrder?: string[];
     variableTransformerRegistry?: VariableTransformerRegistry;
+    renderVariableConfigureSection?: (props: VariableConfigureSectionProps) => React.ReactNode;
+    resolveVariableTagLabel?: VariableTagLabelResolver;
 };
-export declare function VariablePickerProvider({ variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, children, }: VariablePickerContextValue & {
+export declare function VariablePickerProvider({ variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, renderVariableConfigureSection, resolveVariableTagLabel, children, }: VariablePickerContextValue & {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useVariablePickerContext(): VariablePickerContextValue | null;

package/dist/components/tiptap/VariablePickerContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariablePickerContext.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariablePickerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,EAAE,6BAA6B,EAAE,CAAC,CAAC;AAE1F,MAAM,MAAM,0BAA0B,GAAG;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;CAC7D,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,EACnC,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,GACX,EAAE,0BAA0B,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiB5D;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,GAAG,IAAI,CAE5E"}
+{"version":3,"file":"VariablePickerContext.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariablePickerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,wBAAwB,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,EAAE,6BAA6B,EAAE,CAAC,CAAC;AAE1F,MAAM,MAAM,6BAA6B,GAAG;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3E,yFAAyF;IACzF,cAAc,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7D,0FAA0F;IAC1F,oBAAoB,CAAC,EAAE,MAAM,MAAM,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,KAAK,MAAM,CAAC;AAEb,MAAM,MAAM,0BAA0B,GAAG;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D,8BAA8B,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3F,uBAAuB,CAAC,EAAE,wBAAwB,CAAC;CACtD,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,EACnC,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,8BAA8B,EAC9B,uBAAuB,EACvB,QAAQ,GACX,EAAE,0BAA0B,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAmB5D;AAED,wBAAgB,wBAAwB,IAAI,0BAA0B,GAAG,IAAI,CAE5E"}

package/dist/components/tiptap/VariablePickerContext.js

@@ -2,19 +2,23 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tiptap/VariablePickerContext.tsx
 var VariablePickerContext = React.createContext(null);
-function VariablePickerProvider({ variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, children }) {
+function VariablePickerProvider({ variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, renderVariableConfigureSection, resolveVariableTagLabel, children }) {
 	const value = React.useMemo(() => {
 		return {
 			variableCategories: variableCategories ?? {},
 			variableCategoryLabels,
 			variableCategoryOrder,
-			variableTransformerRegistry: variableTransformerRegistry ?? {}
+			variableTransformerRegistry: variableTransformerRegistry ?? {},
+			renderVariableConfigureSection,
+			resolveVariableTagLabel
 		};
 	}, [
 		variableCategories,
 		variableCategoryLabels,
 		variableCategoryOrder,
-		variableTransformerRegistry
+		variableTransformerRegistry,
+		renderVariableConfigureSection,
+		resolveVariableTagLabel
 	]);
 	return /* @__PURE__ */ jsx(VariablePickerContext.Provider, {
 		value,

package/dist/components/tiptap/VariablePickerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariablePickerContext.js","names":[],"sources":["../../../src/components/tiptap/VariablePickerContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { VariableCategories } from './VariableDropdown';\n\nexport type VariableTransformerParam = {\n    name: string;\n    type: string;\n    label: string;\n    required: boolean;\n    default?: string | number | boolean | null;\n    placeholder?: string;\n    options?: Array<{\n        value: string;\n        label: string;\n        group?: string;\n    }>;\n    showWhen?: {\n        param: string;\n        equals: string;\n    };\n};\n\nexport type VariableTransformerDefinition = {\n    id: string;\n    label: string;\n    description: string;\n    params: VariableTransformerParam[];\n    appliesTo?: string[];\n};\n\nexport type VariableTransformerRegistry = Record<string, VariableTransformerDefinition[]>;\n\nexport type VariablePickerContextValue = {\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variableTransformerRegistry?: VariableTransformerRegistry;\n};\n\nconst VariablePickerContext = React.createContext<VariablePickerContextValue | null>(null);\n\nexport function VariablePickerProvider({\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    children,\n}: VariablePickerContextValue & { children: React.ReactNode }) {\n    const value = React.useMemo(\n        () => {\n            return ({\n                variableCategories: variableCategories ?? {},\n                variableCategoryLabels,\n                variableCategoryOrder,\n                variableTransformerRegistry: variableTransformerRegistry ?? {}\n            });\n        },\n        [variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry],\n    );\n    return (\n        <VariablePickerContext.Provider value={value}>\n            {children}\n        </VariablePickerContext.Provider>\n    );\n}\n\nexport function useVariablePickerContext(): VariablePickerContextValue | null {\n    return React.useContext(VariablePickerContext);\n}\n"],"mappings":";;;AAsCA,IAAM,wBAAwB,MAAM,cAAiD,KAAK;AAE1F,SAAgB,uBAAuB,EACnC,oBACA,wBACA,uBACA,6BACA,YAC2D;CAC3D,MAAM,QAAQ,MAAM,cACV;AACF,SAAQ;GACJ,oBAAoB,sBAAsB,EAAE;GAC5C;GACA;GACA,6BAA6B,+BAA+B,EAAE;GACjE;IAEL;EAAC;EAAoB;EAAwB;EAAuB;EAA4B,CACnG;AACD,QACI,oBAAC,sBAAsB,UAAvB;EAAuC;EAClC;EAC4B,CAAA;;AAIzC,SAAgB,2BAA8D;AAC1E,QAAO,MAAM,WAAW,sBAAsB"}
+{"version":3,"file":"VariablePickerContext.js","names":[],"sources":["../../../src/components/tiptap/VariablePickerContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { VariableCategories, VariableOption } from './VariableDropdown';\n\nexport type VariableTransformerParam = {\n    name: string;\n    type: string;\n    label: string;\n    required: boolean;\n    default?: string | number | boolean | null;\n    placeholder?: string;\n    options?: Array<{\n        value: string;\n        label: string;\n        group?: string;\n    }>;\n    showWhen?: {\n        param: string;\n        equals: string;\n    };\n};\n\nexport type VariableTransformerDefinition = {\n    id: string;\n    label: string;\n    description: string;\n    params: VariableTransformerParam[];\n    appliesTo?: string[];\n};\n\nexport type VariableTransformerRegistry = Record<string, VariableTransformerDefinition[]>;\n\nexport type VariableConfigureSectionProps = {\n    tokenValue: string;\n    variableOption: VariableOption | null;\n    onPendingTokenChange?: (tokenValue: string) => void;\n    configureResetKey?: string;\n    /** Synchronously updated ref for custom configure-section state. */\n    configureStateRef?: React.MutableRefObject<Record<string, unknown> | null>;\n    /** Called before save to flush custom configure-section state into the pending token. */\n    prepareSaveRef?: React.MutableRefObject<(() => void) | null>;\n    /** Read the latest pending token value (may differ from tokenValue while configuring). */\n    getPendingTokenValue?: () => string;\n};\n\nexport type VariableTagLabelResolver = (props: {\n    tokenValue: string;\n    variableOption: VariableOption | null;\n    defaultLabel: string;\n    storedLabel?: string;\n}) => string;\n\nexport type VariablePickerContextValue = {\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variableTransformerRegistry?: VariableTransformerRegistry;\n    renderVariableConfigureSection?: (props: VariableConfigureSectionProps) => React.ReactNode;\n    resolveVariableTagLabel?: VariableTagLabelResolver;\n};\n\nconst VariablePickerContext = React.createContext<VariablePickerContextValue | null>(null);\n\nexport function VariablePickerProvider({\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    renderVariableConfigureSection,\n    resolveVariableTagLabel,\n    children,\n}: VariablePickerContextValue & { children: React.ReactNode }) {\n    const value = React.useMemo(\n        () => {\n            return ({\n                variableCategories: variableCategories ?? {},\n                variableCategoryLabels,\n                variableCategoryOrder,\n                variableTransformerRegistry: variableTransformerRegistry ?? {},\n                renderVariableConfigureSection,\n                resolveVariableTagLabel,\n            });\n        },\n        [variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, renderVariableConfigureSection, resolveVariableTagLabel],\n    );\n    return (\n        <VariablePickerContext.Provider value={value}>\n            {children}\n        </VariablePickerContext.Provider>\n    );\n}\n\nexport function useVariablePickerContext(): VariablePickerContextValue | null {\n    return React.useContext(VariablePickerContext);\n}\n"],"mappings":";;;AA4DA,IAAM,wBAAwB,MAAM,cAAiD,KAAK;AAE1F,SAAgB,uBAAuB,EACnC,oBACA,wBACA,uBACA,6BACA,gCACA,yBACA,YAC2D;CAC3D,MAAM,QAAQ,MAAM,cACV;AACF,SAAQ;GACJ,oBAAoB,sBAAsB,EAAE;GAC5C;GACA;GACA,6BAA6B,+BAA+B,EAAE;GAC9D;GACA;GACH;IAEL;EAAC;EAAoB;EAAwB;EAAuB;EAA6B;EAAgC;EAAwB,CAC5J;AACD,QACI,oBAAC,sBAAsB,UAAvB;EAAuC;EAClC;EAC4B,CAAA;;AAIzC,SAAgB,2BAA8D;AAC1E,QAAO,MAAM,WAAW,sBAAsB"}

package/dist/components/tiptap/VariableTagView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableTagView.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableTagView.tsx"],"names":[],"mappings":"yBAsBgB,UAAK;AAArB,wBAsmBE"}
+{"version":3,"file":"VariableTagView.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableTagView.tsx"],"names":[],"mappings":"yBAwBgB,UAAK;AAArB,wBA4wBE"}