@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.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 p-2 sm:p-4", children: [
10440
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-4 min-w-0", children: [
10441
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center sm:gap-2", children: [
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("h2", { className: "font-semibold text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl min-w-0 truncate sm:whitespace-normal", children: viewTitle })
10464
- ] }),
10465
- !lockedView && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
10466
- Select,
10467
- {
10468
- selected: activeView,
10469
- onChange: (v) => {
10470
- setView(v);
10471
- },
10472
- items: selectItems,
10473
- placeholder: viewLabel(activeView),
10474
- className: "min-w-24",
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 allMatchedIds = /* @__PURE__ */ new Set();
22437
+ const bestScore = /* @__PURE__ */ new Map();
22288
22438
  terms.forEach((term) => {
22289
- const filtered = filterAndScore(base, term);
22290
- filtered.forEach((g) => g.items.forEach((i) => allMatchedIds.add(i.id)));
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) => allMatchedIds.has(item.id))
22295
- })).filter((group) => group.items.length > 0);
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: (e) => {
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-1 px-2 py-1 rounded-md text-left cursor-pointer
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
- item.icon && /* @__PURE__ */ jsxRuntime.jsx(
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
- isActive && !isSelected && /* @__PURE__ */ jsxRuntime.jsx(
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(/* @__PURE__ */ new Set());
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(() => normaliseGroups(items, groups), [items, groups]);
22676
+ const baseGroups = React32.useMemo(
22677
+ () => normaliseGroups(items, groups),
22678
+ [items, groups]
22679
+ );
22508
22680
  React32.useEffect(() => {
22509
22681
  if (open) {
22510
- setQuery("");
22682
+ const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
22683
+ setQuery(savedQuery);
22511
22684
  setActiveIndex(0);
22512
22685
  setPage(0);
22513
- clearSelection();
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
- if (parts.length <= 1 && !multiSearch) return [];
22519
- return parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
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
- return recentItems.length > 0 ? [{ id: "__recent__", label: "Recent", icon: React32__namespace.createElement(react.ClockCounterClockwiseIcon), items: recentItems, priority: 999 }, ...baseGroups] : baseGroups;
22524
- }
22525
- return searchTerms.length > 1 || multiSearch && searchTerms.length > 0 ? unionGroups(baseGroups, searchTerms) : filterAndScore(baseGroups, query);
22526
- }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
22527
- const allFlatItems = React32.useMemo(() => allMatchedGroups.flatMap((g) => g.items), [allMatchedGroups]);
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(() => displayedGroups.flatMap((g) => g.items), [displayedGroups]);
22555
- const selectedItems = React32.useMemo(() => allFlatItems.filter((i) => selectedItemIds.has(i.id)), [allFlatItems, selectedItemIds]);
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((item, event) => {
22565
- if (!item) return;
22566
- if (multiSelect) {
22567
- const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
22568
- if (isCmdKey) {
22569
- toggleSelection(item.id);
22570
- return;
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
- if (selectedItems.length > 0) {
22573
- const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
22574
- onSelectMultiple?.(finalItems);
22575
- onOpenChange?.(false);
22576
- return;
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
- item.onSelect();
22580
- onOpenChange?.(false);
22581
- if (onRecentItemsChange) {
22582
- const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(0, maxRecentItems);
22583
- onRecentItemsChange(next);
22584
- }
22585
- }, [multiSelect, selectedItems, selectedItemIds, onSelectMultiple, onOpenChange, onRecentItemsChange, recentItems, maxRecentItems, toggleSelection]);
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, query: curQuery, selectedItems: curSelected } = stateRef.current;
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) setPage((p) => p + 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 setActiveIndex((i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1));
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
- if (multiSearch && curQuery.includes(",") && curSelected.length === 0) {
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
- }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
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: query.trim() !== "" || recentItems.length > 0
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(ButtonBase, { variant: "ghost", size: "icon", onClick: handleClearQuery, className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" }) })
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(react.MagnifyingGlassIcon, { className: "w-4 h-4 text-muted-foreground flex-shrink-0", weight: "bold" }),
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
  ]