@mieweb/ui 0.6.0 → 0.6.1-dev.120

package/dist/index.d.cts

@@ -1760,6 +1760,28 @@ interface CommandPaletteProps {
     isLoading?: boolean;
     /** Called when an item is selected */
     onSelect?: (item: CommandPaletteItem) => void;
+    /**
+     * Fires whenever the search query changes. Consumers should debounce
+     * inside this callback if they're hitting a network. Provider's `items`
+     * is still the source of truth for what renders.
+     */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Items always shown at the top, regardless of query. Use for smart
+     * actions ("Call John", "Ask AI: …") or other affordances that should
+     * remain reachable while typing. Filtered out when a category filter
+     * is active so the category view stays scoped.
+     */
+    pinnedItems?: CommandPaletteItem[];
+    /** Group label rendered above pinned items. Defaults to "Actions". */
+    pinnedCategoryLabel?: string;
+    /**
+     * Items shown only when the query is empty and there are no provider
+     * items to display. Use for recent searches / recently opened records.
+     */
+    recentItems?: CommandPaletteItem[];
+    /** Group label rendered above recent items. Defaults to "Recent". */
+    recentCategoryLabel?: string;
     /** Custom empty state content */
     emptyState?: React__default.ReactNode;
     /** Custom render function for items */
@@ -1773,8 +1795,14 @@ interface CommandPaletteProps {
     className?: string;
     /** Test ID for testing */
     'data-testid'?: string;
+    /**
+     * Skip the built-in client-side query filter. Use when `items` are
+     * already filtered server-side (e.g. semantic search) and labels
+     * won't necessarily contain the query as a substring.
+     */
+    serverFiltered?: boolean;
 }
-declare function CommandPalette({ placeholder, isLoading, onSelect, emptyState, renderItem, footer, className, 'data-testid': testId, }: CommandPaletteProps): React__default.JSX.Element | null;
+declare function CommandPalette({ placeholder, isLoading, onSelect, onQueryChange, pinnedItems, pinnedCategoryLabel, recentItems, recentCategoryLabel, emptyState, renderItem, footer, className, 'data-testid': testId, serverFiltered, }: CommandPaletteProps): React__default.JSX.Element | null;
 interface CommandPaletteTriggerProps {
     /** Button content (default shows search icon and keyboard hint) */
     children?: React__default.ReactNode;
@@ -2410,6 +2438,15 @@ interface DateRangePickerProps {
     placeholder?: string;
     /** Custom className */
     className?: string;
+    /**
+     * Horizontal alignment of the desktop popup relative to the trigger.
+     * - `'start'` (default historical behavior): popup left edge aligns with trigger left edge.
+     * - `'end'`: popup right edge aligns with trigger right edge.
+     * - `'auto'`: starts as `'start'`, then automatically flips to `'end'` if the popup
+     *   would overflow the right edge of the viewport. Recommended for triggers placed
+     *   in the right side of a layout (e.g. page header action slots).
+     */
+    align?: 'start' | 'end' | 'auto';
     /** Whether to show the preset sidebar in the calendar popup (default: true) */
     showPresets?: boolean;
     /** Display variant: desktop (default), mobile (bottom sheet), or responsive (auto-adapts at md breakpoint) */
@@ -2471,7 +2508,7 @@ declare function calculateDateRange(presetKey: string): DateRange$1;
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, align, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 interface DateRangeFilterProps {
     /** Current date range value */
     value?: DateRange$1;

package/dist/index.d.ts

@@ -1760,6 +1760,28 @@ interface CommandPaletteProps {
     isLoading?: boolean;
     /** Called when an item is selected */
     onSelect?: (item: CommandPaletteItem) => void;
+    /**
+     * Fires whenever the search query changes. Consumers should debounce
+     * inside this callback if they're hitting a network. Provider's `items`
+     * is still the source of truth for what renders.
+     */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Items always shown at the top, regardless of query. Use for smart
+     * actions ("Call John", "Ask AI: …") or other affordances that should
+     * remain reachable while typing. Filtered out when a category filter
+     * is active so the category view stays scoped.
+     */
+    pinnedItems?: CommandPaletteItem[];
+    /** Group label rendered above pinned items. Defaults to "Actions". */
+    pinnedCategoryLabel?: string;
+    /**
+     * Items shown only when the query is empty and there are no provider
+     * items to display. Use for recent searches / recently opened records.
+     */
+    recentItems?: CommandPaletteItem[];
+    /** Group label rendered above recent items. Defaults to "Recent". */
+    recentCategoryLabel?: string;
     /** Custom empty state content */
     emptyState?: React__default.ReactNode;
     /** Custom render function for items */
@@ -1773,8 +1795,14 @@ interface CommandPaletteProps {
     className?: string;
     /** Test ID for testing */
     'data-testid'?: string;
+    /**
+     * Skip the built-in client-side query filter. Use when `items` are
+     * already filtered server-side (e.g. semantic search) and labels
+     * won't necessarily contain the query as a substring.
+     */
+    serverFiltered?: boolean;
 }
-declare function CommandPalette({ placeholder, isLoading, onSelect, emptyState, renderItem, footer, className, 'data-testid': testId, }: CommandPaletteProps): React__default.JSX.Element | null;
+declare function CommandPalette({ placeholder, isLoading, onSelect, onQueryChange, pinnedItems, pinnedCategoryLabel, recentItems, recentCategoryLabel, emptyState, renderItem, footer, className, 'data-testid': testId, serverFiltered, }: CommandPaletteProps): React__default.JSX.Element | null;
 interface CommandPaletteTriggerProps {
     /** Button content (default shows search icon and keyboard hint) */
     children?: React__default.ReactNode;
@@ -2410,6 +2438,15 @@ interface DateRangePickerProps {
     placeholder?: string;
     /** Custom className */
     className?: string;
+    /**
+     * Horizontal alignment of the desktop popup relative to the trigger.
+     * - `'start'` (default historical behavior): popup left edge aligns with trigger left edge.
+     * - `'end'`: popup right edge aligns with trigger right edge.
+     * - `'auto'`: starts as `'start'`, then automatically flips to `'end'` if the popup
+     *   would overflow the right edge of the viewport. Recommended for triggers placed
+     *   in the right side of a layout (e.g. page header action slots).
+     */
+    align?: 'start' | 'end' | 'auto';
     /** Whether to show the preset sidebar in the calendar popup (default: true) */
     showPresets?: boolean;
     /** Display variant: desktop (default), mobile (bottom sheet), or responsive (auto-adapts at md breakpoint) */
@@ -2471,7 +2508,7 @@ declare function calculateDateRange(presetKey: string): DateRange$1;
  * />
  * ```
  */
-declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+declare function DateRangePicker({ value, onChange, presets, activePreset, placeholder, className, align, showPresets, variant, labels, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 interface DateRangeFilterProps {
     /** Current date range value */
     value?: DateRange$1;

package/dist/index.js

@@ -3876,7 +3876,7 @@ var MessageBubble = React48.forwardRef(
             "div",
             {
               className: cn(
-                "flex flex-1 flex-col min-w-0",
+                "flex min-w-0 flex-1 flex-col",
                 isOutgoing ? "items-end" : "items-start"
               ),
               children: [
@@ -8655,11 +8655,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,
@@ -8676,29 +8682,47 @@ function CommandPalette({
   const inputRef = useRef(null);
   const containerRef = useRef(null);
   const listRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    onQueryChange?.(query);
+  }, [query, isOpen, onQueryChange]);
+  const PINNED_CATEGORY_ID = "__palette_pinned__";
+  const RECENT_CATEGORY_ID = "__palette_recent__";
   const filteredItems = 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 = 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 = 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]);
   useEscapeKey(close, isOpen);
   useClickOutside(containerRef, close);
   useEffect(() => {
@@ -8707,8 +8731,8 @@ function CommandPalette({
     }
   }, [isOpen]);
   useEffect(() => {
-    setSelectedIndex(filteredItems.length > 0 ? 0 : -1);
-  }, [filteredItems.length, setSelectedIndex]);
+    setSelectedIndex(effectiveItems.length > 0 ? 0 : -1);
+  }, [effectiveItems.length, setSelectedIndex]);
   useEffect(() => {
     if (selectedIndex >= 0 && listRef.current) {
       const selectedElement = listRef.current.querySelector(
@@ -8723,7 +8747,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":
@@ -8732,8 +8756,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();
@@ -8751,7 +8775,7 @@ function CommandPalette({
       }
     },
     [
-      filteredItems,
+      effectiveItems,
       selectedIndex,
       setSelectedIndex,
       onSelect,
@@ -8772,9 +8796,15 @@ function CommandPalette({
   );
   const getCategoryInfo = 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;
@@ -8880,14 +8910,14 @@ function CommandPalette({
               ref: listRef,
               "data-slot": "command-palette-results",
               className: "max-h-[60vh] overflow-y-auto",
-              children: filteredItems.length === 0 ? /* @__PURE__ */ jsx(
+              children: effectiveItems.length === 0 ? /* @__PURE__ */ jsx(
                 "div",
                 {
                   "data-slot": "command-palette-empty",
                   className: "text-muted-foreground p-8 text-center",
                   children: emptyState ?? /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2 h-8 w-8 opacity-50", children: /* @__PURE__ */ jsx(SearchIcon2, {}) }),
-                    /* @__PURE__ */ jsx("p", { className: "text-sm", children: query.trim() ? `No results for "${query}"` : "Start typing to search..." })
+                    /* @__PURE__ */ 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(
@@ -9020,7 +9050,7 @@ function CommandPalette({
                   /* @__PURE__ */ jsx("span", { children: "close" })
                 ] }),
                 /* @__PURE__ */ jsxs("span", { children: [
-                  filteredItems.length,
+                  effectiveItems.length,
                   " results"
                 ] })
               ]
@@ -11619,6 +11649,7 @@ function DateRangePicker({
   activePreset,
   placeholder = "Pick a date range",
   className,
+  align = "auto",
   showPresets = true,
   variant = "desktop",
   labels = {}
@@ -11641,6 +11672,9 @@ function DateRangePicker({
   const [hoverDate, setHoverDate] = React48.useState(null);
   const calendarRef = React48.useRef(null);
   const triggerRef = React48.useRef(null);
+  const [resolvedAlign, setResolvedAlign] = React48.useState(
+    align === "end" ? "end" : "start"
+  );
   const isMobileVariant = variant === "mobile";
   const isResponsive = variant === "responsive";
   const focusTrapRef = useFocusTrap(
@@ -11679,6 +11713,22 @@ function DateRangePicker({
       };
     }
   }, [isMobileVariant, isCalendarOpen]);
+  React48.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);
@@ -12018,7 +12068,8 @@ function DateRangePicker({
           {
             ref: calendarRef,
             className: 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",