@mlw-packages/react-components 1.10.28 → 1.10.30
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/index.css +12 -7
- package/dist/index.d.mts +9 -12
- package/dist/index.d.ts +9 -12
- package/dist/index.js +358 -92
- package/dist/index.mjs +359 -93
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9801,7 +9801,8 @@ function DayViewAgenda({
|
|
|
9801
9801
|
onEventSelect,
|
|
9802
9802
|
showUndatedEvents,
|
|
9803
9803
|
noTime = false,
|
|
9804
|
-
onEventCreate
|
|
9804
|
+
onEventCreate,
|
|
9805
|
+
allDayCell = false
|
|
9805
9806
|
}) {
|
|
9806
9807
|
const hours = React32.useMemo(() => {
|
|
9807
9808
|
const dayStart = dateFns.startOfDay(currentDate);
|
|
@@ -9915,7 +9916,7 @@ function DayViewAgenda({
|
|
|
9915
9916
|
const showAllDaySection = allDayEvents.length > 0;
|
|
9916
9917
|
const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicatorAgenda(currentDate, "day");
|
|
9917
9918
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents", "data-slot": "day-view", children: [
|
|
9918
|
-
showAllDaySection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border/70 border-t bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]", children: [
|
|
9919
|
+
showAllDaySection && !allDayCell && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border/70 border-t bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]", children: [
|
|
9919
9920
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo Dia" }) }),
|
|
9920
9921
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r p-1 last:border-r-0", children: allDayEvents.map((event) => {
|
|
9921
9922
|
const eventStart = getEventStartDate(event);
|
|
@@ -9962,7 +9963,100 @@ function DayViewAgenda({
|
|
|
9962
9963
|
},
|
|
9963
9964
|
hour.toString()
|
|
9964
9965
|
)) }),
|
|
9965
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9966
|
+
showAllDaySection && allDayCell ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9967
|
+
allDayEvents.map((event) => {
|
|
9968
|
+
const eventStart = new Date(event.start);
|
|
9969
|
+
const eventEnd = new Date(new Date(event.end).setHours(23, 59));
|
|
9970
|
+
const isFirstDay = dateFns.isSameDay(currentDate, eventStart);
|
|
9971
|
+
const isLastDay = dateFns.isSameDay(currentDate, eventEnd);
|
|
9972
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9973
|
+
"div",
|
|
9974
|
+
{
|
|
9975
|
+
className: "absolute z-10 px-0.5",
|
|
9976
|
+
style: { height: "100%", width: "100%", padding: "10px" },
|
|
9977
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
9978
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9979
|
+
EventItemAgenda,
|
|
9980
|
+
{
|
|
9981
|
+
event,
|
|
9982
|
+
view: "day",
|
|
9983
|
+
isFirstDay,
|
|
9984
|
+
isLastDay,
|
|
9985
|
+
onClick: (e) => handleEventClick(event, e),
|
|
9986
|
+
noTime,
|
|
9987
|
+
className: "flex justify-start items-start rounded-sm p-2"
|
|
9988
|
+
}
|
|
9989
|
+
) }) }),
|
|
9990
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
9991
|
+
TooltipContentBase,
|
|
9992
|
+
{
|
|
9993
|
+
side: "top",
|
|
9994
|
+
sideOffset: 6,
|
|
9995
|
+
className: "max-w-[220px] space-y-0.5",
|
|
9996
|
+
children: [
|
|
9997
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
9998
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
9999
|
+
event.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
10000
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.MapPinIcon, { size: 15 }),
|
|
10001
|
+
" ",
|
|
10002
|
+
event.location
|
|
10003
|
+
] }),
|
|
10004
|
+
event.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
10005
|
+
]
|
|
10006
|
+
}
|
|
10007
|
+
)
|
|
10008
|
+
] }) })
|
|
10009
|
+
},
|
|
10010
|
+
`spanning-${event.id}`
|
|
10011
|
+
);
|
|
10012
|
+
}),
|
|
10013
|
+
currentTimeVisible && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10014
|
+
"div",
|
|
10015
|
+
{
|
|
10016
|
+
className: "pointer-events-none absolute right-0 left-0 z-20",
|
|
10017
|
+
style: { top: `${currentTimePosition}%` },
|
|
10018
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
|
|
10019
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "-left-1 absolute h-2 w-2 rounded-full bg-primary" }),
|
|
10020
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[2px] w-full bg-primary" })
|
|
10021
|
+
] })
|
|
10022
|
+
}
|
|
10023
|
+
),
|
|
10024
|
+
hours.map((hour) => {
|
|
10025
|
+
const hourValue = dateFns.getHours(hour);
|
|
10026
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10027
|
+
"div",
|
|
10028
|
+
{
|
|
10029
|
+
className: "relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0",
|
|
10030
|
+
children: [0, 1, 2, 3].map((quarter) => {
|
|
10031
|
+
const quarterHourTime = hourValue + quarter * 0.25;
|
|
10032
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10033
|
+
DroppableCellAgenda,
|
|
10034
|
+
{
|
|
10035
|
+
className: cn(
|
|
10036
|
+
"absolute h-[calc(var(--week-cells-height)/4)] w-full",
|
|
10037
|
+
quarter === 0 && "top-0",
|
|
10038
|
+
quarter === 1 && "top-[calc(var(--week-cells-height)/4)]",
|
|
10039
|
+
quarter === 2 && "top-[calc(var(--week-cells-height)/4*2)]",
|
|
10040
|
+
quarter === 3 && "top-[calc(var(--week-cells-height)/4*3)]"
|
|
10041
|
+
),
|
|
10042
|
+
date: currentDate,
|
|
10043
|
+
id: `day-cell-${currentDate.toISOString()}-${quarterHourTime}`,
|
|
10044
|
+
onClick: () => {
|
|
10045
|
+
const startTime = new Date(currentDate);
|
|
10046
|
+
startTime.setHours(hourValue);
|
|
10047
|
+
startTime.setMinutes(quarter * 15);
|
|
10048
|
+
if (onEventCreate) onEventCreate(startTime);
|
|
10049
|
+
},
|
|
10050
|
+
time: quarterHourTime
|
|
10051
|
+
},
|
|
10052
|
+
`${hour.toString()}-${quarter}`
|
|
10053
|
+
);
|
|
10054
|
+
})
|
|
10055
|
+
},
|
|
10056
|
+
hour.toString()
|
|
10057
|
+
);
|
|
10058
|
+
})
|
|
10059
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
9966
10060
|
positionedEvents.map((positionedEvent) => {
|
|
9967
10061
|
const evt = positionedEvent.event;
|
|
9968
10062
|
const eventStart = new Date(evt.start ?? evt.end ?? Date.now());
|
|
@@ -10316,7 +10410,8 @@ function EventAgenda({
|
|
|
10316
10410
|
onlyWeek,
|
|
10317
10411
|
onlyAgenda,
|
|
10318
10412
|
onlyYear,
|
|
10319
|
-
allowCellClick = true
|
|
10413
|
+
allowCellClick = true,
|
|
10414
|
+
allDayCell = false
|
|
10320
10415
|
}) {
|
|
10321
10416
|
const lockedView = onlyDay ? "day" : onlyMonth ? "month" : onlyWeek ? "week" : onlyAgenda ? "agenda" : onlyYear ? "year" : void 0;
|
|
10322
10417
|
const [currentDate, setCurrentDate] = React32.useState(
|
|
@@ -10436,9 +10531,10 @@ function EventAgenda({
|
|
|
10436
10531
|
},
|
|
10437
10532
|
children: [
|
|
10438
10533
|
/* @__PURE__ */ jsxRuntime.jsxs(CalendarDndProviderAgenda, { onEventUpdate: handleEventUpdate, children: [
|
|
10439
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between
|
|
10440
|
-
/* @__PURE__ */ jsxRuntime.
|
|
10441
|
-
|
|
10534
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 px-2 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4 sm:py-4", children: [
|
|
10535
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-base sm:text-lg md:text-xl lg:text-2xl truncate", children: viewTitle }),
|
|
10536
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sm:justify-end gap-2", children: [
|
|
10537
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
10442
10538
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10443
10539
|
ButtonBase,
|
|
10444
10540
|
{
|
|
@@ -10460,21 +10556,18 @@ function EventAgenda({
|
|
|
10460
10556
|
}
|
|
10461
10557
|
)
|
|
10462
10558
|
] }),
|
|
10463
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10464
|
-
|
|
10465
|
-
|
|
10466
|
-
|
|
10467
|
-
|
|
10468
|
-
|
|
10469
|
-
|
|
10470
|
-
|
|
10471
|
-
|
|
10472
|
-
|
|
10473
|
-
|
|
10474
|
-
|
|
10475
|
-
hideClear: true
|
|
10476
|
-
}
|
|
10477
|
-
) })
|
|
10559
|
+
!lockedView && /* @__PURE__ */ jsxRuntime.jsx(
|
|
10560
|
+
Select,
|
|
10561
|
+
{
|
|
10562
|
+
selected: activeView,
|
|
10563
|
+
onChange: (v) => setView(v),
|
|
10564
|
+
items: selectItems,
|
|
10565
|
+
placeholder: viewLabel(activeView),
|
|
10566
|
+
className: "min-w-24",
|
|
10567
|
+
hideClear: true
|
|
10568
|
+
}
|
|
10569
|
+
)
|
|
10570
|
+
] })
|
|
10478
10571
|
] }),
|
|
10479
10572
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col transition-all duration-200 ease-in-out", children: [
|
|
10480
10573
|
activeView === "month" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -10499,6 +10592,7 @@ function EventAgenda({
|
|
|
10499
10592
|
events,
|
|
10500
10593
|
onEventSelect: handleEventSelect,
|
|
10501
10594
|
noTime,
|
|
10595
|
+
allDayCell,
|
|
10502
10596
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10503
10597
|
start: d,
|
|
10504
10598
|
end: d,
|
|
@@ -10514,6 +10608,7 @@ function EventAgenda({
|
|
|
10514
10608
|
events,
|
|
10515
10609
|
onEventSelect: handleEventSelect,
|
|
10516
10610
|
noTime,
|
|
10611
|
+
allDayCell,
|
|
10517
10612
|
onEventCreate: allowCellClick ? (d) => onEventUpdate?.({
|
|
10518
10613
|
start: d,
|
|
10519
10614
|
end: d,
|
|
@@ -11220,6 +11315,7 @@ function WeekViewAgenda({
|
|
|
11220
11315
|
currentDate,
|
|
11221
11316
|
events,
|
|
11222
11317
|
onEventSelect,
|
|
11318
|
+
allDayCell = false,
|
|
11223
11319
|
onEventCreate,
|
|
11224
11320
|
showUndatedEvents,
|
|
11225
11321
|
noTime = false
|
|
@@ -11395,7 +11491,7 @@ function WeekViewAgenda({
|
|
|
11395
11491
|
))
|
|
11396
11492
|
] }),
|
|
11397
11493
|
showAllDaySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/70 border-b bg-muted/50", children: [
|
|
11398
|
-
trueAllDayEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11494
|
+
trueAllDayEvents.length > 0 && !allDayCell && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-8", children: [
|
|
11399
11495
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-border/70 border-r flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[10px] text-muted-foreground/70 sm:text-xs", children: "Todo dia" }) }),
|
|
11400
11496
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11401
11497
|
"div",
|
|
@@ -11583,6 +11679,60 @@ function WeekViewAgenda({
|
|
|
11583
11679
|
className: "relative grid auto-cols-fr border-border/70 border-r last:border-r-0",
|
|
11584
11680
|
"data-today": dateFns.isToday(day) || void 0,
|
|
11585
11681
|
children: [
|
|
11682
|
+
trueAllDayEvents.length > 0 && allDayCell && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: trueAllDayEvents.filter(
|
|
11683
|
+
(event) => event.start?.toLocaleDateString() == new Date(day).toLocaleDateString()
|
|
11684
|
+
)?.map((event) => {
|
|
11685
|
+
const eventStart = new Date(event.start);
|
|
11686
|
+
const eventEnd = new Date(
|
|
11687
|
+
new Date(event.end).setHours(23, 59)
|
|
11688
|
+
);
|
|
11689
|
+
const isFirstDay = dateFns.isSameDay(currentDate, eventStart);
|
|
11690
|
+
const isLastDay = dateFns.isSameDay(currentDate, eventEnd);
|
|
11691
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11692
|
+
"div",
|
|
11693
|
+
{
|
|
11694
|
+
className: "absolute z-10 px-0.5",
|
|
11695
|
+
style: {
|
|
11696
|
+
height: "100%",
|
|
11697
|
+
width: "100%",
|
|
11698
|
+
padding: "10px"
|
|
11699
|
+
},
|
|
11700
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { delayDuration: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { children: [
|
|
11701
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11702
|
+
EventItemAgenda,
|
|
11703
|
+
{
|
|
11704
|
+
event,
|
|
11705
|
+
view: "day",
|
|
11706
|
+
isFirstDay,
|
|
11707
|
+
isLastDay,
|
|
11708
|
+
onClick: (e) => handleEventClick(event, e),
|
|
11709
|
+
noTime,
|
|
11710
|
+
className: "flex justify-start items-start rounded-sm py-1"
|
|
11711
|
+
}
|
|
11712
|
+
) }) }),
|
|
11713
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
11714
|
+
TooltipContentBase,
|
|
11715
|
+
{
|
|
11716
|
+
side: "top",
|
|
11717
|
+
sideOffset: 6,
|
|
11718
|
+
className: "max-w-[220px] space-y-0.5",
|
|
11719
|
+
children: [
|
|
11720
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm leading-snug", children: event.title }),
|
|
11721
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: formatDurationAgenda(event) }),
|
|
11722
|
+
event.location && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs flex items-center gap-2", children: [
|
|
11723
|
+
/* @__PURE__ */ jsxRuntime.jsx(ssr.MapPinIcon, { size: 15 }),
|
|
11724
|
+
" ",
|
|
11725
|
+
event.location
|
|
11726
|
+
] }),
|
|
11727
|
+
event.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-75 line-clamp-2", children: event.description })
|
|
11728
|
+
]
|
|
11729
|
+
}
|
|
11730
|
+
)
|
|
11731
|
+
] }) })
|
|
11732
|
+
},
|
|
11733
|
+
`spanning-${event.id}`
|
|
11734
|
+
);
|
|
11735
|
+
}) }),
|
|
11586
11736
|
(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => {
|
|
11587
11737
|
const timeLabel = formatDurationAgenda(positionedEvent.event);
|
|
11588
11738
|
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderBase, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipBase, { delayDuration: 250, children: [
|
|
@@ -22284,15 +22434,24 @@ function normaliseGroups(items = [], groups = []) {
|
|
|
22284
22434
|
}
|
|
22285
22435
|
function unionGroups(base, terms) {
|
|
22286
22436
|
if (terms.length === 0) return base;
|
|
22287
|
-
const
|
|
22437
|
+
const bestScore = /* @__PURE__ */ new Map();
|
|
22288
22438
|
terms.forEach((term) => {
|
|
22289
|
-
|
|
22290
|
-
|
|
22439
|
+
base.forEach((group) => {
|
|
22440
|
+
group.items.forEach((item) => {
|
|
22441
|
+
const s = scoreMatch(item, term);
|
|
22442
|
+
if (s >= 0) {
|
|
22443
|
+
const prev = bestScore.get(item.id) ?? -1;
|
|
22444
|
+
if (s > prev) bestScore.set(item.id, s);
|
|
22445
|
+
}
|
|
22446
|
+
});
|
|
22447
|
+
});
|
|
22291
22448
|
});
|
|
22292
22449
|
return base.map((group) => ({
|
|
22293
22450
|
...group,
|
|
22294
|
-
items: group.items.filter((item) =>
|
|
22295
|
-
|
|
22451
|
+
items: group.items.filter((item) => bestScore.has(item.id)).sort(
|
|
22452
|
+
(a, b) => (bestScore.get(b.id) ?? 0) - (bestScore.get(a.id) ?? 0)
|
|
22453
|
+
)
|
|
22454
|
+
})).filter((group) => group.items.length > 0).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
|
|
22296
22455
|
}
|
|
22297
22456
|
function createGroup(id, label, items, opts) {
|
|
22298
22457
|
return { id, label, items, ...opts };
|
|
@@ -22413,33 +22572,31 @@ function CommandItemRow({
|
|
|
22413
22572
|
onHover,
|
|
22414
22573
|
searchQuery
|
|
22415
22574
|
}) {
|
|
22575
|
+
const handleCheckboxChange = (checked) => {
|
|
22576
|
+
if (checked !== "indeterminate") {
|
|
22577
|
+
onToggleSelection?.({});
|
|
22578
|
+
}
|
|
22579
|
+
};
|
|
22580
|
+
const handleItemClick = (e) => {
|
|
22581
|
+
if (multiSelect) {
|
|
22582
|
+
onToggleSelection?.(e);
|
|
22583
|
+
return;
|
|
22584
|
+
}
|
|
22585
|
+
onSelect(e);
|
|
22586
|
+
};
|
|
22416
22587
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
22417
22588
|
framerMotion.motion.button,
|
|
22418
22589
|
{
|
|
22419
22590
|
layout: true,
|
|
22420
|
-
onClick:
|
|
22421
|
-
if (multiSelect && onToggleSelection && (e.ctrlKey || e.metaKey || e.shiftKey)) {
|
|
22422
|
-
onToggleSelection(e);
|
|
22423
|
-
} else {
|
|
22424
|
-
onSelect(e);
|
|
22425
|
-
}
|
|
22426
|
-
},
|
|
22591
|
+
onClick: handleItemClick,
|
|
22427
22592
|
onMouseEnter: onHover,
|
|
22428
22593
|
className: `
|
|
22429
|
-
w-full flex items-center gap-
|
|
22430
|
-
transition-colors duration-75 group relative
|
|
22594
|
+
w-full flex items-center gap-2 px-2 py-1 rounded-md text-left cursor-pointer
|
|
22595
|
+
transition-colors duration-75 group relative justify-between
|
|
22431
22596
|
${isActive ? "text-accent-foreground bg-accent" : "hover:bg-accent hover:text-accent-foreground"}
|
|
22432
22597
|
`,
|
|
22433
22598
|
children: [
|
|
22434
|
-
|
|
22435
|
-
"span",
|
|
22436
|
-
{
|
|
22437
|
-
className: `relative flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-md text-base
|
|
22438
|
-
${isSelected ? "bg-primary text-primary-foreground" : isActive ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground group-hover:text-foreground"}`,
|
|
22439
|
-
children: item.icon
|
|
22440
|
-
}
|
|
22441
|
-
),
|
|
22442
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0 px-1", children: [
|
|
22599
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [
|
|
22443
22600
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
|
|
22444
22601
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
22445
22602
|
"span",
|
|
@@ -22453,6 +22610,14 @@ function CommandItemRow({
|
|
|
22453
22610
|
item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightText, { text: item.description, query: searchQuery }) })
|
|
22454
22611
|
] }),
|
|
22455
22612
|
item.shortcut && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative hidden sm:flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: k }, i)) }),
|
|
22613
|
+
multiSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
22614
|
+
CheckboxBase,
|
|
22615
|
+
{
|
|
22616
|
+
checked: isSelected,
|
|
22617
|
+
onCheckedChange: handleCheckboxChange,
|
|
22618
|
+
className: "h-4 w-4 pointer-events-none"
|
|
22619
|
+
}
|
|
22620
|
+
) }),
|
|
22456
22621
|
isSelected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
22457
22622
|
framerMotion.motion.div,
|
|
22458
22623
|
{
|
|
@@ -22460,7 +22625,8 @@ function CommandItemRow({
|
|
|
22460
22625
|
className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-primary rounded-r-md"
|
|
22461
22626
|
}
|
|
22462
22627
|
),
|
|
22463
|
-
|
|
22628
|
+
!isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-transparent rounded-r-md" }),
|
|
22629
|
+
isActive && !isSelected && !multiSelect && /* @__PURE__ */ jsxRuntime.jsx(
|
|
22464
22630
|
react.CaretRightIcon,
|
|
22465
22631
|
{
|
|
22466
22632
|
className: "relative w-4 h-4 text-primary flex-shrink-0",
|
|
@@ -22482,12 +22648,15 @@ function useCommandPalette({
|
|
|
22482
22648
|
maxRecentItems = 5,
|
|
22483
22649
|
multiSearch = false,
|
|
22484
22650
|
multiSelect = false,
|
|
22485
|
-
onSelectMultiple
|
|
22651
|
+
onSelectMultiple,
|
|
22652
|
+
onMultiSearchSubmit
|
|
22486
22653
|
}) {
|
|
22487
22654
|
const [query, setQuery] = React32__namespace.useState("");
|
|
22488
22655
|
const [activeIndex, setActiveIndex] = React32__namespace.useState(0);
|
|
22489
22656
|
const [page, setPage] = React32__namespace.useState(0);
|
|
22490
|
-
const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
|
|
22657
|
+
const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
|
|
22658
|
+
/* @__PURE__ */ new Set()
|
|
22659
|
+
);
|
|
22491
22660
|
const stateRef = React32.useRef({
|
|
22492
22661
|
activeIndex,
|
|
22493
22662
|
page,
|
|
@@ -22504,27 +22673,44 @@ function useCommandPalette({
|
|
|
22504
22673
|
});
|
|
22505
22674
|
}, []);
|
|
22506
22675
|
const clearSelection = React32.useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
|
|
22507
|
-
const baseGroups = React32.useMemo(
|
|
22676
|
+
const baseGroups = React32.useMemo(
|
|
22677
|
+
() => normaliseGroups(items, groups),
|
|
22678
|
+
[items, groups]
|
|
22679
|
+
);
|
|
22508
22680
|
React32.useEffect(() => {
|
|
22509
22681
|
if (open) {
|
|
22510
|
-
|
|
22682
|
+
const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
|
|
22683
|
+
setQuery(savedQuery);
|
|
22511
22684
|
setActiveIndex(0);
|
|
22512
22685
|
setPage(0);
|
|
22513
|
-
|
|
22686
|
+
if (!multiSelect) {
|
|
22687
|
+
clearSelection();
|
|
22688
|
+
}
|
|
22514
22689
|
}
|
|
22515
|
-
}, [open, clearSelection]);
|
|
22690
|
+
}, [open, clearSelection, multiSelect]);
|
|
22691
|
+
React32.useEffect(() => {
|
|
22692
|
+
if (!open) {
|
|
22693
|
+
localStorage.setItem("commandPaletteQuery", query);
|
|
22694
|
+
}
|
|
22695
|
+
}, [open, query]);
|
|
22516
22696
|
const searchTerms = React32.useMemo(() => {
|
|
22517
22697
|
const parts = query.split(",");
|
|
22518
|
-
|
|
22519
|
-
|
|
22698
|
+
const terms = parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
|
|
22699
|
+
if (terms.length > 1) return terms;
|
|
22700
|
+
if (multiSearch && terms.length > 0) return terms;
|
|
22701
|
+
return [];
|
|
22520
22702
|
}, [query, multiSearch]);
|
|
22521
22703
|
const allMatchedGroups = React32.useMemo(() => {
|
|
22522
|
-
if (!query.trim())
|
|
22523
|
-
|
|
22524
|
-
|
|
22525
|
-
|
|
22526
|
-
|
|
22527
|
-
|
|
22704
|
+
if (!query.trim()) return baseGroups;
|
|
22705
|
+
if (searchTerms.length > 0) {
|
|
22706
|
+
return unionGroups(baseGroups, searchTerms);
|
|
22707
|
+
}
|
|
22708
|
+
return filterAndScore(baseGroups, query);
|
|
22709
|
+
}, [query, baseGroups, searchTerms]);
|
|
22710
|
+
const allFlatItems = React32.useMemo(
|
|
22711
|
+
() => allMatchedGroups.flatMap((g) => g.items),
|
|
22712
|
+
[allMatchedGroups]
|
|
22713
|
+
);
|
|
22528
22714
|
const totalItems = allFlatItems.length;
|
|
22529
22715
|
const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
|
|
22530
22716
|
React32.useEffect(() => {
|
|
@@ -22551,8 +22737,14 @@ function useCommandPalette({
|
|
|
22551
22737
|
}
|
|
22552
22738
|
return result;
|
|
22553
22739
|
}, [allMatchedGroups, page]);
|
|
22554
|
-
const flatItems = React32.useMemo(
|
|
22555
|
-
|
|
22740
|
+
const flatItems = React32.useMemo(
|
|
22741
|
+
() => displayedGroups.flatMap((g) => g.items),
|
|
22742
|
+
[displayedGroups]
|
|
22743
|
+
);
|
|
22744
|
+
const selectedItems = React32.useMemo(
|
|
22745
|
+
() => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
|
|
22746
|
+
[allFlatItems, selectedItemIds]
|
|
22747
|
+
);
|
|
22556
22748
|
React32.useEffect(() => {
|
|
22557
22749
|
stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
|
|
22558
22750
|
}, [activeIndex, page, flatItems, query, selectedItems]);
|
|
@@ -22561,47 +22753,92 @@ function useCommandPalette({
|
|
|
22561
22753
|
onSelectMultiple(selectedItems);
|
|
22562
22754
|
onOpenChange?.(false);
|
|
22563
22755
|
}, [onSelectMultiple, selectedItems, onOpenChange]);
|
|
22564
|
-
const handleSelect = React32.useCallback(
|
|
22565
|
-
|
|
22566
|
-
|
|
22567
|
-
|
|
22568
|
-
|
|
22569
|
-
|
|
22570
|
-
|
|
22756
|
+
const handleSelect = React32.useCallback(
|
|
22757
|
+
(item, event) => {
|
|
22758
|
+
if (!item) return;
|
|
22759
|
+
if (multiSelect) {
|
|
22760
|
+
const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
|
|
22761
|
+
if (isCmdKey) {
|
|
22762
|
+
toggleSelection(item.id);
|
|
22763
|
+
return;
|
|
22764
|
+
}
|
|
22765
|
+
if (selectedItems.length > 0) {
|
|
22766
|
+
const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
|
|
22767
|
+
onSelectMultiple?.(finalItems);
|
|
22768
|
+
onOpenChange?.(false);
|
|
22769
|
+
return;
|
|
22770
|
+
}
|
|
22571
22771
|
}
|
|
22572
|
-
|
|
22573
|
-
|
|
22574
|
-
|
|
22575
|
-
|
|
22576
|
-
|
|
22772
|
+
item.onSelect();
|
|
22773
|
+
onOpenChange?.(false);
|
|
22774
|
+
if (onRecentItemsChange) {
|
|
22775
|
+
const next = [
|
|
22776
|
+
item,
|
|
22777
|
+
...recentItems.filter((r) => r.id !== item.id)
|
|
22778
|
+
].slice(0, maxRecentItems);
|
|
22779
|
+
onRecentItemsChange(next);
|
|
22577
22780
|
}
|
|
22578
|
-
}
|
|
22579
|
-
|
|
22580
|
-
|
|
22581
|
-
|
|
22582
|
-
|
|
22583
|
-
|
|
22584
|
-
|
|
22585
|
-
|
|
22781
|
+
},
|
|
22782
|
+
[
|
|
22783
|
+
multiSelect,
|
|
22784
|
+
selectedItems,
|
|
22785
|
+
selectedItemIds,
|
|
22786
|
+
onSelectMultiple,
|
|
22787
|
+
onOpenChange,
|
|
22788
|
+
onRecentItemsChange,
|
|
22789
|
+
recentItems,
|
|
22790
|
+
maxRecentItems,
|
|
22791
|
+
toggleSelection
|
|
22792
|
+
]
|
|
22793
|
+
);
|
|
22586
22794
|
React32.useEffect(() => {
|
|
22587
22795
|
if (!open) return;
|
|
22588
22796
|
const handler = (e) => {
|
|
22589
|
-
const { activeIndex: curIdx, flatItems: curItems
|
|
22797
|
+
const { activeIndex: curIdx, flatItems: curItems } = stateRef.current;
|
|
22590
22798
|
if (e.key === "ArrowDown") {
|
|
22591
22799
|
e.preventDefault();
|
|
22592
|
-
if (curIdx === curItems.length - 1 && page < totalPages - 1)
|
|
22800
|
+
if (curIdx === curItems.length - 1 && page < totalPages - 1)
|
|
22801
|
+
setPage((p) => p + 1);
|
|
22593
22802
|
else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
|
|
22594
22803
|
} else if (e.key === "ArrowUp") {
|
|
22595
22804
|
e.preventDefault();
|
|
22596
22805
|
if (curIdx === 0 && page > 0) {
|
|
22597
22806
|
setPage((p) => p - 1);
|
|
22598
22807
|
setActiveIndex(PAGE_SIZE - 1);
|
|
22599
|
-
} else
|
|
22808
|
+
} else
|
|
22809
|
+
setActiveIndex(
|
|
22810
|
+
(i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1)
|
|
22811
|
+
);
|
|
22600
22812
|
} else if (e.key === "Enter") {
|
|
22601
22813
|
e.preventDefault();
|
|
22602
|
-
|
|
22814
|
+
const currentSelectedItems = allFlatItems.filter(
|
|
22815
|
+
(i) => selectedItemIds.has(i.id)
|
|
22816
|
+
);
|
|
22817
|
+
if (multiSelect && currentSelectedItems.length > 0) {
|
|
22818
|
+
const selectedLabels = currentSelectedItems.map((item) => item.label);
|
|
22819
|
+
onMultiSearchSubmit?.(selectedLabels);
|
|
22603
22820
|
return;
|
|
22604
22821
|
}
|
|
22822
|
+
if (multiSearch && query.trim().length > 0) {
|
|
22823
|
+
const terms = query.split(",").map((t) => t.trim()).filter(Boolean);
|
|
22824
|
+
if (terms.length > 0) {
|
|
22825
|
+
if (multiSelect) {
|
|
22826
|
+
const matchedItems = allFlatItems.filter(
|
|
22827
|
+
(item) => terms.some(
|
|
22828
|
+
(term) => item.label.toLowerCase().includes(term.toLowerCase()) || item.id.toLowerCase().includes(term.toLowerCase())
|
|
22829
|
+
)
|
|
22830
|
+
);
|
|
22831
|
+
const newSelectedIds = new Set(selectedItemIds);
|
|
22832
|
+
matchedItems.forEach((item) => newSelectedIds.add(item.id));
|
|
22833
|
+
setSelectedItemIds(newSelectedIds);
|
|
22834
|
+
const selectedLabels = matchedItems.map((item) => item.label);
|
|
22835
|
+
onMultiSearchSubmit?.(selectedLabels);
|
|
22836
|
+
return;
|
|
22837
|
+
}
|
|
22838
|
+
onMultiSearchSubmit?.(terms);
|
|
22839
|
+
return;
|
|
22840
|
+
}
|
|
22841
|
+
}
|
|
22605
22842
|
if (multiSelect && (e.ctrlKey || e.metaKey)) {
|
|
22606
22843
|
executeBulkAction();
|
|
22607
22844
|
return;
|
|
@@ -22611,7 +22848,20 @@ function useCommandPalette({
|
|
|
22611
22848
|
};
|
|
22612
22849
|
window.addEventListener("keydown", handler);
|
|
22613
22850
|
return () => window.removeEventListener("keydown", handler);
|
|
22614
|
-
}, [
|
|
22851
|
+
}, [
|
|
22852
|
+
open,
|
|
22853
|
+
page,
|
|
22854
|
+
totalPages,
|
|
22855
|
+
multiSearch,
|
|
22856
|
+
multiSelect,
|
|
22857
|
+
handleSelect,
|
|
22858
|
+
executeBulkAction,
|
|
22859
|
+
onMultiSearchSubmit,
|
|
22860
|
+
selectedItems,
|
|
22861
|
+
allFlatItems,
|
|
22862
|
+
selectedItemIds,
|
|
22863
|
+
query
|
|
22864
|
+
]);
|
|
22615
22865
|
return {
|
|
22616
22866
|
query,
|
|
22617
22867
|
setQuery,
|
|
@@ -22632,7 +22882,7 @@ function useCommandPalette({
|
|
|
22632
22882
|
selectedItems,
|
|
22633
22883
|
executeBulkAction,
|
|
22634
22884
|
isEmpty: totalItems === 0 && query.trim().length > 0,
|
|
22635
|
-
showList:
|
|
22885
|
+
showList: true
|
|
22636
22886
|
};
|
|
22637
22887
|
}
|
|
22638
22888
|
function useKeyboardShortcut(key, callback, options = {}) {
|
|
@@ -22932,7 +23182,16 @@ function CommandPalette(props) {
|
|
|
22932
23182
|
className: "flex-1 bg-transparent border-none shadow-none focus-visible:ring-0 p-0 text-base"
|
|
22933
23183
|
}
|
|
22934
23184
|
),
|
|
22935
|
-
query && /* @__PURE__ */ jsxRuntime.jsx(
|
|
23185
|
+
query && /* @__PURE__ */ jsxRuntime.jsx(
|
|
23186
|
+
ButtonBase,
|
|
23187
|
+
{
|
|
23188
|
+
variant: "ghost",
|
|
23189
|
+
size: "icon",
|
|
23190
|
+
onClick: handleClearQuery,
|
|
23191
|
+
className: "h-8 w-8",
|
|
23192
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
|
|
23193
|
+
}
|
|
23194
|
+
)
|
|
22936
23195
|
]
|
|
22937
23196
|
}
|
|
22938
23197
|
),
|
|
@@ -22985,7 +23244,13 @@ function CommandPalette(props) {
|
|
|
22985
23244
|
style: { maxHeight: "min(600px, 80vh)" },
|
|
22986
23245
|
children: [
|
|
22987
23246
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
|
|
22988
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
23247
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
23248
|
+
react.MagnifyingGlassIcon,
|
|
23249
|
+
{
|
|
23250
|
+
className: "w-4 h-4 text-muted-foreground flex-shrink-0",
|
|
23251
|
+
weight: "bold"
|
|
23252
|
+
}
|
|
23253
|
+
),
|
|
22989
23254
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
22990
23255
|
DebouncedInput,
|
|
22991
23256
|
{
|
|
@@ -23016,7 +23281,8 @@ function CommandPalette(props) {
|
|
|
23016
23281
|
footer,
|
|
23017
23282
|
totalItems,
|
|
23018
23283
|
selectedCount: selectedItemIds.size,
|
|
23019
|
-
executeBulkAction
|
|
23284
|
+
executeBulkAction,
|
|
23285
|
+
multiSelect
|
|
23020
23286
|
}
|
|
23021
23287
|
)
|
|
23022
23288
|
]
|