@immich/ui 0.47.0 → 0.48.0

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -3,7 +3,7 @@
   import Text from '../Text/Text.svelte';
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
-  import { MenuItemType, type ContextMenuProps, type MenuItem } from '../../types.js';
+  import { MenuItemType, type ContextMenuProps, type ActionItem } from '../../types.js';
   import { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -20,7 +20,7 @@
     ...restProps
   }: ContextMenuProps = $props();
 
-  const isDivider = (item: MenuItem | MenuItemType): item is MenuItemType => {
+  const isDivider = (item: ActionItem | MenuItemType): item is MenuItemType => {
     return item === MenuItemType.Divider;
   };
 
@@ -107,7 +107,7 @@
                   <DropdownMenu.Item
                     textValue={item.title}
                     closeOnSelect
-                    onSelect={(event) => item.onSelect?.({ event, item })}
+                    onSelect={() => item.onAction(item)}
                     class="px-1"
                   >
                     <div class={itemStyles({ color: item.color })}>
@@ -125,7 +125,7 @@
                     <DropdownMenu.Item
                       textValue={item.title}
                       closeOnSelect
-                      onSelect={(event) => item.onSelect?.({ event, item })}
+                      onSelect={() => item.onAction(item)}
                       title={item.title}
                     >
                       <div class={cleanClass(itemStyles({ color: item.color }))}>

package/dist/components/ContextMenu/ContextMenuButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { menuManager } from '../../services/menu-manager.svelte.js';
+  import type { ContextMenuButtonProps } from '../../types.js';
+  import { mdiDotsVertical } from '@mdi/js';
+
+  const {
+    color = 'secondary',
+    position = 'top-right',
+    icon = mdiDotsVertical,
+    variant = 'ghost',
+    shape = 'round',
+    items,
+    bottomItems,
+    ...rest
+  }: ContextMenuButtonProps = $props();
+
+  const onclick = async (event: Event) => {
+    await menuManager.show({ target: event.currentTarget as HTMLElement, position, items, bottomItems });
+  };
+</script>
+
+<IconButton {icon} {color} {shape} {variant} {...rest} {onclick} />

package/dist/components/ContextMenu/ContextMenuButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContextMenuButtonProps } from '../../types.js';
+declare const ContextMenuButton: import("svelte").Component<ContextMenuButtonProps, {}, "">;
+type ContextMenuButton = ReturnType<typeof ContextMenuButton>;
+export default ContextMenuButton;

package/dist/types.d.ts

@@ -67,6 +67,13 @@ export type CloseButtonProps = {
     class?: string;
     translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
+export type ContextMenuButtonProps = ButtonBase & {
+    icon?: IconLike;
+    position?: ContextMenuPosition;
+    'aria-label': string;
+    items: MenuItems;
+    bottomItems?: Array<ActionItem | undefined>;
+} & Omit<HTMLButtonAttributes, 'color' | 'size'>;
 export type IconButtonProps = ButtonBase & {
     icon: IconLike;
     flipped?: boolean;
@@ -203,23 +210,13 @@ export type ToastButton = {
     variant?: Variants;
     onClick: () => void;
 };
-export type MenuSelectHandler = (context: {
-    event: Event;
-    item: MenuItem;
-}) => void;
-export type MenuItem = {
-    title: string;
-    icon: IconLike;
-    color?: Color;
-    onSelect?: MenuSelectHandler;
-} & IfLike;
 export declare enum MenuItemType {
     Divider = "divider"
 }
-export type MenuItems = Array<MenuItem | MenuItemType | undefined>;
+export type MenuItems = Array<ActionItem | MenuItemType | undefined>;
 export type MenuProps = {
     items: MenuItems;
-    bottomItems?: (MenuItem | undefined)[];
+    bottomItems?: (ActionItem | undefined)[];
     size?: MenuSize;
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -242,4 +239,14 @@ export type DatePickerProps = {
 export type IfLike = {
     $if?: () => boolean;
 };
+export type ActionItemHandler<T = never> = (item: ActionItem<T>) => void | Promise<void>;
+export type ActionItem<T = never> = Omit<{
+    title: string;
+    icon: IconLike;
+    color?: Color;
+    onAction: ActionItemHandler<T>;
+    data: T;
+} & IfLike, [
+    T
+] extends [never] ? 'data' : ''>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.1.0"
   },
   "volta": {
-    "node": "24.11.0"
+    "node": "24.11.1"
   },
   "scripts": {
     "create": "node scripts/create.js",