twico-ui 1.12.0 → 1.13.0

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.13.0](https://github.com/EncryptionL/twico-ui/compare/v1.12.0...v1.13.0) (2026-07-13)
+
+
+### Features
+
+* **data-display:** narrow-column sizing + menu gating; fix Move-menu & CardGrid sort clipping ([a4f4937](https://github.com/EncryptionL/twico-ui/commit/a4f4937d00c4c3c9be0b199c8eac98d0d60f5572)), closes [#228](https://github.com/EncryptionL/twico-ui/issues/228) [#226](https://github.com/EncryptionL/twico-ui/issues/226) [#227](https://github.com/EncryptionL/twico-ui/issues/227) [#228](https://github.com/EncryptionL/twico-ui/issues/228)
+
 # [1.12.0](https://github.com/EncryptionL/twico-ui/compare/v1.11.1...v1.12.0) (2026-07-10)
 
 

package/dist/index.cjs

@@ -9024,7 +9024,19 @@ function Datatable({
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
-  const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
+  const AUTO_CHROME = 74;
+  const autoWidth = (c) => {
+    const label = typeof c.headerName === "string" ? c.headerName : String(c.field ?? "");
+    return AUTO_CHROME + Math.ceil(label.length * 8);
+  };
+  const clampWidth = (w, c) => {
+    let x = w;
+    if (typeof c.maxWidth === "number") x = Math.min(x, c.maxWidth);
+    if (typeof c.minWidth === "number") x = Math.max(x, c.minWidth);
+    return Math.max(40, x);
+  };
+  const intrinsicWidth = (c) => c.width === "auto" ? autoWidth(c) : typeof c.width === "number" ? c.width : 160;
+  const widthOf = (c) => clampWidth(widths[c.field] ?? intrinsicWidth(c), c);
   const [colMenu, setColMenu] = React51__namespace.default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
   const [panel, setPanel] = React51__namespace.default.useState(null);
@@ -10612,7 +10624,7 @@ function Datatable({
                           e.preventDefault();
                           e.stopPropagation();
                           const delta = e.key === "ArrowRight" ? 10 : -10;
-                          setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? c.width ?? 160) + delta) }));
+                          setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? intrinsicWidth(c)) + delta) }));
                         },
                         title: "Drag to resize \xB7 double-click to fit content"
                       }
@@ -10855,10 +10867,10 @@ function Datatable({
                 " ",
                 groupBy.includes(c.field) ? "Stop grouping" : "Group by this column"
               ] }) : null,
-              !disableColumnReorder && c.type !== "actions" && !pins.left.includes(c.field) && !pins.right.includes(c.field) ? (() => {
+              !disableColumnReorder && c.reorderable !== false && c.type !== "actions" && !pins.left.includes(c.field) && !pins.right.includes(c.field) && movableMidFields.length > 1 ? (() => {
                 const midIdx = movableMidFields.indexOf(c.field);
-                const atFirst = midIdx <= 0;
-                const atLast = midIdx === -1 || midIdx >= movableMidFields.length - 1;
+                const atFirst = midIdx === 0;
+                const atLast = midIdx === movableMidFields.length - 1;
                 return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", disabled: atFirst, "aria-disabled": atFirst || void 0, onClick: () => {
                     moveCol(c.field, -1);
@@ -10894,7 +10906,7 @@ function Datatable({
                   pins.right.includes(c.field) ? "Unpin" : "Pin to right"
                 ] })
               ] }) : null,
-              c.type !== "actions" ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", "data-active": wrapped.has(c.field) || void 0, onClick: () => {
+              c.type !== "actions" && c.wrappable !== false ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", "data-active": wrapped.has(c.field) || void 0, onClick: () => {
                 toggleWrap(c.field);
                 close();
               }, children: [
@@ -11398,7 +11410,7 @@ var CARDGRID_CSS = `
 .twc-cardgrid__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
 .twc-cardgrid__search { flex: 1 1 200px; min-width: 160px; }
 .twc-cardgrid__spacer { flex: 1 1 auto; }
-.twc-cardgrid__sort { display: inline-flex; align-items: center; gap: var(--space-1); }
+.twc-cardgrid__sort { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }
 .twc-cardgrid__dir { display: inline-grid; place-items: center; width: 32px; height: 32px; border: var(--border-thin) solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
 .twc-cardgrid__dir:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-cardgrid__dir svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
@@ -11446,6 +11458,7 @@ function CardGrid({
   defaultSort = null,
   onSortChange,
   sortOptions,
+  sortMinWidth,
   // slots / states
   toolbar,
   emptyState = "No results.",
@@ -11517,6 +11530,8 @@ function CardGrid({
   const to = paginated ? Math.min((pageVal + 1) * sizeVal, total) : total;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
   const sortSelectOptions = sortOptions ? [{ value: "", label: "Sort by\u2026" }, ...sortOptions.map((o) => ({ value: o.field, label: o.label || o.field }))] : null;
+  const sortAutoWidth = sortSelectOptions ? Math.min(300, Math.max(120, Math.ceil(Math.max(...sortSelectOptions.map((o) => String(o.label).length)) * 7.2) + 46)) : void 0;
+  const sortWidth = sortMinWidth != null ? sortMinWidth : sortAutoWidth;
   const hasToolbar = searchable || sortSelectOptions || toolbar;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-cardgrid ${className}`, id: fieldId, ...rest, children: [
     styles,
@@ -11544,6 +11559,7 @@ function CardGrid({
             value: sortVal?.field || "",
             options: sortSelectOptions,
             placeholder: "Sort by\u2026",
+            style: { minWidth: sortWidth },
             "aria-label": "Sort by",
             onChange: (field) => commitSort(field ? { field, dir: sortVal?.dir || "asc" } : null)
           }