@cellarnode/ui 0.19.1 → 0.20.1
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/dist/chat/chat-ws.d.ts +56 -0
- package/dist/chat/chat-ws.d.ts.map +1 -1
- package/dist/chat/chat-ws.js +103 -0
- package/dist/chat/chat-ws.js.map +1 -1
- package/dist/chat/index.d.ts +1 -1
- package/dist/chat/index.d.ts.map +1 -1
- package/dist/components/journey-card.d.ts +9 -1
- package/dist/components/journey-card.d.ts.map +1 -1
- package/dist/components/journey-card.js +13 -6
- package/dist/components/journey-card.js.map +1 -1
- package/dist/components/journey-card.stories.d.ts +2 -0
- package/dist/components/journey-card.stories.d.ts.map +1 -1
- package/dist/components/journey-card.stories.js +43 -0
- package/dist/components/journey-card.stories.js.map +1 -1
- package/dist/components/sortable-card-context.d.ts +18 -0
- package/dist/components/sortable-card-context.d.ts.map +1 -0
- package/dist/components/sortable-card-context.js +18 -0
- package/dist/components/sortable-card-context.js.map +1 -0
- package/dist/components/sortable-card-shell.d.ts +40 -21
- package/dist/components/sortable-card-shell.d.ts.map +1 -1
- package/dist/components/sortable-card-shell.js +46 -39
- package/dist/components/sortable-card-shell.js.map +1 -1
- package/dist/components/sortable-card-shell.stories.d.ts +1 -1
- package/dist/components/sortable-card-shell.stories.d.ts.map +1 -1
- package/dist/components/sortable-card-shell.stories.js +28 -15
- package/dist/components/sortable-card-shell.stories.js.map +1 -1
- package/dist/components/sortable-card-shell.test.js +57 -16
- package/dist/components/sortable-card-shell.test.js.map +1 -1
- package/dist/offer/attachments-card.d.ts +7 -1
- package/dist/offer/attachments-card.d.ts.map +1 -1
- package/dist/offer/attachments-card.js +3 -3
- package/dist/offer/attachments-card.js.map +1 -1
- package/dist/offer/index.d.ts +1 -1
- package/dist/offer/index.d.ts.map +1 -1
- package/dist/offer/negotiation-section.d.ts +9 -1
- package/dist/offer/negotiation-section.d.ts.map +1 -1
- package/dist/offer/negotiation-section.js +2 -2
- package/dist/offer/negotiation-section.js.map +1 -1
- package/dist/offer/offer-document.d.ts +24 -24
- package/dist/offer/offer-document.d.ts.map +1 -1
- package/dist/offer/offer-document.js +269 -49
- package/dist/offer/offer-document.js.map +1 -1
- package/dist/offer/offer-document.stories.d.ts +11 -0
- package/dist/offer/offer-document.stories.d.ts.map +1 -1
- package/dist/offer/offer-document.stories.js +136 -84
- package/dist/offer/offer-document.stories.js.map +1 -1
- package/dist/offer/types.d.ts +81 -0
- package/dist/offer/types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,32 +1,43 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* SortableCardShell —
|
|
2
|
+
* SortableCardShell — whole-card drag wrapper.
|
|
3
3
|
*
|
|
4
|
-
* Journey/kanban
|
|
5
|
-
* 1. The whole card is the drag activation surface
|
|
6
|
-
* 2.
|
|
7
|
-
*
|
|
8
|
-
* they must NOT start a drag.
|
|
9
|
-
*
|
|
10
|
-
* This shell wraps children in a div whose ref is dnd-kit's activation region.
|
|
11
|
-
* The grip icon is purely visual (`pointer-events-none` + `aria-hidden`) and
|
|
12
|
-
* is NOT used as the drag handle — it's an affordance hint only.
|
|
4
|
+
* Journey/kanban cards want two things:
|
|
5
|
+
* 1. The whole card is the drag activation surface.
|
|
6
|
+
* 2. Clicks on `<button>`/`<a>`/menus/etc. inside the card must still
|
|
7
|
+
* work — they must NOT start a drag.
|
|
13
8
|
*
|
|
14
9
|
* To keep clicks on interactive descendants from activating a drag, we
|
|
15
10
|
* configure `PointerSensor` per-draggable with a `preventActivation` hook
|
|
16
|
-
* that inspects the pointer target with `Element.closest(...)`. Any
|
|
17
|
-
* matching a known interactive selector — or carrying a
|
|
18
|
-
* attribute — cancels activation before the drag starts.
|
|
11
|
+
* that inspects the pointer target with `Element.closest(...)`. Any
|
|
12
|
+
* element matching a known interactive selector — or carrying a
|
|
13
|
+
* `data-no-drag` attribute — cancels activation before the drag starts.
|
|
14
|
+
*
|
|
15
|
+
* This shell does NOT render a grip affordance. Consumers that want one
|
|
16
|
+
* (e.g. JourneyCard) can read the exported `SortableCardContext` to
|
|
17
|
+
* detect they are inside a drag shell and render their own grip in a
|
|
18
|
+
* layout-appropriate position.
|
|
19
19
|
*
|
|
20
20
|
* Requires the optional peer dependencies `@dnd-kit/react` and `@dnd-kit/dom`.
|
|
21
21
|
* Not exported from the main barrel — import directly from
|
|
22
22
|
* `@cellarnode/ui/sortable-card-shell`.
|
|
23
23
|
*/
|
|
24
24
|
import { type ReactNode } from "react";
|
|
25
|
+
import { SortableCardContext, type SortableCardContextValue } from "./sortable-card-context";
|
|
26
|
+
export { SortableCardContext };
|
|
27
|
+
export type { SortableCardContextValue };
|
|
25
28
|
/**
|
|
26
29
|
* CSS selector for elements inside a draggable card that should NOT
|
|
27
30
|
* activate a drag when clicked. Consumers can opt any element out by
|
|
28
31
|
* adding the `data-no-drag` attribute.
|
|
29
32
|
*
|
|
33
|
+
* Notable exclusion: `[role='button']` and `[role='link']` are NOT in
|
|
34
|
+
* this list. JourneyCard (and similar card wrappers) set `role='button'`
|
|
35
|
+
* on their root div for keyboard a11y. If we matched those, `closest()`
|
|
36
|
+
* would resolve to the card wrapper itself and drag would never activate.
|
|
37
|
+
* `@dnd-kit/dom`'s own activation constraints (5px distance, 200ms delay)
|
|
38
|
+
* already prevent tap-clicks from starting accidental drags, so dropping
|
|
39
|
+
* these roles is safe.
|
|
40
|
+
*
|
|
30
41
|
* Exported so consumers can extend or reuse it in custom sensor configs.
|
|
31
42
|
*/
|
|
32
43
|
export declare const SORTABLE_CARD_NO_DRAG_SELECTOR: string;
|
|
@@ -47,14 +58,20 @@ interface SortableCardShellCommonProps {
|
|
|
47
58
|
isShaking?: boolean;
|
|
48
59
|
/** Extra classes for the wrapper element. */
|
|
49
60
|
className?: string;
|
|
50
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* @deprecated The shell no longer renders a grip. Card components
|
|
63
|
+
* render their own grip internally (see `JourneyCard`). Retained as
|
|
64
|
+
* a no-op for backwards compatibility with older consumer code.
|
|
65
|
+
*/
|
|
51
66
|
gripClassName?: string;
|
|
52
|
-
/**
|
|
67
|
+
/**
|
|
68
|
+
* @deprecated The shell no longer renders a grip. Card components
|
|
69
|
+
* render their own grip internally. No-op.
|
|
70
|
+
*/
|
|
53
71
|
hideGrip?: boolean;
|
|
54
72
|
/**
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* `pointer-events-none`). Defaults to "Drag to reorder".
|
|
73
|
+
* @deprecated The shell no longer renders a grip. Card components
|
|
74
|
+
* render their own grip internally. No-op.
|
|
58
75
|
*/
|
|
59
76
|
gripTitle?: string;
|
|
60
77
|
children: ReactNode;
|
|
@@ -86,13 +103,15 @@ interface SortableCardShellDraggableProps {
|
|
|
86
103
|
*/
|
|
87
104
|
export type SortableCardShellProps = SortableCardShellCommonProps & (SortableCardShellSortableProps | SortableCardShellDraggableProps);
|
|
88
105
|
/**
|
|
89
|
-
*
|
|
106
|
+
* Whole-card drag wrapper used by producer + importer journey boards.
|
|
90
107
|
*
|
|
91
|
-
* Visual states:
|
|
108
|
+
* Visual states applied to the wrapper:
|
|
92
109
|
* - `isDragSource` / `isDragging`: wrapper dims to `opacity-40`.
|
|
93
110
|
* - `isDropTarget` (sortable only): 2px primary line above the card.
|
|
94
111
|
* - `isShaking`: applies `card-shake` class (consumer-defined keyframes).
|
|
112
|
+
*
|
|
113
|
+
* The shell exposes `SortableCardContext` so children can render their
|
|
114
|
+
* own drag affordance (e.g. a grip icon in `JourneyCard`).
|
|
95
115
|
*/
|
|
96
116
|
export declare function SortableCardShell(props: SortableCardShellProps): import("react/jsx-runtime").JSX.Element;
|
|
97
|
-
export {};
|
|
98
117
|
//# sourceMappingURL=sortable-card-shell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-card-shell.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAI1D,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC9B,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,wBAAwB,EAAE,CAAC;AAIzC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,8BAA8B,QAsB9B,CAAC;AAcd,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,WAAW,CAAC;AAE7D;;GAEG;AACH,UAAU,4BAA4B;IACpC,qDAAqD;IACrD,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,UAAU,8BAA8B;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,UAAU,+BAA+B;IACvC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,4BAA4B,GAC/D,CAAC,8BAA8B,GAAG,+BAA+B,CAAC,CAAC;AAIrE;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAsD9D"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
|
-
* SortableCardShell —
|
|
3
|
+
* SortableCardShell — whole-card drag wrapper.
|
|
4
4
|
*
|
|
5
|
-
* Journey/kanban
|
|
6
|
-
* 1. The whole card is the drag activation surface
|
|
7
|
-
* 2.
|
|
8
|
-
*
|
|
9
|
-
* they must NOT start a drag.
|
|
10
|
-
*
|
|
11
|
-
* This shell wraps children in a div whose ref is dnd-kit's activation region.
|
|
12
|
-
* The grip icon is purely visual (`pointer-events-none` + `aria-hidden`) and
|
|
13
|
-
* is NOT used as the drag handle — it's an affordance hint only.
|
|
5
|
+
* Journey/kanban cards want two things:
|
|
6
|
+
* 1. The whole card is the drag activation surface.
|
|
7
|
+
* 2. Clicks on `<button>`/`<a>`/menus/etc. inside the card must still
|
|
8
|
+
* work — they must NOT start a drag.
|
|
14
9
|
*
|
|
15
10
|
* To keep clicks on interactive descendants from activating a drag, we
|
|
16
11
|
* configure `PointerSensor` per-draggable with a `preventActivation` hook
|
|
17
|
-
* that inspects the pointer target with `Element.closest(...)`. Any
|
|
18
|
-
* matching a known interactive selector — or carrying a
|
|
19
|
-
* attribute — cancels activation before the drag starts.
|
|
12
|
+
* that inspects the pointer target with `Element.closest(...)`. Any
|
|
13
|
+
* element matching a known interactive selector — or carrying a
|
|
14
|
+
* `data-no-drag` attribute — cancels activation before the drag starts.
|
|
15
|
+
*
|
|
16
|
+
* This shell does NOT render a grip affordance. Consumers that want one
|
|
17
|
+
* (e.g. JourneyCard) can read the exported `SortableCardContext` to
|
|
18
|
+
* detect they are inside a drag shell and render their own grip in a
|
|
19
|
+
* layout-appropriate position.
|
|
20
20
|
*
|
|
21
21
|
* Requires the optional peer dependencies `@dnd-kit/react` and `@dnd-kit/dom`.
|
|
22
22
|
* Not exported from the main barrel — import directly from
|
|
@@ -24,15 +24,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
24
24
|
*/
|
|
25
25
|
import { useMemo } from "react";
|
|
26
26
|
import { PointerSensor } from "@dnd-kit/dom";
|
|
27
|
-
import { GripVertical } from "lucide-react";
|
|
28
27
|
import { cn } from "../lib/utils";
|
|
29
28
|
import { useDraggableCard, useSortableCard } from "../hooks/use-kanban-dnd";
|
|
29
|
+
import { SortableCardContext, } from "./sortable-card-context";
|
|
30
|
+
// Re-export for backwards compatibility: consumers that imported the
|
|
31
|
+
// context + type from `./sortable-card-shell` should keep working without
|
|
32
|
+
// changes. New code should import directly from `./sortable-card-context`
|
|
33
|
+
// to avoid pulling in `@dnd-kit/dom` at module load.
|
|
34
|
+
export { SortableCardContext };
|
|
30
35
|
// ─── Interactive-element guard ──────────────────────────────────────────────
|
|
31
36
|
/**
|
|
32
37
|
* CSS selector for elements inside a draggable card that should NOT
|
|
33
38
|
* activate a drag when clicked. Consumers can opt any element out by
|
|
34
39
|
* adding the `data-no-drag` attribute.
|
|
35
40
|
*
|
|
41
|
+
* Notable exclusion: `[role='button']` and `[role='link']` are NOT in
|
|
42
|
+
* this list. JourneyCard (and similar card wrappers) set `role='button'`
|
|
43
|
+
* on their root div for keyboard a11y. If we matched those, `closest()`
|
|
44
|
+
* would resolve to the card wrapper itself and drag would never activate.
|
|
45
|
+
* `@dnd-kit/dom`'s own activation constraints (5px distance, 200ms delay)
|
|
46
|
+
* already prevent tap-clicks from starting accidental drags, so dropping
|
|
47
|
+
* these roles is safe.
|
|
48
|
+
*
|
|
36
49
|
* Exported so consumers can extend or reuse it in custom sensor configs.
|
|
37
50
|
*/
|
|
38
51
|
export const SORTABLE_CARD_NO_DRAG_SELECTOR = [
|
|
@@ -44,8 +57,6 @@ export const SORTABLE_CARD_NO_DRAG_SELECTOR = [
|
|
|
44
57
|
"select",
|
|
45
58
|
"label",
|
|
46
59
|
"summary",
|
|
47
|
-
"[role='button']",
|
|
48
|
-
"[role='link']",
|
|
49
60
|
"[role='menuitem']",
|
|
50
61
|
"[role='menu']",
|
|
51
62
|
"[role='menubar']",
|
|
@@ -71,15 +82,18 @@ function shouldPreventDragActivation(event) {
|
|
|
71
82
|
}
|
|
72
83
|
// ─── Component ──────────────────────────────────────────────────────────────
|
|
73
84
|
/**
|
|
74
|
-
*
|
|
85
|
+
* Whole-card drag wrapper used by producer + importer journey boards.
|
|
75
86
|
*
|
|
76
|
-
* Visual states:
|
|
87
|
+
* Visual states applied to the wrapper:
|
|
77
88
|
* - `isDragSource` / `isDragging`: wrapper dims to `opacity-40`.
|
|
78
89
|
* - `isDropTarget` (sortable only): 2px primary line above the card.
|
|
79
90
|
* - `isShaking`: applies `card-shake` class (consumer-defined keyframes).
|
|
91
|
+
*
|
|
92
|
+
* The shell exposes `SortableCardContext` so children can render their
|
|
93
|
+
* own drag affordance (e.g. a grip icon in `JourneyCard`).
|
|
80
94
|
*/
|
|
81
95
|
export function SortableCardShell(props) {
|
|
82
|
-
const { id, data, disabled, isShaking, className,
|
|
96
|
+
const { id, data, disabled, isShaking, className, children } = props;
|
|
83
97
|
// Per-draggable PointerSensor with an interactive-element guard. Stable
|
|
84
98
|
// across renders — the sensor constructor doesn't depend on props.
|
|
85
99
|
const sensors = useMemo(() => [
|
|
@@ -87,14 +101,15 @@ export function SortableCardShell(props) {
|
|
|
87
101
|
preventActivation: (event) => shouldPreventDragActivation(event),
|
|
88
102
|
}),
|
|
89
103
|
], []);
|
|
104
|
+
const contextValue = useMemo(() => ({ isDraggable: !disabled }), [disabled]);
|
|
90
105
|
if (props.mode === "draggable") {
|
|
91
|
-
return (_jsx(DraggableShell, { id: id, data: data, disabled: disabled, isShaking: isShaking, className: className,
|
|
106
|
+
return (_jsx(SortableCardContext, { value: contextValue, children: _jsx(DraggableShell, { id: id, data: data, disabled: disabled, isShaking: isShaking, className: className, sensors: sensors, children: children }) }));
|
|
92
107
|
}
|
|
93
|
-
// Sortable mode (default). TS narrows `props` so `index` and `group`
|
|
94
|
-
// guaranteed to be `number` + `string` — no casts needed.
|
|
95
|
-
return (_jsx(SortableShell, { id: id, index: props.index, group: props.group, data: data, disabled: disabled, isShaking: isShaking, className: className,
|
|
108
|
+
// Sortable mode (default). TS narrows `props` so `index` and `group`
|
|
109
|
+
// are guaranteed to be `number` + `string` — no casts needed.
|
|
110
|
+
return (_jsx(SortableCardContext, { value: contextValue, children: _jsx(SortableShell, { id: id, index: props.index, group: props.group, data: data, disabled: disabled, isShaking: isShaking, className: className, sensors: sensors, children: children }) }));
|
|
96
111
|
}
|
|
97
|
-
function SortableShell({ id, index, group, data, disabled, isShaking, className,
|
|
112
|
+
function SortableShell({ id, index, group, data, disabled, isShaking, className, sensors, children, }) {
|
|
98
113
|
const { ref, isDragSource, isDropTarget } = useSortableCard({
|
|
99
114
|
id,
|
|
100
115
|
index,
|
|
@@ -103,32 +118,24 @@ function SortableShell({ id, index, group, data, disabled, isShaking, className,
|
|
|
103
118
|
disabled,
|
|
104
119
|
sensors,
|
|
105
120
|
});
|
|
106
|
-
return (_jsx(Wrapper, { innerRef: ref, isDragSource: isDragSource, isDropTarget: isDropTarget, showDropTargetLine: true, isShaking: isShaking, className: className,
|
|
121
|
+
return (_jsx(Wrapper, { innerRef: ref, isDragSource: isDragSource, isDropTarget: isDropTarget, showDropTargetLine: true, isShaking: isShaking, className: className, children: children }));
|
|
107
122
|
}
|
|
108
|
-
function DraggableShell({ id, data, disabled, isShaking, className,
|
|
123
|
+
function DraggableShell({ id, data, disabled, isShaking, className, sensors, children, }) {
|
|
109
124
|
const { ref, isDragging } = useDraggableCard({
|
|
110
125
|
id,
|
|
111
126
|
data,
|
|
112
127
|
disabled,
|
|
113
128
|
sensors,
|
|
114
129
|
});
|
|
115
|
-
return (_jsx(Wrapper, { innerRef: ref, isDragSource: isDragging, isDropTarget: false, showDropTargetLine: false, isShaking: isShaking, className: className,
|
|
130
|
+
return (_jsx(Wrapper, { innerRef: ref, isDragSource: isDragging, isDropTarget: false, showDropTargetLine: false, isShaking: isShaking, className: className, children: children }));
|
|
116
131
|
}
|
|
117
|
-
function Wrapper({ innerRef, isDragSource, isDropTarget, showDropTargetLine, isShaking, className,
|
|
118
|
-
return (
|
|
119
|
-
// No ARIA role — let the consumer's card content own semantics.
|
|
120
|
-
className: cn("relative group flex cursor-grab select-none items-stretch gap-1 transition-all hover:z-10 has-[[data-open]]:z-50 active:cursor-grabbing",
|
|
132
|
+
function Wrapper({ innerRef, isDragSource, isDropTarget, showDropTargetLine, isShaking, className, children, }) {
|
|
133
|
+
return (_jsx("div", { ref: innerRef, className: cn("relative cursor-grab select-none transition-all hover:z-10 has-[[data-open]]:z-50 active:cursor-grabbing",
|
|
121
134
|
// Unified drag-source dim (producer used 30, importer 50, standardizing on 40)
|
|
122
135
|
isDragSource && "opacity-40",
|
|
123
136
|
// Drop-target insertion line (sortable only)
|
|
124
137
|
showDropTargetLine &&
|
|
125
138
|
isDropTarget &&
|
|
126
|
-
"before:absolute before:-top-1 before:left-0 before:right-0 before:h-0.5 before:rounded-full before:bg-primary", isShaking && "card-shake", className), "data-drag-source": isDragSource ? "true" : undefined, "data-drop-target": isDropTarget ? "true" : undefined, children:
|
|
127
|
-
// Pointer-events off — grip is purely visual. The wrapper is the
|
|
128
|
-
// drag activation surface.
|
|
129
|
-
"pointer-events-none flex shrink-0 items-center justify-center p-1 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-60",
|
|
130
|
-
// While dragging, keep the grip visible (parent wrapper already
|
|
131
|
-
// dims to 40%, so this gives a ~40% grip which reads correctly).
|
|
132
|
-
isDragSource && "opacity-100", gripClassName), children: _jsx(GripVertical, { className: "size-3.5" }) })) : null, _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
|
|
139
|
+
"before:absolute before:-top-1 before:left-0 before:right-0 before:h-0.5 before:rounded-full before:bg-primary", isShaking && "card-shake", className), "data-drag-source": isDragSource ? "true" : undefined, "data-drop-target": isDropTarget ? "true" : undefined, children: children }));
|
|
133
140
|
}
|
|
134
141
|
//# sourceMappingURL=sortable-card-shell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-card-shell.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,OAAO,EAA4B,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,8 +6,8 @@ type Story = StoryObj<SortableCardShellProps>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const Draggable: Story;
|
|
8
8
|
export declare const Shaking: Story;
|
|
9
|
-
export declare const HideGrip: Story;
|
|
10
9
|
export declare const DraggingVisual: Story;
|
|
11
10
|
export declare const DropTargetVisual: Story;
|
|
12
11
|
export declare const WithInteractiveButtons: Story;
|
|
12
|
+
export declare const WithRoleButtonWrapper: Story;
|
|
13
13
|
//# sourceMappingURL=sortable-card-shell.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-card-shell.stories.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.stories.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAiCtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,KAAK,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAe9C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAOF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAqDpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAkCnC,CAAC"}
|
|
@@ -5,7 +5,14 @@ const meta = {
|
|
|
5
5
|
title: "Components/SortableCardShell",
|
|
6
6
|
component: SortableCardShell,
|
|
7
7
|
tags: ["autodocs"],
|
|
8
|
-
parameters: {
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: "centered",
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component: "Whole-card drag wrapper. The shell no longer renders a grip affordance — cards (e.g. `JourneyCard`) render their own grip internally via the exported `SortableCardContext`. The shell is responsible for drag sensor wiring, the interactive-element guard (click-through), and drag-source / drop-target visual states.",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
},
|
|
9
16
|
argTypes: {
|
|
10
17
|
mode: {
|
|
11
18
|
control: { type: "inline-radio" },
|
|
@@ -16,7 +23,6 @@ const meta = {
|
|
|
16
23
|
group: { control: { type: "text" } },
|
|
17
24
|
disabled: { control: { type: "boolean" } },
|
|
18
25
|
isShaking: { control: { type: "boolean" } },
|
|
19
|
-
hideGrip: { control: { type: "boolean" } },
|
|
20
26
|
},
|
|
21
27
|
decorators: [
|
|
22
28
|
(Story) => (_jsx(DragDropProvider, { children: _jsx("div", { style: { width: 320 }, children: _jsx(Story, {}) }) })),
|
|
@@ -55,28 +61,17 @@ export const Shaking = {
|
|
|
55
61
|
children: _jsx(SampleCardBody, {}),
|
|
56
62
|
},
|
|
57
63
|
};
|
|
58
|
-
export const HideGrip = {
|
|
59
|
-
args: {
|
|
60
|
-
id: "card-4",
|
|
61
|
-
index: 0,
|
|
62
|
-
group: "drafting",
|
|
63
|
-
data: { itemId: "card-4", columnId: "drafting" },
|
|
64
|
-
mode: "sortable",
|
|
65
|
-
hideGrip: true,
|
|
66
|
-
children: _jsx(SampleCardBody, {}),
|
|
67
|
-
},
|
|
68
|
-
};
|
|
69
64
|
// Visual mock — these states are normally driven by live drag events, so
|
|
70
65
|
// for Storybook we demo them via the inline layout classes directly on a
|
|
71
66
|
// static wrapper. They match what `SortableCardShell` renders under
|
|
72
67
|
// `isDragSource` and `isDropTarget`.
|
|
73
68
|
export const DraggingVisual = {
|
|
74
69
|
name: "Visual: Dragging source",
|
|
75
|
-
render: () => (
|
|
70
|
+
render: () => (_jsx("div", { className: "relative cursor-grab opacity-40", children: _jsx(SampleCardBody, {}) })),
|
|
76
71
|
};
|
|
77
72
|
export const DropTargetVisual = {
|
|
78
73
|
name: "Visual: Drop target insertion line",
|
|
79
|
-
render: () => (
|
|
74
|
+
render: () => (_jsx("div", { className: "relative cursor-grab before:absolute before:-top-1 before:left-0 before:right-0 before:h-0.5 before:rounded-full before:bg-primary", children: _jsx(SampleCardBody, {}) })),
|
|
80
75
|
};
|
|
81
76
|
export const WithInteractiveButtons = {
|
|
82
77
|
args: {
|
|
@@ -91,4 +86,22 @@ export const WithInteractiveButtons = {
|
|
|
91
86
|
}, className: "rounded border border-border px-2 py-1 text-xs", children: "View" }), _jsx("span", { "data-no-drag": true, onClick: () => alert("data-no-drag element clicked"), className: "cursor-default rounded border border-dashed border-border px-2 py-1 text-xs", children: "data-no-drag" })] })] })),
|
|
92
87
|
},
|
|
93
88
|
};
|
|
89
|
+
export const WithRoleButtonWrapper = {
|
|
90
|
+
name: "Regression: role='button' wrapper must drag",
|
|
91
|
+
args: {
|
|
92
|
+
id: "card-role-btn",
|
|
93
|
+
index: 0,
|
|
94
|
+
group: "drafting",
|
|
95
|
+
data: { itemId: "card-role-btn", columnId: "drafting" },
|
|
96
|
+
mode: "sortable",
|
|
97
|
+
children: (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => alert("card clicked"), className: "rounded-lg border border-border bg-background p-3 shadow-xs", children: [_jsx("p", { className: "text-sm/5 font-medium text-foreground", children: "Clickable card (role=button)" }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["This card's root div has role=\"button\". The whole card should still be draggable \u2014 if it isn't, the no-drag selector regressed by reintroducing ", _jsx("code", { children: "[role='button']" }), "."] })] })),
|
|
98
|
+
},
|
|
99
|
+
parameters: {
|
|
100
|
+
docs: {
|
|
101
|
+
description: {
|
|
102
|
+
story: "JourneyCard sets `role='button'` on its root when `onClick` is provided. The interactive-element guard MUST exclude `[role='button']` (and `[role='link']`) or drag activation is blocked by the card wrapper itself.",
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
};
|
|
94
107
|
//# sourceMappingURL=sortable-card-shell.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-card-shell.stories.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAA+B,MAAM,uBAAuB,CAAC;AAEvF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.stories.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { describe, it, expect, beforeAll } from "vitest";
|
|
3
3
|
import { render, screen } from "@testing-library/react";
|
|
4
|
+
import * as React from "react";
|
|
4
5
|
// @dnd-kit/dom touches `ResizeObserver` at module load time; jsdom does not
|
|
5
6
|
// provide one. Install a no-op polyfill BEFORE importing @dnd-kit/react or
|
|
6
7
|
// the shell (which transitively imports @dnd-kit/dom).
|
|
@@ -15,7 +16,7 @@ if (typeof globalThis.ResizeObserver === "undefined") {
|
|
|
15
16
|
}
|
|
16
17
|
// Imports deferred to after the polyfill so module-level access succeeds.
|
|
17
18
|
const { DragDropProvider } = await import("@dnd-kit/react");
|
|
18
|
-
const { SortableCardShell, SORTABLE_CARD_NO_DRAG_SELECTOR } = await import("./sortable-card-shell");
|
|
19
|
+
const { SortableCardShell, SortableCardContext, SORTABLE_CARD_NO_DRAG_SELECTOR } = await import("./sortable-card-shell");
|
|
19
20
|
beforeAll(() => {
|
|
20
21
|
// Sanity check — confirm the polyfill stuck.
|
|
21
22
|
expect(typeof globalThis.ResizeObserver).toBe("function");
|
|
@@ -39,6 +40,16 @@ beforeAll(() => {
|
|
|
39
40
|
function renderWithProvider(ui) {
|
|
40
41
|
return render(_jsx(DragDropProvider, { children: ui }));
|
|
41
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Test helper: reads `SortableCardContext` and renders "yes"/"no" based on
|
|
45
|
+
* `isDraggable`. Kept at module level so eslint's
|
|
46
|
+
* `@eslint-react/component-hook-factories` stays happy (components must not
|
|
47
|
+
* be defined inside other functions).
|
|
48
|
+
*/
|
|
49
|
+
function ContextProbe() {
|
|
50
|
+
const ctx = React.use(SortableCardContext);
|
|
51
|
+
return _jsx("span", { "data-testid": "probe", children: ctx.isDraggable ? "yes" : "no" });
|
|
52
|
+
}
|
|
42
53
|
describe("SortableCardShell", () => {
|
|
43
54
|
it("renders children (smoke test, sortable mode)", () => {
|
|
44
55
|
renderWithProvider(_jsx(SortableCardShell, { id: "card-1", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "card-body", children: "Ch\u00E2teau Margaux" }) }));
|
|
@@ -49,21 +60,24 @@ describe("SortableCardShell", () => {
|
|
|
49
60
|
renderWithProvider(_jsx(SortableCardShell, { id: "card-2", mode: "draggable", children: _jsx("div", { "data-testid": "card-body", children: "P\u00E9trus 2015" }) }));
|
|
50
61
|
expect(screen.getByTestId("card-body")).toBeInTheDocument();
|
|
51
62
|
});
|
|
52
|
-
it("
|
|
53
|
-
|
|
54
|
-
//
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
expect(grip?.className).toContain("pointer-events-none");
|
|
62
|
-
// lucide-react renders an inline SVG inside the grip.
|
|
63
|
-
expect(grip?.querySelector("svg")).not.toBeNull();
|
|
63
|
+
it("provides SortableCardContext with isDraggable=true to children", () => {
|
|
64
|
+
// Children read this context to decide whether to render their own grip
|
|
65
|
+
// affordance (e.g. JourneyCard's top-left corner dot-grid).
|
|
66
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-ctx", index: 0, group: "col-a", children: _jsx(ContextProbe, {}) }));
|
|
67
|
+
expect(screen.getByTestId("probe").textContent).toBe("yes");
|
|
68
|
+
});
|
|
69
|
+
it("provides isDraggable=false when disabled", () => {
|
|
70
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-disabled", index: 0, group: "col-a", disabled: true, children: _jsx(ContextProbe, {}) }));
|
|
71
|
+
expect(screen.getByTestId("probe").textContent).toBe("no");
|
|
64
72
|
});
|
|
65
|
-
it("
|
|
66
|
-
|
|
73
|
+
it("does not render a grip inside the shell itself", () => {
|
|
74
|
+
// The shell used to render an outer grip <span>. It no longer does —
|
|
75
|
+
// cards (e.g. JourneyCard) render their own grip internally. This test
|
|
76
|
+
// locks that contract so a future regression that reintroduces an outer
|
|
77
|
+
// grip (and the horizontal-space waste that came with it) is flagged.
|
|
78
|
+
const { container } = renderWithProvider(_jsx(SortableCardShell, { id: "card-no-outer-grip", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "body", children: "body" }) }));
|
|
79
|
+
// The only aria-hidden element should be absent — the shell doesn't own
|
|
80
|
+
// any purely-visual affordance now.
|
|
67
81
|
expect(container.querySelector('[aria-hidden="true"]')).toBeNull();
|
|
68
82
|
});
|
|
69
83
|
// ─── Interactive-element guard ────────────────────────────────────────────
|
|
@@ -111,5 +125,32 @@ describe("SortableCardShell", () => {
|
|
|
111
125
|
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("input");
|
|
112
126
|
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("[role='menuitem']");
|
|
113
127
|
});
|
|
128
|
+
it("interactive guard: a role='button' wrapper does NOT block drag activation (regression)", () => {
|
|
129
|
+
// Critical regression: JourneyCard sets role='button' on its root div
|
|
130
|
+
// whenever onClick is provided (for keyboard a11y). If the no-drag
|
|
131
|
+
// selector matched [role='button'], closest() would walk up and match
|
|
132
|
+
// the card wrapper itself — so every pointerdown on a card would
|
|
133
|
+
// cancel drag activation and drag would be silently broken.
|
|
134
|
+
//
|
|
135
|
+
// The selector MUST NOT include [role='button'] (or [role='link']).
|
|
136
|
+
// dnd-kit's activation constraints (5px distance, 200ms delay) already
|
|
137
|
+
// prevent tap-clicks from starting an accidental drag, so dropping
|
|
138
|
+
// these roles from the no-drag list is safe.
|
|
139
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-role-btn", index: 0, group: "col-a", children: _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "card-root", onClick: () => { }, children: [_jsx("span", { "data-testid": "title", children: "Product name" }), _jsx("button", { type: "button", "data-testid": "inner-btn", children: "Kebab" })] }) }));
|
|
140
|
+
const title = screen.getByTestId("title");
|
|
141
|
+
const cardRoot = screen.getByTestId("card-root");
|
|
142
|
+
const innerBtn = screen.getByTestId("inner-btn");
|
|
143
|
+
// A click on the title (non-interactive area) should NOT match — drag
|
|
144
|
+
// proceeds as expected. This is the primary regression check.
|
|
145
|
+
expect(title.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBeNull();
|
|
146
|
+
// The card root itself carries role='button' but must ALSO not match.
|
|
147
|
+
expect(cardRoot.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBeNull();
|
|
148
|
+
// Real <button> descendants are still protected by the plain `button`
|
|
149
|
+
// selector — click-through works for kebab menus.
|
|
150
|
+
expect(innerBtn.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBe(innerBtn);
|
|
151
|
+
// Sanity: the selector does NOT contain role='button'/'link'.
|
|
152
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).not.toContain("[role='button']");
|
|
153
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).not.toContain("[role='link']");
|
|
154
|
+
});
|
|
114
155
|
});
|
|
115
156
|
//# sourceMappingURL=sortable-card-shell.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-card-shell.test.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.test.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,13 @@ export interface AttachmentsCardProps {
|
|
|
3
3
|
attachments: OfferAttachmentItem[];
|
|
4
4
|
onOpen: (attachment: OfferAttachmentItem) => void;
|
|
5
5
|
onDelete?: (attachment: OfferAttachmentItem) => void;
|
|
6
|
+
/**
|
|
7
|
+
* Show an upload CTA alongside the heading. The handler is purely a
|
|
8
|
+
* trigger — the consumer owns the file picker + the actual upload flow
|
|
9
|
+
* (commonly a `click()` on a hidden `<input type="file">`).
|
|
10
|
+
*/
|
|
11
|
+
onUpload?: () => void;
|
|
6
12
|
className?: string;
|
|
7
13
|
}
|
|
8
|
-
export declare function AttachmentsCard({ attachments, onOpen, onDelete, className, }: AttachmentsCardProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function AttachmentsCard({ attachments, onOpen, onDelete, onUpload, className, }: AttachmentsCardProps): import("react/jsx-runtime").JSX.Element;
|
|
9
15
|
//# sourceMappingURL=attachments-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attachments-card.d.ts","sourceRoot":"","sources":["../../src/offer/attachments-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,mBAAmB,EAAE,CAAC;IACnC,MAAM,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"attachments-card.d.ts","sourceRoot":"","sources":["../../src/offer/attachments-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,mBAAmB,EAAE,CAAC;IACnC,MAAM,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,2CAkEtB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { FileText, Trash2 } from "lucide-react";
|
|
2
|
+
import { FileText, Trash2, Upload } from "lucide-react";
|
|
3
3
|
import { cn } from "../lib/utils";
|
|
4
4
|
import { ShadcnBadge as Badge } from "../components/shadcn-badge";
|
|
5
5
|
import { ShadcnButton as Button } from "../components/shadcn-button";
|
|
@@ -10,7 +10,7 @@ function formatBytes(n) {
|
|
|
10
10
|
return `${(n / 1024).toFixed(1)} KB`;
|
|
11
11
|
return `${(n / 1024 / 1024).toFixed(1)} MB`;
|
|
12
12
|
}
|
|
13
|
-
export function AttachmentsCard({ attachments, onOpen, onDelete, className, }) {
|
|
14
|
-
return (_jsxs("section", { "aria-labelledby": "attachments-heading", className: cn("rounded-2xl border border-border/60 bg-card p-4", className), children: [_jsx("h2", { id: "attachments-heading", className: "text-xs/5 font-semibold uppercase tracking-wide text-muted-foreground", children: "Attachments" }), attachments.length === 0 ? (_jsx("p", { className: "mt-3 text-sm/6 text-muted-foreground", children: "No attachments yet." })) : (_jsx("ul", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2", children: attachments.map((a) => (_jsxs("li", { className: "flex items-start gap-3 rounded-lg border border-border/60 p-3", children: [_jsx(FileText, { "aria-hidden": true, className: "size-5 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { type: "button", onClick: () => onOpen(a), className: "block truncate text-left text-sm/6 font-medium hover:underline", "aria-label": `Open ${a.fileName}`, children: a.fileName }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: formatBytes(a.sizeBytes) }), _jsx(Badge, { variant: "ghost", className: "text-[10px]", children: a.sourceLabel ?? a.source })] })] }), onDelete && (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": `Remove ${a.fileName}`, onClick: () => onDelete(a), children: _jsx(Trash2, { "aria-hidden": true, className: "size-4" }) }))] }, a.id))) }))] }));
|
|
13
|
+
export function AttachmentsCard({ attachments, onOpen, onDelete, onUpload, className, }) {
|
|
14
|
+
return (_jsxs("section", { "aria-labelledby": "attachments-heading", className: cn("rounded-2xl border border-border/60 bg-card p-4", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { id: "attachments-heading", className: "text-xs/5 font-semibold uppercase tracking-wide text-muted-foreground", children: "Attachments" }), onUpload && (_jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: onUpload, "aria-label": "Upload attachment", className: "-my-1 h-7 px-2", children: [_jsx(Upload, { "aria-hidden": true, className: "mr-1 size-3.5" }), "Upload"] }))] }), attachments.length === 0 ? (_jsx("p", { className: "mt-3 text-sm/6 text-muted-foreground", children: "No attachments yet." })) : (_jsx("ul", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2", children: attachments.map((a) => (_jsxs("li", { className: "flex items-start gap-3 rounded-lg border border-border/60 p-3", children: [_jsx(FileText, { "aria-hidden": true, className: "size-5 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { type: "button", onClick: () => onOpen(a), className: "block truncate text-left text-sm/6 font-medium hover:underline", "aria-label": `Open ${a.fileName}`, children: a.fileName }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: formatBytes(a.sizeBytes) }), _jsx(Badge, { variant: "ghost", className: "text-[10px]", children: a.sourceLabel ?? a.source })] })] }), onDelete && (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": `Remove ${a.fileName}`, onClick: () => onDelete(a), children: _jsx(Trash2, { "aria-hidden": true, className: "size-4" }) }))] }, a.id))) }))] }));
|
|
15
15
|
}
|
|
16
16
|
//# sourceMappingURL=attachments-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"attachments-card.js","sourceRoot":"","sources":["../../src/offer/attachments-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"attachments-card.js","sourceRoot":"","sources":["../../src/offer/attachments-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAgBrE,SAAS,WAAW,CAAC,CAAS;IAC5B,IAAI,CAAC,GAAG,IAAI;QAAE,OAAO,GAAG,CAAC,IAAI,CAAC;IAC9B,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;QAAE,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1D,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAC9B,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,GACY;IACrB,OAAO,CACL,sCACkB,qBAAqB,EACrC,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,SAAS,CAAC,aAE3E,eAAK,SAAS,EAAC,mCAAmC,aAChD,aAAI,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,uEAAuE,4BAEzG,EACJ,QAAQ,IAAI,CACX,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,QAAQ,gBACN,mBAAmB,EAC9B,SAAS,EAAC,gBAAgB,aAE1B,KAAC,MAAM,yBAAa,SAAS,EAAC,eAAe,GAAG,cAEzC,CACV,IACG,EACL,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1B,YAAG,SAAS,EAAC,sCAAsC,oCAAwB,CAC5E,CAAC,CAAC,CAAC,CACF,aAAI,SAAS,EAAC,4CAA4C,YACvD,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,cAEE,SAAS,EAAC,+DAA+D,aAEzE,KAAC,QAAQ,yBAAa,SAAS,EAAC,uCAAuC,GAAG,EAC1E,eAAK,SAAS,EAAC,gBAAgB,aAC7B,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EACxB,SAAS,EAAC,gEAAgE,gBAC9D,QAAQ,CAAC,CAAC,QAAQ,EAAE,YAE/B,CAAC,CAAC,QAAQ,GACJ,EACT,eAAK,SAAS,EAAC,sEAAsE,aACnF,yBAAO,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,GAAQ,EACvC,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,aAAa,YAC3C,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,MAAM,GACpB,IACJ,IACF,EACL,QAAQ,IAAI,CACX,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,gBACC,UAAU,CAAC,CAAC,QAAQ,EAAE,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAE1B,KAAC,MAAM,yBAAa,SAAS,EAAC,QAAQ,GAAG,GAClC,CACV,KA7BI,CAAC,CAAC,EAAE,CA8BN,CACN,CAAC,GACC,CACN,IACO,CACX,CAAC;AACJ,CAAC"}
|