@immich/ui 0.42.1 → 0.42.3

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { commandPaletteManager, type CommandItem } from '../../services/command-palette-manager.svelte';
-  import { onMount } from 'svelte';
+  import { untrack } from 'svelte';
 
   type Props = {
     commands?: CommandItem[];
@@ -9,5 +9,11 @@
 
   const { commands = [], global }: Props = $props();
 
-  onMount(() => commandPaletteManager.addCommands(commands, { global }));
+  $effect(() => {
+    // prevent reactivity loop
+    const addCommands = (commands: CommandItem[], global?: boolean) =>
+      untrack(() => commandPaletteManager.addCommands(commands, { global }));
+
+    return addCommands(commands, global);
+  });
 </script>

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -14,7 +14,7 @@
     items,
     bottomItems,
     size = 'medium',
-    anchor,
+    target,
     position = 'top-left',
     class: className,
     ...restProps
@@ -83,14 +83,14 @@
     }
   };
 
-  const alignOffset = $derived(anchor.clientWidth / 2);
-  const sideOffset = $derived(-anchor.clientHeight / 2);
+  const alignOffset = $derived(target.clientWidth / 2);
+  const sideOffset = $derived(-target.clientHeight / 2);
   const { side, align } = $derived(getAlignment(position));
 </script>
 
 <DropdownMenu.Root open={true} onOpenChange={() => onClose()}>
   <DropdownMenu.Portal>
-    <DropdownMenu.Content forceMount customAnchor={anchor} {side} {align} {alignOffset} {sideOffset}>
+    <DropdownMenu.Content forceMount customAnchor={target} {side} {align} {alignOffset} {sideOffset}>
       {#snippet child({ wrapperProps, props, open })}
         {#if open}
           <div {...wrapperProps} class={zIndex.ContextMenu}>

package/dist/services/command-palette-manager.svelte.d.ts

@@ -2,11 +2,11 @@ import { type Shortcut } from '../actions/shortcut.js';
 import type { MaybeArray, TranslationProps } from '../types.js';
 export type CommandItem = {
     icon: string;
-    iconClass: string;
+    iconClass?: string;
     type: string;
     title: string;
     description?: string;
-    text: string;
+    text?: string;
     shortcuts?: MaybeArray<Shortcut>;
     shortcutOptions?: {
         ignoreInputFields?: boolean;
@@ -15,7 +15,7 @@ export type CommandItem = {
 } & ({
     href: string;
 } | {
-    action: () => void | Promise<void>;
+    action: (command: CommandItem) => void;
 });
 export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default'>;
 export declare const asText: (...items: unknown[]) => string;

package/dist/services/command-palette-manager.svelte.js

@@ -10,11 +10,11 @@ export const asText = (...items) => {
         .join('|')
         .toLowerCase();
 };
-const isMatch = (item, query) => {
+const isMatch = ({ title, description, type, text = asText(title, description, type) }, query) => {
     if (!query) {
         return true;
     }
-    return item.text.includes(query);
+    return text.includes(query);
 };
 class CommandPaletteManager {
     query = $state('');
@@ -73,14 +73,12 @@ class CommandPaletteManager {
         if ('href' in command) {
             if (!command.href.startsWith('/')) {
                 window.open(command.href, '_blank');
+                return;
             }
-            else {
-                await goto(command.href);
-            }
-        }
-        else {
-            await command.action();
+            await goto(command.href);
+            return;
         }
+        command.action(command);
     }
     setTranslations(translations = {}) {
         this.#translations = translations;

package/dist/services/menu-manager.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ContextMenuBaseProps } from '../types.js';
 declare class MenuManager {
-    show(event: MouseEvent, props: ContextMenuBaseProps): Promise<void>;
+    show(props: ContextMenuBaseProps): Promise<void>;
 }
 export declare const menuManager: MenuManager;
 export {};

package/dist/services/menu-manager.svelte.js

@@ -1,10 +1,9 @@
 import ContextMenu from '../components/ContextMenu/ContextMenu.svelte';
 import { modalManager } from './modal-manager.svelte.js';
 class MenuManager {
-    show(event, props) {
+    show(props) {
         return modalManager.show(ContextMenu, {
             ...props,
-            anchor: event.currentTarget,
         });
     }
 }

package/dist/types.d.ts

@@ -225,10 +225,10 @@ export type MenuProps = {
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type ContextMenuBaseProps = MenuProps & {
+    target: HTMLElement;
     position?: ContextMenuPosition;
 };
 export type ContextMenuProps = ContextMenuBaseProps & {
     onClose: () => void;
-    anchor: HTMLElement;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.42.1",
+  "version": "0.42.3",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",