@immich/ui 0.58.3 → 0.58.4

package/dist/components/MultiSelect/MultiSelect.svelte

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

package/dist/components/Select/Select.svelte

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

package/dist/internal/Select.svelte

@@ -4,7 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import { zIndex } from '../constants.js';
-  import type { SelectCommonProps, SelectItem } from '../types.js';
+  import type { SelectCommonProps, SelectOption } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
   import { Select } from 'bits-ui';
@@ -13,28 +13,28 @@
   type Props = {
     multiple?: boolean;
     values: T[];
-    asLabel?: (items: SelectItem<T>[]) => string;
+    asLabel?: (items: SelectOption<T>[]) => string;
     onChange?: (values: T[]) => void;
-    onItemChange?: (items: SelectItem<T>[]) => void;
+    onSelect?: (items: SelectOption<T>[]) => void;
   } & SelectCommonProps<T>;
 
   let {
-    data,
+    options: optionsOrItems,
     shape,
     size: initialSize,
     multiple = false,
     values = $bindable([]),
     onChange,
-    onItemChange,
-    asLabel = (options: SelectItem<T>[]) => options.map(({ label }) => label).join(', '),
+    onSelect: onItemChange,
+    asLabel = (options: SelectOption<T>[]) => options.map(({ label }) => label).join(', '),
     placeholder,
     class: className,
   }: Props = $props();
 
-  const asOptions = (items: string[] | SelectItem<T>[]) => {
+  const asOptions = (items: string[] | SelectOption<T>[]) => {
     return items.map((item) => {
       if (typeof item === 'string') {
-        return { value: item, label: item } as SelectItem<T>;
+        return { value: item, label: item } as SelectOption<T>;
       }
 
       const label = item.label ?? item.value;
@@ -45,11 +45,11 @@
   const context = getFieldContext();
   const { invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
-  const options = $derived(asOptions(data));
+  const options = $derived(asOptions(optionsOrItems));
 
   const findOption = (value: string) => options.find((option) => option.value === value);
   const valuesToOptions = (values: T[]) =>
-    values.map(findOption).filter((item): item is SelectItem<T> => Boolean(item));
+    values.map(findOption).filter((item): item is SelectOption<T> => Boolean(item));
 
   const selectedLabel = $derived(asLabel(valuesToOptions(values)));
 
@@ -75,7 +75,9 @@
 
   const onValueChange = (newValues: string[] | string) => {
     values = (Array.isArray(newValues) ? newValues : [newValues]) as T[];
-    const items = values.map((value) => findOption(value)).filter((item): item is SelectItem<T> => item !== undefined);
+    const items = values
+      .map((value) => findOption(value))
+      .filter((item): item is SelectOption<T> => item !== undefined);
 
     onChange?.(values);
     onItemChange?.(items);

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

@@ -1,12 +1,12 @@
-import type { SelectCommonProps, SelectItem } from '../types.js';
+import type { SelectCommonProps, SelectOption } from '../types.js';
 import { Select } from 'bits-ui';
 declare function $$render<T extends string>(): {
     props: {
         multiple?: boolean;
         values: T[];
-        asLabel?: (items: SelectItem<T>[]) => string;
+        asLabel?: (items: SelectOption<T>[]) => string;
         onChange?: (values: T[]) => void;
-        onItemChange?: (items: SelectItem<T>[]) => void;
+        onSelect?: (items: SelectOption<T>[]) => void;
     } & SelectCommonProps<T>;
     exports: {};
     bindings: "values";

package/dist/types.d.ts

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

package/package.json

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