@rovula/ui 0.1.28 → 0.1.29

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -41,6 +41,17 @@ export type DropdownProps = {
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode;
+    /**
+     * When `true`, keep focus on the input after selecting an option so the
+     * menu stays open (useful for inline row-editing where the user may Tab
+     * to the next field instead of closing the dropdown).
+     */
+    keepOpenAfterSelect?: boolean;
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto` (e.g. DataTable scroll wrappers).
+     */
+    portal?: boolean;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React.ForwardRefExoticComponent<{
     id?: string;
@@ -71,5 +82,16 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode;
+    /**
+     * When `true`, keep focus on the input after selecting an option so the
+     * menu stays open (useful for inline row-editing where the user may Tab
+     * to the next field instead of closing the dropdown).
+     */
+    keepOpenAfterSelect?: boolean;
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto` (e.g. DataTable scroll wrappers).
+     */
+    portal?: boolean;
 } & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -31,6 +31,8 @@ declare const meta: {
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
         }) => React.ReactNode;
+        keepOpenAfterSelect?: boolean;
+        portal?: boolean;
     } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
@@ -64,6 +66,8 @@ declare const meta: {
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
         }) => React.ReactNode) | undefined;
+        keepOpenAfterSelect?: boolean | undefined;
+        portal?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
         height?: number | string | undefined | undefined;

package/dist/cjs/types/components/ScrollArea/ScrollArea.d.ts

@@ -3,9 +3,9 @@ export type ScrollbarSize = "m" | "s" | "xs";
 export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Scrollbar thickness.
-     * - `m`  — 12 px  (shows track border)
-     * - `s`  — 6 px   (default, shows no track border)
-     * - `xs` — 2 px   (shows no track border)
+     * - `m`  — 12 px  (default, shows track border + 2px thumb inset)
+     * - `s`  — 6 px   (shows track border + 2px thumb inset)
+     * - `xs` — 2 px   (no track border, no thumb inset)
      */
     scrollbarSize?: ScrollbarSize;
     /**

package/dist/cjs/types/components/ScrollArea/ScrollArea.stories.d.ts

@@ -299,3 +299,7 @@ export declare const WithDropdownMenu: {
     name: string;
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const BothAxes: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Table/Table.d.ts

@@ -2,12 +2,42 @@ import * as React from "react";
 declare const Table: React.ForwardRefExoticComponent<{
     rootClassName?: string;
     rootRef?: React.LegacyRef<HTMLDivElement>;
+    /**
+     * Wraps the table in a rounded frame (`rounded-md` + `border-table-c-border`).
+     * Uses an outer `overflow-hidden` shell and an inner scroll area so corners clip
+     * cleanly (same pattern as scrollable bordered tables elsewhere in the system).
+     * For pagination in the same frame, wrap `Table` + `TablePagination` in your own
+     * bordered div instead of relying on this prop alone.
+     */
+    bordered?: boolean;
+    /**
+     * When false, render only `<table>` (no inner `overflow-auto` wrapper).
+     * Use when a parent already provides the scrollport — e.g. `DataTable` — so
+     * `sticky` header rows stick to the correct ancestor.
+     * Ignored when `bordered` is true (bordered tables always use the inner scroll shell).
+     */
+    scrollableWrapper?: boolean;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<{
+    striped?: boolean;
+} & React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<{
+    divided?: boolean;
+    colDivided?: boolean;
+} & React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+export interface TablePaginationProps {
+    pageIndex: number;
+    pageSize: number;
+    totalCount: number;
+    pageSizeOptions?: number[];
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    className?: string;
+}
+declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TablePagination, };

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -1,17 +1,28 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
         rootClassName?: string;
         rootRef?: React.LegacyRef<HTMLDivElement>;
+        bordered?: boolean;
+        scrollableWrapper?: boolean;
     } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
+    argTypes: {
+        bordered: {
+            control: "boolean";
+            description: string;
+        };
+    };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+        bordered?: boolean | undefined;
+        scrollableWrapper?: boolean | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -283,7 +294,78 @@ declare const meta: {
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
-export declare const Default: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
+/** NON-STRIPED — horizontal row strokes, no column dividers */
+export declare const Default: StoryObj;
+/** NON-STRIPED + COL DIVIDED — horizontal row strokes + vertical column dividers */
+export declare const NonStripedDivided: StoryObj;
+/** STRIPED — alternating bg-a / bg-b, NO row strokes, NO column dividers */
+export declare const Striped: StoryObj;
+/**
+ * STRIPED + COL DIVIDED — alternating bg, NO row strokes, WITH column dividers.
+ * Primary Xspector table style.
+ */
+export declare const StripedAndDivided: StoryObj;
+/** SELECTED ROW — data-[state=selected] applies transparent-primary-12. Row 1 pre-selected. */
+export declare const WithSelectedRow: StoryObj;
+/**
+ * WITH FOOTER — tfoot summary row with bg-table-bg-main + top border.
+ * TableFooter is inside Table so bordered works naturally.
+ */
+export declare const WithFooter: StoryObj;
+/**
+ * WITH PAGINATION — TablePagination is a sibling of Table so needs an explicit
+ * outer wrapper (not covered by Table's bordered prop).
+ */
+export declare const WithPagination: StoryObj;
+/** EMPTY STATE — single full-width row with centered message */
+export declare const Empty: StoryObj;
+/** ALL STATES SIDE-BY-SIDE — reference sheet for design review */
+export declare const AllStates: StoryObj;
+/**
+ * WITH SCROLL (Figma 9637-10817)
+ *
+ * Demonstrates both axes of overflow:
+ *  - Vertical: fixed-height container → body rows overflow and scroll vertically
+ *  - Horizontal: 10 columns wider than the viewport → native h-scroll bar appears
+ *
+ * Implementation notes:
+ *  - Outer div sets the fixed height and owns the rounded border
+ *    (TablePagination must sit outside the scrollable Table)
+ *  - Table gets rootClassName="flex-1 min-h-0" so it grows to fill flex space
+ *    and allows overflow-auto to kick in
+ *  - TableHeader gets className="sticky top-0 z-10" for a frozen header row
+ */
+export declare const WithScroll: StoryObj;
+/**
+ * SCROLLBAR SIZES — per-axis demo
+ *
+ * Combine ui-scrollbar-x-{size} + ui-scrollbar-y-{size} independently.
+ * CSS: height → horizontal bar thickness | width → vertical bar thickness
+ */
+export declare const ScrollbarSizes: StoryObj;
+/** PANEL DEFAULT — transparent rows + panel-sub-line row dividers */
+export declare const PanelDefault: StoryObj;
+/** PANEL NON-STRIPED DIVIDED — row dividers + vertical column dividers */
+export declare const PanelNonStripedDivided: StoryObj;
+/** PANEL STRIPED — alternating rows (both transparent in panel mode), no row strokes */
+export declare const PanelStriped: StoryObj;
+/** PANEL STRIPED + COL DIVIDED */
+export declare const PanelStripedAndDivided: StoryObj;
+/** PANEL SELECTED ROW — table-panel-selected (yellow/olive) */
+export declare const PanelWithSelectedRow: StoryObj;
+/** PANEL WITH FOOTER */
+export declare const PanelWithFooter: StoryObj;
+/**
+ * PANEL WITH PAGINATION
+ * TablePagination sits inside the same data-surface="panel" scope so it
+ * automatically picks up the panel tokens — no variant prop needed.
+ */
+export declare const PanelWithPagination: StoryObj;
+/** PANEL EMPTY STATE */
+export declare const PanelEmpty: StoryObj;
+/**
+ * PANEL WITH SCROLL — sticky header + both scroll axes inside a fixed-height panel.
+ */
+export declare const PanelWithScroll: StoryObj;
+/** PANEL ALL STATES — all variants side-by-side for design review */
+export declare const PanelAllStates: StoryObj;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -390,6 +390,14 @@ export declare const Default: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+/**
+ * `isFloatingLabel={false}` — visible **`placeholder`**, no floating animation,
+ * and no inner `<label>` when `label` is empty (e.g. table cells, compact filters).
+ * Pair with `required={false}` + `hasClearIcon={false}` when mimicking inline fields.
+ */
+export declare const NonFloatingLabel: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const CustomLabel: {
     args: {
         label: string;

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const inputVariant: (props?: ({
+    floatingLabelPlaceholder?: boolean | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
     variant?: "outline" | "flat" | "underline" | null | undefined;

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 {};