@viax.io/uxm 4.39.0 → 4.40.1

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

@@ -0,0 +1,273 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Banner } from "../banner/index.js";
+import { ButtonGhost } from "../button/index.js";
+import { HoverTooltip } from "../hover-tooltip/index.js";
+import { Icon } from "../icon/index.js";
+import { Listbox, MultiListbox } from "../listbox/index.js";
+import { Popover } from "../popover/index.js";
+function EditableCellSelectView({ props, cell }) {
+  const {
+    value,
+    options,
+    requiredMessage,
+    disabled,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    type,
+    searchable,
+    clearable,
+    align,
+    size,
+    required,
+    clearSelectionLabel
+  } = props;
+  const {
+    submitting,
+    setError,
+    open,
+    setOpen,
+    wrapRef,
+    commitValue,
+    isEmpty,
+    display,
+    titleText,
+    shownError
+  } = cell;
+  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
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+export {
+  EditableCellSelectView
+};
+//# sourceMappingURL=editable-cell-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/editable-cell/editable-cell-select.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Banner } from '../banner';\nimport { ButtonGhost } from '../button';\nimport { HoverTooltip } from '../hover-tooltip';\nimport { Icon } from '../icon';\nimport { Listbox, MultiListbox, type ListboxRenderTriggerState } from '../listbox';\nimport { Popover } from '../popover';\n\nimport type { EditableCellOption } from './editable-cell.types';\nimport type { EditableCellViewProps } from './use-editable-cell';\n\n/** `type=\"select\"` / `\"multiselect\"` — a Listbox-driven trigger; no display/edit split. */\nexport function EditableCellSelectView({ props, cell }: EditableCellViewProps) {\n  const {\n    value,\n    options,\n    requiredMessage,\n    disabled,\n    className,\n    style,\n    'aria-label': ariaLabel,\n    type,\n    searchable,\n    clearable,\n    align,\n    size,\n    required,\n    clearSelectionLabel,\n  } = props;\n  const {\n    submitting,\n    setError,\n    open,\n    setOpen,\n    wrapRef,\n    commitValue,\n    isEmpty,\n    display,\n    titleText,\n    shownError,\n  } = cell;\n\n  // For select/multiselect in open state, we render a Listbox-driven UI\n  if (type === 'select' || type === 'multiselect') {\n    const optionItems = options ?? [];\n    const getKey = (o: EditableCellOption) => o.value;\n    const getLabel = (o: EditableCellOption) => o.label;\n\n    if (type === 'select') {\n      const selectedItem = Array.isArray(value)\n        ? null\n        : optionItems.find((o) => o.value === String(value ?? '')) ?? null;\n\n      return (\n        <span\n          ref={wrapRef}\n          className={cn(\n            'uxm-editable-cell',\n            `uxm-editable-cell--${size}`,\n            `uxm-editable-cell--align-${align}`,\n            `uxm-editable-cell--type-${type}`,\n            clearable && 'uxm-editable-cell--clearable',\n            disabled && 'uxm-editable-cell--disabled',\n            isEmpty && 'uxm-editable-cell--empty',\n            open && 'uxm-editable-cell--open',\n            className,\n          )}\n          style={style}\n        >\n          <Listbox<EditableCellOption>\n            items={optionItems}\n            getKey={getKey}\n            getLabel={getLabel}\n            value={selectedItem}\n            onChange={async (next) => {\n              if (next) await commitValue(next.value);\n            }}\n            disabled={disabled}\n            searchable={searchable}\n            matchAnchorWidth\n            onOpenChange={setOpen}\n            renderTrigger={({ open: isOpen, triggerProps }: ListboxRenderTriggerState<EditableCellOption>) => (\n              <button\n                type=\"button\"\n                {...triggerProps}\n                className={cn(\n                  'uxm-editable-cell__select-trigger',\n                  isOpen && 'uxm-editable-cell__select-trigger--open',\n                )}\n                aria-label={ariaLabel ?? `Edit ${String(value ?? '')}`}\n              >\n                <HoverTooltip content={titleText} disabled={disabled}>\n                  <span className=\"uxm-editable-cell__value uxm-editable-cell__option-label\">\n                    {display}\n                  </span>\n                </HoverTooltip>\n                <span className=\"uxm-editable-cell__chevron\" aria-hidden=\"true\">\n                  <Icon glyph=\"chevron-down\" size={12} />\n                </span>\n              </button>\n            )}\n            renderItem={(o) => (\n              <span className=\"uxm-editable-cell__option-label\">{o.label}</span>\n            )}\n            footer={clearable && selectedItem ? ({ close }: { close: () => void }) => (\n              <ButtonGhost\n                className=\"uxm-listbox__footer-clear-option\"\n                onClick={() => {\n                  commitValue('');\n                  close();\n                }}\n              >\n                <Icon glyph=\"close\" size={12} />\n                Clear\n              </ButtonGhost>\n            ) : undefined}\n          />\n          {clearable && !disabled && !submitting && !isEmpty && (\n            /* Trigger ✕ — clear from the field itself (the input-family\n               convention), on every size: commits the empty value directly,\n               complementing the panel-footer Clear. Sibling of the trigger (a\n               button can't nest a button), absolutely positioned into the\n               reserved second gutter slot. Revealed only while the panel is\n               open (see the `--open` gate in the stylesheet) — unlike the\n               chevron, which also shows on hover. */\n            <button\n              type=\"button\"\n              className=\"uxm-editable-cell__trigger-clear\"\n              // Out of the tab order, same as every in-field clear here.\n              tabIndex={-1}\n              // This button is a SIBLING of the Listbox trigger, so it sits\n              // outside the refs `useDismiss` treats as \"inside\" — and dismiss\n              // runs on mousedown, i.e. BEFORE this click. Left alone, pressing\n              // ✕ would first dismiss the panel and only then clear. Stop the\n              // mousedown here so the clear below is the single thing that acts.\n              onMouseDown={(e) => e.stopPropagation()}\n              onClick={() => void commitValue('')}\n              aria-label={clearSelectionLabel}\n            >\n              <Icon glyph=\"close\" size={12} />\n            </button>\n          )}\n          <Popover\n            open={Boolean(shownError)}\n            onOpenChange={(next) => {\n              if (!next) setError(null);\n            }}\n            anchor={wrapRef}\n            placement=\"bottom-start\"\n            closeOnEscape={false}\n            closeOnOutsideClick={false}\n            restoreFocus={false}\n            role=\"presentation\"\n          >\n            {shownError && (\n              <Banner\n                variant={shownError.severity}\n                id=\"uxm-editable-cell__error\"\n                className=\"uxm-editable-cell__error-banner\"\n              >\n                {shownError.message}\n              </Banner>\n            )}\n          </Popover>\n        </span>\n      );\n    }\n\n    // multiselect. A cell is a commit boundary, so this branch opts into\n    // MultiListbox's staged mode (`commitMode=\"close\"`: draft while open, one\n    // commit on close) — a required cell then survives \"clear all → pick one\"\n    // and N picks are one `onCommit`. It just hands over the committed\n    // selection and commits the final array back.\n    const selectedItems = Array.isArray(value)\n      ? optionItems.filter((o) => value.includes(o.value))\n      : [];\n\n    return (\n      <span\n        ref={wrapRef}\n        className={cn(\n          'uxm-editable-cell',\n          `uxm-editable-cell--${size}`,\n          `uxm-editable-cell--align-${align}`,\n          `uxm-editable-cell--type-${type}`,\n          clearable && 'uxm-editable-cell--clearable',\n          disabled && 'uxm-editable-cell--disabled',\n          isEmpty && 'uxm-editable-cell--empty',\n          open && 'uxm-editable-cell--open',\n          className,\n        )}\n        style={style}\n      >\n        <MultiListbox<EditableCellOption>\n          items={optionItems}\n          getKey={getKey}\n          getLabel={getLabel}\n          value={selectedItems}\n          onChange={(items) => void commitValue(items.map((o) => o.value))}\n          // Commit on close, not per toggle — see the note above.\n          commitMode=\"close\"\n          required={required}\n          requiredMessage={requiredMessage}\n          // MultiListbox owns the empty rule for multi (shared with every\n          // picker); route its violation into this cell's error Banner.\n          onRequiredViolation={(message) => setError({ message, severity: 'warning' })}\n          disabled={disabled}\n          searchable={searchable}\n          matchAnchorWidth\n          // Clear a stale required warning when the panel reopens for a fresh edit.\n          onOpenChange={(next) => {\n            setOpen(next);\n            if (next) setError(null);\n          }}\n          renderTrigger={({ open: isOpen, triggerProps }: ListboxRenderTriggerState<EditableCellOption>) => (\n            <button\n              type=\"button\"\n              {...triggerProps}\n              className={cn(\n                'uxm-editable-cell__select-trigger',\n                isOpen && 'uxm-editable-cell__select-trigger--open',\n              )}\n              aria-label={ariaLabel ?? `Edit ${String(value ?? '')}`}\n            >\n              <HoverTooltip content={titleText} disabled={disabled}>\n                <span className=\"uxm-editable-cell__value uxm-editable-cell__option-label\">\n                  {display}\n                </span>\n              </HoverTooltip>\n              <span className=\"uxm-editable-cell__chevron\" aria-hidden=\"true\">\n                <Icon glyph=\"chevron-down\" size={12} />\n              </span>\n            </button>\n          )}\n          renderItem={(o) => (\n            <span className=\"uxm-editable-cell__option-label\">{o.label}</span>\n          )}\n          footer={clearable ? ({ clear, selected }: { clear: () => void; selected: EditableCellOption[] }) =>\n            selected.length > 0 ? (\n              <ButtonGhost\n                className=\"uxm-listbox__footer-clear-option\"\n                // `clear` (from MultiListbox) empties the draft and keeps the\n                // panel open, so \"clear all then pick one\" works even on a\n                // required cell — the empty state is transient and never\n                // reaches `validate` / `onCommit`. `selected` is the live\n                // draft, so the button hides itself once nothing is picked.\n                onClick={clear}\n              >\n                <Icon glyph=\"close\" size={12} />\n                Clear all\n              </ButtonGhost>\n            ) : null\n          : undefined}\n        />\n        {clearable && !disabled && !submitting && !isEmpty && (\n          /* Trigger ✕ — clear from the field itself (the input-family\n             convention), on every size: commits the empty value directly,\n             complementing the panel-footer Clear. Sibling of the trigger (a\n             button can't nest a button), absolutely positioned into the\n             reserved second gutter slot. Revealed only while the panel is\n             open (see the `--open` gate in the stylesheet) — unlike the\n             chevron, which also shows on hover. */\n          <button\n            type=\"button\"\n            className=\"uxm-editable-cell__trigger-clear\"\n            // Out of the tab order, same as every in-field clear here.\n            tabIndex={-1}\n            // Same sibling-of-the-trigger problem as the select ✕ above, but\n            // costlier here: `useDismiss` fires on mousedown, and this panel\n            // runs `commitMode=\"close\"`, so an unswallowed mousedown would\n            // commit the STAGED DRAFT first and only then clear — two commits\n            // for one press, and if the first is still in flight the\n            // re-entrancy guard in `commitValue` drops the clear entirely.\n            // Stopping it leaves the panel open, which is deliberate and\n            // matches the footer's \"Clear all\": clear, then pick afresh.\n            // MultiListbox re-seeds its draft from `value` under an open panel,\n            // so the later close commits the cleared set, not the stale draft.\n            onMouseDown={(e) => e.stopPropagation()}\n            onClick={() => void commitValue([])}\n            aria-label={clearSelectionLabel}\n          >\n            <Icon glyph=\"close\" size={12} />\n          </button>\n        )}\n        <Popover\n          open={Boolean(shownError)}\n          onOpenChange={(next) => {\n            if (!next) setError(null);\n          }}\n          anchor={wrapRef}\n          placement=\"bottom-start\"\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          restoreFocus={false}\n          role=\"presentation\"\n        >\n          {shownError && (\n            <Banner\n              variant={shownError.severity}\n              id=\"uxm-editable-cell__error\"\n              className=\"uxm-editable-cell__error-banner\"\n            >\n              {shownError.message}\n            </Banner>\n          )}\n        </Popover>\n      </span>\n    );\n  }\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,175 @@
+"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 editable_cell_text_exports = {};
+__export(editable_cell_text_exports, {
+  EditableCellTextView: () => EditableCellTextView
+});
+module.exports = __toCommonJS(editable_cell_text_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_banner = require("../banner/index.cjs");
+var import_hover_tooltip = require("../hover-tooltip/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_number_input = require("../number-input/index.cjs");
+var import_popover = require("../popover/index.cjs");
+function EditableCellTextView({ props, cell }) {
+  const {
+    value,
+    disabled,
+    placeholder,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    type,
+    clearable,
+    align,
+    size,
+    clearValueLabel
+  } = props;
+  const {
+    setIsEditing,
+    draft,
+    setDraft,
+    submitting,
+    error,
+    setError,
+    inputRef,
+    wrapRef,
+    handleCommit,
+    handleClearDraft,
+    handleKeyDown,
+    editing,
+    isEmpty,
+    display,
+    titleText,
+    shownError
+  } = cell;
+  if (!editing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_helpers.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__ */ (0, import_jsx_runtime.jsx)(import_hover_tooltip.HoverTooltip, { content: titleText, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-editable-cell__value", children: display }) }),
+          !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-editable-cell__pencil", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "pencil", size: 16, strokeWidth: 1.75 }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      ref: wrapRef,
+      className: (0, import_helpers.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: display }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-editable-cell__ghost", "aria-hidden": "true", children: draft }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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" ? (0, import_number_input.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__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "uxm-editable-cell__clear",
+            tabIndex: -1,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: handleClearDraft,
+            "aria-label": clearValueLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close", size: 12 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_popover.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__ */ (0, import_jsx_runtime.jsx)(
+              import_banner.Banner,
+              {
+                variant: shownError.severity,
+                id: "uxm-editable-cell__error",
+                className: "uxm-editable-cell__error-banner",
+                children: shownError.message
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditableCellTextView
+});
+//# sourceMappingURL=editable-cell-text.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/editable-cell/editable-cell-text.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Banner } from '../banner';\nimport { HoverTooltip } from '../hover-tooltip';\nimport { Icon } from '../icon';\nimport { maskNumeric } from '../number-input';\nimport { Popover } from '../popover';\n\nimport type { EditableCellViewProps } from './use-editable-cell';\n\n/** `type=\"text\"` / `\"number\"` — a button in display mode, an input in edit mode. */\nexport function EditableCellTextView({ props, cell }: EditableCellViewProps) {\n  const {\n    value,\n    disabled,\n    placeholder,\n    className,\n    style,\n    'aria-label': ariaLabel,\n    type,\n    clearable,\n    align,\n    size,\n    clearValueLabel,\n  } = props;\n  const {\n    setIsEditing,\n    draft,\n    setDraft,\n    submitting,\n    error,\n    setError,\n    inputRef,\n    wrapRef,\n    handleCommit,\n    handleClearDraft,\n    handleKeyDown,\n    editing,\n    isEmpty,\n    display,\n    titleText,\n    shownError,\n  } = cell;\n\n  // Text / number types\n  if (!editing) {\n    return (\n      <button\n        type=\"button\"\n        className={cn(\n          'uxm-editable-cell',\n          `uxm-editable-cell--${size}`,\n          `uxm-editable-cell--align-${align}`,\n          disabled && 'uxm-editable-cell--disabled',\n          isEmpty && 'uxm-editable-cell--empty',\n          className,\n        )}\n        style={style}\n        onClick={() => {\n          if (!disabled) setIsEditing(true);\n        }}\n        disabled={disabled}\n        aria-label={ariaLabel ?? `Edit ${String(value ?? '')}`}\n      >\n        {/* The value needs its own element for ellipsis — text-overflow\n            doesn't apply to a flex container's anonymous text. Values wider\n            than the cell's max-width truncate instead of growing the column\n            unboundedly; the hidden text surfaces in a hover tooltip (only\n            when actually clipped) and stays editable by entering edit mode. */}\n        <HoverTooltip content={titleText} disabled={disabled}>\n          <span className=\"uxm-editable-cell__value\">{display}</span>\n        </HoverTooltip>\n        {/* Hover affordance — a pencil glyph fades in on hover / keyboard\n            focus. The background tint alone can't signal editability inside\n            a DataTable, where the row's own hover tint coincides with it.\n            Absolute overlay in a reserved gutter (see editable-cell.scss) so\n            it never shifts or collides with the value. Hidden when disabled. */}\n        {!disabled && (\n          <span className=\"uxm-editable-cell__pencil\" aria-hidden=\"true\">\n            <Icon glyph=\"pencil\" size={16} strokeWidth={1.75} />\n          </span>\n        )}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      ref={wrapRef}\n      className={cn(\n        'uxm-editable-cell uxm-editable-cell--editing',\n        `uxm-editable-cell--${size}`,\n        `uxm-editable-cell--align-${align}`,\n        clearable && 'uxm-editable-cell--clearable',\n        shownError?.severity === 'error' && 'uxm-editable-cell--error',\n        shownError?.severity === 'warning' && 'uxm-editable-cell--warning',\n        className,\n      )}\n      style={style}\n    >\n      {/* Invisible width-keepers, stacked in the same grid cell as the\n          input. The display content ghost preserves the exact min-content\n          width this cell contributed before entering edit mode — without\n          it, editing the column's WIDEST row would drop its contribution\n          from auto table-column sizing and the column would visibly\n          shrink. The draft ghost grows the cell naturally as the user\n          types past the original width. */}\n      <span className=\"uxm-editable-cell__ghost\" aria-hidden=\"true\">\n        {display}\n      </span>\n      <span className=\"uxm-editable-cell__ghost\" aria-hidden=\"true\">\n        {draft}\n      </span>\n      <input\n        ref={inputRef}\n        // `type=\"text\"` + `inputMode` — the input-family convention (see\n        // NumberInput): native number inputs ship browser spinner UI, trigger\n        // autofill, and disagree across browsers on accepted characters.\n        // `maskNumeric` replaces the native filtering per keystroke (same as\n        // the date editor's `maskDate`); without it, `Number()`'s loose\n        // coercion would let e.g. \"0x1A\" commit as 26.\n        type=\"text\"\n        inputMode={type === 'number' ? 'decimal' : undefined}\n        autoComplete=\"off\"\n        className=\"uxm-editable-cell__input\"\n        value={draft}\n        onChange={(e) => {\n          setDraft(\n            type === 'number'\n              ? maskNumeric(e.target.value, true, true, Number.POSITIVE_INFINITY)\n              : e.target.value,\n          );\n          // Clear stale validation error as the user types — they'll\n          // see a new one on the next commit attempt if it still fails.\n          if (error) setError(null);\n        }}\n        onBlur={() => {\n          // Don't double-commit while a previous commit is still pending.\n          if (!submitting) handleCommit();\n        }}\n        onKeyDown={handleKeyDown}\n        disabled={submitting}\n        placeholder={placeholder}\n        aria-invalid={Boolean(shownError)}\n        aria-describedby={shownError ? 'uxm-editable-cell__error' : undefined}\n      />\n      {/* One-click ✕ (mirrors TextInput/NumberInput): empties the draft and\n          keeps focus; hidden while the draft is already empty. The gutter is\n          reserved via `--clearable` so its appearance never shifts text. */}\n      {clearable && !submitting && draft !== '' && (\n        <button\n          type=\"button\"\n          className=\"uxm-editable-cell__clear\"\n          // Out of the tab order — see the date branch's note: the blur Tab\n          // fires commits and unmounts this button, so leaving it focusable\n          // would strand focus on a removed node instead of advancing to the\n          // next cell.\n          tabIndex={-1}\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={handleClearDraft}\n          aria-label={clearValueLabel}\n        >\n          <Icon glyph=\"close\" size={12} />\n        </button>\n      )}\n      {/* Problems hang under the cell in a portal'd popover so the table\n          row never changes height. The popover must not manage focus —\n          the input keeps it for in-place correction / retry. Escape and\n          outside clicks already have edit-mode semantics (cancel / blur-\n          commit), so the popover's own close triggers are disabled; it\n          opens and closes purely with the error state. */}\n      <Popover\n        open={Boolean(shownError)}\n        onOpenChange={(next) => {\n          if (!next) setError(null);\n        }}\n        anchor={wrapRef}\n        placement=\"bottom-start\"\n        closeOnEscape={false}\n        closeOnOutsideClick={false}\n        restoreFocus={false}\n        role=\"presentation\"\n      >\n        {shownError && (\n          <Banner\n            variant={shownError.severity}\n            id=\"uxm-editable-cell__error\"\n            className=\"uxm-editable-cell__error-banner\"\n          >\n            {shownError.message}\n          </Banner>\n        )}\n      </Popover>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,4 @@
+import type { EditableCellViewProps } from './use-editable-cell.js';
+/** `type="text"` / `"number"` — a button in display mode, an input in edit mode. */
+export declare function EditableCellTextView({ props, cell }: EditableCellViewProps): import("react").JSX.Element;
+//# sourceMappingURL=editable-cell-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editable-cell-text.d.ts","sourceRoot":"","sources":["../../../src/ui/editable-cell/editable-cell-text.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,oFAAoF;AACpF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,qBAAqB,+BAwL1E"}

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

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Banner } from "../banner/index.js";
+import { HoverTooltip } from "../hover-tooltip/index.js";
+import { Icon } from "../icon/index.js";
+import { maskNumeric } from "../number-input/index.js";
+import { Popover } from "../popover/index.js";
+function EditableCellTextView({ props, cell }) {
+  const {
+    value,
+    disabled,
+    placeholder,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    type,
+    clearable,
+    align,
+    size,
+    clearValueLabel
+  } = props;
+  const {
+    setIsEditing,
+    draft,
+    setDraft,
+    submitting,
+    error,
+    setError,
+    inputRef,
+    wrapRef,
+    handleCommit,
+    handleClearDraft,
+    handleKeyDown,
+    editing,
+    isEmpty,
+    display,
+    titleText,
+    shownError
+  } = 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
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableCellTextView
+};
+//# sourceMappingURL=editable-cell-text.js.map