@viax.io/uxm 4.39.0 → 4.40.0

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

@@ -1,732 +1,54 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../helpers/index.js";
-import { Banner } from "../banner/index.js";
-import { ButtonGhost } from "../button/index.js";
-import { Calendar } from "../calendar/index.js";
-import { FORMAT_SPEC, formatDate as formatDateAs, invalidDateMessage, maskDate, parseDate as parseFormattedDate } from "../date-input/index.js";
-import { HoverTooltip } from "../hover-tooltip/index.js";
-import { Icon } from "../icon/index.js";
-import { Listbox, MultiListbox } from "../listbox/index.js";
-import { maskNumeric } from "../number-input/index.js";
-import { Popover } from "../popover/index.js";
-import { isEmptyValue, isoToFormatted, parseISODate, toISODate } from "./editable-cell-utils.js";
+import { jsx } from "react/jsx-runtime";
+import { EditableCellDateView } from "./editable-cell-date.js";
+import { EditableCellSelectView } from "./editable-cell-select.js";
+import { EditableCellTextView } from "./editable-cell-text.js";
+import { useEditableCell } from "./use-editable-cell.js";
 function EditableCell({
-  value,
-  onCommit,
   type = "text",
   dateFormat = "ymd",
-  options,
   searchable = "auto",
   clearable = true,
   align = "left",
   size = "small",
-  format,
-  validate,
   required = false,
-  requiredMessage,
   saveErrorMessage = "Failed to save",
   invalidNumberMessage = "Enter a number",
-  invalidDateMessage: invalidDateMessageProp,
   invalidValueMessage = "Enter a valid value",
-  disabled,
-  placeholder,
-  className,
-  style,
-  "aria-label": ariaLabel,
   clearSelectionLabel = "Clear selection",
   clearDateLabel = "Clear date",
   clearValueLabel = "Clear value",
   openCalendarLabel = "Open calendar",
   calendarDialogLabel = "Choose date",
   addDateLabel = "Add date",
-  forceMode
+  ...rest
 }) {
-  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,
+  const props = {
+    ...rest,
     type,
-    draft,
     dateFormat,
-    value,
-    commitValue,
-    commitDate,
+    searchable,
+    clearable,
+    align,
+    size,
+    required,
+    saveErrorMessage,
     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);
-  if (type === "select" || type === "multiselect") {
-    const optionItems = options ?? [];
-    const getKey = (o) => o.value;
-    const getLabel = (o) => o.label;
-    if (type === "select") {
-      const selectedItem = Array.isArray(value) ? null : optionItems.find((o) => o.value === String(value ?? "")) ?? null;
-      return /* @__PURE__ */ jsxs(
-        "span",
-        {
-          ref: wrapRef,
-          className: cn(
-            "uxm-editable-cell",
-            `uxm-editable-cell--${size}`,
-            `uxm-editable-cell--align-${align}`,
-            `uxm-editable-cell--type-${type}`,
-            clearable && "uxm-editable-cell--clearable",
-            disabled && "uxm-editable-cell--disabled",
-            isEmpty && "uxm-editable-cell--empty",
-            open && "uxm-editable-cell--open",
-            className
-          ),
-          style,
-          children: [
-            /* @__PURE__ */ jsx(
-              Listbox,
-              {
-                items: optionItems,
-                getKey,
-                getLabel,
-                value: selectedItem,
-                onChange: async (next) => {
-                  if (next) await commitValue(next.value);
-                },
-                disabled,
-                searchable,
-                matchAnchorWidth: true,
-                onOpenChange: setOpen,
-                renderTrigger: ({ open: isOpen, triggerProps }) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    ...triggerProps,
-                    className: cn(
-                      "uxm-editable-cell__select-trigger",
-                      isOpen && "uxm-editable-cell__select-trigger--open"
-                    ),
-                    "aria-label": ariaLabel ?? `Edit ${String(value ?? "")}`,
-                    children: [
-                      /* @__PURE__ */ jsx(HoverTooltip, { content: titleText, disabled, children: /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__value uxm-editable-cell__option-label", children: display }) }),
-                      /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 12 }) })
-                    ]
-                  }
-                ),
-                renderItem: (o) => /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__option-label", children: o.label }),
-                footer: clearable && selectedItem ? ({ close }) => /* @__PURE__ */ jsxs(
-                  ButtonGhost,
-                  {
-                    className: "uxm-listbox__footer-clear-option",
-                    onClick: () => {
-                      commitValue("");
-                      close();
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 }),
-                      "Clear"
-                    ]
-                  }
-                ) : void 0
-              }
-            ),
-            clearable && !disabled && !submitting && !isEmpty && /* Trigger ✕ — clear from the field itself (the input-family
-               convention), on every size: commits the empty value directly,
-               complementing the panel-footer Clear. Sibling of the trigger (a
-               button can't nest a button), absolutely positioned into the
-               reserved second gutter slot. Revealed only while the panel is
-               open (see the `--open` gate in the stylesheet) — unlike the
-               chevron, which also shows on hover. */
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "uxm-editable-cell__trigger-clear",
-                tabIndex: -1,
-                onMouseDown: (e) => e.stopPropagation(),
-                onClick: () => void commitValue(""),
-                "aria-label": clearSelectionLabel,
-                children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Popover,
-              {
-                open: Boolean(shownError),
-                onOpenChange: (next) => {
-                  if (!next) setError(null);
-                },
-                anchor: wrapRef,
-                placement: "bottom-start",
-                closeOnEscape: false,
-                closeOnOutsideClick: false,
-                restoreFocus: false,
-                role: "presentation",
-                children: shownError && /* @__PURE__ */ jsx(
-                  Banner,
-                  {
-                    variant: shownError.severity,
-                    id: "uxm-editable-cell__error",
-                    className: "uxm-editable-cell__error-banner",
-                    children: shownError.message
-                  }
-                )
-              }
-            )
-          ]
-        }
-      );
-    }
-    const selectedItems = Array.isArray(value) ? optionItems.filter((o) => value.includes(o.value)) : [];
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref: wrapRef,
-        className: cn(
-          "uxm-editable-cell",
-          `uxm-editable-cell--${size}`,
-          `uxm-editable-cell--align-${align}`,
-          `uxm-editable-cell--type-${type}`,
-          clearable && "uxm-editable-cell--clearable",
-          disabled && "uxm-editable-cell--disabled",
-          isEmpty && "uxm-editable-cell--empty",
-          open && "uxm-editable-cell--open",
-          className
-        ),
-        style,
-        children: [
-          /* @__PURE__ */ jsx(
-            MultiListbox,
-            {
-              items: optionItems,
-              getKey,
-              getLabel,
-              value: selectedItems,
-              onChange: (items) => void commitValue(items.map((o) => o.value)),
-              commitMode: "close",
-              required,
-              requiredMessage,
-              onRequiredViolation: (message) => setError({ message, severity: "warning" }),
-              disabled,
-              searchable,
-              matchAnchorWidth: true,
-              onOpenChange: (next) => {
-                setOpen(next);
-                if (next) setError(null);
-              },
-              renderTrigger: ({ open: isOpen, triggerProps }) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  ...triggerProps,
-                  className: cn(
-                    "uxm-editable-cell__select-trigger",
-                    isOpen && "uxm-editable-cell__select-trigger--open"
-                  ),
-                  "aria-label": ariaLabel ?? `Edit ${String(value ?? "")}`,
-                  children: [
-                    /* @__PURE__ */ jsx(HoverTooltip, { content: titleText, disabled, children: /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__value uxm-editable-cell__option-label", children: display }) }),
-                    /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 12 }) })
-                  ]
-                }
-              ),
-              renderItem: (o) => /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__option-label", children: o.label }),
-              footer: clearable ? ({ clear, selected }) => selected.length > 0 ? /* @__PURE__ */ jsxs(
-                ButtonGhost,
-                {
-                  className: "uxm-listbox__footer-clear-option",
-                  onClick: clear,
-                  children: [
-                    /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 }),
-                    "Clear all"
-                  ]
-                }
-              ) : null : void 0
-            }
-          ),
-          clearable && !disabled && !submitting && !isEmpty && /* Trigger ✕ — clear from the field itself (the input-family
-             convention), on every size: commits the empty value directly,
-             complementing the panel-footer Clear. Sibling of the trigger (a
-             button can't nest a button), absolutely positioned into the
-             reserved second gutter slot. Revealed only while the panel is
-             open (see the `--open` gate in the stylesheet) — unlike the
-             chevron, which also shows on hover. */
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "uxm-editable-cell__trigger-clear",
-              tabIndex: -1,
-              onMouseDown: (e) => e.stopPropagation(),
-              onClick: () => void commitValue([]),
-              "aria-label": clearSelectionLabel,
-              children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Popover,
-            {
-              open: Boolean(shownError),
-              onOpenChange: (next) => {
-                if (!next) setError(null);
-              },
-              anchor: wrapRef,
-              placement: "bottom-start",
-              closeOnEscape: false,
-              closeOnOutsideClick: false,
-              restoreFocus: false,
-              role: "presentation",
-              children: shownError && /* @__PURE__ */ jsx(
-                Banner,
-                {
-                  variant: shownError.severity,
-                  id: "uxm-editable-cell__error",
-                  className: "uxm-editable-cell__error-banner",
-                  children: shownError.message
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
+    invalidValueMessage,
+    clearSelectionLabel,
+    clearDateLabel,
+    clearValueLabel,
+    openCalendarLabel,
+    calendarDialogLabel,
+    addDateLabel
+  };
+  const cell = useEditableCell(props);
+  if (props.type === "select" || props.type === "multiselect") {
+    return /* @__PURE__ */ jsx(EditableCellSelectView, { props, cell });
   }
-  if (type === "date") {
-    const calendarValue = { start: parsedValue, end: parsedValue };
-    const spec = FORMAT_SPEC[dateFormat];
-    if (!editing) {
-      const displayNode = isEmpty ? placeholder ?? dateHint : format ? format(value) : displayFormatted || value;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "uxm-editable-cell",
-            `uxm-editable-cell--${size}`,
-            `uxm-editable-cell--align-${align}`,
-            `uxm-editable-cell--type-date`,
-            disabled && "uxm-editable-cell--disabled",
-            isEmpty && "uxm-editable-cell--empty",
-            className
-          ),
-          style,
-          onClick: () => {
-            if (disabled) return;
-            setIsEditing(true);
-            setOpen(true);
-          },
-          disabled,
-          "aria-label": ariaLabel ?? (isEmpty ? addDateLabel : `Edit date ${displayFormatted || String(value)}`),
-          children: [
-            /* @__PURE__ */ jsx(HoverTooltip, { content: titleText, disabled, children: /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__value", children: displayNode }) }),
-            !disabled && /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__pencil", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "calendar", size: 14 }) })
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref: wrapRef,
-        className: cn(
-          "uxm-editable-cell uxm-editable-cell--editing",
-          `uxm-editable-cell--${size}`,
-          `uxm-editable-cell--align-${align}`,
-          `uxm-editable-cell--type-date`,
-          clearable && "uxm-editable-cell--clearable",
-          shownError?.severity === "error" && "uxm-editable-cell--error",
-          shownError?.severity === "warning" && "uxm-editable-cell--warning",
-          className
-        ),
-        style,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: display }),
-          /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: draft || spec.placeholder }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              inputMode: "numeric",
-              className: "uxm-editable-cell__input",
-              value: draft,
-              placeholder: spec.placeholder,
-              onChange: (e) => {
-                setDraft(maskDate(e.target.value, dateFormat));
-                if (error) setError(null);
-              },
-              onBlur: () => {
-                if (!submitting) handleCommit();
-              },
-              onKeyDown: handleKeyDown,
-              disabled: submitting,
-              "aria-invalid": Boolean(shownError),
-              "aria-describedby": shownError ? "uxm-editable-cell__error" : void 0
-            }
-          ),
-          clearable && !submitting && draft !== "" && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "uxm-editable-cell__clear",
-              tabIndex: -1,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: handleClearDraft,
-              "aria-label": clearDateLabel,
-              children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "uxm-editable-cell__date-icon",
-              tabIndex: -1,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => {
-                if (submitting) return;
-                setError(null);
-                setOpen((o) => !o);
-              },
-              disabled: submitting,
-              "aria-label": openCalendarLabel,
-              "aria-expanded": open && !shownError,
-              children: /* @__PURE__ */ jsx(Icon, { glyph: "calendar", size: 14 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Popover,
-            {
-              open: open && !shownError,
-              onOpenChange: setOpen,
-              anchor: wrapRef,
-              placement: "bottom-start",
-              closeOnEscape: true,
-              closeOnOutsideClick: true,
-              restoreFocus: false,
-              role: "dialog",
-              "aria-label": calendarDialogLabel,
-              children: /* @__PURE__ */ jsx("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx(Calendar, { value: calendarValue, onChange: handlePick }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Popover,
-            {
-              open: Boolean(shownError),
-              onOpenChange: (next) => {
-                if (!next) setError(null);
-              },
-              anchor: wrapRef,
-              placement: "bottom-start",
-              closeOnEscape: false,
-              closeOnOutsideClick: false,
-              restoreFocus: false,
-              role: "presentation",
-              children: shownError && /* @__PURE__ */ jsx(
-                Banner,
-                {
-                  variant: shownError.severity,
-                  id: "uxm-editable-cell__error",
-                  className: "uxm-editable-cell__error-banner",
-                  children: shownError.message
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
+  if (props.type === "date") {
+    return /* @__PURE__ */ jsx(EditableCellDateView, { props, cell });
   }
-  if (!editing) {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "uxm-editable-cell",
-          `uxm-editable-cell--${size}`,
-          `uxm-editable-cell--align-${align}`,
-          disabled && "uxm-editable-cell--disabled",
-          isEmpty && "uxm-editable-cell--empty",
-          className
-        ),
-        style,
-        onClick: () => {
-          if (!disabled) setIsEditing(true);
-        },
-        disabled,
-        "aria-label": ariaLabel ?? `Edit ${String(value ?? "")}`,
-        children: [
-          /* @__PURE__ */ jsx(HoverTooltip, { content: titleText, disabled, children: /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__value", children: display }) }),
-          !disabled && /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__pencil", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "pencil", size: 16, strokeWidth: 1.75 }) })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref: wrapRef,
-      className: cn(
-        "uxm-editable-cell uxm-editable-cell--editing",
-        `uxm-editable-cell--${size}`,
-        `uxm-editable-cell--align-${align}`,
-        clearable && "uxm-editable-cell--clearable",
-        shownError?.severity === "error" && "uxm-editable-cell--error",
-        shownError?.severity === "warning" && "uxm-editable-cell--warning",
-        className
-      ),
-      style,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: display }),
-        /* @__PURE__ */ jsx("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: draft }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            type: "text",
-            inputMode: type === "number" ? "decimal" : void 0,
-            autoComplete: "off",
-            className: "uxm-editable-cell__input",
-            value: draft,
-            onChange: (e) => {
-              setDraft(
-                type === "number" ? maskNumeric(e.target.value, true, true, Number.POSITIVE_INFINITY) : e.target.value
-              );
-              if (error) setError(null);
-            },
-            onBlur: () => {
-              if (!submitting) handleCommit();
-            },
-            onKeyDown: handleKeyDown,
-            disabled: submitting,
-            placeholder,
-            "aria-invalid": Boolean(shownError),
-            "aria-describedby": shownError ? "uxm-editable-cell__error" : void 0
-          }
-        ),
-        clearable && !submitting && draft !== "" && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "uxm-editable-cell__clear",
-            tabIndex: -1,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: handleClearDraft,
-            "aria-label": clearValueLabel,
-            children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 12 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            open: Boolean(shownError),
-            onOpenChange: (next) => {
-              if (!next) setError(null);
-            },
-            anchor: wrapRef,
-            placement: "bottom-start",
-            closeOnEscape: false,
-            closeOnOutsideClick: false,
-            restoreFocus: false,
-            role: "presentation",
-            children: shownError && /* @__PURE__ */ jsx(
-              Banner,
-              {
-                variant: shownError.severity,
-                id: "uxm-editable-cell__error",
-                className: "uxm-editable-cell__error-banner",
-                children: shownError.message
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx(EditableCellTextView, { props, cell });
 }
 export {
   EditableCell