@asteby/metacore-runtime-react 20.1.2 → 20.1.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @asteby/metacore-runtime-react
 
+## 20.1.4
+
+### Patch Changes
+
+- 9e50db5: fix(kanban): cards stretch to fit their content instead of clamping
+
+  The card title and field values were `line-clamp-2` (cut to two lines + ellipsis).
+  Per product feedback the cards should grow DOWNWARD to show their full content and
+  never cut text. Removed the clamps so title and fields wrap fully (`break-words`
+  keeps long tokens from overflowing horizontally) and the card grows as tall as it
+  needs; the column's ScrollArea already scrolls when a lane gets long.
+
+## 20.1.3
+
+### Patch Changes
+
+- 8c6635c: fix(dynamic-table): preserve `view`/`group_by` in the URL when the table syncs its state
+
+  The table's url-sync rebuilt the query string from scratch (only its own
+  page/sort/filter keys) and `replaceState`d it, wiping the route-owned
+  `view`/`group_by` params. On a same-model board↔list pair (e.g. github's Board
+  `?view=kanban` vs Issues `?view=table`) this stripped `?view` on mount, so the
+  URL went bare and the sidebar active-state fell back to the model default —
+  highlighting the wrong sibling until you clicked again. The sync now carries
+  `view`/`group_by` through so the open entry stays highlighted on a single click
+  and `?view` deep-links survive table interaction.
+
 ## 20.1.2
 
 ### Patch Changes

package/dist/dynamic-kanban.js

@@ -333,14 +333,14 @@ function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, curr
         id: String(card.id),
     });
     const visibleActions = actions.filter((a) => isActionAllowedForRowState(a, card));
-    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
+    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
                                         // Don't start a drag / card click from the menu button.
                                         onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: visibleActions.map((a) => (_jsxs(DropdownMenuItem, { onClick: (e) => {
                                             e.stopPropagation();
                                             onAction(a, card);
-                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "line-clamp-2 min-w-0 break-words", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 break-words", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }
 // Static preview rendered inside the DragOverlay (no dnd hooks, no menu).
 function CardPreview({ card, titleCol, fieldCols, locale, timeZone, currency, }) {
-    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "line-clamp-2 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "line-clamp-2 min-w-0 break-words", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 break-words", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAWnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BA24BnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAWnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAw5BnB"}

package/dist/dynamic-table.js

@@ -147,6 +147,20 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         if (!enableUrlSync || !initializedFromUrl.current)
             return;
         const params = new URLSearchParams();
+        // Preserve the route-owned view params. The table rebuilds the query
+        // string from scratch (it only knows its own page/sort/filter keys), but
+        // `view`/`group_by` belong to the renderer choice + the sidebar's
+        // active-state matcher. Carrying them over keeps `?view=table` (vs
+        // `?view=kanban`) in the URL so the open sibling stays highlighted and a
+        // deep-link survives — without this the table wipes `?view` on mount,
+        // the URL goes bare, and the sidebar falls back to the model default
+        // (the "click twice to move the active to the right entry" bug).
+        const current = new URLSearchParams(window.location.search);
+        for (const key of ['view', 'group_by']) {
+            const v = current.get(key);
+            if (v)
+                params.set(key, v);
+        }
         if (pagination.pageIndex > 0)
             params.set('page', String(pagination.pageIndex + 1));
         if (pagination.pageSize !== 10)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "20.1.2",
+  "version": "20.1.4",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.6.2",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.6.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-kanban.tsx

@@ -655,7 +655,7 @@ function KanbanCard({
         >
             <CardContent className="space-y-1.5 p-3">
                 <div className="flex items-start justify-between gap-2">
-                    <div className="line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug">
+                    <div className="min-w-0 flex-1 break-words text-sm font-medium leading-snug">
                         {titleCol ? (
                             <ActivityValueRenderer
                                 value={card[titleCol.key]}
@@ -708,7 +708,7 @@ function KanbanCard({
                         className="flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
-                        <span className="line-clamp-2 min-w-0 break-words">
+                        <span className="min-w-0 break-words">
                             <ActivityValueRenderer
                                 value={card[col.key]}
                                 col={col}
@@ -736,7 +736,7 @@ function CardPreview({
     return (
         <Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
             <CardContent className="space-y-1.5 p-3">
-                <div className="line-clamp-2 break-words text-sm font-medium leading-snug">
+                <div className="break-words text-sm font-medium leading-snug">
                     {titleCol ? (
                         <ActivityValueRenderer
                             value={card[titleCol.key]}
@@ -755,7 +755,7 @@ function CardPreview({
                         className="flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
-                        <span className="line-clamp-2 min-w-0 break-words">
+                        <span className="min-w-0 break-words">
                             <ActivityValueRenderer
                                 value={card[col.key]}
                                 col={col}

package/src/dynamic-table.tsx

@@ -257,6 +257,19 @@ export function DynamicTable({
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current) return
         const params = new URLSearchParams()
+        // Preserve the route-owned view params. The table rebuilds the query
+        // string from scratch (it only knows its own page/sort/filter keys), but
+        // `view`/`group_by` belong to the renderer choice + the sidebar's
+        // active-state matcher. Carrying them over keeps `?view=table` (vs
+        // `?view=kanban`) in the URL so the open sibling stays highlighted and a
+        // deep-link survives — without this the table wipes `?view` on mount,
+        // the URL goes bare, and the sidebar falls back to the model default
+        // (the "click twice to move the active to the right entry" bug).
+        const current = new URLSearchParams(window.location.search)
+        for (const key of ['view', 'group_by']) {
+            const v = current.get(key)
+            if (v) params.set(key, v)
+        }
         if (pagination.pageIndex > 0) params.set('page', String(pagination.pageIndex + 1))
         if (pagination.pageSize !== 10) params.set('per_page', String(pagination.pageSize))
         if (sorting.length > 0) {