@vkzstudio/muza-ui 1.0.27 → 1.0.28
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/components/Reorderable/Reorderable.d.ts +43 -5
- package/dist/components/Reorderable/Reorderable.d.ts.map +1 -1
- package/dist/components/Reorderable/Reorderable.js +203 -161
- package/dist/components/Reorderable/Reorderable.stories.d.ts +1 -0
- package/dist/components/Reorderable/Reorderable.stories.d.ts.map +1 -1
- package/dist/components/ReorderableTable/ReorderableTable.d.ts +22 -2
- package/dist/components/ReorderableTable/ReorderableTable.d.ts.map +1 -1
- package/dist/components/ReorderableTable/ReorderableTable.js +52 -42
- package/dist/components/ReorderableTable/ReorderableTable.stories.d.ts +1 -0
- package/dist/components/ReorderableTable/ReorderableTable.stories.d.ts.map +1 -1
- package/dist/muza-ui.css +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ interface ReorderableGroupContextValue<T = unknown> {
|
|
|
6
6
|
onReorder?: (newOrder: T[]) => void;
|
|
7
7
|
axis?: 'x' | 'y';
|
|
8
8
|
animatePresence?: boolean;
|
|
9
|
+
onPointerDragStart?: () => void;
|
|
10
|
+
onPointerDragEnd?: () => void;
|
|
9
11
|
}
|
|
10
12
|
declare const useReorderableGroup: <T>() => ReorderableGroupContextValue<T>;
|
|
11
13
|
interface ReorderableItemContextValue {
|
|
@@ -20,10 +22,35 @@ type ReorderableGroupElement = 'ul' | 'ol' | 'div' | 'tbody';
|
|
|
20
22
|
* @typeParam T - Type of items in the reorderable list
|
|
21
23
|
*/
|
|
22
24
|
export interface ReorderableGroupProps<T> {
|
|
23
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Array of items to reorder. Each item must be a stable reference for Motion to track.
|
|
27
|
+
* In sync mode, memoize this prop (e.g. with `useMemo`) to avoid unnecessary re-syncs
|
|
28
|
+
* when the parent re-renders with a new array reference.
|
|
29
|
+
*/
|
|
24
30
|
values: T[];
|
|
25
|
-
/**
|
|
26
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Fires when items are reordered with the new array order.
|
|
33
|
+
* Required unless `onSync` is provided, in which case it becomes an optional
|
|
34
|
+
* pass-through for immediate local feedback.
|
|
35
|
+
*/
|
|
36
|
+
onReorder?: (newOrder: T[]) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Debounced sync callback. Fires once after the user finishes reordering
|
|
39
|
+
* (`syncDelay` ms after the last reorder event). When provided, the component
|
|
40
|
+
* manages internal state and blocks external `values` updates while sync is pending.
|
|
41
|
+
*/
|
|
42
|
+
onSync?: (newOrder: T[]) => void;
|
|
43
|
+
/** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
|
|
44
|
+
syncDelay?: number;
|
|
45
|
+
/**
|
|
46
|
+
* Called when the internal sync pending state changes.
|
|
47
|
+
* Useful for showing loading indicators or disabling other interactions during sync.
|
|
48
|
+
*/
|
|
49
|
+
onSyncPendingChange?: (isPending: boolean) => void;
|
|
50
|
+
/** Fires when a pointer drag interaction starts (handle grab or direct item drag). */
|
|
51
|
+
onDragStart?: () => void;
|
|
52
|
+
/** Fires when a pointer drag interaction ends (pointer released after actual drag movement). */
|
|
53
|
+
onDragEnd?: () => void;
|
|
27
54
|
/** Controls the drag axis direction. @default 'y' */
|
|
28
55
|
axis?: 'x' | 'y';
|
|
29
56
|
/** Specifies the HTML element type to render. @default 'ol' */
|
|
@@ -41,8 +68,19 @@ export interface ReorderableGroupProps<T> {
|
|
|
41
68
|
animatePresence?: boolean | Omit<AnimatePresenceProps, 'children'>;
|
|
42
69
|
/** Additional CSS classes. */
|
|
43
70
|
className?: string;
|
|
44
|
-
/**
|
|
45
|
-
|
|
71
|
+
/**
|
|
72
|
+
* Child elements (ReorderableItem and/or ReorderableStaticItem).
|
|
73
|
+
* When using sync mode (`onSync`), pass a render function to receive the
|
|
74
|
+
* internal reordered values for rendering — this ensures children reflect
|
|
75
|
+
* the drag order immediately without waiting for the sync callback.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* // Sync mode — render function receives the effective (reordered) values
|
|
79
|
+
* <ReorderableGroup values={serverItems} onSync={handleSync}>
|
|
80
|
+
* {(items) => items.map(item => <ReorderableItem key={item.id} value={item}>...</ReorderableItem>)}
|
|
81
|
+
* </ReorderableGroup>
|
|
82
|
+
*/
|
|
83
|
+
children: ReactNode | ((effectiveValues: T[]) => ReactNode);
|
|
46
84
|
}
|
|
47
85
|
declare const ReorderableGroup: <T>(props: ReorderableGroupProps<T> & {
|
|
48
86
|
ref?: ForwardedRef<HTMLUListElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EAIjB,KAAK,YAAY,EACjB,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"Reorderable.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,222 +1,264 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { useMuzaTranslations as
|
|
4
|
-
import { AnimatePresence as
|
|
5
|
-
import { useDragControls as
|
|
6
|
-
import { motion as
|
|
7
|
-
import { cn as
|
|
8
|
-
import { ReorderGroup as
|
|
9
|
-
import { ReorderItem as
|
|
10
|
-
const
|
|
1
|
+
import { jsx as D } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as k, useContext as S, useRef as A, useCallback as N, createContext as F, useState as $, useEffect as j } from "react";
|
|
3
|
+
import { useMuzaTranslations as Z } from "../../translations/TranslationContext.js";
|
|
4
|
+
import { AnimatePresence as P } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
|
|
5
|
+
import { useDragControls as ee } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
|
|
6
|
+
import { motion as te } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
|
|
7
|
+
import { cn as _ } from "../../utils/cn.js";
|
|
8
|
+
import { ReorderGroup as re } from "../../node_modules/framer-motion/dist/es/components/Reorder/Group.js";
|
|
9
|
+
import { ReorderItem as ne } from "../../node_modules/framer-motion/dist/es/components/Reorder/Item.js";
|
|
10
|
+
const K = {
|
|
11
11
|
initial: { opacity: 0, scale: 0.96 },
|
|
12
12
|
animate: { opacity: 1, scale: 1 },
|
|
13
13
|
exit: { opacity: 0, scale: 0.96 },
|
|
14
14
|
transition: { duration: 0.2, ease: "easeOut" }
|
|
15
|
-
},
|
|
16
|
-
const r =
|
|
15
|
+
}, q = F({}), oe = 50, z = 3, B = () => S(q), J = F(null), se = () => {
|
|
16
|
+
const r = S(J);
|
|
17
17
|
if (!r)
|
|
18
18
|
throw new Error("useReorderableItem must be used within a ReorderableItem");
|
|
19
19
|
return r;
|
|
20
|
-
},
|
|
20
|
+
}, ie = ({
|
|
21
21
|
values: r,
|
|
22
|
-
onReorder:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
onReorder: s,
|
|
23
|
+
onSync: b,
|
|
24
|
+
syncDelay: m = 300,
|
|
25
|
+
onSyncPendingChange: d,
|
|
26
|
+
onDragStart: n,
|
|
27
|
+
onDragEnd: R,
|
|
28
|
+
axis: G = "y",
|
|
29
|
+
as: C = "ol",
|
|
30
|
+
disabled: p = !1,
|
|
31
|
+
layoutScroll: g = !1,
|
|
32
|
+
animatePresence: v,
|
|
33
|
+
style: y,
|
|
34
|
+
className: h,
|
|
35
|
+
children: u
|
|
36
|
+
}, i) => {
|
|
37
|
+
const x = Z(), f = !!b, [L, E] = $(r), t = A(null), e = A(!1), l = A(!1), I = A(L), a = A(b);
|
|
38
|
+
a.current = b;
|
|
39
|
+
const o = A(d);
|
|
40
|
+
o.current = d, j(() => {
|
|
41
|
+
f && !e.current && (E(r), I.current = r);
|
|
42
|
+
}, [r, f]), j(() => () => {
|
|
43
|
+
t.current && clearTimeout(t.current);
|
|
44
|
+
}, []);
|
|
45
|
+
const c = N(
|
|
46
|
+
(T) => {
|
|
47
|
+
t.current && clearTimeout(t.current), t.current = setTimeout(() => {
|
|
48
|
+
var M, Y;
|
|
49
|
+
t.current = null, e.current = !1, (M = o.current) == null || M.call(o, !1), (Y = a.current) == null || Y.call(a, T);
|
|
50
|
+
}, m);
|
|
51
|
+
},
|
|
52
|
+
[m]
|
|
53
|
+
), w = N(
|
|
54
|
+
(T) => {
|
|
55
|
+
var M;
|
|
56
|
+
f ? (E(T), I.current = T, s == null || s(T), e.current || (e.current = !0, (M = o.current) == null || M.call(o, !0)), l.current || c(T)) : s == null || s(T);
|
|
57
|
+
},
|
|
58
|
+
[f, s, c]
|
|
59
|
+
), H = N(() => {
|
|
60
|
+
l.current = !0, t.current && clearTimeout(t.current), n == null || n();
|
|
61
|
+
}, [n]), O = N(() => {
|
|
62
|
+
l.current = !1, e.current && c(I.current), R == null || R();
|
|
63
|
+
}, [c, R]), V = f ? L : r, Q = {
|
|
64
|
+
disabled: p,
|
|
65
|
+
values: V,
|
|
66
|
+
onReorder: p ? void 0 : w,
|
|
67
|
+
axis: G,
|
|
68
|
+
animatePresence: !!v,
|
|
69
|
+
onPointerDragStart: f ? H : void 0,
|
|
70
|
+
onPointerDragEnd: f ? O : void 0
|
|
71
|
+
}, X = typeof u == "function" ? u(V) : u, U = v === !0 ? { mode: "popLayout", initial: !1 } : v || null, W = U ? /* @__PURE__ */ D(P, { ...U, children: X }) : X;
|
|
72
|
+
return /* @__PURE__ */ D(
|
|
73
|
+
q.Provider,
|
|
41
74
|
{
|
|
42
|
-
value:
|
|
43
|
-
children: /* @__PURE__ */
|
|
44
|
-
|
|
75
|
+
value: Q,
|
|
76
|
+
children: /* @__PURE__ */ D(
|
|
77
|
+
re,
|
|
45
78
|
{
|
|
46
|
-
ref:
|
|
47
|
-
axis:
|
|
48
|
-
values:
|
|
49
|
-
onReorder:
|
|
50
|
-
} :
|
|
51
|
-
as:
|
|
52
|
-
layoutScroll:
|
|
53
|
-
style:
|
|
54
|
-
...
|
|
79
|
+
ref: i,
|
|
80
|
+
axis: G,
|
|
81
|
+
values: V,
|
|
82
|
+
onReorder: p ? () => {
|
|
83
|
+
} : w,
|
|
84
|
+
as: C,
|
|
85
|
+
layoutScroll: g,
|
|
86
|
+
style: y,
|
|
87
|
+
...C !== "tbody" && {
|
|
55
88
|
role: "list",
|
|
56
|
-
"aria-label":
|
|
89
|
+
"aria-label": x.reorderableTable.listAriaLabel
|
|
57
90
|
},
|
|
58
|
-
className:
|
|
59
|
-
children:
|
|
91
|
+
className: _(h),
|
|
92
|
+
children: W
|
|
60
93
|
}
|
|
61
94
|
)
|
|
62
95
|
}
|
|
63
96
|
);
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
const
|
|
97
|
+
}, ae = k(ie);
|
|
98
|
+
ae.displayName = "ReorderableGroup";
|
|
99
|
+
const ce = ({
|
|
67
100
|
value: r,
|
|
68
|
-
as:
|
|
101
|
+
as: s = "li",
|
|
69
102
|
disabled: b = !1,
|
|
70
|
-
dragListenerDisabled:
|
|
71
|
-
whileDrag:
|
|
72
|
-
animation:
|
|
103
|
+
dragListenerDisabled: m = !1,
|
|
104
|
+
whileDrag: d,
|
|
105
|
+
animation: n,
|
|
73
106
|
className: R,
|
|
74
|
-
children:
|
|
75
|
-
style:
|
|
76
|
-
layout:
|
|
77
|
-
},
|
|
107
|
+
children: G,
|
|
108
|
+
style: C,
|
|
109
|
+
layout: p
|
|
110
|
+
}, g) => {
|
|
78
111
|
const {
|
|
79
|
-
disabled:
|
|
80
|
-
values:
|
|
81
|
-
onReorder:
|
|
82
|
-
axis:
|
|
83
|
-
animatePresence:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
if (
|
|
94
|
-
const
|
|
95
|
-
if (
|
|
96
|
-
const
|
|
97
|
-
|
|
112
|
+
disabled: v,
|
|
113
|
+
values: y,
|
|
114
|
+
onReorder: h,
|
|
115
|
+
axis: u,
|
|
116
|
+
animatePresence: i,
|
|
117
|
+
onPointerDragStart: x,
|
|
118
|
+
onPointerDragEnd: f
|
|
119
|
+
} = B(), L = ee(), E = b || v, t = !E && !m, e = n === !1 ? null : n === !0 ? K : typeof n == "object" ? {
|
|
120
|
+
initial: n.initial ?? K.initial,
|
|
121
|
+
animate: n.animate ?? K.animate,
|
|
122
|
+
exit: n.exit ?? K.exit,
|
|
123
|
+
transition: n.transition ?? K.transition
|
|
124
|
+
} : i ? K : null, l = N(
|
|
125
|
+
(a) => {
|
|
126
|
+
if (!y || !h) return;
|
|
127
|
+
const o = y.indexOf(r);
|
|
128
|
+
if (o === -1) return;
|
|
129
|
+
const c = o + a;
|
|
130
|
+
if (c < 0 || c >= y.length) return;
|
|
131
|
+
const w = [...y];
|
|
132
|
+
w.splice(o, 1), w.splice(c, 0, r), h(w);
|
|
98
133
|
},
|
|
99
|
-
[
|
|
100
|
-
),
|
|
101
|
-
(
|
|
102
|
-
if (!
|
|
103
|
-
const
|
|
104
|
-
|
|
134
|
+
[y, h, r]
|
|
135
|
+
), I = N(
|
|
136
|
+
(a) => {
|
|
137
|
+
if (!t) return;
|
|
138
|
+
const o = u === "y" ? "ArrowUp" : "ArrowLeft", c = u === "y" ? "ArrowDown" : "ArrowRight";
|
|
139
|
+
a.key === o ? (a.preventDefault(), l(-1)) : a.key === c && (a.preventDefault(), l(1));
|
|
105
140
|
},
|
|
106
|
-
[
|
|
141
|
+
[t, u, l]
|
|
107
142
|
);
|
|
108
|
-
return /* @__PURE__ */
|
|
109
|
-
|
|
143
|
+
return /* @__PURE__ */ D(
|
|
144
|
+
J.Provider,
|
|
110
145
|
{
|
|
111
|
-
value: { dragControls:
|
|
112
|
-
children: /* @__PURE__ */
|
|
113
|
-
|
|
146
|
+
value: { dragControls: L, dragListenerDisabled: m, moveItem: l },
|
|
147
|
+
children: /* @__PURE__ */ D(
|
|
148
|
+
ne,
|
|
114
149
|
{
|
|
115
|
-
ref:
|
|
150
|
+
ref: g,
|
|
116
151
|
value: r,
|
|
117
|
-
as:
|
|
118
|
-
layout:
|
|
119
|
-
dragControls:
|
|
120
|
-
dragListener:
|
|
152
|
+
as: s,
|
|
153
|
+
layout: p,
|
|
154
|
+
dragControls: L,
|
|
155
|
+
dragListener: t,
|
|
156
|
+
onDragStart: t ? x : void 0,
|
|
157
|
+
onDragEnd: t ? f : void 0,
|
|
121
158
|
initial: e == null ? void 0 : e.initial,
|
|
122
159
|
animate: e == null ? void 0 : e.animate,
|
|
123
160
|
exit: e == null ? void 0 : e.exit,
|
|
124
161
|
transition: e == null ? void 0 : e.transition,
|
|
125
|
-
tabIndex:
|
|
162
|
+
tabIndex: t ? 0 : void 0,
|
|
126
163
|
role: "listitem",
|
|
127
|
-
"aria-disabled":
|
|
128
|
-
onKeyDown:
|
|
129
|
-
className:
|
|
130
|
-
|
|
131
|
-
|
|
164
|
+
"aria-disabled": E,
|
|
165
|
+
onKeyDown: I,
|
|
166
|
+
className: _(
|
|
167
|
+
t && "cursor-grab active:cursor-grabbing",
|
|
168
|
+
t && "focus-visible-default",
|
|
132
169
|
R
|
|
133
170
|
),
|
|
134
|
-
style:
|
|
171
|
+
style: C,
|
|
135
172
|
whileDrag: {
|
|
136
|
-
zIndex:
|
|
173
|
+
zIndex: oe,
|
|
137
174
|
position: "relative",
|
|
138
|
-
...
|
|
175
|
+
...d
|
|
139
176
|
},
|
|
140
|
-
children:
|
|
177
|
+
children: G
|
|
141
178
|
}
|
|
142
179
|
)
|
|
143
180
|
}
|
|
144
181
|
);
|
|
145
|
-
},
|
|
146
|
-
|
|
147
|
-
const
|
|
182
|
+
}, le = k(ce);
|
|
183
|
+
le.displayName = "ReorderableItem";
|
|
184
|
+
const ue = k(
|
|
148
185
|
({
|
|
149
186
|
as: r = "button",
|
|
150
|
-
disabled:
|
|
187
|
+
disabled: s = !1,
|
|
151
188
|
"aria-label": b,
|
|
152
|
-
className:
|
|
153
|
-
children:
|
|
154
|
-
},
|
|
155
|
-
const R =
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
189
|
+
className: m,
|
|
190
|
+
children: d
|
|
191
|
+
}, n) => {
|
|
192
|
+
const R = Z(), G = b ?? R.reorderableTable.dragHandleAriaLabel, {
|
|
193
|
+
disabled: C,
|
|
194
|
+
axis: p,
|
|
195
|
+
onPointerDragStart: g,
|
|
196
|
+
onPointerDragEnd: v
|
|
197
|
+
} = B(), { dragControls: y, dragListenerDisabled: h, moveItem: u } = se(), i = h && !C && !s, x = A(!1), f = (e) => {
|
|
198
|
+
if (!i) return;
|
|
199
|
+
x.current = !1;
|
|
200
|
+
const l = e.clientX, I = e.clientY, a = (c) => {
|
|
201
|
+
const w = Math.abs(c.clientX - l), H = Math.abs(c.clientY - I);
|
|
202
|
+
(w > z || H > z) && (x.current = !0);
|
|
203
|
+
}, o = () => {
|
|
204
|
+
document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", o), x.current && (v == null || v());
|
|
163
205
|
};
|
|
164
|
-
document.addEventListener("pointermove",
|
|
165
|
-
},
|
|
166
|
-
|
|
167
|
-
},
|
|
206
|
+
document.addEventListener("pointermove", a), document.addEventListener("pointerup", o), g == null || g(), y.start(e);
|
|
207
|
+
}, L = (e) => {
|
|
208
|
+
x.current && (e.stopPropagation(), x.current = !1);
|
|
209
|
+
}, E = N(
|
|
168
210
|
(e) => {
|
|
169
|
-
if (!
|
|
170
|
-
const
|
|
171
|
-
e.key ===
|
|
211
|
+
if (!i) return;
|
|
212
|
+
const l = p === "y" ? "ArrowUp" : "ArrowLeft", I = p === "y" ? "ArrowDown" : "ArrowRight";
|
|
213
|
+
e.key === l ? (e.preventDefault(), u(-1)) : e.key === I && (e.preventDefault(), u(1));
|
|
172
214
|
},
|
|
173
|
-
[
|
|
174
|
-
),
|
|
175
|
-
"aria-label":
|
|
215
|
+
[i, p, u]
|
|
216
|
+
), t = {
|
|
217
|
+
"aria-label": G,
|
|
176
218
|
"aria-roledescription": "sortable",
|
|
177
|
-
onPointerDown:
|
|
178
|
-
onKeyDown:
|
|
179
|
-
onClick:
|
|
180
|
-
className:
|
|
219
|
+
onPointerDown: f,
|
|
220
|
+
onKeyDown: E,
|
|
221
|
+
onClick: L,
|
|
222
|
+
className: _(
|
|
181
223
|
"touch-none select-none",
|
|
182
|
-
|
|
183
|
-
!
|
|
184
|
-
|
|
185
|
-
|
|
224
|
+
i && "cursor-grab active:cursor-grabbing",
|
|
225
|
+
!i && "cursor-default",
|
|
226
|
+
i && "focus-visible-default",
|
|
227
|
+
m
|
|
186
228
|
)
|
|
187
229
|
};
|
|
188
|
-
return r === "button" ? /* @__PURE__ */
|
|
230
|
+
return r === "button" ? /* @__PURE__ */ D("button", { ref: n, type: "button", disabled: s, ...t, children: d }) : r === "div" ? /* @__PURE__ */ D(
|
|
189
231
|
"div",
|
|
190
232
|
{
|
|
191
|
-
ref:
|
|
192
|
-
tabIndex:
|
|
193
|
-
role:
|
|
194
|
-
...
|
|
195
|
-
children:
|
|
233
|
+
ref: n,
|
|
234
|
+
tabIndex: i ? 0 : void 0,
|
|
235
|
+
role: i ? "button" : void 0,
|
|
236
|
+
...t,
|
|
237
|
+
children: d
|
|
196
238
|
}
|
|
197
|
-
) : /* @__PURE__ */
|
|
239
|
+
) : /* @__PURE__ */ D(
|
|
198
240
|
"span",
|
|
199
241
|
{
|
|
200
|
-
ref:
|
|
201
|
-
tabIndex:
|
|
202
|
-
role:
|
|
203
|
-
...
|
|
204
|
-
children:
|
|
242
|
+
ref: n,
|
|
243
|
+
tabIndex: i ? 0 : void 0,
|
|
244
|
+
role: i ? "button" : void 0,
|
|
245
|
+
...t,
|
|
246
|
+
children: d
|
|
205
247
|
}
|
|
206
248
|
);
|
|
207
249
|
}
|
|
208
250
|
);
|
|
209
|
-
|
|
210
|
-
const
|
|
211
|
-
const
|
|
212
|
-
return /* @__PURE__ */ d
|
|
213
|
-
},
|
|
214
|
-
|
|
251
|
+
ue.displayName = "ReorderableHandle";
|
|
252
|
+
const fe = ({ as: r = "li", className: s, children: b }, m) => {
|
|
253
|
+
const d = te[r];
|
|
254
|
+
return /* @__PURE__ */ D(d, { ref: m, layout: !0, role: "listitem", className: _(s), children: b });
|
|
255
|
+
}, de = k(fe);
|
|
256
|
+
de.displayName = "ReorderableStaticItem";
|
|
215
257
|
export {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
258
|
+
ae as ReorderableGroup,
|
|
259
|
+
ue as ReorderableHandle,
|
|
260
|
+
le as ReorderableItem,
|
|
261
|
+
de as ReorderableStaticItem,
|
|
262
|
+
B as useReorderableGroup,
|
|
263
|
+
se as useReorderableItem
|
|
222
264
|
};
|
|
@@ -12,5 +12,6 @@ export declare const ScrollableList: Story;
|
|
|
12
12
|
export declare const ContentBlocks: Story;
|
|
13
13
|
export declare const AnimatedItems: Story;
|
|
14
14
|
export declare const StaticItem: Story;
|
|
15
|
+
export declare const SyncMode: Story;
|
|
15
16
|
export declare const DynamicHeight: Story;
|
|
16
17
|
//# sourceMappingURL=Reorderable.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAsFvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA;AA8GD,eAAO,MAAM,QAAQ,EAAE,KAsFtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAA"}
|
|
@@ -42,8 +42,28 @@ export interface ReorderableTableProps<T extends {
|
|
|
42
42
|
}> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'> {
|
|
43
43
|
/** Array of row data objects. Each must include an `id` field used as the React key. */
|
|
44
44
|
data: T[];
|
|
45
|
-
/**
|
|
46
|
-
|
|
45
|
+
/**
|
|
46
|
+
* Fires when rows are reordered. Receives the full array in its new order.
|
|
47
|
+
* Optional when `onSync` is provided.
|
|
48
|
+
*/
|
|
49
|
+
onReorder?: (newOrder: T[]) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Debounced sync callback. Fires once after the user finishes reordering
|
|
52
|
+
* (`syncDelay` ms after the last reorder event). When provided, the component
|
|
53
|
+
* manages internal state and blocks external `data` updates while sync is pending.
|
|
54
|
+
*/
|
|
55
|
+
onSync?: (newOrder: T[]) => void;
|
|
56
|
+
/** Milliseconds to wait after the last reorder event before calling `onSync`. @default 300 */
|
|
57
|
+
syncDelay?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Called when the internal sync pending state changes.
|
|
60
|
+
* Useful for showing loading indicators or disabling other interactions during sync.
|
|
61
|
+
*/
|
|
62
|
+
onSyncPendingChange?: (isPending: boolean) => void;
|
|
63
|
+
/** Fires when a pointer drag interaction starts. */
|
|
64
|
+
onDragStart?: () => void;
|
|
65
|
+
/** Fires when a pointer drag interaction ends. */
|
|
66
|
+
onDragEnd?: () => void;
|
|
47
67
|
/** Column definitions describing headers and cell rendering. @see ReorderableTableColumn */
|
|
48
68
|
columns: ReorderableTableColumn<T>[];
|
|
49
69
|
/** Displays the table header row. @default false */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT
|
|
1
|
+
{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAChC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4FAA4F;IAC5F,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAA;CAC3B;AAgPD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
|