twico-ui 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.33.0](https://github.com/EncryptionL/twico-ui/compare/v1.32.1...v1.33.0) (2026-08-11)
+
+
+### Features
+
+* **datatable:** per-cell cellClassName/cellStyle hooks on DatatableColumn ([ac58410](https://github.com/EncryptionL/twico-ui/commit/ac58410109b9a67ed7cb78717a3a98a8b8639cb1)), closes [#242](https://github.com/EncryptionL/twico-ui/issues/242) [#345](https://github.com/EncryptionL/twico-ui/issues/345)
+
+## [1.32.1](https://github.com/EncryptionL/twico-ui/compare/v1.32.0...v1.32.1) (2026-08-11)
+
+
+### Bug Fixes
+
+* **inputs:** suppress clear affordances on disabled controls; ignore datatable keys from editable cells ([e54909f](https://github.com/EncryptionL/twico-ui/commit/e54909fa32fdcb33cbd068b91ddd9f62f098aa08)), closes [#342](https://github.com/EncryptionL/twico-ui/issues/342) [#343](https://github.com/EncryptionL/twico-ui/issues/343) [#342](https://github.com/EncryptionL/twico-ui/issues/342) [#343](https://github.com/EncryptionL/twico-ui/issues/343)
+
 # [1.32.0](https://github.com/EncryptionL/twico-ui/compare/v1.31.1...v1.32.0) (2026-08-06)
 
 

package/dist/index.cjs

@@ -5888,6 +5888,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);
@@ -6064,7 +6065,7 @@ function Combobox({
                 ...rest
               }
             ),
-            clearable && selected && !open ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-cb__clear", "aria-label": "Clear", onClick: (e) => {
+            clearable && selected && !open && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-cb__clear", "aria-label": "Clear", onClick: (e) => {
               e.stopPropagation();
               commit(null);
             }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null,
@@ -7354,6 +7355,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; }
@@ -7596,6 +7598,7 @@ function MultiSelect({
     setScrollTop(next);
   }, [active, open, virtualized, rows, listH]);
   function commit(next) {
+    if (disabled) return;
     if (value === void 0) setInternal(next);
     onChange?.(next);
   }
@@ -7752,10 +7755,10 @@ function MultiSelect({
           children: [
             (maxTagCount != null ? selectedOpts.slice(0, maxTagCount) : selectedOpts).map((o) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-ms__chip", children: [
               o.label,
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", tabIndex: -1, className: "twc-ms__chip-x", "aria-label": `Remove ${o.label}`, onClick: (e) => {
+              !disabled ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+              }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
             ] }, o.value)),
             maxTagCount != null && selectedOpts.length > maxTagCount ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-ms__more", title: selectedOpts.slice(maxTagCount).map((o) => o.label).join(", "), children: [
               "+",
@@ -7808,8 +7811,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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) })
               }
@@ -10554,6 +10559,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;
@@ -11513,11 +11519,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__ */ jsxRuntime.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,
@@ -11534,7 +11542,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 }),
@@ -15749,6 +15757,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__ */ jsxRuntime.jsxs("div", { className: `twc-upload ${className}`, "data-size": size, ...rest, children: [
@@ -15819,7 +15828,7 @@ function FileUpload({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-upload__file-name", children: f.name }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-upload__file-size", children: fmtSize(f.size) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-upload__file-x", "aria-label": `Remove ${f.name}`, onClick: () => remove(i), type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+      !disabled ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-upload__file-x", "aria-label": `Remove ${f.name}`, onClick: () => remove(i), type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
     ] }, fileKey(f))) }) : null,
     error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : null
   ] });