@viax.io/uxm 4.38.0 → 4.40.0

package/dist/ui/editable-cell/use-editable-cell.cjs

@@ -0,0 +1,284 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_editable_cell_exports = {};
+__export(use_editable_cell_exports, {
+  useEditableCell: () => useEditableCell
+});
+module.exports = __toCommonJS(use_editable_cell_exports);
+var import_react = require("react");
+var import_date_input = require("../date-input/index.cjs");
+var import_editable_cell_utils = require("./editable-cell-utils.cjs");
+function useEditableCell(props) {
+  const {
+    value,
+    onCommit,
+    options,
+    format,
+    validate,
+    requiredMessage,
+    placeholder,
+    forceMode,
+    invalidDateMessage: invalidDateMessageProp,
+    type,
+    dateFormat,
+    required,
+    saveErrorMessage,
+    invalidNumberMessage,
+    invalidValueMessage
+  } = props;
+  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
+  const [draft, setDraft] = (0, import_react.useState)(() => {
+    if (type === "date") return (0, import_editable_cell_utils.isoToFormatted)(value, dateFormat);
+    if (Array.isArray(value)) return "";
+    return String(value ?? "");
+  });
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const wrapRef = (0, import_react.useRef)(null);
+  const parsedValue = (0, import_react.useMemo)(
+    () => type === "date" && typeof value === "string" && value ? (0, import_editable_cell_utils.parseISODate)(value) ?? (0, import_date_input.parseDate)(value, dateFormat) : null,
+    [type, value, dateFormat]
+  );
+  const displayFormatted = (0, import_react.useMemo)(
+    () => type === "date" ? (0, import_editable_cell_utils.isoToFormatted)(value, dateFormat) : "",
+    [type, value, dateFormat]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!isEditing) {
+      const next = Array.isArray(value) ? "" : type === "date" ? displayFormatted : String(value ?? "");
+      setDraft(next);
+    }
+  }, [value, isEditing, type, displayFormatted]);
+  (0, import_react.useEffect)(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  (0, import_react.useEffect)(() => {
+    if (error && type === "date") {
+      setOpen(false);
+    }
+  }, [error, type]);
+  const parseDraft = (0, import_react.useCallback)(() => {
+    if (type === "number") return draft.trim() === "" ? Number.NaN : Number(draft);
+    if (type === "date") return draft;
+    return draft;
+  }, [type, draft]);
+  const requiredMsg = requiredMessage ?? (type === "select" ? "Select an option" : "Required");
+  const commitValue = (0, import_react.useCallback)(
+    async (next) => {
+      if (submitting) return false;
+      if (required && (0, import_editable_cell_utils.isEmptyValue)(next)) {
+        setError({ message: requiredMsg, severity: "warning" });
+        return false;
+      }
+      const validationError = validate?.(next);
+      if (validationError) {
+        setError({ message: validationError, severity: "warning" });
+        return false;
+      }
+      setError(null);
+      setSubmitting(true);
+      try {
+        await onCommit(next);
+        setIsEditing(false);
+        setOpen(false);
+        return true;
+      } catch (err) {
+        setError({
+          message: err instanceof Error ? err.message : saveErrorMessage,
+          severity: "error"
+        });
+        requestAnimationFrame(() => inputRef.current?.focus());
+        return false;
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [submitting, required, requiredMsg, saveErrorMessage, validate, onCommit]
+  );
+  const commitDate = (0, import_react.useCallback)(
+    async (iso) => {
+      if (submitting) return;
+      const currentIso = parsedValue ? (0, import_editable_cell_utils.toISODate)(parsedValue) : "";
+      if (iso === currentIso) {
+        const validationError = validate?.(iso);
+        if (validationError) {
+          setError({ message: validationError, severity: "warning" });
+          return;
+        }
+        setIsEditing(false);
+        setOpen(false);
+        setError(null);
+        return;
+      }
+      await commitValue(iso);
+    },
+    [submitting, parsedValue, validate, commitValue]
+  );
+  const handleCommit = (0, import_react.useCallback)(async () => {
+    const next = parseDraft();
+    if (type === "number" && Number.isNaN(next)) {
+      if (draft.trim() === "") {
+        if (String(value ?? "") === "") {
+          setIsEditing(false);
+          setError(null);
+          return;
+        }
+        await commitValue("");
+        return;
+      }
+      setError({ message: invalidNumberMessage, severity: "warning" });
+      return;
+    }
+    if (type === "date") {
+      const raw = String(next).trim();
+      if (raw === "") {
+        await commitDate("");
+        return;
+      }
+      const parsed = (0, import_date_input.parseDate)(raw, dateFormat) ?? (0, import_editable_cell_utils.parseISODate)(raw);
+      if (!parsed) {
+        setError({
+          message: invalidDateMessageProp ?? (0, import_date_input.invalidDateMessage)(dateFormat),
+          severity: "warning"
+        });
+        return;
+      }
+      await commitDate((0, import_editable_cell_utils.toISODate)(parsed));
+      return;
+    }
+    const valueStr = Array.isArray(value) ? "" : String(value ?? "");
+    if (String(next) === valueStr) {
+      setIsEditing(false);
+      setError(null);
+      return;
+    }
+    await commitValue(next);
+  }, [
+    parseDraft,
+    type,
+    draft,
+    dateFormat,
+    value,
+    commitValue,
+    commitDate,
+    invalidNumberMessage,
+    invalidDateMessageProp
+  ]);
+  const handlePick = (0, import_react.useCallback)(
+    async (calValue) => {
+      if (!calValue.start || submitting) return;
+      setDraft((0, import_date_input.formatDate)(calValue.start, dateFormat));
+      await commitDate((0, import_editable_cell_utils.toISODate)(calValue.start));
+    },
+    [dateFormat, submitting, commitDate]
+  );
+  const handleClearDraft = (0, import_react.useCallback)(() => {
+    setDraft("");
+    setError(null);
+  }, []);
+  const handleCancel = (0, import_react.useCallback)(() => {
+    if (Array.isArray(value)) {
+      setDraft("");
+    } else if (type === "date") {
+      setDraft(displayFormatted);
+    } else {
+      setDraft(String(value ?? ""));
+    }
+    setIsEditing(false);
+    setOpen(false);
+    setError(null);
+  }, [value, type, displayFormatted]);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleCommit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleCommit, handleCancel]
+  );
+  const editing = forceMode != null || isEditing;
+  const shownError = forceMode === "error" ? error ?? { message: saveErrorMessage, severity: "error" } : forceMode === "warning" ? error ?? { message: invalidValueMessage, severity: "warning" } : error;
+  const dateHint = import_date_input.FORMAT_SPEC[dateFormat].placeholder;
+  const isEmpty = Array.isArray(value) ? value.length === 0 : value === "" || value === null || value === void 0;
+  const display = (() => {
+    if (isEmpty) return placeholder ?? (type === "date" ? dateHint : "");
+    if (format) return format(value);
+    if (Array.isArray(value)) {
+      if (options) {
+        return value.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+      }
+      return value.join(", ");
+    }
+    if (type === "select" && options) {
+      return options.find((o) => o.value === String(value))?.label ?? String(value);
+    }
+    return value;
+  })();
+  const isMulti = type === "multiselect";
+  const isSelect = type === "select";
+  const isDate = type === "date";
+  const titleText = isEmpty ? placeholder ?? "" : isMulti ? Array.isArray(value) ? (options ?? []).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") : "" : isSelect ? options?.find((o) => o.value === String(value))?.label ?? String(value) : isDate ? displayFormatted || String(value) : String(value);
+  return {
+    isEditing,
+    setIsEditing,
+    draft,
+    setDraft,
+    submitting,
+    setSubmitting,
+    error,
+    setError,
+    open,
+    setOpen,
+    inputRef,
+    wrapRef,
+    parsedValue,
+    displayFormatted,
+    parseDraft,
+    commitValue,
+    commitDate,
+    handleCommit,
+    handlePick,
+    handleClearDraft,
+    handleCancel,
+    handleKeyDown,
+    editing,
+    dateHint,
+    isEmpty,
+    display,
+    isMulti,
+    isSelect,
+    isDate,
+    titleText,
+    shownError
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEditableCell
+});
+//# sourceMappingURL=use-editable-cell.cjs.map

package/dist/ui/editable-cell/use-editable-cell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/editable-cell/use-editable-cell.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FORMAT_SPEC, formatDate as formatDateAs, invalidDateMessage, parseDate as parseFormattedDate } from '../date-input';\n\nimport { isEmptyValue, isoToFormatted, parseISODate, toISODate } from './editable-cell-utils';\n\nimport type { CalendarValue } from '../calendar';\nimport type { CellError, EditableCellProps, EditableCellValue } from './editable-cell.types';\n\n/** Keys `EditableCell` defaults before handing the props to the hook and the views. */\nexport type EditableCellDefaultedKey = 'type' | 'dateFormat' | 'searchable' | 'clearable' | 'align' | 'size' | 'required' | 'saveErrorMessage' | 'invalidNumberMessage' | 'invalidValueMessage' | 'clearSelectionLabel' | 'clearDateLabel' | 'clearValueLabel' | 'openCalendarLabel' | 'calendarDialogLabel' | 'addDateLabel';\n\n/** `EditableCellProps` with every default applied — what the hook and the views see. */\nexport type EditableCellResolvedProps = Omit<EditableCellProps, EditableCellDefaultedKey> &\n  Required<Pick<EditableCellProps, EditableCellDefaultedKey>>;\n\nexport interface EditableCellViewProps {\n  props: EditableCellResolvedProps;\n  cell: EditableCellState;\n}\n\nexport type EditableCellState = ReturnType<typeof useEditableCell>;\n\n/**\n * All of EditableCell's state, effects, commit paths and derived display\n * values — everything that is NOT per-type JSX. The three views\n * (`editable-cell-{text,date,select}.tsx`) are hook-free and read this\n * object, so the hook order is fixed here regardless of which view renders.\n */\nexport function useEditableCell(props: EditableCellResolvedProps) {\n  const {\n    value,\n    onCommit,\n    options,\n    format,\n    validate,\n    requiredMessage,\n    placeholder,\n    forceMode,\n    invalidDateMessage: invalidDateMessageProp,\n    type,\n    dateFormat,\n    required,\n    saveErrorMessage,\n    invalidNumberMessage,\n    invalidValueMessage,\n  } = props;\n  const [isEditing, setIsEditing] = useState(false);\n  const [draft, setDraft] = useState<string>(() => {\n    if (type === 'date') return isoToFormatted(value, dateFormat);\n    if (Array.isArray(value)) return '';\n    return String(value ?? '');\n  });\n  const [submitting, setSubmitting] = useState(false);\n  const [error, setError] = useState<CellError | null>(null);\n  const [open, setOpen] = useState(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  // Anchor for the error popover — the editing wrapper, so the banner hangs\n  // under the cell without affecting the table row's layout.\n  const wrapRef = useRef<HTMLSpanElement | null>(null);\n\n  // Committed date as a Date and in the cell's mask, memoized so the display,\n  // tooltip, aria-label, calendar highlight, draft sync, and cancel-reset all\n  // share one parse/format instead of each re-running it. Cheap `null`/`''`\n  // no-ops for non-date types. Declared before the effects so they can reuse it.\n  const parsedValue = useMemo(\n    () =>\n      type === 'date' && typeof value === 'string' && value\n        ? parseISODate(value) ?? parseFormattedDate(value, dateFormat)\n        : null,\n    [type, value, dateFormat],\n  );\n  const displayFormatted = useMemo(\n    () => (type === 'date' ? isoToFormatted(value, dateFormat) : ''),\n    [type, value, dateFormat],\n  );\n\n  // When the externally-committed value changes (parent state updated, or\n  // someone else edited the row), sync the draft — but only when we're\n  // NOT mid-edit. Mid-edit syncs would clobber what the user is typing.\n  useEffect(() => {\n    if (!isEditing) {\n      const next = Array.isArray(value)\n        ? ''\n        : type === 'date'\n          ? displayFormatted\n          : String(value ?? '');\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional external-value → draft sync, gated to non-editing mode\n      setDraft(next);\n    }\n  }, [value, isEditing, type, displayFormatted]);\n\n  // Focus + select-all when entering edit mode. Select-all means typing\n  // immediately replaces the value — the most common edit intent — while\n  // keyboard navigation (Home/End/arrows) still works to refine.\n  useEffect(() => {\n    if (isEditing && inputRef.current) {\n      inputRef.current.focus();\n      inputRef.current.select();\n    }\n  }, [isEditing]);\n\n  // A surfaced problem and the date calendar can't share the anchor, so the\n  // calendar is hidden while an error shows. Close it outright (not just via\n  // the render gate) so clearing the error later — e.g. the next keystroke's\n  // `setError(null)` — doesn't silently reopen a calendar the user dismissed.\n  useEffect(() => {\n    if (error && type === 'date') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- close the calendar exactly when a date error appears, so it can't auto-reopen on clear\n      setOpen(false);\n    }\n  }, [error, type]);\n\n  const parseDraft = useCallback((): EditableCellValue => {\n    // `Number('')` is 0, not NaN — map an empty/whitespace draft to NaN so\n    // blur-with-empty hits the \"Enter a number\" boundary instead of silently\n    // committing 0.\n    if (type === 'number') return draft.trim() === '' ? Number.NaN : Number(draft);\n    if (type === 'date') return draft;\n    return draft;\n  }, [type, draft]);\n\n  // Per-type default required message; overridable via `requiredMessage`.\n  // (multiselect's own default lives in MultiListbox, which owns that rule.)\n  const requiredMsg =\n    requiredMessage ?? (type === 'select' ? 'Select an option' : 'Required');\n\n  const commitValue = useCallback(\n    async (next: EditableCellValue): Promise<boolean> => {\n      // Re-entrancy guard lives HERE, not only in each caller's render\n      // condition: every commit path funnels through this function, so a new\n      // call site can't forget to gate itself (`commitDate` keeps its own\n      // early return for the same reason).\n      if (submitting) return false;\n      // Required is checked before `validate` so consumers get the empty rule\n      // for free. Multiselect empties are already blocked upstream by\n      // MultiListbox (they never reach here), so this covers the scalar types.\n      if (required && isEmptyValue(next)) {\n        setError({ message: requiredMsg, severity: 'warning' });\n        return false;\n      }\n      const validationError = validate?.(next);\n      if (validationError) {\n        setError({ message: validationError, severity: 'warning' });\n        return false;\n      }\n\n      setError(null);\n      setSubmitting(true);\n      try {\n        await onCommit(next);\n        setIsEditing(false);\n        setOpen(false);\n        return true;\n      } catch (err) {\n        // Error severity: the value was acceptable but saving failed.\n        setError({\n          message: err instanceof Error ? err.message : saveErrorMessage,\n          severity: 'error',\n        });\n        // Refocus the input so the user can retry without re-entering edit mode.\n        requestAnimationFrame(() => inputRef.current?.focus());\n        return false;\n      } finally {\n        setSubmitting(false);\n      }\n    },\n    [submitting, required, requiredMsg, saveErrorMessage, validate, onCommit],\n  );\n\n  // Shared commit path for both the typed input (handleCommit) and the calendar\n  // (handlePick). Guards a re-entrant commit while one is in flight, and skips\n  // the consumer's onCommit when nothing changed — comparing normalized ISO on\n  // BOTH sides so a formatted seed (or a re-picked day) isn't mistaken for a\n  // change — while still running `validate` on the no-op so a required /\n  // row-dependent rule still surfaces.\n  const commitDate = useCallback(\n    async (iso: string) => {\n      if (submitting) return;\n      const currentIso = parsedValue ? toISODate(parsedValue) : '';\n      if (iso === currentIso) {\n        const validationError = validate?.(iso);\n        if (validationError) {\n          setError({ message: validationError, severity: 'warning' });\n          return;\n        }\n        setIsEditing(false);\n        setOpen(false);\n        setError(null);\n        return;\n      }\n      await commitValue(iso);\n    },\n    [submitting, parsedValue, validate, commitValue],\n  );\n\n  const handleCommit = useCallback(async () => {\n    const next = parseDraft();\n\n    // Number type with a NaN draft is rejected at the parse boundary —\n    // EXCEPT when the draft was emptied outright (the ✕, or select-all +\n    // Delete): that's an intentional clear, not a typo, so it routes\n    // through `commitValue('')` like every other type — `required` blocks\n    // it with its own message, an optional cell commits '' and shows its\n    // placeholder. Half-typed non-numbers (\"-\", \".\") stay input errors.\n    // Warning severity: the input is the problem and the user can fix it.\n    if (type === 'number' && Number.isNaN(next)) {\n      if (draft.trim() === '') {\n        if (String(value ?? '') === '') {\n          // Already empty — pure exit, no spurious onCommit (mirrors the\n          // unchanged-value no-op below).\n          setIsEditing(false);\n          setError(null);\n          return;\n        }\n        await commitValue('');\n        return;\n      }\n      setError({ message: invalidNumberMessage, severity: 'warning' });\n      return;\n    }\n\n    // Typed dates parse at the boundary: per the cell's `dateFormat` mask\n    // first, canonical ISO as fallback. An emptied draft clears the date\n    // (commits \"\"). Unchanged-value / submitting / validation handling all\n    // live in the shared `commitDate` so typing and calendar picking behave\n    // identically.\n    if (type === 'date') {\n      const raw = String(next).trim();\n      if (raw === '') {\n        await commitDate('');\n        return;\n      }\n      const parsed = parseFormattedDate(raw, dateFormat) ?? parseISODate(raw);\n      if (!parsed) {\n        setError({\n          message: invalidDateMessageProp ?? invalidDateMessage(dateFormat),\n          severity: 'warning',\n        });\n        return;\n      }\n      await commitDate(toISODate(parsed));\n      return;\n    }\n\n    // No-op when value didn't change — exit edit mode without firing\n    // the consumer's handler (avoids spurious \"save\" calls on blur).\n    // NOTE: unlike the date path in `commitDate` (which re-runs `validate`\n    // on an unchanged value so a required / row-dependent rule still\n    // surfaces on blur), text/number intentionally skip `validate` here.\n    // These cells have no cross-row validity story today, so an unchanged\n    // blur is treated as a pure exit; keep the two paths in sync if that\n    // assumption ever changes.\n    const valueStr = Array.isArray(value) ? '' : String(value ?? '');\n    if (String(next) === valueStr) {\n      setIsEditing(false);\n      setError(null);\n      return;\n    }\n\n    await commitValue(next);\n  }, [\n    parseDraft,\n    type,\n    draft,\n    dateFormat,\n    value,\n    commitValue,\n    commitDate,\n    invalidNumberMessage,\n    invalidDateMessageProp,\n  ]);\n\n  const handlePick = useCallback(\n    async (calValue: CalendarValue) => {\n      if (!calValue.start || submitting) return;\n      setDraft(formatDateAs(calValue.start, dateFormat));\n      // Routes through the shared guard: re-picking the already-selected day is\n      // a no-op (no spurious onCommit), and a pick can't fire mid-commit.\n      await commitDate(toISODate(calValue.start));\n    },\n    [dateFormat, submitting, commitDate],\n  );\n\n  // ✕ inside the editing input (text/number/date, gated by `clearable`).\n  // Empties the DRAFT only — focus stays in the input (the button swallows\n  // its mousedown so the field never blurs) and nothing commits until\n  // Enter/blur, so required/validate still guard and Esc still restores.\n  const handleClearDraft = useCallback(() => {\n    setDraft('');\n    setError(null);\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    if (Array.isArray(value)) {\n      setDraft('');\n    } else if (type === 'date') {\n      setDraft(displayFormatted);\n    } else {\n      setDraft(String(value ?? ''));\n    }\n    setIsEditing(false);\n    setOpen(false);\n    setError(null);\n  }, [value, type, displayFormatted]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        handleCommit();\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        handleCancel();\n      }\n    },\n    [handleCommit, handleCancel],\n  );\n\n  // `forceMode` (preview-only) renders the input branch without a real\n  // click. `warning` / `error` also surface a sample message at that\n  // severity so the matching knobs paint. Derived in the render body —\n  // deliberately NOT fed into the focus effect above, so a forced preview\n  // never steals focus from the rest of the page. Production leaves\n  // forceMode unset, so `editing` collapses to the internal `isEditing`.\n  const editing = forceMode != null || isEditing;\n  const shownError: CellError | null =\n    forceMode === 'error'\n      ? error ?? { message: saveErrorMessage, severity: 'error' }\n      : forceMode === 'warning'\n        ? error ?? { message: invalidValueMessage, severity: 'warning' }\n        : error;\n\n  // Hint shown in the date input — the canonical format pattern for the\n  // chosen `dateFormat`. Used as the placeholder when the cell is empty\n  // and as the input placeholder in edit mode.\n  const dateHint = FORMAT_SPEC[dateFormat].placeholder;\n\n  // Compute display value\n  const isEmpty = Array.isArray(value)\n    ? value.length === 0\n    : value === '' || value === null || value === undefined;\n\n  const display = (() => {\n    // Empty wins over `format`: a cleared cell must read as its placeholder,\n    // not as the formatter's rendering of \"\" (e.g. a Tag formatter would\n    // paint an empty pill). `format` only ever sees real values.\n    if (isEmpty) return placeholder ?? (type === 'date' ? dateHint : '');\n    if (format) return format(value);\n    if (Array.isArray(value)) {\n      // For multiselect: show labels from options if available\n      if (options) {\n        return value\n          .map((v) => options.find((o) => o.value === v)?.label ?? v)\n          .join(', ');\n      }\n      return value.join(', ');\n    }\n    if (type === 'select' && options) {\n      return options.find((o) => o.value === String(value))?.label ?? String(value);\n    }\n    return value;\n  })();\n\n  // Plain-text form of the value, fed to the HoverTooltip so a value that's\n  // clipped at the cell's max-width is still readable on hover. Best-effort\n  // for custom `format` cells — those render arbitrary nodes, so the tooltip\n  // falls back to the underlying value rather than extracting text from JSX.\n  const isMulti = type === 'multiselect';\n  const isSelect = type === 'select';\n  const isDate = type === 'date';\n  const titleText = isEmpty\n    ? placeholder ?? ''\n    : isMulti\n      ? Array.isArray(value)\n        ? (options ?? [])\n            .filter((o) => (value as string[]).includes(o.value))\n            .map((o) => o.label)\n            .join(', ')\n        : ''\n      : isSelect\n        ? (options?.find((o) => o.value === String(value))?.label ?? String(value))\n        : isDate\n          ? displayFormatted || String(value)\n          : String(value);\n\n  return {\n    isEditing,\n    setIsEditing,\n    draft,\n    setDraft,\n    submitting,\n    setSubmitting,\n    error,\n    setError,\n    open,\n    setOpen,\n    inputRef,\n    wrapRef,\n    parsedValue,\n    displayFormatted,\n    parseDraft,\n    commitValue,\n    commitDate,\n    handleCommit,\n    handlePick,\n    handleClearDraft,\n    handleCancel,\n    handleKeyDown,\n    editing,\n    dateHint,\n    isEmpty,\n    display,\n    isMulti,\n    isSelect,\n    isDate,\n    titleText,\n    shownError,\n  };\n}\n"],"mappings":"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","names":["parseFormattedDate","formatDateAs"]}

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

@@ -0,0 +1,51 @@
+import type { CalendarValue } from '../calendar/index.js';
+import type { CellError, EditableCellProps, EditableCellValue } from './editable-cell.types.js';
+/** Keys `EditableCell` defaults before handing the props to the hook and the views. */
+export type EditableCellDefaultedKey = 'type' | 'dateFormat' | 'searchable' | 'clearable' | 'align' | 'size' | 'required' | 'saveErrorMessage' | 'invalidNumberMessage' | 'invalidValueMessage' | 'clearSelectionLabel' | 'clearDateLabel' | 'clearValueLabel' | 'openCalendarLabel' | 'calendarDialogLabel' | 'addDateLabel';
+/** `EditableCellProps` with every default applied — what the hook and the views see. */
+export type EditableCellResolvedProps = Omit<EditableCellProps, EditableCellDefaultedKey> & Required<Pick<EditableCellProps, EditableCellDefaultedKey>>;
+export interface EditableCellViewProps {
+    props: EditableCellResolvedProps;
+    cell: EditableCellState;
+}
+export type EditableCellState = ReturnType<typeof useEditableCell>;
+/**
+ * All of EditableCell's state, effects, commit paths and derived display
+ * values — everything that is NOT per-type JSX. The three views
+ * (`editable-cell-{text,date,select}.tsx`) are hook-free and read this
+ * object, so the hook order is fixed here regardless of which view renders.
+ */
+export declare function useEditableCell(props: EditableCellResolvedProps): {
+    isEditing: boolean;
+    setIsEditing: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    draft: string;
+    setDraft: import("react").Dispatch<import("react").SetStateAction<string>>;
+    submitting: boolean;
+    setSubmitting: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    error: CellError | null;
+    setError: import("react").Dispatch<import("react").SetStateAction<CellError | null>>;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    wrapRef: import("react").RefObject<HTMLSpanElement | null>;
+    parsedValue: Date | null;
+    displayFormatted: string;
+    parseDraft: () => EditableCellValue;
+    commitValue: (next: EditableCellValue) => Promise<boolean>;
+    commitDate: (iso: string) => Promise<void>;
+    handleCommit: () => Promise<void>;
+    handlePick: (calValue: CalendarValue) => Promise<void>;
+    handleClearDraft: () => void;
+    handleCancel: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    editing: boolean;
+    dateHint: string;
+    isEmpty: boolean;
+    display: import("react").ReactNode;
+    isMulti: boolean;
+    isSelect: boolean;
+    isDate: boolean;
+    titleText: string;
+    shownError: CellError | null;
+};
+//# sourceMappingURL=use-editable-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-editable-cell.d.ts","sourceRoot":"","sources":["../../../src/ui/editable-cell/use-editable-cell.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE7F,uFAAuF;AACvF,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,qBAAqB,GAAG,cAAc,CAAC;AAE9T,wFAAwF;AACxF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,GACvF,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,CAAC,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,yBAAyB,CAAC;IACjC,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,yBAAyB;;;;;;;;;;;;;;;sBAoF3B,iBAAiB;wBAerC,iBAAiB,KAAG,OAAO,CAAC,OAAO,CAAC;sBAiDrC,MAAM;;2BAiGD,aAAa;;;uBAiC1B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;;;;;;;;EAgH5C"}

package/dist/ui/editable-cell/use-editable-cell.js

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FORMAT_SPEC, formatDate as formatDateAs, invalidDateMessage, parseDate as parseFormattedDate } from "../date-input/index.js";
+import { isEmptyValue, isoToFormatted, parseISODate, toISODate } from "./editable-cell-utils.js";
+function useEditableCell(props) {
+  const {
+    value,
+    onCommit,
+    options,
+    format,
+    validate,
+    requiredMessage,
+    placeholder,
+    forceMode,
+    invalidDateMessage: invalidDateMessageProp,
+    type,
+    dateFormat,
+    required,
+    saveErrorMessage,
+    invalidNumberMessage,
+    invalidValueMessage
+  } = props;
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(() => {
+    if (type === "date") return isoToFormatted(value, dateFormat);
+    if (Array.isArray(value)) return "";
+    return String(value ?? "");
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const wrapRef = useRef(null);
+  const parsedValue = useMemo(
+    () => type === "date" && typeof value === "string" && value ? parseISODate(value) ?? parseFormattedDate(value, dateFormat) : null,
+    [type, value, dateFormat]
+  );
+  const displayFormatted = useMemo(
+    () => type === "date" ? isoToFormatted(value, dateFormat) : "",
+    [type, value, dateFormat]
+  );
+  useEffect(() => {
+    if (!isEditing) {
+      const next = Array.isArray(value) ? "" : type === "date" ? displayFormatted : String(value ?? "");
+      setDraft(next);
+    }
+  }, [value, isEditing, type, displayFormatted]);
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  useEffect(() => {
+    if (error && type === "date") {
+      setOpen(false);
+    }
+  }, [error, type]);
+  const parseDraft = useCallback(() => {
+    if (type === "number") return draft.trim() === "" ? Number.NaN : Number(draft);
+    if (type === "date") return draft;
+    return draft;
+  }, [type, draft]);
+  const requiredMsg = requiredMessage ?? (type === "select" ? "Select an option" : "Required");
+  const commitValue = useCallback(
+    async (next) => {
+      if (submitting) return false;
+      if (required && isEmptyValue(next)) {
+        setError({ message: requiredMsg, severity: "warning" });
+        return false;
+      }
+      const validationError = validate?.(next);
+      if (validationError) {
+        setError({ message: validationError, severity: "warning" });
+        return false;
+      }
+      setError(null);
+      setSubmitting(true);
+      try {
+        await onCommit(next);
+        setIsEditing(false);
+        setOpen(false);
+        return true;
+      } catch (err) {
+        setError({
+          message: err instanceof Error ? err.message : saveErrorMessage,
+          severity: "error"
+        });
+        requestAnimationFrame(() => inputRef.current?.focus());
+        return false;
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [submitting, required, requiredMsg, saveErrorMessage, validate, onCommit]
+  );
+  const commitDate = useCallback(
+    async (iso) => {
+      if (submitting) return;
+      const currentIso = parsedValue ? toISODate(parsedValue) : "";
+      if (iso === currentIso) {
+        const validationError = validate?.(iso);
+        if (validationError) {
+          setError({ message: validationError, severity: "warning" });
+          return;
+        }
+        setIsEditing(false);
+        setOpen(false);
+        setError(null);
+        return;
+      }
+      await commitValue(iso);
+    },
+    [submitting, parsedValue, validate, commitValue]
+  );
+  const handleCommit = useCallback(async () => {
+    const next = parseDraft();
+    if (type === "number" && Number.isNaN(next)) {
+      if (draft.trim() === "") {
+        if (String(value ?? "") === "") {
+          setIsEditing(false);
+          setError(null);
+          return;
+        }
+        await commitValue("");
+        return;
+      }
+      setError({ message: invalidNumberMessage, severity: "warning" });
+      return;
+    }
+    if (type === "date") {
+      const raw = String(next).trim();
+      if (raw === "") {
+        await commitDate("");
+        return;
+      }
+      const parsed = parseFormattedDate(raw, dateFormat) ?? parseISODate(raw);
+      if (!parsed) {
+        setError({
+          message: invalidDateMessageProp ?? invalidDateMessage(dateFormat),
+          severity: "warning"
+        });
+        return;
+      }
+      await commitDate(toISODate(parsed));
+      return;
+    }
+    const valueStr = Array.isArray(value) ? "" : String(value ?? "");
+    if (String(next) === valueStr) {
+      setIsEditing(false);
+      setError(null);
+      return;
+    }
+    await commitValue(next);
+  }, [
+    parseDraft,
+    type,
+    draft,
+    dateFormat,
+    value,
+    commitValue,
+    commitDate,
+    invalidNumberMessage,
+    invalidDateMessageProp
+  ]);
+  const handlePick = useCallback(
+    async (calValue) => {
+      if (!calValue.start || submitting) return;
+      setDraft(formatDateAs(calValue.start, dateFormat));
+      await commitDate(toISODate(calValue.start));
+    },
+    [dateFormat, submitting, commitDate]
+  );
+  const handleClearDraft = useCallback(() => {
+    setDraft("");
+    setError(null);
+  }, []);
+  const handleCancel = useCallback(() => {
+    if (Array.isArray(value)) {
+      setDraft("");
+    } else if (type === "date") {
+      setDraft(displayFormatted);
+    } else {
+      setDraft(String(value ?? ""));
+    }
+    setIsEditing(false);
+    setOpen(false);
+    setError(null);
+  }, [value, type, displayFormatted]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleCommit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleCommit, handleCancel]
+  );
+  const editing = forceMode != null || isEditing;
+  const shownError = forceMode === "error" ? error ?? { message: saveErrorMessage, severity: "error" } : forceMode === "warning" ? error ?? { message: invalidValueMessage, severity: "warning" } : error;
+  const dateHint = FORMAT_SPEC[dateFormat].placeholder;
+  const isEmpty = Array.isArray(value) ? value.length === 0 : value === "" || value === null || value === void 0;
+  const display = (() => {
+    if (isEmpty) return placeholder ?? (type === "date" ? dateHint : "");
+    if (format) return format(value);
+    if (Array.isArray(value)) {
+      if (options) {
+        return value.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+      }
+      return value.join(", ");
+    }
+    if (type === "select" && options) {
+      return options.find((o) => o.value === String(value))?.label ?? String(value);
+    }
+    return value;
+  })();
+  const isMulti = type === "multiselect";
+  const isSelect = type === "select";
+  const isDate = type === "date";
+  const titleText = isEmpty ? placeholder ?? "" : isMulti ? Array.isArray(value) ? (options ?? []).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") : "" : isSelect ? options?.find((o) => o.value === String(value))?.label ?? String(value) : isDate ? displayFormatted || String(value) : String(value);
+  return {
+    isEditing,
+    setIsEditing,
+    draft,
+    setDraft,
+    submitting,
+    setSubmitting,
+    error,
+    setError,
+    open,
+    setOpen,
+    inputRef,
+    wrapRef,
+    parsedValue,
+    displayFormatted,
+    parseDraft,
+    commitValue,
+    commitDate,
+    handleCommit,
+    handlePick,
+    handleClearDraft,
+    handleCancel,
+    handleKeyDown,
+    editing,
+    dateHint,
+    isEmpty,
+    display,
+    isMulti,
+    isSelect,
+    isDate,
+    titleText,
+    shownError
+  };
+}
+export {
+  useEditableCell
+};
+//# sourceMappingURL=use-editable-cell.js.map