@immich/ui 0.61.3 → 0.62.0

package/dist/actions/shortcut.js

@@ -1,3 +1,4 @@
+import { on } from 'svelte/events';
 export const shortcutLabel = (shortcut) => {
     let label = '';
     if (shortcut.ctrl) {
@@ -71,6 +72,9 @@ export const shortcut = (node, option) => {
 /** Binds multiple keyboard shortcuts to node */
 export const shortcuts = (node, options) => {
     function onKeydown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         const ignoreShortcut = shouldIgnoreEvent(event);
         for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
             if (ignoreInputFields && ignoreShortcut) {
@@ -85,13 +89,13 @@ export const shortcuts = (node, options) => {
             }
         }
     }
-    node.addEventListener('keydown', onKeydown);
+    const off = on(node, 'keydown', onKeydown);
     return {
         update(newOptions) {
             options = newOptions;
         },
         destroy() {
-            node.removeEventListener('keydown', onKeydown);
+            off();
         },
     };
 };

package/dist/common/context.svelte.d.ts

@@ -58,12 +58,6 @@ export declare const getFieldContext: () => () => {
     'bind:focused'?: boolean | undefined | null;
     'bind:offsetWidth'?: number | undefined | null;
     'bind:offsetHeight'?: number | undefined | null;
-    'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
-    'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
-    'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
-    'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
     'aria-activedescendant'?: string | undefined | null;
     'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
     'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;

package/dist/components/Modal/Modal.svelte

@@ -89,6 +89,11 @@
     }
   };
 
+  const handleEscapeKeydown = (event: KeyboardEvent) => {
+    event.stopImmediatePropagation();
+    onEscapeKeydown?.(event);
+  };
+
   onMount(() => {
     layer = modalState.incrementLayer();
 
@@ -100,7 +105,7 @@
   <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
-      {onEscapeKeydown}
+      onEscapeKeydown={handleEscapeKeydown}
       {escapeKeydownBehavior}
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}

package/dist/components/Tooltip/Tooltip.svelte

@@ -2,7 +2,6 @@
   import { zIndex } from '../../constants.js';
   import { Tooltip } from 'bits-ui';
   import type { Snippet } from 'svelte';
-  import { fly } from 'svelte/transition';
 
   type Props = Tooltip.RootProps & {
     text?: string | null;
@@ -18,21 +17,30 @@
     <Tooltip.Portal>
       <Tooltip.Content
         sideOffset={8}
-        forceMount
-        class="bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
+        class="tooltip-content bg-light-800 text-light {zIndex.Tooltip} rounded-lg px-3.5 py-2 text-xs shadow-lg"
       >
-        {#snippet child({ wrapperProps, props, open })}
-          {#if open}
-            <div {...wrapperProps}>
-              <div {...props} transition:fly={{ y: 4, duration: 150 }}>
-                {text}
-              </div>
-            </div>
-          {/if}
-        {/snippet}
+        {text}
       </Tooltip.Content>
     </Tooltip.Portal>
   </Tooltip.Root>
 {:else}
   {@render child({ props: {} })}
 {/if}
+
+<style>
+  :global(.tooltip-content[data-state='delayed-open']),
+  :global(.tooltip-content[data-state='instant-open']) {
+    animation: tooltip-enter 150ms ease-out;
+  }
+
+  @keyframes tooltip-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/dist/index.d.ts

@@ -102,8 +102,10 @@ export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
+export * from './state/locale-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/index.js

@@ -105,9 +105,11 @@ export * from './services/modal-manager.svelte.js';
 export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
+export * from './state/locale-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 // site
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/internal/DatePicker.svelte

@@ -4,6 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Label from '../components/Label/Label.svelte';
   import { zIndex } from '../constants.js';
+  import { getLocale } from '../state/locale-state.svelte.js';
   import { styleVariants } from '../styles.js';
   import type { Shape, Size } from '../types.js';
   import { cleanClass, generateId } from '../utilities/internal.js';
@@ -75,6 +76,7 @@
     maxValue={maxDate}
     bind:value={date}
     readonly={readOnly}
+    locale={getLocale()}
     {disabled}
   >
     <DatePicker.Input

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

@@ -1,8 +1,10 @@
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
 import { modalManager } from './modal-manager.svelte.js';
+import { isModalOpen } from '../state/modal-state.svelte.js';
 import { isEnabled } from '../utilities/common.js';
 import { asArray, generateId, getSearchString } from '../utilities/internal.js';
+import { on } from 'svelte/events';
 export const defaultProvider = ({ name, actions }) => ({
     name,
     onSearch: (query) => query ? actions.filter((action) => getSearchString(action).includes(query.toLowerCase())) : actions,
@@ -30,7 +32,7 @@ class CommandPaletteManager {
                 { shortcut: { key: 'k', ctrl: true }, onShortcut: () => this.open() },
                 { shortcut: { key: '/' }, preventDefault: true, onShortcut: () => this.open() },
             ]);
-            document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
+            on(document.body, 'keydown', (event) => this.#handleKeydown(event));
         }
     }
     setTranslations(translations = {}) {
@@ -51,6 +53,9 @@ class CommandPaletteManager {
         void this.#onSearch(query);
     }
     async #handleKeydown(event) {
+        if (event.defaultPrevented || isModalOpen()) {
+            return;
+        }
         const actions = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch())));
         for (const action of actions.flat()) {
             if (!asArray(action.shortcuts).some((shortcut) => matchesShortcut(event, shortcut))) {
@@ -67,6 +72,7 @@ class CommandPaletteManager {
                 event.preventDefault();
             }
             action?.onAction(action);
+            return;
         }
     }
     async #onClose(action) {

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

@@ -0,0 +1,2 @@
+export declare const getLocale: () => string | undefined;
+export declare const setLocale: (newLocale: string) => void;

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

@@ -0,0 +1,5 @@
+let locale = $state();
+export const getLocale = () => locale;
+export const setLocale = (newLocale) => {
+    locale = newLocale;
+};

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

@@ -5,4 +5,5 @@ declare class ModalState {
     decrementLayer(): number;
 }
 export declare const modalState: ModalState;
+export declare const isModalOpen: () => boolean;
 export {};

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

@@ -14,3 +14,4 @@ class ModalState {
     }
 }
 export const modalState = new ModalState();
+export const isModalOpen = () => modalState.layer > 0;

package/package.json

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