@mieweb/ui 0.6.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-1 flex-col min-w-0",
+                "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"
                 ] })
               ]
@@ -11612,6 +11642,7 @@ function DateRangePicker({
   activePreset,
   placeholder = "Pick a date range",
   className,
+  align = "auto",
   showPresets = true,
   variant = "desktop",
   labels = {}
@@ -11634,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(
@@ -11672,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);
@@ -12011,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",