@casinogate/ui 1.10.2 → 1.10.3

package/dist/components/select/select.async.svelte

@@ -43,6 +43,8 @@
     onChangeDependency,
     clearOnDependencyChange = true,
 
+    onSelect,
+
     ...restProps
   }: SelectAsyncProps = $props();
 
@@ -98,6 +100,30 @@
     return placeholderProp ?? '';
   });
 
+  let previousValue: string | string[] = value;
+
+  watch(
+    () => value,
+    (newValue) => {
+      if (!onSelect) {
+        previousValue = newValue;
+        return;
+      }
+
+      if (typeof newValue === 'string') {
+        const item = newValue ? (collection.find(newValue) ?? null) : null;
+        onSelect(newValue, item);
+      } else if (Array.isArray(newValue)) {
+        const prev = Array.isArray(previousValue) ? previousValue : [];
+        const added = newValue.find((v) => !prev.includes(v));
+        onSelect(newValue, added ? (collection.find(added) ?? null) : null);
+      }
+
+      previousValue = newValue;
+    },
+    { lazy: true }
+  );
+
   const fetchData = async (page: number, append = false) => {
     if (isLoading) return;
 

package/dist/components/select/select.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+  import type { SelectCollectionOptions, SelectItem, SelectProps } from './types.js';
+
   export function createSelectCollection(options: SelectCollectionOptions): ListCollection<SelectItem> {
     const { items, groups = [], groupSort } = options;
 
@@ -26,11 +28,10 @@
 </script>
 
 <script lang="ts">
-  import type { SelectCollectionOptions, SelectItem, SelectProps } from './types.js';
-
   import { Icon } from '../icons/index.js';
   import { createListCollection, type ListCollection } from '../../internal/index.js';
   import { cn } from '../../internal/utils/common.js';
+  import { watch } from 'runed';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import Content from './components/select.content.svelte';
@@ -62,6 +63,8 @@
 
     disabledPortal = false,
 
+    onSelect,
+
     ...restProps
   }: SelectProps = $props();
 
@@ -88,6 +91,37 @@
 
     return placeholderProp ?? '';
   });
+
+  let previousValue: string | string[] = value;
+
+  watch(
+    () => value,
+    (newValue) => {
+      if (!onSelect) {
+        previousValue = newValue;
+        return;
+      }
+
+      console.log('newValue', newValue);
+
+      if (typeof newValue === 'string') {
+        const item = newValue ? (collection.find(newValue) ?? null) : null;
+
+        onSelect(newValue, item);
+      } else if (Array.isArray(newValue)) {
+        const prev = Array.isArray(previousValue) ? previousValue : [];
+
+        const added = newValue.find((v) => !prev.includes(v));
+
+        const option = added ? (collection.find(added) ?? null) : null;
+
+        onSelect(newValue, option);
+      }
+
+      previousValue = newValue;
+    },
+    { lazy: true }
+  );
 </script>
 
 {#snippet defaultItemRenderer(item: SelectItem)}

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

@@ -1,5 +1,5 @@
-export declare function createSelectCollection(options: SelectCollectionOptions): ListCollection<SelectItem>;
 import type { SelectCollectionOptions, SelectItem, SelectProps } from './types.js';
+export declare function createSelectCollection(options: SelectCollectionOptions): ListCollection<SelectItem>;
 import { type ListCollection } from '../../internal/index.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "value" | "open" | "contentRef">;
 type Select = ReturnType<typeof Select>;

package/dist/components/select/types.d.ts

@@ -83,6 +83,8 @@ export type SelectProps = SelectRootProps & {
     contentRef?: HTMLDivElement | null;
     contentClass?: string;
     disabledPortal?: boolean;
+    /** Callback when selection changes. Provides value(s) and the item that was just selected, or null on deselect. */
+    onSelect?: (value: string | string[], item: SelectItem | null) => void;
 };
 export type SelectAsyncCallbackParams = {
     page: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",