@viax.io/uxm 4.36.0

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

@@ -0,0 +1,752 @@
+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";
+function parseISODate(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+  if (!m) return null;
+  const y = Number(m[1]);
+  const mo = Number(m[2]);
+  const day = Number(m[3]);
+  const d = new Date(y, mo - 1, day);
+  if (d.getFullYear() !== y || d.getMonth() !== mo - 1 || d.getDate() !== day) return null;
+  return d;
+}
+const toISODate = (d) => formatDateAs(d, "ymd");
+function isoToFormatted(value, format) {
+  if (typeof value !== "string" || !value) return "";
+  const d = parseISODate(value);
+  return d ? formatDateAs(d, format) : value;
+}
+function isEmptyValue(v) {
+  if (Array.isArray(v)) return v.length === 0;
+  if (typeof v === "number") return Number.isNaN(v);
+  return String(v ?? "").trim() === "";
+}
+function EditableCell({
+  value,
+  onCommit,
+  type = "text",
+  dateFormat = "ymd",
+  options,
+  searchable = "auto",
+  clearable = true,
+  align = "left",
+  size = "small",
+  format,
+  validate,
+  required = false,
+  requiredMessage,
+  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
+}) {
+  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 : "Failed to save",
+          severity: "error"
+        });
+        requestAnimationFrame(() => inputRef.current?.focus());
+        return false;
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [submitting, required, requiredMsg, 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: "Enter a number", 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: 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]);
+  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: "Failed to save", severity: "error" } : forceMode === "warning" ? error ?? { message: "Enter a valid value", 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
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  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 (!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
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableCell
+};
+//# sourceMappingURL=editable-cell.js.map