react-os-shell 2.0.0 → 2.1.0

package/dist/index.d.ts

@@ -497,6 +497,48 @@ interface SidebarLayoutProps {
 }
 declare function SidebarLayout({ sidebar, children, side, storageKey, defaultWidth, minWidth, maxWidth, className, sidebarClassName, contentClassName, }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
+interface SearchableOption {
+    value: string;
+    label: string;
+    /** Optional secondary text rendered greyed-out on the right of the
+     *  option (e.g. an order date next to a proforma number). */
+    sublabel?: string;
+}
+interface SearchableSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SearchableOption[];
+    /** Placeholder shown when no value is selected and the field is empty. */
+    placeholder?: string;
+    /** Fallback placeholder text when no `placeholder` is provided and
+     *  nothing is selected. Clearing the selection is done via the hover
+     *  "×" on the input itself. */
+    emptyOptionLabel?: string;
+    /** Extra Tailwind classes appended to the input (error rings, custom
+     *  widths…). The base form-input styling is built in. */
+    className?: string;
+    disabled?: boolean;
+    /** Optional id for label-for wiring. */
+    id?: string;
+    /** When true, the user can submit a value that isn't in `options` —
+     *  pressing Enter or clicking outside with non-empty search text
+     *  fires `onChange` with the typed string. The trigger then displays
+     *  that free-text value as-is. Default false: only listed options
+     *  can be picked, typing only filters. */
+    allowFreeText?: boolean;
+    /** Optional notifier fired whenever the user-typed search text changes
+     *  (including resets to ''). Lets a parent debounce the value and feed
+     *  a server-side query, so this component can still front a list that
+     *  is too large to load up-front. */
+    onSearchChange?: (text: string) => void;
+    /** Optional content rendered inside the trigger's right edge — to the
+     *  left of the clear button — when the dropdown is closed. Use for
+     *  compact status pills that should read alongside the selected label.
+     *  Hidden while the user is typing so the search text stays legible. */
+    rightAdornment?: ReactNode;
+}
+declare function SearchableSelect({ value, onChange, options, placeholder, emptyOptionLabel, className, disabled, id, allowFreeText, onSearchChange, rightAdornment, }: SearchableSelectProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Generic top navigation bar. A horizontal row of tab-style links with an
  * optional brand on the left and free-form actions on the right. Self-contained
@@ -1532,4 +1574,4 @@ declare function useNewHotkey(callback: () => void): void;
  */
 declare function useEditHotkey(callback: (() => void) | null): void;
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ClockCalendarConfig, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, type CustomizationSection, DEV_BANNER_TEXT, Desktop, type DesktopContextMenuItem, type DesktopHostConfig, DesktopHostProvider, DevIndicator, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, HelpCenter, type HelpCenterDoc, type HelpCenterProps, Kanban, type KanbanColumn, type KanbanProps, Layout, type LayoutProps, ListFooter, MOD, Markdown, type MarkdownProps, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, SidebarLayout, type SidebarLayoutProps, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, type TodoProvider, type TodoTask, TopNav, type TopNavItem, type TopNavProps, VERSION, WidgetManager, WindowManagerProvider, WindowRegistry, WindowTitle, applyDevTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, getWindowPosition, glassStyle, isDevEnv, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellNavIcons, setShellTodoProvider, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BugReport, type BugReportConfig, BugReportConfigProvider, BugReportDetail, type BugReportExtraField, type BugReportExtraSelectField, BugReportProvider, type BugReportSubmission, type BugReportSubmitPayload, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, CancelButton, type CellStyle, type ChangelogEntry, type ClockCalendarConfig, type ColumnDef, ConfirmProvider, CopyButton, Customization, type CustomizationOmitSection, type CustomizationProps, type CustomizationSection, DEV_BANNER_TEXT, Desktop, type DesktopContextMenuItem, type DesktopHostConfig, DesktopHostProvider, DevIndicator, DocFavStar, ENTER, EditableGrid, type EditableGridProps, type EntityFetcher, EntityList, type EntityListColumn, type EntityListProps, GLASS_DIVIDER, GLASS_INPUT_BG, GlobalSearch, type GridColumn, HelpCenter, type HelpCenterDoc, type HelpCenterProps, Kanban, type KanbanColumn, type KanbanProps, Layout, type LayoutProps, ListFooter, MOD, Markdown, type MarkdownProps, Modal, ModalActions, NotificationBell, type NotificationsConfig, type PaginatedResponse, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, type ReportType, ResizableTable, SHIFT, type SearchConfig, type SearchProvider, type SearchResult, type SearchableOption, SearchableSelect, type SearchableSelectProps, type SemanticGroup, type ShellAuth, ShellAuthProvider, ShellEntityFetcherProvider, type ShellNotification, type ShellPrefsAdapter, ShellPrefsProvider, ShortcutHelp, SidebarLayout, type SidebarLayoutProps, type SortState, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, type StickyEntityRef, type StickyResolver, SystemPreferences, type SystemPreferencesProps, type SystemPreferencesSection, type TodoProvider, type TodoTask, TopNav, type TopNavItem, type TopNavProps, VERSION, WidgetManager, WindowManagerProvider, WindowRegistry, WindowTitle, applyDevTitle, commitExposeHighlight, confirm, confirmDestructive, createWindowRegistry, exitExposeMode, formatDate, getActiveWindowRoute, getExposeHighlight, getWindowPosition, glassStyle, isDevEnv, isMac, openBugReportDialog, prompt, reportBug, setExposeHighlight, setShellApiClient, setShellAuthBridge, setShellNavIcons, setShellTodoProvider, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toast, toggleExposeMode, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useLocalStoragePrefs, useModalActive, useNewHotkey, useShellAuth, useShellEntityFetcher, useShellPrefs, useSort, useTableNav, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };

package/dist/index.js

@@ -2,20 +2,20 @@ import { subscribePomo, getPomoSnapshot } from './chunk-5X5LQNOX.js';
 export { setShellTodoProvider } from './chunk-5X5LQNOX.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-OMY5HWY2.js';
-export { Breadcrumbs } from './chunk-OMY5HWY2.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-2KV2YWMA.js';
+export { Breadcrumbs } from './chunk-2KV2YWMA.js';
 import { SidebarLayout } from './chunk-VGTEM5RZ.js';
 export { SidebarLayout } from './chunk-VGTEM5RZ.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-7FNPV6CE.js';
+import { setPdfPreview } from './chunk-P4YWAKEC.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-export { EditableGrid } from './chunk-ROSSX5DN.js';
-import { APP_VERSION } from './chunk-2N4EEBHF.js';
-export { VERSION } from './chunk-2N4EEBHF.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-GWVVILYQ.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-GWVVILYQ.js';
+export { EditableGrid } from './chunk-JBVKJJEM.js';
+import { APP_VERSION } from './chunk-DRX353B4.js';
+export { VERSION } from './chunk-DRX353B4.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-5FEW4QE5.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-5FEW4QE5.js';
 import { confirm } from './chunk-UBN4IUDE.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-UBN4IUDE.js';
 import { useAuth, useShellAuth } from './chunk-ADJ3CERD.js';
@@ -563,6 +563,182 @@ function HelpCenter({
     ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: loading ? "Loading\u2026" : "Pick a help article from the left." }) }) })
   ] });
 }
+function useClickOutside(ref, onClose) {
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [ref, onClose]);
+}
+function useDropdownAlignment(triggerRef, open, maxWidth) {
+  const [alignRight, setAlignRight] = useState(false);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setAlignRight(window.innerWidth - rect.left < maxWidth);
+  }, [open, maxWidth, triggerRef]);
+  return alignRight;
+}
+function ClearButton({ onClear, ariaLabel = "Clear selection" }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClear();
+      },
+      className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity text-base leading-none",
+      children: "\xD7"
+    }
+  );
+}
+var INPUT_BASE = "block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-800 placeholder:text-gray-400 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/30";
+function SearchableSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyOptionLabel = "\u2014 None \u2014",
+  className = "",
+  disabled,
+  id,
+  allowFreeText = false,
+  onSearchChange,
+  rightAdornment
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearchState] = useState("");
+  const setSearch = (next) => {
+    setSearchState(next);
+    onSearchChange?.(next);
+  };
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const adornRef = useRef(null);
+  const [adornPad, setAdornPad] = useState(null);
+  useLayoutEffect(() => {
+    if (!rightAdornment || open) {
+      setAdornPad(null);
+      return;
+    }
+    const w = adornRef.current?.offsetWidth ?? 0;
+    setAdornPad(w ? w + (value && !disabled ? 32 : 8) + 6 : null);
+  });
+  const POPUP_MAX_WIDTH = 448;
+  const alignRight = useDropdownAlignment(triggerRef, open, POPUP_MAX_WIDTH);
+  const selectedLabel = useMemo(() => {
+    const match = options.find((o) => o.value === value);
+    if (match) return match.label;
+    return allowFreeText ? value : "";
+  }, [options, value, allowFreeText]);
+  useClickOutside(wrapRef, () => {
+    if (allowFreeText && search.trim() && search.trim() !== value) {
+      onChange(search.trim());
+    }
+    setOpen(false);
+    setSearch("");
+  });
+  const dedupedOptions = useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const o of options) {
+      if (seen.has(o.value)) continue;
+      seen.add(o.value);
+      out.push(o);
+    }
+    return out;
+  }, [options]);
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return dedupedOptions;
+    return dedupedOptions.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.sublabel?.toLowerCase().includes(q) ?? false)
+    );
+  }, [dedupedOptions, search]);
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative group", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        ref: triggerRef,
+        type: "text",
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        value: open ? search : selectedLabel,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setOpen(true);
+        },
+        onFocus: () => {
+          if (!disabled) {
+            setSearch("");
+            setOpen(true);
+          }
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (filtered.length === 1) {
+              onChange(filtered[0].value);
+              setOpen(false);
+              setSearch("");
+            } else if (allowFreeText && search.trim()) {
+              onChange(search.trim());
+              setOpen(false);
+              setSearch("");
+              triggerRef.current?.blur();
+            }
+          } else if (e.key === "Escape") {
+            setOpen(false);
+            setSearch("");
+            triggerRef.current?.blur();
+          }
+        },
+        placeholder: placeholder || (emptyOptionLabel || "Select\u2026"),
+        className: `${INPUT_BASE} ${className} ${value ? "pr-8" : ""} ${disabled ? "bg-gray-50 text-gray-400 cursor-not-allowed" : ""} truncate`,
+        style: adornPad ? { paddingRight: adornPad } : void 0,
+        disabled
+      }
+    ),
+    value && !disabled && /* @__PURE__ */ jsx(ClearButton, { onClear: () => {
+      onChange("");
+      setOpen(false);
+      setSearch("");
+    } }),
+    rightAdornment && !open && /* @__PURE__ */ jsx("div", { ref: adornRef, className: `absolute top-1/2 -translate-y-1/2 ${value && !disabled ? "right-8" : "right-2"} flex items-center gap-1 flex-nowrap justify-end pointer-events-none`, children: rightAdornment }),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute z-[200] mt-1 rounded-2xl overflow-hidden ${alignRight ? "right-0" : "left-0"} min-w-full max-w-[28rem] w-max`,
+        style: glassStyle(),
+        children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matches" }) : filtered.map((o) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onMouseDown: () => {
+              onChange(o.value);
+              setOpen(false);
+              setSearch("");
+            },
+            className: `w-full text-left px-3 py-1.5 text-sm hover:bg-gray-50 flex items-center justify-between gap-2 whitespace-nowrap ${value === o.value ? "text-blue-600 font-medium bg-blue-50/50" : "text-gray-700"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: o.label }),
+              o.sublabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 shrink-0", children: o.sublabel })
+            ]
+          },
+          o.value
+        )) })
+      }
+    )
+  ] });
+}
 function TopNav({ items, activeKey, onSelect, brand, actions, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2742,15 +2918,6 @@ function useTheme() {
   }, [accentColor, customBgColor, customTitleColor, customWindowColor, customButtonColor]);
   return { theme: saved, resolved };
 }
-function useClickOutside(ref, onClose) {
-  useEffect(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [ref, onClose]);
-}
 function StartupAnimation({ onComplete, ready = false, productName = "react-os-shell", subtitle }) {
   const [phase, setPhase] = useState("logo");
   const [minTimePassed, setMinTimePassed] = useState(false);
@@ -6307,6 +6474,6 @@ function useEditHotkey(callback) {
   }, [callback, isActive]);
 }
 
-export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, formatDate, isDevEnv, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
+export { ALT, ALT_SHIFT_D, ALT_SHIFT_E, ALT_SHIFT_N, BehaviorPanel, BugReportConfigProvider, BugReportDetail, BugReportProvider, CMD_A, CMD_DOT, CMD_ENTER, CMD_K, CMD_S, Customization, DEV_BANNER_TEXT, Desktop, DesktopHostProvider, DevIndicator, ENTER, EntityList, GlobalSearch, HelpCenter, Kanban, Layout, ListFooter, MOD, Markdown, NotificationBell, ResizableTable, SHIFT, SearchableSelect, ShellEntityFetcherProvider, ShortcutHelp, SoundsPanel, StartMenu, StatusBadge, StatusBadgeProvider, SystemPreferences, TopNav, WidgetManager, applyDevTitle, createWindowRegistry, formatDate, isDevEnv, isMac, openBugReportDialog, reportBug, useBugReport, useClickOutside, useColumnConfig, useDesktopHost, useEditHotkey, useInfiniteScroll, useNewHotkey, useShellEntityFetcher, useSort, useTableNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map