@viax.io/uxm 4.39.0 → 4.40.0

package/dist/ui/editable-cell/editable-cell-text.js.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":"AA+CM,SAuBI,KAvBJ;AA/CN,SAAS,UAAU;AAEnB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAKjB,SAAS,qBAAqB,EAAE,OAAO,KAAK,GAA0B;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,MAAI,CAAC,SAAS;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,IAAI;AAAA,UAC1B,4BAA4B,KAAK;AAAA,UACjC,YAAY;AAAA,UACZ,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,QACA,SAAS,MAAM;AACb,cAAI,CAAC,SAAU,cAAa,IAAI;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,aAAa,QAAQ,OAAO,SAAS,EAAE,CAAC;AAAA,QAOpD;AAAA,8BAAC,gBAAa,SAAS,WAAW,UAChC,8BAAC,UAAK,WAAU,4BAA4B,mBAAQ,GACtD;AAAA,UAMC,CAAC,YACA,oBAAC,UAAK,WAAU,6BAA4B,eAAY,QACtD,8BAAC,QAAK,OAAM,UAAS,MAAM,IAAI,aAAa,MAAM,GACpD;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,IAAI;AAAA,QAC1B,4BAA4B,KAAK;AAAA,QACjC,aAAa;AAAA,QACb,YAAY,aAAa,WAAW;AAAA,QACpC,YAAY,aAAa,aAAa;AAAA,QACtC;AAAA,MACF;AAAA,MACA;AAAA,MASA;AAAA,4BAAC,UAAK,WAAU,4BAA2B,eAAY,QACpD,mBACH;AAAA,QACA,oBAAC,UAAK,WAAU,4BAA2B,eAAY,QACpD,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YAOL,MAAK;AAAA,YACL,WAAW,SAAS,WAAW,YAAY;AAAA,YAC3C,cAAa;AAAA,YACb,WAAU;AAAA,YACV,OAAO;AAAA,YACP,UAAU,CAAC,MAAM;AACf;AAAA,gBACE,SAAS,WACL,YAAY,EAAE,OAAO,OAAO,MAAM,MAAM,OAAO,iBAAiB,IAChE,EAAE,OAAO;AAAA,cACf;AAGA,kBAAI,MAAO,UAAS,IAAI;AAAA,YAC1B;AAAA,YACA,QAAQ,MAAM;AAEZ,kBAAI,CAAC,WAAY,cAAa;AAAA,YAChC;AAAA,YACA,WAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA,gBAAc,QAAQ,UAAU;AAAA,YAChC,oBAAkB,aAAa,6BAA6B;AAAA;AAAA,QAC9D;AAAA,QAIC,aAAa,CAAC,cAAc,UAAU,MACrC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAKV,UAAU;AAAA,YACV,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,YACrC,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI;AAAA;AAAA,QAChC;AAAA,QAQF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,QAAQ,UAAU;AAAA,YACxB,cAAc,CAAC,SAAS;AACtB,kBAAI,CAAC,KAAM,UAAS,IAAI;AAAA,YAC1B;AAAA,YACA,QAAQ;AAAA,YACR,WAAU;AAAA,YACV,eAAe;AAAA,YACf,qBAAqB;AAAA,YACrB,cAAc;AAAA,YACd,MAAK;AAAA,YAEJ,wBACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,WAAW;AAAA,gBACpB,IAAG;AAAA,gBACH,WAAU;AAAA,gBAET,qBAAW;AAAA;AAAA,YACd;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}