@asteby/metacore-runtime-react 20.1.3 → 20.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/dynamic-kanban.d.ts.map +1 -1
- package/dist/dynamic-kanban.js +5 -5
- package/package.json +1 -1
- package/src/dynamic-kanban.tsx +14 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @asteby/metacore-runtime-react
|
|
2
2
|
|
|
3
|
+
## 20.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 5b7fd84: fix(kanban): constrain cards to the lane width so they stop spilling out of the stage
|
|
8
|
+
|
|
9
|
+
The lane used a Radix ScrollArea whose viewport wraps content in a `display:table`
|
|
10
|
+
element that shrink-to-fits the widest card. Once card text wrapped freely (no
|
|
11
|
+
line-clamp) the cards grew to their natural content width and overflowed the
|
|
12
|
+
column. Replaced the ScrollArea with a plain `overflow-y-auto` block and gave the
|
|
13
|
+
card `w-full min-w-0`, so every card fits the lane and its text wraps inside it.
|
|
14
|
+
|
|
15
|
+
## 20.1.4
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 9e50db5: fix(kanban): cards stretch to fit their content instead of clamping
|
|
20
|
+
|
|
21
|
+
The card title and field values were `line-clamp-2` (cut to two lines + ellipsis).
|
|
22
|
+
Per product feedback the cards should grow DOWNWARD to show their full content and
|
|
23
|
+
never cut text. Removed the clamps so title and fields wrap fully (`break-words`
|
|
24
|
+
keeps long tokens from overflowing horizontally) and the card grows as tall as it
|
|
25
|
+
needs; the column's ScrollArea already scrolls when a lane gets long.
|
|
26
|
+
|
|
3
27
|
## 20.1.3
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoC9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AA8BD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAc,EACd,QAAQ,EACR,QAAQ,GACX,EAAE,kBAAkB,qBAmSpB"}
|
package/dist/dynamic-kanban.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
|
|
|
4
4
|
import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, useDraggable, useDroppable, } from '@dnd-kit/core';
|
|
5
5
|
import { MoreHorizontal } from 'lucide-react';
|
|
6
6
|
import { toast } from 'sonner';
|
|
7
|
-
import { Badge, Button, Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
|
|
7
|
+
import { Badge, Button, Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Skeleton, } from '@asteby/metacore-ui/primitives';
|
|
8
8
|
import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib';
|
|
9
9
|
import { useApi } from './api-context';
|
|
10
10
|
import { useMetadataCache } from './metadata-cache';
|
|
@@ -326,21 +326,21 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }) {
|
|
|
326
326
|
opacity: dimmed ? 0.45 : 1,
|
|
327
327
|
outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
|
|
328
328
|
outlineOffset: 2,
|
|
329
|
-
}, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: count })] }), _jsx(
|
|
329
|
+
}, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: count })] }), _jsx("div", { className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: children })] }));
|
|
330
330
|
}
|
|
331
331
|
function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, currency, onClick, onAction, }) {
|
|
332
332
|
const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
|
|
333
333
|
id: String(card.id),
|
|
334
334
|
});
|
|
335
335
|
const visibleActions = actions.filter((a) => isActionAllowedForRowState(a, card));
|
|
336
|
-
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: "
|
|
336
|
+
return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "w-full min-w-0 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",
|
|
337
337
|
// Don't start a drag / card click from the menu button.
|
|
338
338
|
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) => {
|
|
339
339
|
e.stopPropagation();
|
|
340
340
|
onAction(a, card);
|
|
341
|
-
}, 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: "
|
|
341
|
+
}, 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)))] }) }));
|
|
342
342
|
}
|
|
343
343
|
// Static preview rendered inside the DragOverlay (no dnd hooks, no menu).
|
|
344
344
|
function CardPreview({ card, titleCol, fieldCols, locale, timeZone, currency, }) {
|
|
345
|
-
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: "
|
|
345
|
+
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)))] }) }));
|
|
346
346
|
}
|
package/package.json
CHANGED
package/src/dynamic-kanban.tsx
CHANGED
|
@@ -48,7 +48,6 @@ import {
|
|
|
48
48
|
DropdownMenuContent,
|
|
49
49
|
DropdownMenuItem,
|
|
50
50
|
DropdownMenuTrigger,
|
|
51
|
-
ScrollArea,
|
|
52
51
|
Skeleton,
|
|
53
52
|
} from '@asteby/metacore-ui/primitives'
|
|
54
53
|
import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
|
|
@@ -601,9 +600,15 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
|
|
|
601
600
|
{count}
|
|
602
601
|
</span>
|
|
603
602
|
</div>
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
603
|
+
{/* Plain vertical-scroll column, NOT a Radix ScrollArea: the
|
|
604
|
+
ScrollArea viewport wraps its content in a `display:table`
|
|
605
|
+
element that shrink-to-fits the WIDEST card, so once the card
|
|
606
|
+
text wraps freely (no line-clamp) the cards grew past the lane
|
|
607
|
+
and spilled out of the stage. A normal `overflow-y-auto` block
|
|
608
|
+
constrains every card to the lane width so text wraps inside it. */}
|
|
609
|
+
<div className="flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3">
|
|
610
|
+
{children}
|
|
611
|
+
</div>
|
|
607
612
|
</div>
|
|
608
613
|
)
|
|
609
614
|
}
|
|
@@ -648,14 +653,14 @@ function KanbanCard({
|
|
|
648
653
|
ref={setNodeRef}
|
|
649
654
|
{...attributes}
|
|
650
655
|
{...listeners}
|
|
651
|
-
className="cursor-grab active:cursor-grabbing border-border/70 shadow-sm"
|
|
656
|
+
className="w-full min-w-0 cursor-grab active:cursor-grabbing border-border/70 shadow-sm"
|
|
652
657
|
style={{ opacity: isDragging ? 0.4 : 1 }}
|
|
653
658
|
onClick={() => onClick?.(card)}
|
|
654
659
|
data-card-id={String(card.id)}
|
|
655
660
|
>
|
|
656
661
|
<CardContent className="space-y-1.5 p-3">
|
|
657
662
|
<div className="flex items-start justify-between gap-2">
|
|
658
|
-
<div className="
|
|
663
|
+
<div className="min-w-0 flex-1 break-words text-sm font-medium leading-snug">
|
|
659
664
|
{titleCol ? (
|
|
660
665
|
<ActivityValueRenderer
|
|
661
666
|
value={card[titleCol.key]}
|
|
@@ -708,7 +713,7 @@ function KanbanCard({
|
|
|
708
713
|
className="flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground"
|
|
709
714
|
>
|
|
710
715
|
<span className="shrink-0 opacity-70">{col.label}:</span>
|
|
711
|
-
<span className="
|
|
716
|
+
<span className="min-w-0 break-words">
|
|
712
717
|
<ActivityValueRenderer
|
|
713
718
|
value={card[col.key]}
|
|
714
719
|
col={col}
|
|
@@ -736,7 +741,7 @@ function CardPreview({
|
|
|
736
741
|
return (
|
|
737
742
|
<Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
|
|
738
743
|
<CardContent className="space-y-1.5 p-3">
|
|
739
|
-
<div className="
|
|
744
|
+
<div className="break-words text-sm font-medium leading-snug">
|
|
740
745
|
{titleCol ? (
|
|
741
746
|
<ActivityValueRenderer
|
|
742
747
|
value={card[titleCol.key]}
|
|
@@ -755,7 +760,7 @@ function CardPreview({
|
|
|
755
760
|
className="flex min-w-0 items-start gap-1.5 text-xs text-muted-foreground"
|
|
756
761
|
>
|
|
757
762
|
<span className="shrink-0 opacity-70">{col.label}:</span>
|
|
758
|
-
<span className="
|
|
763
|
+
<span className="min-w-0 break-words">
|
|
759
764
|
<ActivityValueRenderer
|
|
760
765
|
value={card[col.key]}
|
|
761
766
|
col={col}
|