@viax.io/uxm 4.36.0

package/dist/ui/editable-cell/editable-cell.d.ts

@@ -0,0 +1,141 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type DateInputFormat } from '../date-input/index.js';
+export type EditableCellType = 'text' | 'number' | 'date' | 'select' | 'multiselect';
+export type EditableCellAlign = 'left' | 'right' | 'center';
+export type EditableCellSize = 'small' | 'medium';
+export type EditableCellValue = string | number | string[];
+export interface EditableCellOption {
+    value: string;
+    label: string;
+}
+export interface EditableCellProps {
+    /** Current committed value. The atom keeps a draft internally while editing. */
+    value: EditableCellValue;
+    /**
+     * Called when the user commits the change (Enter, or blur with no
+     * validation error). The promise's settlement controls error display:
+     * resolve → exit edit mode, reject → stay in edit mode with the error
+     * surfaced inline so the user can correct.
+     */
+    onCommit: (next: EditableCellValue) => void | Promise<void>;
+    /** Editor type. Text uses a string input; number coerces to Number on commit (an emptied draft commits `""` — the uniform "cleared" value). Defaults to "text". */
+    type?: EditableCellType;
+    /** Date format — only used when `type="date"`. Defaults to `"mdy"`. */
+    dateFormat?: DateInputFormat;
+    /** Options — required for `type="select"` and `type="multiselect"`. */
+    options?: EditableCellOption[];
+    /**
+     * Whether the select panel includes a search box. Defaults to `"auto"` —
+     * the box appears only once the option count passes the shared Listbox
+     * threshold (6) — so a select/multiselect cell matches the `Select` atom's
+     * behavior instead of inheriting the raw Listbox `true` default.
+     */
+    searchable?: boolean | 'auto';
+    /**
+     * Clear affordance — the surface differs per editor type:
+     *   - `select` / `multiselect` — a "Clear" / "Clear all" action in the
+     *     dropdown footer (commits "" / empties the draft).
+     *   - `text` / `number` / `date` — a ✕ inside the EDITING input (mirrors
+     *     TextInput/NumberInput/DateInput) that empties the draft and keeps
+     *     focus; nothing commits until Enter/blur, so `required`/`validate`
+     *     still guard, and Esc still restores the old value. Available on
+     *     required cells too — "wipe it and type the right value" is the
+     *     point. Display mode never shows a ✕ — the pencil owns that gutter,
+     *     and a one-click destroy on a static table cell invites accidents.
+     *
+     * `required` never hides the affordance — it guards the OUTCOME instead:
+     * clearing a required cell surfaces the required warning (the value stays),
+     * clearing an optional one empties it back to the placeholder.
+     *
+     * Defaults to `true` — the input-family default (TextInput, NumberInput,
+     * DateInput …), so consumers like DataTable get the affordance uniformly
+     * without per-column wiring. Pass `false` to opt out.
+     */
+    clearable?: boolean;
+    /** Text alignment — pass through from a DataTable column's `align` so the editing input matches the display alignment. */
+    align?: EditableCellAlign;
+    /**
+     * Size preset. `small` (default) is the dense table scale — the cell reads
+     * like a static text cell inside a DataTable row (its font falls back to
+     * the inherited size). `medium` steps the cell up to the input-family
+     * scale (12/6 padding, 14px font) for standalone use in side panels /
+     * detail views, where a table-dense cell looks undersized next to real
+     * inputs. Each size owns a symmetric
+     * `--uxm-editable-cell-{size}-{padding-x,padding-y,font-size}` knob set;
+     * height always derives from font-size + padding (a `1lh` floor keeps
+     * empty cells clickable).
+     */
+    size?: EditableCellSize;
+    /**
+     * Display-mode formatter. Receives the raw value, returns the React node
+     * to render in display mode. Never called for an empty value — a cleared
+     * cell renders its `placeholder` instead (so a Tag/Badge formatter can't
+     * paint an empty pill).
+     */
+    format?: (value: EditableCellValue) => ReactNode;
+    /** Synchronous validation. Return an error message to block commit; return null/undefined to accept. */
+    validate?: (next: EditableCellValue) => string | null | undefined;
+    /**
+     * Mark the cell required — an empty value blocks commit and surfaces a
+     * warning, checked BEFORE `validate` so you don't hand-write the empty rule.
+     * Uniform across every editor type: `multiselect` → non-empty array (the
+     * rule lives in MultiListbox, shared with every other picker), `select` →
+     * a chosen option, `text`/`number`/`date` → a non-blank value.
+     */
+    required?: boolean;
+    /** Override the default required message (per-type: "Select at least one option" / "Select an option" / "Required"). */
+    requiredMessage?: string;
+    /** Read-only — clicking does nothing, no edit affordance. */
+    disabled?: boolean;
+    /** Shown when value is empty/blank. */
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    /**
+     * Accessible names for the editors' icon-only controls. Which ones apply
+     * depends on the editor type. The composed "Edit {value}" trigger names
+     * are not here — pass `aria-label` to replace those wholesale.
+     */
+    /** Clear button, select + multiselect editors. Default `"Clear selection"`. */
+    clearSelectionLabel?: string;
+    /** Clear button, date editor. Default `"Clear date"`. */
+    clearDateLabel?: string;
+    /** Clear button, text / number editors. Default `"Clear value"`. */
+    clearValueLabel?: string;
+    /** Calendar trigger, date editor. Default `"Open calendar"`. */
+    openCalendarLabel?: string;
+    /** Calendar popover dialog, date editor. Default `"Choose date"`. */
+    calendarDialogLabel?: string;
+    /** Trigger name when the date editor is empty. Default `"Add date"`. */
+    addDateLabel?: string;
+    /**
+     * Preview-only branch override. UXM's canvas passes this to render the
+     * input branch without a real click — `editing` shows the input, `warning`
+     * / `error` also surface a sample message at that severity so the matching
+     * knobs paint. It does NOT focus the input (the canvas must never steal
+     * focus from the editor panel); the preview mirrors the focus visuals via
+     * a forced CSS class instead. Production consumers leave it unset.
+     */
+    forceMode?: 'editing' | 'warning' | 'error';
+}
+/**
+ * Inline-editable cell. Three modes:
+ *
+ *   - **Display** (default) — renders the formatted value as a button-styled
+ *     text run. Click (or Enter/Space when focused) to enter edit mode.
+ *   - **Editing** — replaces the display with a focused, select-all'd input.
+ *     Enter commits, Esc cancels, blur commits.
+ *   - **Submitting** — input disabled while an async `onCommit` is pending.
+ *
+ * Problems surface in a Popover anchored under the cell (never inline — a
+ * table row must not change height) carrying a compact Banner: `warning`
+ * (yellow) for sync validate failures the user can fix in place, `error`
+ * (red) for a rejected `onCommit`. Either way the user stays in edit mode
+ * to correct or retry.
+ *
+ * Designed primarily for DataTable cells, but works anywhere an inline
+ * commit semantic is needed (PageHeader rename, StatCard label, etc.).
+ */
+export declare function EditableCell({ value, onCommit, type, dateFormat, options, searchable, clearable, align, size, format, validate, required, requiredMessage, disabled, placeholder, className, style, 'aria-label': ariaLabel, clearSelectionLabel, clearDateLabel, clearValueLabel, openCalendarLabel, calendarDialogLabel, addDateLabel, forceMode, }: EditableCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editable-cell.d.ts.map

package/dist/ui/editable-cell/editable-cell.d.ts.map

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