@tensor_1/react 2.22.0 → 2.24.0
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/README.md +20 -0
- package/dist/components/DiffViewer.d.ts +15 -1
- package/dist/components/DiffViewer.js +11 -6
- package/dist/components/EditorIcons.d.ts +2 -0
- package/dist/components/EditorIcons.js +3 -1
- package/dist/components/TableControls.d.ts +77 -10
- package/dist/components/TableControls.js +397 -20
- package/dist/emoji.cjs +3 -1
- package/dist/index.cjs +978 -545
- package/dist/index.d.cts +92 -11
- package/dist/index.d.ts +1 -1
- package/dist/rich-text.cjs +3 -1
- package/package.json +1 -1
|
@@ -1,21 +1,210 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from "react";
|
|
3
|
+
import { useEffect, useId, useRef, useState } from "react";
|
|
4
|
+
import { cx } from "../cx.js";
|
|
4
5
|
import { Button } from "./Button.js";
|
|
5
6
|
import { Checkbox } from "./Checkbox.js";
|
|
7
|
+
import { EditorIcon } from "./EditorIcons.js";
|
|
6
8
|
import { Input } from "./Input.js";
|
|
9
|
+
import { Popover } from "./Popover.js";
|
|
7
10
|
import { Segmented, SegmentedOption } from "./Segmented.js";
|
|
8
11
|
import { Switch } from "./Switch.js";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
const VIEW_MENU_COLUMN_LABELS = {
|
|
13
|
+
rowActions: "Column actions: {label}",
|
|
14
|
+
reorder: "Drag to reorder: {label}",
|
|
15
|
+
moveUp: "Move up",
|
|
16
|
+
moveDown: "Move down",
|
|
17
|
+
hide: "Hide",
|
|
18
|
+
show: "Show",
|
|
19
|
+
required: "Always shown",
|
|
20
|
+
moved: "{label} moved to position {position} of {count}"
|
|
21
|
+
};
|
|
22
|
+
const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
|
|
23
|
+
const columnText = (column) => column.textLabel ?? (typeof column.label === "string" ? column.label : column.id);
|
|
24
|
+
const isPopoverOpen = (el) => {
|
|
25
|
+
try {
|
|
26
|
+
return !!el?.matches(":popover-open");
|
|
27
|
+
} catch {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
function ColumnRowMenu({ label, actions, triggerRef }) {
|
|
32
|
+
const [open, setOpen] = useState(false);
|
|
33
|
+
const menuId = useId();
|
|
34
|
+
const button = useRef(null);
|
|
35
|
+
const items = useRef([]);
|
|
36
|
+
const wasOpenAtPress = useRef(false);
|
|
37
|
+
const enabled = () => items.current.filter((el) => !!el && !el.disabled);
|
|
38
|
+
const close = (returnFocus) => {
|
|
39
|
+
const el = document.getElementById(menuId);
|
|
40
|
+
if (isPopoverOpen(el)) el.hidePopover();
|
|
41
|
+
setOpen(false);
|
|
42
|
+
if (returnFocus) button.current?.focus();
|
|
43
|
+
};
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (!open) return;
|
|
46
|
+
const el = document.getElementById(menuId);
|
|
47
|
+
if (el && typeof el.showPopover === "function" && !isPopoverOpen(el)) {
|
|
48
|
+
try {
|
|
49
|
+
el.showPopover();
|
|
50
|
+
} catch {
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
enabled()[0]?.focus();
|
|
54
|
+
const onToggle = (event) => {
|
|
55
|
+
if (event.newState === "closed") setOpen(false);
|
|
56
|
+
};
|
|
57
|
+
const onKeyDown = (event) => {
|
|
58
|
+
if (event.key !== "Escape") return;
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
event.stopPropagation();
|
|
61
|
+
close(true);
|
|
62
|
+
};
|
|
63
|
+
el?.addEventListener("toggle", onToggle);
|
|
64
|
+
document.addEventListener("keydown", onKeyDown, true);
|
|
65
|
+
return () => {
|
|
66
|
+
el?.removeEventListener("toggle", onToggle);
|
|
67
|
+
document.removeEventListener("keydown", onKeyDown, true);
|
|
68
|
+
};
|
|
69
|
+
}, [open, menuId]);
|
|
70
|
+
const onMenuKeyDown = (event) => {
|
|
71
|
+
const list = enabled();
|
|
72
|
+
const at = list.indexOf(document.activeElement);
|
|
73
|
+
const focus = (index) => {
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
list[(index + list.length) % list.length]?.focus();
|
|
76
|
+
};
|
|
77
|
+
if (event.key === "ArrowDown") focus(at + 1);
|
|
78
|
+
else if (event.key === "ArrowUp") focus(at - 1);
|
|
79
|
+
else if (event.key === "Home") focus(0);
|
|
80
|
+
else if (event.key === "End") focus(list.length - 1);
|
|
81
|
+
else if (event.key === "Tab") close(false);
|
|
82
|
+
};
|
|
83
|
+
return /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__actions", children: [
|
|
84
|
+
/* @__PURE__ */ jsx(
|
|
85
|
+
"button",
|
|
86
|
+
{
|
|
87
|
+
ref: (el) => {
|
|
88
|
+
button.current = el;
|
|
89
|
+
triggerRef(el);
|
|
90
|
+
},
|
|
91
|
+
type: "button",
|
|
92
|
+
className: "uix-btn uix-btn--ghost uix-btn--sm uix-btn--icon",
|
|
93
|
+
"aria-label": label,
|
|
94
|
+
"aria-haspopup": "menu",
|
|
95
|
+
"aria-expanded": open,
|
|
96
|
+
"aria-controls": open ? menuId : void 0,
|
|
97
|
+
onPointerDown: () => {
|
|
98
|
+
wasOpenAtPress.current = isPopoverOpen(document.getElementById(menuId));
|
|
99
|
+
},
|
|
100
|
+
onClick: () => {
|
|
101
|
+
const wasOpen = wasOpenAtPress.current;
|
|
102
|
+
wasOpenAtPress.current = false;
|
|
103
|
+
if (wasOpen) return;
|
|
104
|
+
if (open) close(false);
|
|
105
|
+
else setOpen(true);
|
|
106
|
+
},
|
|
107
|
+
children: /* @__PURE__ */ jsx(EditorIcon, { name: "more" })
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
open && /* @__PURE__ */ jsx(Popover, { id: menuId, anchor: button, placement: "bottom-end", offset: 4, role: "menu", "aria-label": label, className: "uix-view-menu__row-menu", onKeyDown: onMenuKeyDown, children: actions.map((action, index) => /* @__PURE__ */ jsx(
|
|
111
|
+
"button",
|
|
112
|
+
{
|
|
113
|
+
ref: (el) => {
|
|
114
|
+
items.current[index] = el;
|
|
115
|
+
},
|
|
116
|
+
type: "button",
|
|
117
|
+
role: "menuitem",
|
|
118
|
+
tabIndex: -1,
|
|
119
|
+
className: "uix-menu__item",
|
|
120
|
+
disabled: action.disabled,
|
|
121
|
+
onClick: () => {
|
|
122
|
+
close(true);
|
|
123
|
+
action.onSelect();
|
|
124
|
+
},
|
|
125
|
+
children: action.label
|
|
126
|
+
},
|
|
127
|
+
action.id
|
|
128
|
+
)) })
|
|
129
|
+
] });
|
|
130
|
+
}
|
|
131
|
+
function ViewMenu({
|
|
132
|
+
density,
|
|
133
|
+
densityLabel,
|
|
134
|
+
densityOptions,
|
|
135
|
+
onDensityChange,
|
|
136
|
+
displayLabel,
|
|
137
|
+
zebra,
|
|
138
|
+
freeze,
|
|
139
|
+
columns,
|
|
140
|
+
columnsLabel,
|
|
141
|
+
onColumnVisibilityChange,
|
|
142
|
+
onReorder,
|
|
143
|
+
columnLabels,
|
|
144
|
+
footer,
|
|
145
|
+
className
|
|
146
|
+
}) {
|
|
147
|
+
const baseId = useId();
|
|
148
|
+
const densityLabelId = `${baseId}-density`;
|
|
149
|
+
const zebraLabelId = `${baseId}-zebra`;
|
|
150
|
+
const freezeLabelId = `${baseId}-freeze`;
|
|
151
|
+
const columnsLabelId = `${baseId}-columns`;
|
|
152
|
+
const labels = { ...VIEW_MENU_COLUMN_LABELS, ...columnLabels };
|
|
153
|
+
const list = columns ?? [];
|
|
154
|
+
const [draft, setDraft] = useState(null);
|
|
155
|
+
const [announcement, setAnnouncement] = useState("");
|
|
156
|
+
const dragStart = useRef(null);
|
|
157
|
+
const listRef = useRef(null);
|
|
158
|
+
const triggers = useRef(/* @__PURE__ */ new Map());
|
|
159
|
+
const refocus = useRef(null);
|
|
160
|
+
const orderKey = JSON.stringify(list.map((column) => column.id));
|
|
161
|
+
useEffect(() => setDraft(null), [orderKey]);
|
|
162
|
+
const order = draft ?? list.map((column) => column.id);
|
|
163
|
+
const byId = new Map(list.map((column) => [column.id, column]));
|
|
164
|
+
const ordered = order.map((id) => byId.get(id)).filter((column) => !!column);
|
|
165
|
+
useEffect(() => {
|
|
166
|
+
const target = refocus.current;
|
|
167
|
+
refocus.current = null;
|
|
168
|
+
if (!target) return;
|
|
169
|
+
const el = target.part === "actions" ? triggers.current.get(target.id) : Array.from(listRef.current?.children ?? []).find((row) => row.dataset.columnId === target.id)?.querySelector(".uix-view-menu__grip");
|
|
170
|
+
if (el && document.activeElement !== el) el.focus();
|
|
171
|
+
});
|
|
172
|
+
const commit = (next, id) => {
|
|
173
|
+
setDraft(next);
|
|
174
|
+
onReorder?.([...next]);
|
|
175
|
+
const column = byId.get(id);
|
|
176
|
+
if (column) setAnnouncement(fill(labels.moved, { label: columnText(column), position: next.indexOf(id) + 1, count: next.length }));
|
|
177
|
+
};
|
|
178
|
+
const move = (id, delta, part) => {
|
|
179
|
+
const next = placeId(order, id, order.indexOf(id) + delta);
|
|
180
|
+
if (next === order) return;
|
|
181
|
+
refocus.current = { id, part };
|
|
182
|
+
commit(next, id);
|
|
183
|
+
};
|
|
184
|
+
const { dragging, start: startDrag } = useRowDrag(".uix-view-menu__col", {
|
|
185
|
+
over: (id, index) => {
|
|
186
|
+
const next = placeId(order, id, index);
|
|
187
|
+
if (next !== order) setDraft(next);
|
|
188
|
+
},
|
|
189
|
+
drop: (id) => {
|
|
190
|
+
const start = dragStart.current;
|
|
191
|
+
dragStart.current = null;
|
|
192
|
+
if (start && !sameOrder(start, order)) commit(order, id);
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
const rowActions = (column, index) => [
|
|
196
|
+
{ id: "up", label: labels.moveUp, disabled: index === 0, onSelect: () => move(column.id, -1, "actions") },
|
|
197
|
+
{ id: "down", label: labels.moveDown, disabled: index === ordered.length - 1, onSelect: () => move(column.id, 1, "actions") },
|
|
198
|
+
...column.required || column.disabled ? [] : [column.visible ? { id: "hide", label: labels.hide, onSelect: () => onColumnVisibilityChange?.(column.id, false) } : { id: "show", label: labels.show, onSelect: () => onColumnVisibilityChange?.(column.id, true) }]
|
|
199
|
+
];
|
|
200
|
+
const showDensity = !!densityOptions?.length && !!onDensityChange;
|
|
201
|
+
return /* @__PURE__ */ jsxs("div", { className: cx("uix-view-menu", className), "data-dragging": dragging ? "" : void 0, children: [
|
|
202
|
+
showDensity && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
|
|
15
203
|
/* @__PURE__ */ jsx("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
|
|
16
|
-
/* @__PURE__ */ jsx(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
|
|
204
|
+
/* @__PURE__ */ jsx(Segmented, { value: density ?? "", onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ jsx(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
|
|
17
205
|
] }),
|
|
18
206
|
(zebra || freeze) && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
|
|
207
|
+
displayLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: displayLabel }),
|
|
19
208
|
zebra && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__row", children: [
|
|
20
209
|
/* @__PURE__ */ jsx("span", { id: zebraLabelId, children: zebra.label }),
|
|
21
210
|
/* @__PURE__ */ jsx(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
|
|
@@ -25,10 +214,73 @@ function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebr
|
|
|
25
214
|
/* @__PURE__ */ jsx(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
|
|
26
215
|
] })
|
|
27
216
|
] }),
|
|
28
|
-
|
|
29
|
-
columnsLabel != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__label", children: columnsLabel }),
|
|
30
|
-
/* @__PURE__ */ jsx("
|
|
31
|
-
|
|
217
|
+
ordered.length > 0 && /* @__PURE__ */ jsxs("div", { className: "uix-view-menu__group", children: [
|
|
218
|
+
columnsLabel != null && /* @__PURE__ */ jsx("div", { id: columnsLabelId, className: "uix-view-menu__label", children: columnsLabel }),
|
|
219
|
+
/* @__PURE__ */ jsx("ul", { ref: listRef, className: "uix-view-menu__cols", "aria-labelledby": columnsLabel != null ? columnsLabelId : void 0, children: ordered.map((column, index) => {
|
|
220
|
+
const text = columnText(column);
|
|
221
|
+
return /* @__PURE__ */ jsxs(
|
|
222
|
+
"li",
|
|
223
|
+
{
|
|
224
|
+
className: "uix-view-menu__col",
|
|
225
|
+
"data-column-id": column.id,
|
|
226
|
+
"data-visible": String(column.visible),
|
|
227
|
+
"data-required": column.required ? "true" : void 0,
|
|
228
|
+
"data-dragging": dragging === column.id || void 0,
|
|
229
|
+
children: [
|
|
230
|
+
onReorder && /* @__PURE__ */ jsx(
|
|
231
|
+
"button",
|
|
232
|
+
{
|
|
233
|
+
type: "button",
|
|
234
|
+
className: "uix-view-menu__grip",
|
|
235
|
+
tabIndex: -1,
|
|
236
|
+
"aria-label": fill(labels.reorder, { label: text }),
|
|
237
|
+
onPointerDown: (event) => {
|
|
238
|
+
if (event.button !== 0) return;
|
|
239
|
+
event.preventDefault();
|
|
240
|
+
event.currentTarget.focus({ preventScroll: true });
|
|
241
|
+
dragStart.current = order;
|
|
242
|
+
startDrag(event, column.id);
|
|
243
|
+
},
|
|
244
|
+
onKeyDown: (event) => {
|
|
245
|
+
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
|
246
|
+
event.preventDefault();
|
|
247
|
+
move(column.id, event.key === "ArrowUp" ? -1 : 1, "grip");
|
|
248
|
+
},
|
|
249
|
+
children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
|
|
250
|
+
}
|
|
251
|
+
),
|
|
252
|
+
column.required ? /* @__PURE__ */ jsxs("span", { className: "uix-view-menu__col-toggle", title: labels.required, children: [
|
|
253
|
+
/* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-box", "aria-hidden": "true" }),
|
|
254
|
+
/* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label })
|
|
255
|
+
] }) : /* @__PURE__ */ jsx(
|
|
256
|
+
Checkbox,
|
|
257
|
+
{
|
|
258
|
+
className: "uix-view-menu__col-toggle",
|
|
259
|
+
label: /* @__PURE__ */ jsx("span", { className: "uix-view-menu__col-name", children: column.label }),
|
|
260
|
+
checked: column.visible,
|
|
261
|
+
disabled: column.disabled,
|
|
262
|
+
onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked)
|
|
263
|
+
}
|
|
264
|
+
),
|
|
265
|
+
onReorder && /* @__PURE__ */ jsx(
|
|
266
|
+
ColumnRowMenu,
|
|
267
|
+
{
|
|
268
|
+
label: fill(labels.rowActions, { label: text }),
|
|
269
|
+
actions: rowActions(column, index),
|
|
270
|
+
triggerRef: (el) => {
|
|
271
|
+
if (el) triggers.current.set(column.id, el);
|
|
272
|
+
else triggers.current.delete(column.id);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
)
|
|
276
|
+
]
|
|
277
|
+
},
|
|
278
|
+
column.id
|
|
279
|
+
);
|
|
280
|
+
}) })
|
|
281
|
+
] }),
|
|
282
|
+
footer != null && /* @__PURE__ */ jsx("div", { className: "uix-view-menu__footer", children: footer }),
|
|
283
|
+
onReorder && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement })
|
|
32
284
|
] });
|
|
33
285
|
}
|
|
34
286
|
function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
|
|
@@ -43,14 +295,139 @@ function FilterPopover({ label, type = "text", value, onValueChange, options, ap
|
|
|
43
295
|
] })
|
|
44
296
|
] });
|
|
45
297
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
298
|
+
const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
|
|
299
|
+
function dropIndex(rows, dragged, clientY) {
|
|
300
|
+
let index = 0;
|
|
301
|
+
for (const row of rows) {
|
|
302
|
+
if (row === dragged) continue;
|
|
303
|
+
const box = row.getBoundingClientRect();
|
|
304
|
+
if (clientY > box.top + box.height / 2) index++;
|
|
305
|
+
}
|
|
306
|
+
return index;
|
|
307
|
+
}
|
|
308
|
+
function useRowDrag(rowSelector, handlers) {
|
|
309
|
+
const [dragging, setDragging] = useState(null);
|
|
310
|
+
const drag = useRef(null);
|
|
311
|
+
const latest = useRef(handlers);
|
|
312
|
+
latest.current = handlers;
|
|
313
|
+
useEffect(() => {
|
|
314
|
+
if (!dragging) return;
|
|
315
|
+
const move = (event) => {
|
|
316
|
+
const current = drag.current;
|
|
317
|
+
if (!current) return;
|
|
318
|
+
latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
|
|
319
|
+
};
|
|
320
|
+
const end = () => {
|
|
321
|
+
const current = drag.current;
|
|
322
|
+
drag.current = null;
|
|
323
|
+
setDragging(null);
|
|
324
|
+
if (current) latest.current.drop(current.id);
|
|
325
|
+
};
|
|
326
|
+
window.addEventListener("pointermove", move);
|
|
327
|
+
window.addEventListener("pointerup", end);
|
|
328
|
+
window.addEventListener("pointercancel", end);
|
|
329
|
+
return () => {
|
|
330
|
+
window.removeEventListener("pointermove", move);
|
|
331
|
+
window.removeEventListener("pointerup", end);
|
|
332
|
+
window.removeEventListener("pointercancel", end);
|
|
333
|
+
};
|
|
334
|
+
}, [dragging, rowSelector]);
|
|
335
|
+
const start = (event, id) => {
|
|
336
|
+
const row = event.currentTarget.closest("li");
|
|
337
|
+
if (!row?.parentElement) return;
|
|
338
|
+
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
339
|
+
drag.current = { id, list: row.parentElement, row };
|
|
340
|
+
setDragging(id);
|
|
341
|
+
};
|
|
342
|
+
return { dragging, start };
|
|
343
|
+
}
|
|
344
|
+
function placeId(ids, id, index) {
|
|
345
|
+
const from = ids.indexOf(id);
|
|
346
|
+
const to = Math.max(0, Math.min(index, ids.length - 1));
|
|
347
|
+
if (from < 0 || from === to) return ids;
|
|
348
|
+
const next = ids.filter((other) => other !== id);
|
|
349
|
+
next.splice(to, 0, id);
|
|
350
|
+
return next;
|
|
351
|
+
}
|
|
352
|
+
function SavedViewMenu({ items, sections, onSelect, onPinChange, pinLabel, unpinLabel, onReorder, reorderLabel, emptyLabel, actions, footer }) {
|
|
353
|
+
const baseId = useId();
|
|
354
|
+
const groups = sections ?? [{ id: void 0, items: items ?? [] }];
|
|
355
|
+
const [draft, setDraft] = useState(null);
|
|
356
|
+
const dragStart = useRef(null);
|
|
357
|
+
const dragGroup = useRef(void 0);
|
|
358
|
+
const orderKey = JSON.stringify(groups.map((group) => [group.id, group.items.map((item) => item.id)]));
|
|
359
|
+
useEffect(() => setDraft(null), [orderKey]);
|
|
360
|
+
const orderOf = (group) => draft && draft.group === group.id ? draft.ids : group.items.map((item) => item.id);
|
|
361
|
+
const move = (group, id, delta) => {
|
|
362
|
+
const current = orderOf(group);
|
|
363
|
+
const next = placeId(current, id, current.indexOf(id) + delta);
|
|
364
|
+
if (next === current) return;
|
|
365
|
+
setDraft({ group: group.id, ids: next });
|
|
366
|
+
onReorder?.([...next], group.id);
|
|
367
|
+
};
|
|
368
|
+
const { dragging, start: startDrag } = useRowDrag(".uix-saved-views__row", {
|
|
369
|
+
over: (id, index) => {
|
|
370
|
+
const group = groups.find((candidate) => candidate.id === dragGroup.current);
|
|
371
|
+
if (!group) return;
|
|
372
|
+
const current = orderOf(group);
|
|
373
|
+
const next = placeId(current, id, index);
|
|
374
|
+
if (next !== current) setDraft({ group: group.id, ids: next });
|
|
375
|
+
},
|
|
376
|
+
drop: () => {
|
|
377
|
+
const group = groups.find((candidate) => candidate.id === dragGroup.current);
|
|
378
|
+
const start = dragStart.current;
|
|
379
|
+
dragStart.current = null;
|
|
380
|
+
if (!group) return;
|
|
381
|
+
const end = orderOf(group);
|
|
382
|
+
if (start && !sameOrder(start, end)) onReorder?.([...end], group.id);
|
|
383
|
+
}
|
|
384
|
+
});
|
|
385
|
+
const visible = groups.filter((group) => group.items.length > 0);
|
|
386
|
+
const renderRows = (group, groupIndex) => {
|
|
387
|
+
const byId = new Map(group.items.map((item) => [item.id, item]));
|
|
388
|
+
return orderOf(group).map((id, index) => {
|
|
389
|
+
const item = byId.get(id);
|
|
390
|
+
if (!item) return null;
|
|
391
|
+
const nameId = `${baseId}-${groupIndex}-${index}`;
|
|
392
|
+
const extra = actions?.(item);
|
|
393
|
+
return /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__row", "data-active": item.active || void 0, "data-dragging": dragging === item.id || void 0, children: [
|
|
394
|
+
onReorder && /* @__PURE__ */ jsx(
|
|
395
|
+
"button",
|
|
396
|
+
{
|
|
397
|
+
type: "button",
|
|
398
|
+
className: "uix-saved-views__grip",
|
|
399
|
+
"aria-label": reorderLabel,
|
|
400
|
+
"aria-describedby": nameId,
|
|
401
|
+
onPointerDown: (event) => {
|
|
402
|
+
if (event.button !== 0) return;
|
|
403
|
+
event.preventDefault();
|
|
404
|
+
dragStart.current = orderOf(group);
|
|
405
|
+
dragGroup.current = group.id;
|
|
406
|
+
startDrag(event, item.id);
|
|
407
|
+
},
|
|
408
|
+
onKeyDown: (event) => {
|
|
409
|
+
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
|
410
|
+
event.preventDefault();
|
|
411
|
+
move(group, item.id, event.key === "ArrowUp" ? -1 : 1);
|
|
412
|
+
},
|
|
413
|
+
children: /* @__PURE__ */ jsx(EditorIcon, { name: "grip" })
|
|
414
|
+
}
|
|
415
|
+
),
|
|
416
|
+
/* @__PURE__ */ jsx("button", { type: "button", id: nameId, className: "uix-menu__item", "data-active": item.active || void 0, "aria-current": item.active || void 0, title: typeof item.label === "string" ? item.label : void 0, onClick: () => onSelect(item.id), children: /* @__PURE__ */ jsx("span", { className: "uix-saved-views__name", children: item.label }) }),
|
|
417
|
+
onPinChange && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
|
|
418
|
+
extra != null && extra !== false && /* @__PURE__ */ jsx("span", { className: "uix-saved-views__actions", children: extra })
|
|
419
|
+
] }, item.id);
|
|
420
|
+
});
|
|
421
|
+
};
|
|
422
|
+
return /* @__PURE__ */ jsxs("ul", { className: "uix-menu uix-saved-views", "data-dragging": dragging ? "" : void 0, children: [
|
|
423
|
+
visible.length === 0 && emptyLabel != null && /* @__PURE__ */ jsx("li", { className: "uix-menu__label", children: emptyLabel }),
|
|
424
|
+
sections ? visible.map((group, groupIndex) => {
|
|
425
|
+
const labelId = `${baseId}-section-${groupIndex}`;
|
|
426
|
+
return /* @__PURE__ */ jsxs("li", { className: "uix-saved-views__section", children: [
|
|
427
|
+
/* @__PURE__ */ jsx("div", { id: labelId, className: "uix-menu__label uix-saved-views__section-label", children: group.label }),
|
|
428
|
+
/* @__PURE__ */ jsx("ul", { className: "uix-saved-views__group", "aria-labelledby": labelId, children: renderRows(group, groupIndex) })
|
|
429
|
+
] }, group.id);
|
|
430
|
+
}) : visible[0] && renderRows(visible[0], 0),
|
|
54
431
|
footer != null && /* @__PURE__ */ jsx("li", { className: "uix-saved-views__footer", children: footer })
|
|
55
432
|
] });
|
|
56
433
|
}
|
package/dist/emoji.cjs
CHANGED
|
@@ -664,7 +664,9 @@ var PATHS = {
|
|
|
664
664
|
redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
|
|
665
665
|
sourceMode: "M10 12.5 8 15l2 2.5M14 12.5l2 2.5-2 2.5M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
|
|
666
666
|
richMode: "M14 2v4a2 2 0 0 0 2 2h4M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM8 13h8M8 17h5",
|
|
667
|
-
clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2"
|
|
667
|
+
clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM12 6v6l4 2",
|
|
668
|
+
grip: "M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01",
|
|
669
|
+
more: "M5 12h.01M12 12h.01M19 12h.01"
|
|
668
670
|
};
|
|
669
671
|
function EditorIcon({ name, ...props }) {
|
|
670
672
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|