@rovula/ui 0.1.27 → 0.1.29

package/dist/components/DataTable/DataTable.editing.js

@@ -0,0 +1,385 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import TextInput from "@/components/TextInput/TextInput";
+import NumberInput from "@/components/NumberInput";
+import { Checkbox } from "@/components/Checkbox/Checkbox";
+import Dropdown from "@/components/Dropdown/Dropdown";
+import { customInputVariant } from "@/components/Dropdown/Dropdown.styles";
+import { cn } from "@/utils/cn";
+// ---------------------------------------------------------------------------
+// EditContext — shared between engine and DataTable render layer
+// ---------------------------------------------------------------------------
+export const EditContext = React.createContext(null);
+// ---------------------------------------------------------------------------
+// useDataTableEditing — manages edit state (row / cell)
+// ---------------------------------------------------------------------------
+export function useDataTableEditing(opts) {
+    const { enabled, editDisplayMode, editTrigger, editableColumnIds } = opts;
+    const [editingRowId, setEditingRowId] = useState(null);
+    const [editingCell, setEditingCell] = useState(null);
+    const tabMovingRef = React.useRef(false);
+    const requestRowEdit = useCallback((rowId) => {
+        setEditingRowId(rowId);
+        setEditingCell(null);
+    }, []);
+    const requestCellEdit = useCallback((rowId, columnId) => {
+        setEditingCell({ rowId, columnId });
+        setEditingRowId(null);
+    }, []);
+    const clearEdit = useCallback(() => {
+        setEditingRowId(null);
+        setEditingCell(null);
+    }, []);
+    const onFieldBlur = useCallback((_rowId, _columnId) => {
+        if (tabMovingRef.current)
+            return;
+        if (editDisplayMode === "cell") {
+            setEditingCell(null);
+        }
+    }, [editDisplayMode]);
+    const moveCellEdit = useCallback((rowId, fromColumnId, delta) => {
+        const idx = editableColumnIds.indexOf(fromColumnId);
+        if (idx < 0) {
+            setEditingCell(null);
+            return "exited";
+        }
+        const next = idx + delta;
+        if (next < 0 || next >= editableColumnIds.length) {
+            setEditingCell(null);
+            return "exited";
+        }
+        tabMovingRef.current = true;
+        setEditingCell({ rowId, columnId: editableColumnIds[next] });
+        requestAnimationFrame(() => {
+            tabMovingRef.current = false;
+        });
+        return "moved";
+    }, [editableColumnIds]);
+    // Esc exits row edit
+    useEffect(() => {
+        if (!enabled || editDisplayMode !== "row" || !editingRowId)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setEditingRowId(null);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [enabled, editDisplayMode, editingRowId]);
+    return useMemo(() => ({
+        editingRowId,
+        editingCell,
+        editDisplayMode,
+        editTrigger,
+        requestRowEdit,
+        requestCellEdit,
+        clearEdit,
+        onFieldBlur,
+        moveCellEdit,
+    }), [
+        editingRowId,
+        editingCell,
+        editDisplayMode,
+        editTrigger,
+        requestRowEdit,
+        requestCellEdit,
+        clearEdit,
+        onFieldBlur,
+        moveCellEdit,
+    ]);
+}
+// ---------------------------------------------------------------------------
+// resolveEditableColumns — wraps EditableColumnDef[] → ColumnDef[]
+// ---------------------------------------------------------------------------
+const EDIT_SELECT_PH_PREFIX = "__edit_ph__";
+function editPlaceholderOption(label) {
+    return { value: `${EDIT_SELECT_PH_PREFIX}:${label}`, label };
+}
+function isPlaceholderOption(opt) {
+    var _a;
+    return (_a = opt === null || opt === void 0 ? void 0 : opt.value.startsWith(`${EDIT_SELECT_PH_PREFIX}:`)) !== null && _a !== void 0 ? _a : false;
+}
+function isEditingCell(editing, row, columnId) {
+    var _a;
+    const rowId = typeof row.original.id === "string"
+        ? row.original.id
+        : row.id;
+    if (editing.editDisplayMode === "row")
+        return editing.editingRowId === rowId;
+    return (((_a = editing.editingCell) === null || _a === void 0 ? void 0 : _a.rowId) === rowId &&
+        editing.editingCell.columnId === columnId);
+}
+function getRowId(row) {
+    const orig = row.original;
+    return typeof orig.id === "string" ? orig.id : row.id;
+}
+function coerceValue(variant, rawValue) {
+    if (variant === "number") {
+        const n = Number(rawValue);
+        return Number.isNaN(n) ? 0 : n;
+    }
+    if (variant === "checkbox") {
+        return rawValue === "true";
+    }
+    return rawValue;
+}
+function buildPatch(col, row, rawValue, columnId) {
+    if (col.onCommit) {
+        return col.onCommit(row, rawValue);
+    }
+    return { [columnId]: coerceValue(col.editVariant, rawValue) };
+}
+export function resolveEditableColumns(columns, opts) {
+    const { editing, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds, } = opts;
+    return columns.map((col) => {
+        var _a, _b;
+        const colEditing = col.enableEditing;
+        if (colEditing == null && col.editVariant == null) {
+            return col;
+        }
+        const columnId = (_b = (_a = col.accessorKey) !== null && _a !== void 0 ? _a : col.id) !== null && _b !== void 0 ? _b : "";
+        const originalCell = col.cell;
+        const wrappedCol = Object.assign(Object.assign({}, col), { cell: (cellProps) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                const { row } = cellProps;
+                const rowId = getRowId(row);
+                const canEdit = typeof colEditing === "function"
+                    ? colEditing(row)
+                    : colEditing !== false;
+                if (!canEdit) {
+                    const always = (_a = alwaysEditing === null || alwaysEditing === void 0 ? void 0 : alwaysEditing(row)) !== null && _a !== void 0 ? _a : false;
+                    const isRowActive = always ||
+                        editing.editingRowId === rowId ||
+                        ((_b = editing.editingCell) === null || _b === void 0 ? void 0 : _b.rowId) === rowId;
+                    const showDisabledField = always || (col.editShowDisabledField && isRowActive);
+                    if (showDisabledField && (col.editVariant || colEditing != null)) {
+                        return _jsx(DisabledEditCell, { row: row, col: col, columnId: columnId });
+                    }
+                    if (col.displayCell) {
+                        return col.displayCell(row);
+                    }
+                    if (originalCell) {
+                        return typeof originalCell === "function"
+                            ? originalCell(cellProps)
+                            : originalCell;
+                    }
+                    const value = row.original[columnId];
+                    return _jsx(_Fragment, { children: String(value !== null && value !== void 0 ? value : "") });
+                }
+                const always = (_c = alwaysEditing === null || alwaysEditing === void 0 ? void 0 : alwaysEditing(row)) !== null && _c !== void 0 ? _c : false;
+                const active = always || isEditingCell(editing, row, columnId);
+                if (!active) {
+                    const previewContent = col.displayCell
+                        ? col.displayCell(row)
+                        : String((_d = row.original[columnId]) !== null && _d !== void 0 ? _d : "");
+                    const activate = () => {
+                        if (editing.editDisplayMode === "row")
+                            editing.requestRowEdit(rowId);
+                        else
+                            editing.requestCellEdit(rowId, columnId);
+                    };
+                    const handler = editing.editTrigger === "click"
+                        ? { onClick: activate }
+                        : { onDoubleClick: activate };
+                    return (_jsx("div", Object.assign({ className: cn("-mx-1 flex min-h-[32px] w-full min-w-0 cursor-pointer items-center rounded-sm px-1", "hover:bg-table-c-hover/35") }, handler, { children: previewContent })));
+                }
+                // ── Edit mode ──
+                const variant = (_e = col.editVariant) !== null && _e !== void 0 ? _e : "text";
+                const autoFocus = !always && editing.editDisplayMode === "cell";
+                const errorMsg = (_f = col.editError) === null || _f === void 0 ? void 0 : _f.call(col, row);
+                const commitAndBlur = (value) => {
+                    const patch = buildPatch(col, row, value, columnId);
+                    onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                    if (!always)
+                        editing.onFieldBlur(rowId, columnId);
+                };
+                const handleTab = enableCellTabTraversal
+                    ? (e, commitFn) => {
+                        if (e.key !== "Tab")
+                            return;
+                        if (editing.editDisplayMode === "row") {
+                            const idx = editableColumnIds.indexOf(columnId);
+                            if (idx < 0)
+                                return;
+                            const nextIdx = idx + (e.shiftKey ? -1 : 1);
+                            if (nextIdx < 0 || nextIdx >= editableColumnIds.length)
+                                return;
+                            const nextColId = editableColumnIds[nextIdx];
+                            commitFn();
+                            e.preventDefault();
+                            requestAnimationFrame(() => {
+                                const el = document.querySelector(`[data-edit-cell="${rowId}:${nextColId}"] input, [data-edit-cell="${rowId}:${nextColId}"] button`);
+                                el === null || el === void 0 ? void 0 : el.focus();
+                            });
+                            return;
+                        }
+                        commitFn();
+                        if (editing.moveCellEdit(rowId, columnId, e.shiftKey ? -1 : 1) ===
+                            "moved") {
+                            e.preventDefault();
+                        }
+                    }
+                    : undefined;
+                if (variant === "select") {
+                    return (_jsx("div", { "data-edit-cell": `${rowId}:${columnId}`, children: _jsx(EditCellSelect, { row: row, columnId: columnId, col: col, autoFocus: autoFocus, keepOpenAfterSelect: editing.editDisplayMode === "row" || always, onCommit: (label) => {
+                                var _a;
+                                const currentValue = String((_a = row.original[columnId]) !== null && _a !== void 0 ? _a : "");
+                                if (label.trim() === currentValue.trim())
+                                    return;
+                                const patch = buildPatch(col, row, label, columnId);
+                                onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                            }, onBlurField: editing.editDisplayMode === "row"
+                                ? undefined
+                                : () => {
+                                    if (!always)
+                                        editing.onFieldBlur(rowId, columnId);
+                                }, onKeyDown: handleTab
+                                ? (e) => handleTab(e, () => { })
+                                : undefined, errorMessage: errorMsg }) }));
+                }
+                if (variant === "number") {
+                    return (_jsx("div", { "data-edit-cell": `${rowId}:${columnId}`, children: _jsx(EditCellNumber, { columnId: columnId, row: row, col: col, autoFocus: autoFocus, errorMessage: errorMsg, onBlur: (val) => commitAndBlur(val), onKeyDown: handleTab
+                                ? (e) => handleTab(e, () => {
+                                    const v = e.target.value.trim();
+                                    const patch = buildPatch(col, row, v, columnId);
+                                    onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                                })
+                                : undefined }) }));
+                }
+                if (variant === "checkbox") {
+                    return (_jsx("div", { "data-edit-cell": `${rowId}:${columnId}`, children: _jsx(EditCellCheckbox, { columnId: columnId, row: row, col: col, errorMessage: errorMsg, onCommit: (checked) => {
+                                const patch = buildPatch(col, row, String(checked), columnId);
+                                onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                            }, onKeyDown: handleTab
+                                ? (e) => handleTab(e, () => { })
+                                : undefined }) }));
+                }
+                if (variant === "custom" && col.editCustomCell) {
+                    const blur = () => {
+                        if (!always)
+                            editing.onFieldBlur(rowId, columnId);
+                    };
+                    return (_jsx("div", { "data-edit-cell": `${rowId}:${columnId}`, children: col.editCustomCell(row, {
+                            commit: (rawValue) => {
+                                const patch = buildPatch(col, row, rawValue, columnId);
+                                onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                            },
+                            blur,
+                            columnId,
+                            autoFocus,
+                            errorMessage: errorMsg,
+                            onKeyDown: handleTab
+                                ? (e) => handleTab(e, () => { })
+                                : undefined,
+                        }) }));
+                }
+                // variant === "text"
+                return (_jsx("div", { "data-edit-cell": `${rowId}:${columnId}`, children: _jsx(EditCellText, { columnId: columnId, row: row, placeholder: (_h = (_g = col.editTextProps) === null || _g === void 0 ? void 0 : _g.placeholder) !== null && _h !== void 0 ? _h : "", autoFocus: autoFocus, errorMessage: errorMsg, onBlur: (e) => commitAndBlur(e.currentTarget.value.trim()), onKeyDown: handleTab
+                            ? (e) => handleTab(e, () => {
+                                const v = e.target.value.trim();
+                                const patch = buildPatch(col, row, v, columnId);
+                                onCellCommit === null || onCellCommit === void 0 ? void 0 : onCellCommit(rowId, columnId, patch);
+                            })
+                            : undefined }) }));
+            } });
+        return wrappedCol;
+    });
+}
+// ---------------------------------------------------------------------------
+// Built-in cell editors
+// ---------------------------------------------------------------------------
+function EditCellText({ columnId, row, placeholder, autoFocus, errorMessage, onBlur, onKeyDown, }) {
+    var _a;
+    const value = String((_a = row.original[columnId]) !== null && _a !== void 0 ? _a : "");
+    return (_jsx(TextInput, { size: "sm", variant: "outline", rounded: "normal", fullwidth: true, isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, defaultValue: value, placeholder: placeholder, "aria-label": placeholder || columnId, autoFocus: autoFocus, error: !!errorMessage, errorMessage: errorMessage, onBlur: onBlur, onKeyDown: onKeyDown, className: "rounded-md px-2 py-2 typography-small2" }));
+}
+function EditCellSelect({ row, columnId, col, autoFocus, onCommit, onBlurField, onKeyDown, keepOpenAfterSelect, errorMessage, }) {
+    var _a, _b, _c, _d, _e;
+    const displayValue = String((_a = row.original[columnId]) !== null && _a !== void 0 ? _a : "");
+    const rawOptions = typeof ((_b = col.editSelectProps) === null || _b === void 0 ? void 0 : _b.options) === "function"
+        ? col.editSelectProps.options(row)
+        : (_d = (_c = col.editSelectProps) === null || _c === void 0 ? void 0 : _c.options) !== null && _d !== void 0 ? _d : [];
+    const options = useMemo(() => {
+        var _a, _b;
+        const ph = (_b = (_a = col.editSelectProps) === null || _a === void 0 ? void 0 : _a.placeholder) !== null && _b !== void 0 ? _b : columnId;
+        return [editPlaceholderOption(ph), ...rawOptions];
+    }, [rawOptions, (_e = col.editSelectProps) === null || _e === void 0 ? void 0 : _e.placeholder, columnId]);
+    const selected = useMemo(() => {
+        var _a;
+        const cur = displayValue.trim();
+        if (!cur)
+            return options[0];
+        return (_a = options.find((o) => o.label === cur)) !== null && _a !== void 0 ? _a : options[0];
+    }, [displayValue, options]);
+    return (_jsx("div", { children: _jsx(Dropdown, { id: `edit-dd-${columnId}-${row.id}`, options: options, value: selected, onSelect: (opt) => {
+                if (isPlaceholderOption(opt))
+                    return;
+                onCommit(opt.label);
+            }, size: "sm", variant: "outline", rounded: "normal", fullwidth: true, required: false, isFloatingLabel: false, label: "", keepFooterSpace: false, segmentedInput: true, autoFocus: autoFocus, onBlur: onBlurField, onKeyDown: onKeyDown, keepOpenAfterSelect: keepOpenAfterSelect, portal: true, error: !!errorMessage, errorMessage: errorMessage, className: cn("rounded-md", customInputVariant({ size: "sm" }), displayValue.trim().length > 0 && "font-medium") }) }));
+}
+// ---------------------------------------------------------------------------
+// EditCellNumber — inline number editor
+// ---------------------------------------------------------------------------
+function EditCellNumber({ columnId, row, col, autoFocus, errorMessage, onBlur, onKeyDown, }) {
+    var _a;
+    const rawValue = row.original[columnId];
+    const numericValue = rawValue === "" || rawValue == null ? undefined : Number(rawValue);
+    const np = col.editNumberProps;
+    return (_jsx(NumberInput, { size: "sm", variant: "outline", rounded: "normal", fullwidth: true, isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, defaultValue: numericValue, placeholder: (_a = np === null || np === void 0 ? void 0 : np.placeholder) !== null && _a !== void 0 ? _a : columnId, "aria-label": (np === null || np === void 0 ? void 0 : np.placeholder) || columnId, autoFocus: autoFocus, min: np === null || np === void 0 ? void 0 : np.min, max: np === null || np === void 0 ? void 0 : np.max, step: np === null || np === void 0 ? void 0 : np.step, precision: np === null || np === void 0 ? void 0 : np.precision, allowDecimal: np === null || np === void 0 ? void 0 : np.allowDecimal, allowNegative: np === null || np === void 0 ? void 0 : np.allowNegative, hideControls: true, error: !!errorMessage, errorMessage: errorMessage, onBlur: (e) => onBlur(e.currentTarget.value.trim()), onKeyDown: onKeyDown, className: "rounded-md px-2 py-2 typography-small2" }));
+}
+// ---------------------------------------------------------------------------
+// EditCellCheckbox — inline checkbox editor
+// ---------------------------------------------------------------------------
+function EditCellCheckbox({ columnId, row, col, errorMessage, onCommit, onKeyDown, }) {
+    var _a;
+    const rawValue = row.original[columnId];
+    const checked = rawValue === true || rawValue === "true";
+    const label = (_a = col.editCheckboxProps) === null || _a === void 0 ? void 0 : _a.label;
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2 min-h-[32px]", children: [_jsx(Checkbox, { checked: checked, onCheckedChange: (val) => {
+                            onCommit(val === true);
+                        }, onKeyDown: onKeyDown
+                            ? (e) => onKeyDown(e)
+                            : undefined, "aria-label": label || columnId }), label && (_jsx("span", { className: "typography-small2 text-text-contrast-high select-none", children: label }))] }), errorMessage && (_jsx("span", { className: "typography-small3 text-error-500", children: errorMessage }))] }));
+}
+// ---------------------------------------------------------------------------
+// Disabled cell editor — shown in alwaysEditing rows when canEdit is false
+// ---------------------------------------------------------------------------
+function DisabledEditCell({ row, col, columnId, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const variant = (_a = col.editVariant) !== null && _a !== void 0 ? _a : "text";
+    if (variant === "select") {
+        const rawOptions = typeof ((_b = col.editSelectProps) === null || _b === void 0 ? void 0 : _b.options) === "function"
+            ? col.editSelectProps.options(row)
+            : (_d = (_c = col.editSelectProps) === null || _c === void 0 ? void 0 : _c.options) !== null && _d !== void 0 ? _d : [];
+        const ph = (_f = (_e = col.editSelectProps) === null || _e === void 0 ? void 0 : _e.placeholder) !== null && _f !== void 0 ? _f : columnId;
+        const options = [editPlaceholderOption(ph), ...rawOptions];
+        const displayValue = String((_g = row.original[columnId]) !== null && _g !== void 0 ? _g : "");
+        const selected = (_h = options.find((o) => o.label === displayValue.trim())) !== null && _h !== void 0 ? _h : options[0];
+        return (_jsx(Dropdown, { id: `edit-dd-disabled-${columnId}-${row.id}`, options: options, value: selected, onSelect: () => { }, size: "sm", variant: "outline", rounded: "normal", fullwidth: true, required: false, isFloatingLabel: false, label: "", keepFooterSpace: false, segmentedInput: true, disabled: true, className: cn("rounded-md", customInputVariant({ size: "sm" })) }));
+    }
+    if (variant === "number") {
+        const rawValue = row.original[columnId];
+        const numericValue = rawValue === "" || rawValue == null ? undefined : Number(rawValue);
+        return (_jsx(NumberInput, { size: "sm", variant: "outline", rounded: "normal", fullwidth: true, isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, defaultValue: numericValue, disabled: true, hideControls: true, className: "rounded-md px-2 py-2 typography-small2" }));
+    }
+    if (variant === "checkbox") {
+        const rawValue = row.original[columnId];
+        const checked = rawValue === true || rawValue === "true";
+        return (_jsxs("div", { className: "flex items-center gap-2 min-h-[32px]", children: [_jsx(Checkbox, { checked: checked, disabled: true }), ((_j = col.editCheckboxProps) === null || _j === void 0 ? void 0 : _j.label) && (_jsx("span", { className: "typography-small2 text-text-g-contrast-medium select-none", children: col.editCheckboxProps.label }))] }));
+    }
+    const value = String((_k = row.original[columnId]) !== null && _k !== void 0 ? _k : "");
+    const placeholder = (_m = (_l = col.editTextProps) === null || _l === void 0 ? void 0 : _l.placeholder) !== null && _m !== void 0 ? _m : "";
+    return (_jsx(TextInput, { size: "sm", variant: "outline", rounded: "normal", fullwidth: true, isFloatingLabel: false, label: "", required: false, hasClearIcon: false, keepFooterSpace: false, defaultValue: value, placeholder: placeholder, "aria-label": placeholder || columnId, disabled: true, className: "rounded-md px-2 py-2 typography-small2" }));
+}
+// ---------------------------------------------------------------------------
+// Utility: detect editable column ids from column defs
+// ---------------------------------------------------------------------------
+export function detectEditableColumnIds(columns) {
+    return columns
+        .filter((col) => col.enableEditing != null || col.editVariant != null)
+        .map((col) => {
+        var _a, _b;
+        return (_b = (_a = col.accessorKey) !== null && _a !== void 0 ? _a : col.id) !== null && _b !== void 0 ? _b : "";
+    })
+        .filter(Boolean);
+}

package/dist/components/DataTable/DataTable.editing.types.js

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