twico-ui 1.14.0 → 1.14.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.14.1](https://github.com/EncryptionL/twico-ui/compare/v1.14.0...v1.14.1) (2026-07-14)
+
+
+### Bug Fixes
+
+* **styles:** input renders invisibly under React 19 hoist dedup; add Datatable external-search + renderEditCell ([#234](https://github.com/EncryptionL/twico-ui/issues/234), [#235](https://github.com/EncryptionL/twico-ui/issues/235), [#236](https://github.com/EncryptionL/twico-ui/issues/236)) ([f661ea9](https://github.com/EncryptionL/twico-ui/commit/f661ea90dab1bf4b97ee02e8f103fb44ce668f43)), closes [#232](https://github.com/EncryptionL/twico-ui/issues/232)
+
 # [1.14.0](https://github.com/EncryptionL/twico-ui/compare/v1.13.0...v1.14.0) (2026-07-13)
 
 

package/dist/index.cjs

@@ -7091,7 +7091,8 @@ var FIELD_CSS2 = `
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-
+`;
+var INPUT_EXTRA_CSS = `
 .twc-input {
   --_h: var(--control-h-md);
   display: flex; align-items: center; gap: var(--space-2);
@@ -7100,6 +7101,7 @@ var FIELD_CSS2 = `
   background: var(--color-surface);
   border: var(--border-thin) solid var(--color-border);
   border-radius: var(--radius-md);
+  overflow: hidden;
   transition: border-color var(--duration-fast) var(--ease-standard),
               box-shadow var(--duration-fast) var(--ease-standard),
               background-color var(--duration-fast) var(--ease-standard);
@@ -7133,9 +7135,6 @@ var FIELD_CSS2 = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
-`;
-var INPUT_EXTRA_CSS = `
-.twc-input { overflow: hidden; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -8893,6 +8892,9 @@ function Datatable({
   rowGrouping = [],
   rowNumbers = false,
   searchFields = null,
+  searchable = true,
+  quickFilter,
+  onQuickFilterChange,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -8975,7 +8977,13 @@ function Datatable({
     return { left, right };
   });
   const [density, setDensity] = React51__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React51__namespace.default.useState("");
+  const [internalQuick, setInternalQuick] = React51__namespace.default.useState("");
+  const quick = quickFilter !== void 0 ? quickFilter : internalQuick;
+  const commitQuick = (v) => {
+    onQuickFilterChange?.(v);
+    if (quickFilter === void 0) setInternalQuick(v);
+    commitPage(0);
+  };
   const [selected, setSelected] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__namespace.default.useState(null);
   const [activeCell, setActiveCell] = React51__namespace.default.useState(null);
@@ -9855,7 +9863,7 @@ function Datatable({
     setSelected(/* @__PURE__ */ new Set());
   }
   const [editing, setEditing] = React51__namespace.default.useState(null);
-  const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
+  const isColEditable = (c) => c.type !== "actions" && c.editable !== false && (c.editable === true || c.renderEditCell != null || editMode);
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
     setEditing({ key: rowK, field: col.field, value: row[col.field] ?? "" });
@@ -10186,7 +10194,13 @@ function Datatable({
                   !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
                     rowHandle(k, midIdx, row),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val })
-                  ] }) : isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ] }) : isEditing ? c.renderEditCell ? (
+                    // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
+                    // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
+                    // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
+                    // trip the outside-click auto-cancel.
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__editor-wrap", children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
                     EditCell,
                     {
                       col: c,
@@ -10476,13 +10490,10 @@ function Datatable({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
+      searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
-          setQuick(e.target.value);
-          commitPage(0);
-        } })
-      ] })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+      ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__groupbar", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.group }),