@verbb/plugin-kit-react 1.0.0

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

@@ -0,0 +1,415 @@
+import { cn } from "../../utils/classes.js";
+import "../../utils/index.js";
+import { Checkbox } from "../Checkbox.js";
+import { ComboboxInput } from "../ComboboxInput.js";
+import { ColorInput } from "../ColorInput.js";
+import { DatePicker } from "../DatePicker.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "../DropdownMenu.js";
+import { VariableCommandList } from "../tiptap/VariableCommandList.js";
+import { useVariablePicker } from "../tiptap/useVariablePicker.js";
+import { Input } from "../Input.js";
+import { Lightswitch } from "../Lightswitch.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover.js";
+import { SelectInput } from "../SelectInput.js";
+import { Textarea } from "../Textarea.js";
+import { TimePicker } from "../TimePicker.js";
+import "../index.js";
+import { Button } from "../Button.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown, faEllipsis } from "@fortawesome/pro-solid-svg-icons";
+//#region src/components/editable-table/TableCell.tsx
+function VariablePickerCell({ finalColumn, value, updateValue, isInvalid }) {
+	const t = useTranslation();
+	const [open, setOpen] = useState(false);
+	const picker = useVariablePicker({
+		variableCategories: finalColumn.variableCategories || {},
+		variableCategoryLabels: finalColumn.variableCategoryLabels || {},
+		variableCategoryOrder: finalColumn.variableCategoryOrder || [],
+		isOpen: open,
+		onApply: (_baseVariable, variable) => {
+			updateValue(String(variable?.value || ""));
+			setOpen(false);
+		}
+	});
+	const noneOptionLabel = finalColumn.noneOptionLabel || t("Select an option");
+	const selectedLabel = useMemo(() => {
+		const targetValue = String(value || "");
+		if (!targetValue) return noneOptionLabel;
+		let label = "";
+		const visit = (items = []) => {
+			items.forEach((item) => {
+				if (label || !item || typeof item !== "object") return;
+				if (String(item.value || "") === targetValue) {
+					label = item.label || targetValue;
+					return;
+				}
+				if (Array.isArray(item.children)) visit(item.children);
+			});
+		};
+		Object.values(finalColumn.variableCategories || {}).forEach((items) => {
+			if (Array.isArray(items)) visit(items);
+		});
+		return label || targetValue;
+	}, [
+		finalColumn.variableCategories,
+		noneOptionLabel,
+		value
+	]);
+	const pickerGroups = useMemo(() => {
+		const groups = Array.isArray(picker.groups) ? picker.groups : [];
+		const groupedByPage = [];
+		groups.forEach((group) => {
+			if (group?.value !== "fieldsVariables" || !Array.isArray(group.items)) {
+				groupedByPage.push(group);
+				return;
+			}
+			const pageBuckets = /* @__PURE__ */ new Map();
+			group.items.forEach((item) => {
+				const pageLabel = String(item?.pageLabel || "").trim() || t("Fields");
+				if (!pageBuckets.has(pageLabel)) pageBuckets.set(pageLabel, []);
+				const bucket = pageBuckets.get(pageLabel);
+				if (bucket) bucket.push(item);
+			});
+			pageBuckets.forEach((items, pageLabel) => {
+				groupedByPage.push({
+					label: pageLabel,
+					value: `fieldsVariables:${pageLabel}`,
+					items
+				});
+			});
+		});
+		if (picker.page) return groupedByPage;
+		return [{
+			label: "",
+			value: "none",
+			items: [{
+				label: noneOptionLabel,
+				value: "__none__"
+			}]
+		}, ...groupedByPage];
+	}, [
+		noneOptionLabel,
+		picker.groups,
+		picker.page,
+		t
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1 px-2",
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			modal: false,
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				nativeButton: true,
+				render: /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: "default",
+					className: cn("min-w-0 flex-1 py-[6px] justify-between", isInvalid && "border-error", finalColumn.className),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate flex-1 text-left",
+						children: selectedLabel
+					}), /* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faChevronDown,
+						className: "size-2.5 pointer-events-none ml-2 shrink-0"
+					})]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				side: "bottom",
+				sideOffset: 6,
+				positionMethod: "fixed",
+				collisionAvoidance: {
+					side: "flip",
+					align: "shift",
+					fallbackAxisSide: "none"
+				},
+				className: finalColumn.contentClassName || "min-w-[360px] max-w-[480px] p-0 overflow-hidden flex flex-col",
+				portalClassName: "z-250",
+				children: /* @__PURE__ */ jsx(VariableCommandList, {
+					search: picker.search,
+					onSearchChange: picker.setSearch,
+					groups: pickerGroups,
+					options: picker.options,
+					onSelect: (item, baseVariable) => {
+						if (item?.value === "__none__") {
+							updateValue("");
+							setOpen(false);
+							return;
+						}
+						picker.handleSelect(item, baseVariable);
+					},
+					placeholder: t("Search values"),
+					showSearch: true,
+					shouldFilter: false,
+					onBack: picker.page ? picker.handleBack : void 0,
+					isChildMode: !!picker.page,
+					selectFirstItem: true,
+					autoFocusSearchInput: true
+				})
+			})]
+		}), finalColumn.showActionsMenu !== false && /* @__PURE__ */ jsxs(DropdownMenu, {
+			size: "sm",
+			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+				className: "rounded-none w-7 h-7 -mr-1",
+				variant: "none",
+				"aria-label": t("More actions"),
+				size: "xs",
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faEllipsis,
+					className: "size-3"
+				})
+			}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: () => {
+						updateValue("");
+					},
+					children: noneOptionLabel
+				}) })
+			})]
+		})]
+	});
+}
+function TableCell({ column, value, row, rowIndex, modifyColumn, getCellErrors, onUpdateCell }) {
+	const updateValue = (newValue) => {
+		onUpdateCell(rowIndex, row, column, newValue);
+	};
+	const columnModifications = modifyColumn ? modifyColumn(row, column.name) : null;
+	const finalColumn = columnModifications ? {
+		...column,
+		...columnModifications
+	} : column;
+	const cellErrorList = getCellErrors(rowIndex, finalColumn.name);
+	const isInvalid = cellErrorList.length > 0;
+	const { renderCell } = finalColumn;
+	if (typeof renderCell === "function") return renderCell({
+		column: finalColumn,
+		value,
+		row,
+		rowIndex,
+		isInvalid,
+		updateValue,
+		cellErrors: cellErrorList
+	});
+	switch (finalColumn.type) {
+		case "select": return /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 px-2",
+			children: /* @__PURE__ */ jsx(SelectInput, {
+				size: "xs",
+				options: finalColumn.options,
+				placeholder: finalColumn.placeholder,
+				onChange: updateValue,
+				value: value || "",
+				triggerClassName: cn("w-full max-w-full", isInvalid && "border-error"),
+				"data-editable-table-input": "true"
+			})
+		});
+		case "combobox": return /* @__PURE__ */ jsx("div", {
+			className: "px-2",
+			children: /* @__PURE__ */ jsx(ComboboxInput, {
+				options: finalColumn.options,
+				placeholder: finalColumn.placeholder,
+				value: value || null,
+				onValueChange: (nextValue) => {
+					return updateValue(nextValue ?? "");
+				},
+				className: cn(isInvalid && "border-error", finalColumn.className),
+				contentClassName: finalColumn.contentClassName
+			})
+		});
+		case "variablePicker": return /* @__PURE__ */ jsx(VariablePickerCell, {
+			finalColumn,
+			value,
+			updateValue,
+			isInvalid
+		});
+		case "textarea": return /* @__PURE__ */ jsx(Textarea, {
+			value: value || "",
+			"data-editable-table-input": "true",
+			onChange: (e) => {
+				return updateValue(e.target.value);
+			},
+			"aria-invalid": isInvalid,
+			className: cn([
+				"h-full w-full min-h-auto",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			rows: 1,
+			placeholder: finalColumn.placeholder
+		});
+		case "checkbox": return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center px-2",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: Boolean(value),
+				onCheckedChange: (checked) => {
+					return updateValue(Boolean(checked));
+				},
+				"aria-invalid": isInvalid
+			})
+		});
+		case "radio": return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center px-2",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: Boolean(value),
+				onCheckedChange: (checked) => {
+					return updateValue(Boolean(checked));
+				},
+				"aria-invalid": isInvalid
+			})
+		});
+		case "lightswitch": return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center px-2",
+			children: /* @__PURE__ */ jsx(Lightswitch, {
+				checked: Boolean(value),
+				size: "sm",
+				onCheckedChange: (checked) => {
+					return updateValue(Boolean(checked));
+				},
+				"aria-invalid": isInvalid
+			})
+		});
+		case "label": return /* @__PURE__ */ jsx("div", {
+			className: "px-2 py-2 text-sm",
+			children: value || ""
+		});
+		case "heading": return /* @__PURE__ */ jsx("div", {
+			className: "px-2 py-2 text-sm font-semibold text-gray-800",
+			children: value || ""
+		});
+		case "handle":
+		case "value": return /* @__PURE__ */ jsx(Input, {
+			type: "text",
+			value: value ?? "",
+			"data-editable-table-input": "true",
+			onChange: (e) => {
+				return updateValue(e.target.value);
+			},
+			"aria-invalid": isInvalid,
+			className: cn([
+				"h-full w-full",
+				"relative",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"font-mono text-[0.9em]",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			placeholder: finalColumn.placeholder
+		});
+		case "color": return /* @__PURE__ */ jsx(ColorInput, {
+			value: value || "",
+			size: "sm",
+			onValueChange: (nextValue) => {
+				return updateValue(nextValue);
+			},
+			isInvalid,
+			fitCell: true,
+			className: cn([
+				"h-full w-full",
+				"relative",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			"data-editable-table-input": "true"
+		});
+		case "date": return /* @__PURE__ */ jsx(DatePicker, {
+			value: value || null,
+			onValueChange: (nextDate) => {
+				if (!nextDate) {
+					updateValue("");
+					return;
+				}
+				const isoDate = nextDate.toISOString().split("T")[0];
+				updateValue(isoDate);
+			},
+			placeholder: finalColumn.placeholder,
+			className: cn([
+				"h-full w-full",
+				"relative",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			isInvalid
+		});
+		case "time": return /* @__PURE__ */ jsx(TimePicker, {
+			value: value || "",
+			onValueChange: (nextValue) => {
+				return updateValue(nextValue || "");
+			},
+			placeholder: finalColumn.placeholder,
+			className: cn([
+				"h-full w-full",
+				"relative",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			isInvalid
+		});
+		default: return /* @__PURE__ */ jsx(Input, {
+			type: finalColumn.type || "text",
+			value: value || "",
+			"data-editable-table-input": "true",
+			onChange: (e) => {
+				return updateValue(e.target.value);
+			},
+			"aria-invalid": isInvalid,
+			className: cn([
+				"h-full w-full",
+				"relative",
+				"border-none",
+				"rounded-none",
+				"bg-transparent",
+				"focus-visible:shadow-none",
+				"focus-visible:inset-ring-1",
+				"focus-visible:inset-ring-gray-200",
+				"aria-invalid:focus-visible:shadow-none!",
+				"aria-invalid:focus-visible:inset-ring-rose-600!",
+				isInvalid && "inset-ring-1 inset-ring-rose-600"
+			]),
+			placeholder: finalColumn.placeholder
+		});
+	}
+}
+//#endregion
+export { TableCell };
+
+//# sourceMappingURL=TableCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/editable-table/TableCell.tsx"],"sourcesContent":["import {\n    Input,\n    Textarea,\n    SelectInput,\n    ComboboxInput,\n    Button,\n    Popover,\n    PopoverTrigger,\n    PopoverContent,\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuItem,\n    Checkbox,\n    Lightswitch,\n    ColorInput,\n    DatePicker,\n    TimePicker,\n} from '@verbb/plugin-kit-react/components';\nimport type { ComponentProps } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useVariablePicker } from '@verbb/plugin-kit-react/components/tiptap/useVariablePicker';\nimport type { VariableGroup } from '@verbb/plugin-kit-react/components/tiptap/VariableCommandList';\nimport { VariableCommandList } from '@verbb/plugin-kit-react/components/tiptap/VariableCommandList';\nimport type { VariableOption } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faEllipsis } from '@fortawesome/pro-solid-svg-icons';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableRow,\n} from './types';\n\ntype Props = {\n    column: EditableTableColumn;\n    value: unknown;\n    row: EditableTableRow;\n    rowIndex: number;\n    modifyColumn?: EditableTableModifyColumn | null;\n    getCellErrors: (rowIndex: number, columnName: string) => unknown[];\n    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;\n};\n\nfunction VariablePickerCell({\n    finalColumn,\n    value,\n    updateValue,\n    isInvalid,\n}: {\n    finalColumn: EditableTableColumn;\n    value: unknown;\n    updateValue: (newValue: unknown) => void;\n    isInvalid: boolean;\n}) {\n    const t = useTranslation();\n    const [open, setOpen] = useState(false);\n    const picker = useVariablePicker({\n        variableCategories: finalColumn.variableCategories || {},\n        variableCategoryLabels: finalColumn.variableCategoryLabels || {},\n        variableCategoryOrder: finalColumn.variableCategoryOrder || [],\n        isOpen: open,\n        onApply: (_baseVariable, variable) => {\n            updateValue(String(variable?.value || ''));\n            setOpen(false);\n        },\n    });\n\n    const noneOptionLabel = finalColumn.noneOptionLabel || t('Select an option');\n\n    const selectedLabel = useMemo(() => {\n        const targetValue = String(value || '');\n        if (!targetValue) {\n            return noneOptionLabel;\n        }\n\n        let label = '';\n\n        const visit = (items: VariableOption[] = []) => {\n            items.forEach((item) => {\n                if (label || !item || typeof item !== 'object') {\n                    return;\n                }\n\n                if (String(item.value || '') === targetValue) {\n                    label = item.label || targetValue;\n                    return;\n                }\n\n                if (Array.isArray(item.children)) {\n                    visit(item.children);\n                }\n            });\n        };\n\n        Object.values(finalColumn.variableCategories || {}).forEach((items) => {\n            if (Array.isArray(items)) {\n                visit(items);\n            }\n        });\n\n        return label || targetValue;\n    }, [finalColumn.variableCategories, noneOptionLabel, value]);\n\n    const pickerGroups = useMemo(() => {\n        const groups: VariableGroup[] = Array.isArray(picker.groups) ? picker.groups : [];\n        const groupedByPage: VariableGroup[] = [];\n\n        groups.forEach((group) => {\n            if (group?.value !== 'fieldsVariables' || !Array.isArray(group.items)) {\n                groupedByPage.push(group);\n                return;\n            }\n\n            const pageBuckets = new Map<string, VariableOption[]>();\n            group.items.forEach((item) => {\n                const pageLabel = String(item?.pageLabel || '').trim() || t('Fields');\n                if (!pageBuckets.has(pageLabel)) {\n                    pageBuckets.set(pageLabel, []);\n                }\n                const bucket = pageBuckets.get(pageLabel);\n                if (bucket) {\n                    bucket.push(item);\n                }\n            });\n\n            pageBuckets.forEach((items, pageLabel) => {\n                groupedByPage.push({\n                    label: pageLabel,\n                    value: `fieldsVariables:${pageLabel}`,\n                    items,\n                });\n            });\n        });\n\n        if (picker.page) {\n            return groupedByPage;\n        }\n\n        return [{\n            label: '',\n            value: 'none',\n            items: [{ label: noneOptionLabel, value: '__none__' }],\n        }, ...groupedByPage];\n    }, [noneOptionLabel, picker.groups, picker.page, t]);\n\n    return (\n        <div className=\"flex items-center gap-1 px-2\">\n            <Popover modal={false} open={open} onOpenChange={setOpen}>\n                <PopoverTrigger\n                    nativeButton={true}\n                    render={(\n                        <Button\n                            size=\"sm\"\n                            variant=\"default\"\n                            className={cn(\n                                'min-w-0 flex-1 py-[6px] justify-between',\n                                isInvalid && 'border-error',\n                                finalColumn.className,\n                            )}\n                        >\n                            <span className=\"truncate flex-1 text-left\">{selectedLabel}</span>\n                            <FontAwesomeIcon icon={faChevronDown} className=\"size-2.5 pointer-events-none ml-2 shrink-0\" />\n                        </Button>\n                    )}\n                />\n                <PopoverContent\n                    align=\"start\"\n                    side=\"bottom\"\n                    sideOffset={6}\n                    positionMethod=\"fixed\"\n                    collisionAvoidance={{\n                        side: 'flip',\n                        align: 'shift',\n                        fallbackAxisSide: 'none',\n                    }}\n                    className={finalColumn.contentClassName || 'min-w-[360px] max-w-[480px] p-0 overflow-hidden flex flex-col'}\n                    portalClassName=\"z-250\"\n                >\n                    <VariableCommandList\n                        search={picker.search}\n                        onSearchChange={picker.setSearch}\n                        groups={pickerGroups}\n                        options={picker.options}\n                        onSelect={(item, baseVariable) => {\n                            if (item?.value === '__none__') {\n                                updateValue('');\n                                setOpen(false);\n                                return;\n                            }\n\n                            picker.handleSelect(item, baseVariable);\n                        }}\n                        placeholder={t('Search values')}\n                        showSearch\n                        shouldFilter={false}\n                        onBack={picker.page ? picker.handleBack : undefined}\n                        isChildMode={!!picker.page}\n                        selectFirstItem\n                        autoFocusSearchInput={true}\n                    />\n                </PopoverContent>\n            </Popover>\n\n            {finalColumn.showActionsMenu !== false && (\n                <DropdownMenu size=\"sm\">\n                    <DropdownMenuTrigger\n                        render={(\n                            <Button className=\"rounded-none w-7 h-7 -mr-1\" variant=\"none\" aria-label={t('More actions')} size=\"xs\">\n                                <FontAwesomeIcon icon={faEllipsis} className=\"size-3\" />\n                            </Button>\n                        )}\n                    />\n                    <DropdownMenuContent align=\"end\" sideOffset={8}>\n                        <DropdownMenuGroup>\n                            <DropdownMenuItem onClick={() => { updateValue(''); }}>\n                                {noneOptionLabel}\n                            </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                </DropdownMenu>\n            )}\n        </div>\n    );\n}\n\nexport function TableCell({\n    column,\n    value,\n    row,\n    rowIndex,\n    modifyColumn,\n    getCellErrors,\n    onUpdateCell,\n}: Props) {\n    const updateValue = (newValue: unknown) => {\n        onUpdateCell(rowIndex, row, column, newValue);\n    };\n\n    const columnModifications = modifyColumn ? modifyColumn(row, column.name) : null;\n    const finalColumn = columnModifications ? { ...column, ...columnModifications } : column;\n    const cellErrorList = getCellErrors(rowIndex, finalColumn.name);\n    const isInvalid = cellErrorList.length > 0;\n    const { renderCell } = finalColumn;\n\n    if (typeof renderCell === 'function') {\n        return renderCell({\n            column: finalColumn,\n            value,\n            row,\n            rowIndex,\n            isInvalid,\n            updateValue,\n            cellErrors: cellErrorList,\n        });\n    }\n\n    switch (finalColumn.type) {\n        case 'select':\n            return (\n                <div className=\"min-w-0 px-2\">\n                    <SelectInput\n                        size=\"xs\"\n                        options={finalColumn.options as ComponentProps<typeof SelectInput>['options']}\n                        placeholder={finalColumn.placeholder}\n                        onChange={updateValue}\n                        value={value || ''}\n                        triggerClassName={cn('w-full max-w-full', isInvalid && 'border-error')}\n                        data-editable-table-input=\"true\"\n                    />\n                </div>\n            );\n\n        case 'combobox':\n            return (\n                <div className=\"px-2\">\n                    <ComboboxInput\n                        options={finalColumn.options as ComponentProps<typeof ComboboxInput>['options']}\n                        placeholder={finalColumn.placeholder}\n                        value={value || null}\n                        onValueChange={(nextValue) => { return updateValue(nextValue ?? ''); }}\n                        className={cn(isInvalid && 'border-error', finalColumn.className)}\n                        contentClassName={finalColumn.contentClassName}\n                    />\n                </div>\n            );\n\n        case 'variablePicker':\n            return (\n                <VariablePickerCell\n                    finalColumn={finalColumn}\n                    value={value}\n                    updateValue={updateValue}\n                    isInvalid={isInvalid}\n                />\n            );\n\n        case 'textarea':\n            return (\n                <Textarea\n                    value={value || ''}\n                    data-editable-table-input=\"true\"\n                    onChange={(e) => { return updateValue(e.target.value); }}\n                    aria-invalid={isInvalid}\n                    className={cn([\n                        'h-full w-full min-h-auto',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    rows={1}\n                    placeholder={finalColumn.placeholder}\n                />\n            );\n\n        case 'checkbox':\n            return (\n                <div className=\"flex items-center justify-center px-2\">\n                    <Checkbox\n                        checked={Boolean(value)}\n                        onCheckedChange={(checked) => { return updateValue(Boolean(checked)); }}\n                        aria-invalid={isInvalid}\n                    />\n                </div>\n            );\n\n        case 'radio':\n            return (\n                <div className=\"flex items-center justify-center px-2\">\n                    <Checkbox\n                        checked={Boolean(value)}\n                        onCheckedChange={(checked) => { return updateValue(Boolean(checked)); }}\n                        aria-invalid={isInvalid}\n                    />\n                </div>\n            );\n\n        case 'lightswitch':\n            return (\n                <div className=\"flex items-center justify-center px-2\">\n                    <Lightswitch\n                        checked={Boolean(value)}\n                        size=\"sm\"\n                        onCheckedChange={(checked) => { return updateValue(Boolean(checked)); }}\n                        aria-invalid={isInvalid}\n                    />\n                </div>\n            );\n\n        case 'label':\n            return <div className=\"px-2 py-2 text-sm\">{value || ''}</div>;\n\n        case 'heading':\n            return <div className=\"px-2 py-2 text-sm font-semibold text-gray-800\">{value || ''}</div>;\n\n        case 'handle':\n        case 'value':\n            return (\n                <Input\n                    type=\"text\"\n                    value={value ?? ''}\n                    data-editable-table-input=\"true\"\n                    onChange={(e) => { return updateValue(e.target.value); }}\n                    aria-invalid={isInvalid}\n                    className={cn([\n                        'h-full w-full',\n                        'relative',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'font-mono text-[0.9em]',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    placeholder={finalColumn.placeholder}\n                />\n            );\n\n        case 'color':\n            return (\n                <ColorInput\n                    value={value || ''}\n                    size=\"sm\"\n                    onValueChange={(nextValue) => { return updateValue(nextValue); }}\n                    isInvalid={isInvalid}\n                    fitCell\n                    className={cn([\n                        'h-full w-full',\n                        'relative',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    data-editable-table-input=\"true\"\n                />\n            );\n\n        case 'date':\n            return (\n                <DatePicker\n                    value={value || null}\n                    onValueChange={(nextDate) => {\n                        if (!nextDate) {\n                            updateValue('');\n                            return;\n                        }\n\n                        const isoDate = nextDate.toISOString().split('T')[0];\n                        updateValue(isoDate);\n                    }}\n                    placeholder={finalColumn.placeholder}\n                    className={cn([\n                        'h-full w-full',\n                        'relative',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    isInvalid={isInvalid}\n                />\n            );\n\n        case 'time':\n            return (\n                <TimePicker\n                    value={value || ''}\n                    onValueChange={(nextValue) => { return updateValue(nextValue || ''); }}\n                    placeholder={finalColumn.placeholder}\n                    className={cn([\n                        'h-full w-full',\n                        'relative',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    isInvalid={isInvalid}\n                />\n            );\n\n        case 'email':\n        case 'number':\n        case 'text':\n        case 'url':\n        default:\n            return (\n                <Input\n                    type={finalColumn.type || 'text'}\n                    value={value || ''}\n                    data-editable-table-input=\"true\"\n                    onChange={(e) => { return updateValue(e.target.value); }}\n                    aria-invalid={isInvalid}\n                    className={cn([\n                        'h-full w-full',\n                        'relative',\n                        'border-none',\n                        'rounded-none',\n                        'bg-transparent',\n                        'focus-visible:shadow-none',\n                        'focus-visible:inset-ring-1',\n                        'focus-visible:inset-ring-gray-200',\n                        'aria-invalid:focus-visible:shadow-none!',\n                        'aria-invalid:focus-visible:inset-ring-rose-600!',\n                        isInvalid && 'inset-ring-1 inset-ring-rose-600',\n                    ])}\n                    placeholder={finalColumn.placeholder}\n                />\n            );\n    }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export const TableRow: React.NamedExoticComponent<object>;
+//# sourceMappingURL=TableRow.d.ts.map

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

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

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

@@ -0,0 +1,163 @@
+import { cn } from "../../utils/classes.js";
+import "../../utils/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../DropdownMenu.js";
+import { RowDataCells } from "./RowDataCells.js";
+import { TableCell, TableRow as TableRow$1 } from "../Table.js";
+import "../index.js";
+import { Button } from "../Button.js";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDown, faArrowUp, faEllipsis, faXmark } from "@fortawesome/pro-solid-svg-icons";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { RestrictToElement } from "@dnd-kit/dom/modifiers";
+//#region src/components/editable-table/TableRow.jsx
+var SortableRow = ({ row, rowIndex, allowReorder, className, children }) => {
+	const sortable = useSortable({
+		id: row._id,
+		index: rowIndex,
+		disabled: !allowReorder,
+		modifiers: [RestrictToVerticalAxis, RestrictToElement.configure({ element: (operation) => {
+			return (operation?.source?.element)?.parentElement ?? null;
+		} })]
+	});
+	return /* @__PURE__ */ jsx(TableRow$1, {
+		ref: sortable.ref,
+		className: cn(sortable.isDragging && "shadow-lg", className),
+		children: children({ handleRef: sortable.handleRef })
+	});
+};
+var PlainRow = ({ className, children }) => {
+	return /* @__PURE__ */ jsx(TableRow$1, {
+		className,
+		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 }) => {
+	return /* @__PURE__ */ jsx(useDnd ? SortableRow : PlainRow, {
+		row,
+		rowIndex,
+		allowReorder,
+		className: "bg-white",
+		children: ({ handleRef }) => {
+			const dragHandleRef = useDnd ? handleRef : void 0;
+			const legacyBeforeRowMenuItems = renderRowMenuItems?.({
+				row,
+				rowIndex,
+				rowCount
+			});
+			const customRowMenuItemsBeforeCore = renderRowMenuItemsBeforeCore?.({
+				row,
+				rowIndex,
+				rowCount
+			}) ?? legacyBeforeRowMenuItems;
+			const customRowMenuItemsAfterCore = renderRowMenuItemsAfterCore?.({
+				row,
+				rowIndex,
+				rowCount
+			});
+			const hasCustomRowMenuItemsBeforeCore = Boolean(customRowMenuItemsBeforeCore);
+			const hasCustomRowMenuItemsAfterCore = Boolean(customRowMenuItemsAfterCore);
+			const hasMoveActions = showReorderControls && rowCount > 1;
+			const hasMenuActions = hasMoveActions || hasCustomRowMenuItemsBeforeCore || hasCustomRowMenuItemsAfterCore;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowDataCells, {
+				row,
+				rowIndex,
+				columns,
+				columnsSignature,
+				modifyColumn,
+				getCellErrors,
+				onUpdateCell
+			}), (showReorderControls || allowDelete) && /* @__PURE__ */ jsx(TableCell, {
+				className: cn("bg-[#fbfcfe]"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center px-1",
+					children: [
+						showReorderControls && /* @__PURE__ */ jsx("span", {
+							ref: dragHandleRef,
+							children: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "none",
+								size: "xs",
+								disabled: !useDnd,
+								className: cn("cursor-move", "p-0 w-[24px] h-[24px]", "text-gray-500", "hover:bg-transparent", "active:bg-transparent", "hover:text-blue-500", !useDnd && "opacity-40 cursor-default"),
+								children: /* @__PURE__ */ jsx("div", {
+									className: "size-3",
+									children: /* @__PURE__ */ jsx("svg", {
+										xmlns: "http://www.w3.org/2000/svg",
+										viewBox: "0 0 448 512",
+										focusable: "false",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ jsx("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"
+										})
+									})
+								})
+							})
+						}),
+						showReorderControls && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+							render: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "none",
+								size: "xs",
+								disabled: !hasMenuActions,
+								className: cn("p-0 w-[24px] h-[24px]", "text-gray-500", "hover:bg-transparent", "active:bg-transparent", "hover:text-blue-500", !hasMenuActions && "opacity-40 cursor-not-allowed"),
+								"aria-label": t("Row actions")
+							}),
+							children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+								icon: faEllipsis,
+								className: "size-[12px]"
+							})
+						}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+							align: "end",
+							children: [
+								customRowMenuItemsBeforeCore,
+								hasCustomRowMenuItemsBeforeCore && hasMoveActions && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+								showReorderControls && rowIndex > 0 && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onClick: () => {
+										return moveRow(row, -1);
+									},
+									children: [/* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faArrowUp }), t("Move up")]
+								}),
+								showReorderControls && rowIndex < rowCount - 1 && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onClick: () => {
+										return moveRow(row, 1);
+									},
+									children: [/* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faArrowDown }), t("Move down")]
+								}),
+								hasMoveActions && hasCustomRowMenuItemsAfterCore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+								customRowMenuItemsAfterCore
+							]
+						})] }),
+						renderRowActions?.({
+							row,
+							rowIndex,
+							rowCount
+						}),
+						allowDelete && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "none",
+							size: "xs",
+							onClick: () => {
+								return removeRow(row);
+							},
+							className: cn("p-0 w-[24px] h-[24px]", "text-gray-500", "hover:bg-transparent", "active:bg-transparent", "hover:text-red-500"),
+							children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+								icon: faXmark,
+								className: "size-[12px] mt-[2px]"
+							})
+						})
+					]
+				})
+			})] });
+		}
+	});
+}, (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;
+});
+//#endregion
+export { TableRow };
+
+//# sourceMappingURL=TableRow.js.map