twico-ui 1.32.0 → 1.33.0

package/dist/index.d.cts

@@ -2235,6 +2235,24 @@ interface DatatableColumn<T = any> {
   copyType?: string;
   /** Fully custom cell renderer (badges, avatars, etc.). */
   renderCell?: (value: any, row: T) => React.ReactNode;
+  /** #345: per-cell class hook — return a class name applied to the whole cell (`.twc-dt__td`, pinned cells
+   *  included), not just its content. Use for value/row-based tinting (e.g. a "changed" cell) via your own
+   *  stylesheet, without coupling to the internal class name. Because it participates in the CSS cascade, a
+   *  `cellClassName` tint co-exists with the built-in hover/selection/diff backgrounds (a plain class may even
+   *  lose to them by specificity — use a more specific selector, or `cellStyle`, to always win). Prefer this
+   *  over `cellStyle` when those state cues must stay visible on a tinted cell. Called `(value, row)` to match
+   *  `renderCell`/`valueFormatter`. */
+  cellClassName?: (value: any, row: T) => string | undefined;
+  /** #345: per-cell inline-style hook — return a style object applied to the whole cell (`.twc-dt__td`,
+   *  pinned cells included). The simplest way to tint an entire cell from the value/row with no stylesheet.
+   *  Pin positioning **and** stickiness are always preserved (don't set `position`/`inset-*`). Two caveats,
+   *  because an inline style wins over every built-in background: (1) on a **pinned** column the background
+   *  must be **opaque** — a translucent value lets the cells scrolling underneath the sticky cell bleed
+   *  through; composite over the surface, e.g. `color-mix(in srgb, var(--color-danger) 14%, var(--color-surface))`
+   *  rather than `…, transparent`. (2) it also overrides the hover / range-selection / edit-mode / diff
+   *  backgrounds on that cell — use `cellClassName` instead if those cues must remain visible. Called
+   *  `(value, row)` to match `renderCell`/`valueFormatter`. */
+  cellStyle?: (value: any, row: T) => React.CSSProperties | undefined;
   /** Diff-mode (#239) per-column equality override — return true when the two values are equal.
    *  Precedence: column.compare → diff.compare → valueGetter/=== → JSON compare. */
   compare?: (a: any, b: any) => boolean;

package/dist/index.d.ts

@@ -2235,6 +2235,24 @@ interface DatatableColumn<T = any> {
   copyType?: string;
   /** Fully custom cell renderer (badges, avatars, etc.). */
   renderCell?: (value: any, row: T) => React.ReactNode;
+  /** #345: per-cell class hook — return a class name applied to the whole cell (`.twc-dt__td`, pinned cells
+   *  included), not just its content. Use for value/row-based tinting (e.g. a "changed" cell) via your own
+   *  stylesheet, without coupling to the internal class name. Because it participates in the CSS cascade, a
+   *  `cellClassName` tint co-exists with the built-in hover/selection/diff backgrounds (a plain class may even
+   *  lose to them by specificity — use a more specific selector, or `cellStyle`, to always win). Prefer this
+   *  over `cellStyle` when those state cues must stay visible on a tinted cell. Called `(value, row)` to match
+   *  `renderCell`/`valueFormatter`. */
+  cellClassName?: (value: any, row: T) => string | undefined;
+  /** #345: per-cell inline-style hook — return a style object applied to the whole cell (`.twc-dt__td`,
+   *  pinned cells included). The simplest way to tint an entire cell from the value/row with no stylesheet.
+   *  Pin positioning **and** stickiness are always preserved (don't set `position`/`inset-*`). Two caveats,
+   *  because an inline style wins over every built-in background: (1) on a **pinned** column the background
+   *  must be **opaque** — a translucent value lets the cells scrolling underneath the sticky cell bleed
+   *  through; composite over the surface, e.g. `color-mix(in srgb, var(--color-danger) 14%, var(--color-surface))`
+   *  rather than `…, transparent`. (2) it also overrides the hover / range-selection / edit-mode / diff
+   *  backgrounds on that cell — use `cellClassName` instead if those cues must remain visible. Called
+   *  `(value, row)` to match `renderCell`/`valueFormatter`. */
+  cellStyle?: (value: any, row: T) => React.CSSProperties | undefined;
   /** Diff-mode (#239) per-column equality override — return true when the two values are equal.
    *  Precedence: column.compare → diff.compare → valueGetter/=== → JSON compare. */
   compare?: (a: any, b: any) => boolean;

package/dist/index.mjs

@@ -5867,6 +5867,7 @@ function Combobox({
     setQuery("");
   }
   function commit(v) {
+    if (disabled) return;
     const o = flat.find((x) => x.value === v);
     if (o && o.disabled) return;
     if (value === void 0) setInternal(v);
@@ -6043,7 +6044,7 @@ function Combobox({
                 ...rest
               }
             ),
-            clearable && selected && !open ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-cb__clear", "aria-label": "Clear", onClick: (e) => {
+            clearable && selected && !open && !disabled ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-cb__clear", "aria-label": "Clear", onClick: (e) => {
               e.stopPropagation();
               commit(null);
             }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null,
@@ -7333,6 +7334,7 @@ var MULTI_CSS = `
   background: var(--_accent-subtle); color: var(--_accent-subtle-fg);
   border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold);
 }
+.twc-ms__control[data-disabled="true"] .twc-ms__chip { padding-inline-end: 9px; } /* #342: no \u2715 \u2192 symmetric pad */
 .twc-ms__chip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border: none; padding: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--radius-full); opacity: 0.7; }
 .twc-ms__chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
 .twc-ms__chip-x svg { width: 12px; height: 12px; }
@@ -7575,6 +7577,7 @@ function MultiSelect({
     setScrollTop(next);
   }, [active, open, virtualized, rows, listH]);
   function commit(next) {
+    if (disabled) return;
     if (value === void 0) setInternal(next);
     onChange?.(next);
   }
@@ -7731,10 +7734,10 @@ function MultiSelect({
           children: [
             (maxTagCount != null ? selectedOpts.slice(0, maxTagCount) : selectedOpts).map((o) => /* @__PURE__ */ jsxs("span", { className: "twc-ms__chip", children: [
               o.label,
-              /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "twc-ms__chip-x", "aria-label": `Remove ${o.label}`, onClick: (e) => {
+              !disabled ? /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, className: "twc-ms__chip-x", "aria-label": `Remove ${o.label}`, onClick: (e) => {
                 e.stopPropagation();
                 toggle(o.value);
-              }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+              }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
             ] }, o.value)),
             maxTagCount != null && selectedOpts.length > maxTagCount ? /* @__PURE__ */ jsxs("span", { className: "twc-ms__more", title: selectedOpts.slice(maxTagCount).map((o) => o.label).join(", "), children: [
               "+",
@@ -7787,8 +7790,10 @@ function MultiSelect({
                 tabIndex: -1,
                 onClick: (e) => {
                   e.stopPropagation();
-                  setOpen((o) => !o);
-                  inputRef.current?.focus();
+                  if (!disabled) {
+                    setOpen((o) => !o);
+                    inputRef.current?.focus();
+                  }
                 },
                 children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
               }
@@ -10533,6 +10538,7 @@ function Datatable({
     if (el) el.focus();
   }
   function onGridKeyDown(e) {
+    if (e.target.closest("input, textarea, select, [contenteditable='true']")) return;
     if (editing) return;
     const td = e.target.closest(".twc-dt__td[data-r]");
     if (!td) return;
@@ -11492,11 +11498,13 @@ function Datatable({
             const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
             const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
             const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
+            const cellClass = c.cellClassName ? c.cellClassName(val, row) : void 0;
+            const cellSty = c.cellStyle ? c.cellStyle(val, row) : void 0;
             return /* @__PURE__ */ jsxs(
               "td",
               {
                 id: cellId,
-                className: "twc-dt__td",
+                className: cellClass ? `twc-dt__td ${cellClass}` : "twc-dt__td",
                 role: "gridcell",
                 "data-r": ri,
                 "data-c": ci,
@@ -11513,7 +11521,7 @@ function Datatable({
                 "data-wrap": effectiveWrapped.has(c.field) || void 0,
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
-                style: { width: widthOf(c), ...st.style },
+                style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
                 "data-ovtext": cellTitle,
                 onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
                 onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
@@ -15728,6 +15736,7 @@ function FileUpload({
     } else if (accepted.length) set(accepted.slice(0, 1));
   }
   function remove(i) {
+    if (disabled) return;
     set(files.filter((_, idx) => idx !== i));
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-upload ${className}`, "data-size": size, ...rest, children: [
@@ -15798,7 +15807,7 @@ function FileUpload({
         /* @__PURE__ */ jsx("span", { className: "twc-upload__file-name", children: f.name }),
         /* @__PURE__ */ jsx("span", { className: "twc-upload__file-size", children: fmtSize(f.size) })
       ] }),
-      /* @__PURE__ */ jsx("button", { className: "twc-upload__file-x", "aria-label": `Remove ${f.name}`, onClick: () => remove(i), type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+      !disabled ? /* @__PURE__ */ jsx("button", { className: "twc-upload__file-x", "aria-label": `Remove ${f.name}`, onClick: () => remove(i), type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
     ] }, fileKey(f))) }) : null,
     error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : null
   ] });