@immich/ui 0.58.0 → 0.58.2

package/dist/components/Modal/Modal.svelte

@@ -10,10 +10,11 @@
   import Logo from '../Logo/Logo.svelte';
   import TooltipProvider from '../Tooltip/TooltipProvider.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
+  import { modalState } from '../../state/modal-state.svelte.js';
   import type { ModalSize } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { Dialog } from 'bits-ui';
-  import { tick, type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import { tv } from 'tailwind-variants';
 
   type Props = {
@@ -74,21 +75,28 @@
   const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
   const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-  const handleClose = async () => {
-    // wait for bits-ui to complete its event cycle
-    await tick();
-    await new Promise((resolve) => setTimeout(resolve, 10));
-
-    onClose?.();
-  };
-
   let cardRef = $state<HTMLElement | null>(null);
 
   const interactOutsideBehavior = $derived(closeOnBackdropClick ? 'close' : 'ignore');
   const escapeKeydownBehavior = $derived(closeOnEsc ? 'close' : 'ignore');
+
+  let layer = $state<number>();
+  const isHidden = $derived(layer !== modalState.layer);
+
+  const onOpenChangeComplete = (isOpen: boolean) => {
+    if (!isOpen && !isHidden) {
+      onClose?.();
+    }
+  };
+
+  onMount(() => {
+    layer = modalState.incrementLayer();
+
+    return () => modalState.decrementLayer();
+  });
 </script>
 
-<Dialog.Root open={true} onOpenChange={(isOpen: boolean) => !isOpen && handleClose()}>
+<Dialog.Root open={!isHidden} {onOpenChangeComplete}>
   <Dialog.Portal>
     <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
@@ -111,7 +119,7 @@
                     <Logo variant="icon" size="tiny" />
                   {/if}
                   <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
-                  <CloseButton class="-me-2" onclick={() => handleClose()} />
+                  <CloseButton class="-me-2" onclick={() => onClose?.()} />
                 </div>
               {/if}
             </CardHeader>

package/dist/components/MultiSelect/MultiSelect.svelte

@@ -1,12 +1,10 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
   import type { MultiSelectProps, SelectItem } from '../../types.js';
 
-  type T = SelectItem;
-
   let { onChange, values = $bindable([]), ...restProps }: MultiSelectProps<T> = $props();
 
-  const handleChange = (items: T[]) => {
+  const handleChange = (items: SelectItem<T>[]) => {
     onChange?.(items);
   };
 </script>

package/dist/components/MultiSelect/MultiSelect.svelte.d.ts

@@ -1,4 +1,25 @@
-import type { MultiSelectProps, SelectItem } from '../../types.js';
-declare const MultiSelect: import("svelte").Component<MultiSelectProps<SelectItem>, {}, "values">;
-type MultiSelect = ReturnType<typeof MultiSelect>;
+import type { MultiSelectProps } from '../../types.js';
+declare function $$render<T extends string>(): {
+    props: MultiSelectProps<T>;
+    exports: {};
+    bindings: "values";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "values";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<T extends string> = InstanceType<typeof MultiSelect<T>>;
 export default MultiSelect;

package/dist/components/Select/Select.svelte

@@ -1,14 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import InternalSelect from '../../internal/Select.svelte';
   import type { SelectItem, SelectProps } from '../../types.js';
 
-  type T = SelectItem;
-
   let { onChange, value = $bindable(), ...restProps }: SelectProps<T> = $props();
 
   let values = $derived(value ? [value] : []);
 
-  const handleChange = (items: T[]) => {
+  const handleChange = (items: SelectItem<T>[]) => {
     value = items[0];
     onChange?.(value);
   };

package/dist/components/Select/Select.svelte.d.ts

@@ -1,4 +1,25 @@
-import type { SelectItem, SelectProps } from '../../types.js';
-declare const Select: import("svelte").Component<SelectProps<SelectItem>, {}, "value">;
-type Select = ReturnType<typeof Select>;
+import type { SelectProps } from '../../types.js';
+declare function $$render<T extends string>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends string> = InstanceType<typeof Select<T>>;
 export default Select;

package/dist/internal/Select.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import { getFieldContext } from '../common/context.svelte.js';
   import Icon from '../components/Icon/Icon.svelte';
   import IconButton from '../components/IconButton/IconButton.svelte';
@@ -10,13 +10,11 @@
   import { Select } from 'bits-ui';
   import { tv } from 'tailwind-variants';
 
-  type T = SelectItem;
-
   type Props = {
     multiple?: boolean;
-    values: T[];
-    asLabel?: (items: T[]) => string;
-    onChange?: (values: T[]) => void;
+    values: SelectItem<T>[];
+    asLabel?: (items: SelectItem<T>[]) => string;
+    onChange?: (values: SelectItem<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
@@ -26,15 +24,15 @@
     multiple = false,
     values = $bindable([]),
     onChange,
-    asLabel = (options: T[]) => options.map(({ label }) => label).join(', '),
+    asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
   }: Props = $props();
 
-  const asOptions = (items: string[] | T[]) => {
+  const asOptions = (items: string[] | SelectItem<T>[]) => {
     return items.map((item) => {
       if (typeof item === 'string') {
-        return { value: item, label: item } as T;
+        return { value: item, label: item } as SelectItem<T>;
       }
 
       const label = item.label ?? item.value;
@@ -73,9 +71,7 @@
   const findOption = (value: string) => options.find((option) => option.value === value);
 
   const onValueChange = (items: string[] | string) => {
-    values = multiple
-      ? ((items as string[]).map(findOption) as T[])
-      : [findOption(items as string) as T].filter(Boolean);
+    values = (Array.isArray(items) ? items : [items]).map(findOption).filter((item) => item !== undefined);
 
     onChange?.(values);
   };

package/dist/internal/Select.svelte.d.ts

@@ -1,12 +1,31 @@
 import type { SelectCommonProps, SelectItem } from '../types.js';
 import { Select } from 'bits-ui';
-type T = SelectItem;
-type Props = {
-    multiple?: boolean;
-    values: T[];
-    asLabel?: (items: T[]) => string;
-    onChange?: (values: T[]) => void;
-} & SelectCommonProps<T>;
-declare const Select: import("svelte").Component<Props, {}, "values">;
-type Select = ReturnType<typeof Select>;
+declare function $$render<T extends string>(): {
+    props: {
+        multiple?: boolean;
+        values: SelectItem<T>[];
+        asLabel?: (items: SelectItem<T>[]) => string;
+        onChange?: (values: SelectItem<T>[]) => void;
+    } & SelectCommonProps<T>;
+    exports: {};
+    bindings: "values";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "values";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends string> = InstanceType<typeof Select<T>>;
 export default Select;

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

@@ -1,5 +1,5 @@
-import { type Component, type ComponentProps } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { type Component, type ComponentProps } from 'svelte';
 type OnCloseData<T> = T extends {
     onClose: (data: infer R) => void;
 } ? unknown extends R ? void : R : T extends {

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

@@ -1,5 +1,5 @@
-import { mount, unmount } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
+import { mount, unmount } from 'svelte';
 class ModalManager {
     show(Component, ...props) {
         return this.open(Component, ...props).onClose;
@@ -10,8 +10,7 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                // make sure bits-ui clean up finishes before resolving
-                setTimeout(() => resolve(args[0]), 10);
+                resolve(args[0]);
             };
             modal = mount(Component, {
                 target: document.body,

package/dist/site/constants.d.ts

@@ -45,6 +45,6 @@ export declare const siteCommands: {
     iconClass: string;
     title: string;
     description: string;
-    onAction: () => any;
+    onAction: () => Promise<void>;
     searchText: string;
 }[];

package/dist/site/constants.js

@@ -1,5 +1,4 @@
-import { goto } from '$app/navigation';
-import { asText } from '../utilities/common.js';
+import { asText, navigateTo } from '../utilities/common.js';
 import { mdiOpenInNew } from '@mdi/js';
 export const Constants = {
     Socials: {
@@ -134,6 +133,6 @@ export const siteCommands = [
     iconClass: 'text-indigo-700 dark:text-indigo-200',
     title: site.title,
     description: site.description,
-    onAction: () => goto(site.href),
+    onAction: () => navigateTo(site.href),
     searchText: asText('Site', 'Link', site.title, site.description, site.href),
 }));

package/dist/state/modal-state.svelte.d.ts

@@ -0,0 +1,8 @@
+declare class ModalState {
+    #private;
+    get layer(): number;
+    incrementLayer(): number;
+    decrementLayer(): number;
+}
+export declare const modalState: ModalState;
+export {};

package/dist/state/modal-state.svelte.js

@@ -0,0 +1,16 @@
+class ModalState {
+    #layer = $state(0);
+    get layer() {
+        return this.#layer;
+    }
+    incrementLayer() {
+        return ++this.#layer;
+    }
+    decrementLayer() {
+        if (this.#layer < 1) {
+            throw new Error('Tried to decrement the modal layer <0');
+        }
+        return --this.#layer;
+    }
+}
+export const modalState = new ModalState();

package/dist/types.d.ts

@@ -152,25 +152,25 @@ export type TextareaProps = {
     shape?: Shape;
     grow?: boolean;
 } & HTMLTextareaAttributes;
-export type SelectItem = {
+export type SelectItem<T extends string = string> = {
     label?: string;
-    value: string;
+    value: T;
     disabled?: boolean;
 };
-export type SelectCommonProps<T extends SelectItem> = {
-    data: string[] | T[];
+export type SelectCommonProps<T extends string> = {
+    data: string[] | SelectItem<T>[];
     size?: Size;
     shape?: Shape;
     placeholder?: string;
     class?: string;
 };
-export type SelectProps<T extends SelectItem> = SelectCommonProps<T> & {
-    value?: T;
-    onChange?: (value: T) => void;
+export type SelectProps<T extends string> = SelectCommonProps<T> & {
+    value?: SelectItem<T>;
+    onChange?: (value: SelectItem<T>) => void;
 };
-export type MultiSelectProps<T extends SelectItem> = SelectCommonProps<T> & {
-    values?: T[];
-    onChange?: (values: T[]) => void;
+export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
+    values?: SelectItem<T>[];
+    onChange?: (values: SelectItem<T>[]) => void;
 };
 export type ToastId = {
     id: string;

package/dist/utilities/common.d.ts

@@ -1,5 +1,6 @@
 import { MenuItemType, type ActionItem, type IfLike } from '../types.js';
 import type { DateTime } from 'luxon';
+export declare const navigateTo: (url: string) => Promise<void>;
 export declare const resolveUrl: (url: string, currentHostname?: string) => string;
 export declare const isExternalLink: (href: string) => boolean;
 export type Metadata = {

package/dist/utilities/common.js

@@ -1,3 +1,4 @@
+import { goto } from '$app/navigation';
 import { env } from '$env/dynamic/public';
 import { MenuItemType } from '../types.js';
 const getImmichApp = (host) => {
@@ -9,6 +10,16 @@ const getImmichApp = (host) => {
     }
     return host.split('.')[0];
 };
+export const navigateTo = async (url) => {
+    const resolvedUrl = resolveUrl(url);
+    const external = isExternalLink(resolvedUrl);
+    if (external) {
+        window.open(resolvedUrl, '_blank', 'noreferrer');
+    }
+    else {
+        await goto(resolvedUrl);
+    }
+};
 export const resolveUrl = (url, currentHostname) => {
     if (!isExternalLink(url)) {
         return url;

package/package.json

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