@mieweb/ui 0.5.0 → 0.6.1-dev.120

package/dist/index.cjs

@@ -3869,7 +3869,7 @@ var MessageBubble = React48__namespace.forwardRef(
             "div",
             {
               className: chunkOR5DRJCW_cjs.cn(
-                "flex flex-col",
+                "flex min-w-0 flex-1 flex-col",
                 isOutgoing ? "items-end" : "items-start"
               ),
               children: [
@@ -8648,11 +8648,17 @@ function CommandPalette({
   placeholder = "Search...",
   isLoading = false,
   onSelect,
+  onQueryChange,
+  pinnedItems,
+  pinnedCategoryLabel = "Actions",
+  recentItems,
+  recentCategoryLabel = "Recent",
   emptyState,
   renderItem,
   footer,
   className,
-  "data-testid": testId = "command-palette"
+  "data-testid": testId = "command-palette",
+  serverFiltered = false
 }) {
   const {
     isOpen,
@@ -8669,29 +8675,47 @@ function CommandPalette({
   const inputRef = React48.useRef(null);
   const containerRef = React48.useRef(null);
   const listRef = React48.useRef(null);
+  React48.useEffect(() => {
+    if (!isOpen) return;
+    onQueryChange?.(query);
+  }, [query, isOpen, onQueryChange]);
+  const PINNED_CATEGORY_ID = "__palette_pinned__";
+  const RECENT_CATEGORY_ID = "__palette_recent__";
   const filteredItems = React48.useMemo(() => {
     let result = items;
     if (activeCategory) {
       result = result.filter((item) => item.category === activeCategory);
     }
-    if (query.trim()) {
+    if (query.trim() && !serverFiltered) {
       const lowerQuery = query.toLowerCase();
       result = result.filter(
         (item) => item.label.toLowerCase().includes(lowerQuery) || item.subtitle?.toLowerCase().includes(lowerQuery) || item.description?.toLowerCase().includes(lowerQuery)
       );
     }
     return result;
-  }, [items, query, activeCategory]);
+  }, [items, query, activeCategory, serverFiltered]);
+  const effectiveItems = React48.useMemo(() => {
+    const pinned = !activeCategory && pinnedItems?.length ? pinnedItems.map((it) => ({
+      ...it,
+      category: it.category ?? PINNED_CATEGORY_ID
+    })) : [];
+    const showRecents = !activeCategory && !query.trim() && filteredItems.length === 0 && !!recentItems?.length;
+    const recents = showRecents ? recentItems.map((it) => ({
+      ...it,
+      category: it.category ?? RECENT_CATEGORY_ID
+    })) : [];
+    return [...pinned, ...filteredItems, ...recents];
+  }, [pinnedItems, recentItems, filteredItems, activeCategory, query]);
   const groupedItems = React48.useMemo(() => {
     const groups = /* @__PURE__ */ new Map();
-    filteredItems.forEach((item) => {
+    effectiveItems.forEach((item) => {
       const category = item.category ?? "Other";
       const group = groups.get(category) ?? [];
       group.push(item);
       groups.set(category, group);
     });
     return groups;
-  }, [filteredItems]);
+  }, [effectiveItems]);
   chunkFHY3K6PL_cjs.useEscapeKey(close, isOpen);
   chunkIKMR2ADM_cjs.useClickOutside(containerRef, close);
   React48.useEffect(() => {
@@ -8700,8 +8724,8 @@ function CommandPalette({
     }
   }, [isOpen]);
   React48.useEffect(() => {
-    setSelectedIndex(filteredItems.length > 0 ? 0 : -1);
-  }, [filteredItems.length, setSelectedIndex]);
+    setSelectedIndex(effectiveItems.length > 0 ? 0 : -1);
+  }, [effectiveItems.length, setSelectedIndex]);
   React48.useEffect(() => {
     if (selectedIndex >= 0 && listRef.current) {
       const selectedElement = listRef.current.querySelector(
@@ -8716,7 +8740,7 @@ function CommandPalette({
         case "ArrowDown":
           e.preventDefault();
           setSelectedIndex(
-            Math.min(selectedIndex + 1, filteredItems.length - 1)
+            Math.min(selectedIndex + 1, effectiveItems.length - 1)
           );
           break;
         case "ArrowUp":
@@ -8725,8 +8749,8 @@ function CommandPalette({
           break;
         case "Enter":
           e.preventDefault();
-          if (selectedIndex >= 0 && filteredItems[selectedIndex]) {
-            const item = filteredItems[selectedIndex];
+          if (selectedIndex >= 0 && effectiveItems[selectedIndex]) {
+            const item = effectiveItems[selectedIndex];
             if (!item.disabled) {
               onSelect?.(item);
               close();
@@ -8744,7 +8768,7 @@ function CommandPalette({
       }
     },
     [
-      filteredItems,
+      effectiveItems,
       selectedIndex,
       setSelectedIndex,
       onSelect,
@@ -8765,9 +8789,15 @@ function CommandPalette({
   );
   const getCategoryInfo = React48.useCallback(
     (categoryId) => {
+      if (categoryId === PINNED_CATEGORY_ID) {
+        return { id: PINNED_CATEGORY_ID, label: pinnedCategoryLabel };
+      }
+      if (categoryId === RECENT_CATEGORY_ID) {
+        return { id: RECENT_CATEGORY_ID, label: recentCategoryLabel };
+      }
       return categories.find((c) => c.id === categoryId);
     },
-    [categories]
+    [categories, pinnedCategoryLabel, recentCategoryLabel]
   );
   if (!isOpen) return null;
   let globalIndex = -1;
@@ -8873,14 +8903,14 @@ function CommandPalette({
               ref: listRef,
               "data-slot": "command-palette-results",
               className: "max-h-[60vh] overflow-y-auto",
-              children: filteredItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              children: effectiveItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   "data-slot": "command-palette-empty",
                   className: "text-muted-foreground p-8 text-center",
                   children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-2 h-8 w-8 opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon2, {}) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: query.trim() ? `No results for "${query}"` : "Start typing to search..." })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: isLoading && query.trim() ? `Searching for "${query}"\u2026` : query.trim() ? `No results for "${query}"` : "Start typing to search..." })
                   ] })
                 }
               ) : Array.from(groupedItems.entries()).map(
@@ -9013,7 +9043,7 @@ function CommandPalette({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: "close" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  filteredItems.length,
+                  effectiveItems.length,
                   " results"
                 ] })
               ]
@@ -11463,32 +11493,103 @@ function getDefaultPresets(labels = {}) {
     { key: "last-30-days", label: last30Days }
   ];
 }
+function getExtendedPresets(labels = {}) {
+  const {
+    today = "Today",
+    yesterday = "Yesterday",
+    thisWeek = "This Week",
+    lastWeek = "Last Week",
+    thisMonth = "This Month",
+    lastMonth = "Last Month",
+    thisQuarter = "This Quarter",
+    lastQuarter = "Last Quarter",
+    thisYear = "This Year",
+    lastYear = "Last Year",
+    last24Hours = "Last 24 Hours",
+    last7Days = "Last 7 Days",
+    last30Days = "Last 30 Days",
+    last90Days = "Last 90 Days",
+    last365Days = "Last 365 Days"
+  } = labels;
+  return [
+    { key: "today", label: today },
+    { key: "yesterday", label: yesterday },
+    { key: "last-24-hours", label: last24Hours },
+    { key: "this-week", label: thisWeek },
+    { key: "last-week", label: lastWeek },
+    { key: "last-7-days", label: last7Days },
+    { key: "this-month", label: thisMonth },
+    { key: "last-month", label: lastMonth },
+    { key: "last-30-days", label: last30Days },
+    { key: "this-quarter", label: thisQuarter },
+    { key: "last-quarter", label: lastQuarter },
+    { key: "last-90-days", label: last90Days },
+    { key: "this-year", label: thisYear },
+    { key: "last-year", label: lastYear },
+    { key: "last-365-days", label: last365Days }
+  ];
+}
+function endOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+}
 function calculateDateRange(presetKey) {
   const now = /* @__PURE__ */ new Date();
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
   switch (presetKey) {
     case "today":
-      return {
-        start: today,
-        end: new Date(today.getTime() + 24 * 60 * 60 * 1e3 - 1)
-      };
+      return { start: today, end: endOfDay(today) };
+    case "yesterday": {
+      const yesterday = new Date(today);
+      yesterday.setDate(today.getDate() - 1);
+      return { start: yesterday, end: endOfDay(yesterday) };
+    }
     case "this-week": {
       const dayOfWeek = today.getDay();
       const sunday = new Date(today);
       sunday.setDate(today.getDate() - dayOfWeek);
       const saturday = new Date(sunday);
       saturday.setDate(sunday.getDate() + 6);
-      return { start: sunday, end: saturday };
+      return { start: sunday, end: endOfDay(saturday) };
+    }
+    case "last-week": {
+      const dayOfWeek = today.getDay();
+      const lastSunday = new Date(today);
+      lastSunday.setDate(today.getDate() - dayOfWeek - 7);
+      const lastSaturday = new Date(lastSunday);
+      lastSaturday.setDate(lastSunday.getDate() + 6);
+      return { start: lastSunday, end: endOfDay(lastSaturday) };
     }
     case "this-month": {
       const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
       const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
-      return { start: firstDay, end: lastDay };
+      return { start: firstDay, end: endOfDay(lastDay) };
     }
     case "last-month": {
       const firstDay = new Date(now.getFullYear(), now.getMonth() - 1, 1);
       const lastDay = new Date(now.getFullYear(), now.getMonth(), 0);
-      return { start: firstDay, end: lastDay };
+      return { start: firstDay, end: endOfDay(lastDay) };
+    }
+    case "this-quarter": {
+      const quarter = Math.floor(now.getMonth() / 3);
+      const firstDay = new Date(now.getFullYear(), quarter * 3, 1);
+      const lastDay = new Date(now.getFullYear(), quarter * 3 + 3, 0);
+      return { start: firstDay, end: endOfDay(lastDay) };
+    }
+    case "last-quarter": {
+      const quarter = Math.floor(now.getMonth() / 3);
+      const firstDay = new Date(now.getFullYear(), (quarter - 1) * 3, 1);
+      const lastDay = new Date(now.getFullYear(), quarter * 3, 0);
+      return { start: firstDay, end: endOfDay(lastDay) };
+    }
+    case "this-year": {
+      const firstDay = new Date(now.getFullYear(), 0, 1);
+      const lastDay = new Date(now.getFullYear(), 11, 31);
+      return { start: firstDay, end: endOfDay(lastDay) };
+    }
+    case "last-year": {
+      const firstDay = new Date(now.getFullYear() - 1, 0, 1);
+      const lastDay = new Date(now.getFullYear() - 1, 11, 31);
+      return { start: firstDay, end: endOfDay(lastDay) };
     }
     case "last-24-hours":
       return {
@@ -11505,6 +11606,16 @@ function calculateDateRange(presetKey) {
         start: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3),
         end: now
       };
+    case "last-90-days":
+      return {
+        start: new Date(now.getTime() - 90 * 24 * 60 * 60 * 1e3),
+        end: now
+      };
+    case "last-365-days":
+      return {
+        start: new Date(now.getTime() - 365 * 24 * 60 * 60 * 1e3),
+        end: now
+      };
     default:
       return { start: null, end: null };
   }
@@ -11531,6 +11642,7 @@ function DateRangePicker({
   activePreset,
   placeholder = "Pick a date range",
   className,
+  align = "auto",
   showPresets = true,
   variant = "desktop",
   labels = {}
@@ -11553,6 +11665,9 @@ function DateRangePicker({
   const [hoverDate, setHoverDate] = React48__namespace.useState(null);
   const calendarRef = React48__namespace.useRef(null);
   const triggerRef = React48__namespace.useRef(null);
+  const [resolvedAlign, setResolvedAlign] = React48__namespace.useState(
+    align === "end" ? "end" : "start"
+  );
   const isMobileVariant = variant === "mobile";
   const isResponsive = variant === "responsive";
   const focusTrapRef = chunkNNEFAUHV_cjs.useFocusTrap(
@@ -11591,6 +11706,22 @@ function DateRangePicker({
       };
     }
   }, [isMobileVariant, isCalendarOpen]);
+  React48__namespace.useLayoutEffect(() => {
+    if (isMobileVariant || !isCalendarOpen) return;
+    if (align === "start" || align === "end") {
+      setResolvedAlign(align);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const estimatedPopupWidth = showPresets ? 840 : 640;
+    const margin = 8;
+    const overflowsRight = rect.left + estimatedPopupWidth > window.innerWidth - margin;
+    const fitsLeftAligned = rect.right - estimatedPopupWidth >= margin;
+    setResolvedAlign(overflowsRight && fitsLeftAligned ? "end" : "start");
+  }, [align, isCalendarOpen, isMobileVariant, showPresets]);
   const handlePresetSelect = (presetKey) => {
     const range = calculateDateRange(presetKey);
     setRangeStart(range.start);
@@ -11930,7 +12061,8 @@ function DateRangePicker({
           {
             ref: calendarRef,
             className: chunkOR5DRJCW_cjs.cn(
-              "absolute top-full left-0 z-50 mt-1",
+              "absolute top-full z-50 mt-1",
+              resolvedAlign === "end" ? "right-0" : "left-0",
               "bg-background border-border rounded-lg border shadow-lg"
             ),
             role: "dialog",
@@ -40238,6 +40370,7 @@ exports.WebcamModal = WebcamModal;
 exports.WebsiteInput = WebsiteInput;
 exports.WebsiteInputGroup = WebsiteInputGroup;
 exports.bubbleVariants = bubbleVariants2;
+exports.calculateDateRange = calculateDateRange;
 exports.countBadgeVariants = countBadgeVariants;
 exports.countChipVariants = countChipVariants;
 exports.create24HourSchedule = create24HourSchedule;
@@ -40255,6 +40388,8 @@ exports.generateAttachmentId = generateAttachmentId;
 exports.generateId = generateId;
 exports.getConversationSubtitle = getConversationSubtitle;
 exports.getConversationTitle = getConversationTitle;
+exports.getDefaultPresets = getDefaultPresets;
+exports.getExtendedPresets = getExtendedPresets;
 exports.getFileType = getFileType;
 exports.getGoogleMapsSearchUrl = getGoogleMapsSearchUrl;
 exports.getGoogleMapsUrl = getGoogleMapsUrl;