@streamscloud/kit 0.2.30 → 0.2.32

package/dist/ui/selects/_singleselect.scss

@@ -129,6 +129,7 @@
 
   &__option {
     font-size: var(--_singleselect--text--font-size);
+    @include mixins.ellipsis;
 
     &--faded {
       color: var(--_singleselect--placeholder--color);

package/dist/ui/selects/cmp.multiselect.svelte

@@ -7,7 +7,8 @@ import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_ver
 import Fuse from 'fuse.js';
 import { dndzone } from 'svelte-dnd-action';
 import Select from 'svelte-select';
-let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, inlineSelection = false, hideEmptyState = false, showFullItem = false, reorderable = false, on, icon, chevronIcon } = $props();
+let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, inlineSelection = false, hideEmptyState = false, showFullItem = false, reorderable = false, compareBy, on, icon, chevronIcon } = $props();
+const valuesEqual = (a, b) => (compareBy ? compareBy(a) === compareBy(b) : a === b);
 const loc = new SelectLocalization();
 let listOpen = $state(false);
 let filterText = $state('');
@@ -34,9 +35,9 @@ $effect(() => {
     }
     else {
         selectValue = value
-            .filter((v) => flatOptions.some((o) => o.value === v))
+            .filter((v) => flatOptions.some((o) => valuesEqual(o.value, v)))
             .map((v) => {
-            const existent = flatOptions.find((x) => x.value === v);
+            const existent = flatOptions.find((x) => valuesEqual(x.value, v));
             return {
                 id: typeof existent.value === 'string' ? existent.value : JSON.stringify(existent.value),
                 label: existent.label,
@@ -100,7 +101,7 @@ const onSelectFilter = (itemsFiltered) => {
                 label: x.label,
                 value: x.value,
                 $isCreated: false,
-                group: flatOptions.find((f) => f.value === x.value)?.group
+                group: flatOptions.find((f) => valuesEqual(f.value, x.value))?.group
             }))
         ];
     }
@@ -112,11 +113,11 @@ const onSelectFilter = (itemsFiltered) => {
 };
 const onClear = (item) => {
     const items = Array.isArray(item) ? item : [item];
-    const itemsRemaining = selectValue.filter((x) => !items.some((i) => i.value === x.value));
+    const itemsRemaining = selectValue.filter((x) => !items.some((i) => !i.$isCreated && valuesEqual(i.value, x.value)));
     on?.change?.(itemsRemaining.map((x) => x.value));
 };
 const removeItem = (item) => {
-    const itemsRemaining = selectValue.filter((x) => x.value !== item.value);
+    const itemsRemaining = selectValue.filter((x) => !valuesEqual(x.value, item.value));
     on?.change?.(itemsRemaining.map((x) => x.value));
 };
 const flipDurationMs = 200;

package/dist/ui/selects/cmp.multiselect.svelte.d.ts

@@ -17,6 +17,8 @@ declare function $$render<T>(): {
         showFullItem?: boolean;
         /** Enable drag-and-drop reordering of external tags */
         reorderable?: boolean;
+        /** Custom equality comparator for option values. When provided, two values are equal if compareBy(a) === compareBy(b). */
+        compareBy?: (value: T) => string | number;
         on?: {
             change?: (value: T[]) => void;
             create?: (label: string) => void;

package/dist/ui/selects/cmp.search-multiselect.svelte

@@ -9,7 +9,8 @@ import Fuse from 'fuse.js';
 import { nanoid } from 'nanoid';
 import { dndzone } from 'svelte-dnd-action';
 import Select from 'svelte-select';
-let { value = null, loadOptions: loadOptionsFn, debounce = 350, placeholder = '', disabled = false, loading = false, creatable = null, inlineSelection = false, hideEmptyState = false, showFullItem = false, showChevron = false, maxVisibleItems = undefined, reorderable = false, on, icon, chevronIcon, optionSnippet } = $props();
+let { value = null, loadOptions: loadOptionsFn, debounce = 350, placeholder = '', disabled = false, loading = false, creatable = null, inlineSelection = false, hideEmptyState = false, showFullItem = false, showChevron = false, maxVisibleItems = undefined, reorderable = false, compareBy, on, icon, chevronIcon, optionSnippet } = $props();
+const valuesEqual = (a, b) => (compareBy ? compareBy(a) === compareBy(b) : a === b);
 const loc = new SelectLocalization();
 let listOpen = $state(false);
 let filterText = $state('');
@@ -44,7 +45,7 @@ let createOption = $state(null);
 let actualOptions = $state([]);
 const generateOptions = (selected, actual, created) => {
     const generated = actual
-        .filter((x) => !selected.some((v) => v.value === x.value))
+        .filter((x) => !selected.some((v) => valuesEqual(v.value, x.value)))
         .map((x) => ({
         label: x.label,
         value: x.value,
@@ -109,11 +110,11 @@ const onSelectFilter = () => {
 };
 const onClear = (item) => {
     const items = Array.isArray(item) ? item : [item];
-    const itemsRemaining = selectValue.filter((x) => !items.some((i) => i.value === x.value));
+    const itemsRemaining = selectValue.filter((x) => !items.some((i) => !i.$isCreated && valuesEqual(i.value, x.value)));
     on?.change?.(itemsRemaining.map((x) => ({ label: x.label, value: x.value })));
 };
 const removeItem = (item) => {
-    const itemsRemaining = selectValue.filter((x) => x.value !== item.value);
+    const itemsRemaining = selectValue.filter((x) => !valuesEqual(x.value, item.value));
     on?.change?.(itemsRemaining.map((x) => ({ label: x.label, value: x.value })));
 };
 const flipDurationMs = 200;

package/dist/ui/selects/cmp.search-multiselect.svelte.d.ts

@@ -24,6 +24,8 @@ declare function $$render<T>(): {
         maxVisibleItems?: number;
         /** Enable drag-and-drop reordering of external tags */
         reorderable?: boolean;
+        /** Custom equality comparator for option values. When provided, two values are equal if compareBy(a) === compareBy(b). */
+        compareBy?: (value: T) => string | number;
         on?: {
             change?: (value: SelectOption<T>[]) => void;
             create?: (label: string) => void;

package/dist/ui/selects/cmp.singleselect.svelte

@@ -4,7 +4,8 @@ import IconAdd from '@fluentui/svg-icons/icons/add_16_filled.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import Fuse from 'fuse.js';
 import Select from 'svelte-select';
-let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, allowReset = false, groupHeaderSelectable = false, on, icon, optionSnippet, selectionSnippet } = $props();
+let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, allowReset = false, groupHeaderSelectable = false, compareBy, on, icon, optionSnippet, selectionSnippet } = $props();
+const valuesEqual = (a, b) => (compareBy ? compareBy(a) === compareBy(b) : a === b);
 const loc = new SelectLocalization();
 let listOpen = $state(false);
 let filterText = $state('');
@@ -26,7 +27,7 @@ const flattenGroupedOptions = (opts) => {
 const flatOptions = $derived(flattenGroupedOptions(options));
 let selectValue = $state.raw(null);
 $effect(() => {
-    const existent = flatOptions.find((x) => x.value === value);
+    const existent = value !== null ? flatOptions.find((x) => valuesEqual(x.value, value)) : null;
     if (existent) {
         selectValue = {
             label: existent.label,
@@ -124,7 +125,7 @@ const onSelectFilter = (itemsFiltered) => {
                 label: x.label,
                 value: x.value,
                 $isCreated: false,
-                group: flatOptions.find((f) => f.value === x.value)?.group
+                group: flatOptions.find((f) => valuesEqual(f.value, x.value))?.group
             }))
         ];
     }
@@ -336,6 +337,10 @@ Single-value select dropdown built on svelte-select with fuzzy search. Supports
 }
 .select__option {
   font-size: var(--_singleselect--text--font-size);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .select__option--faded {
   color: var(--_singleselect--placeholder--color);

package/dist/ui/selects/cmp.singleselect.svelte.d.ts

@@ -13,6 +13,8 @@ declare function $$render<T>(): {
         allowReset?: boolean;
         /** Allow clicking group headers to select them */
         groupHeaderSelectable?: boolean;
+        /** Custom equality comparator for option values. When provided, two values are equal if compareBy(a) === compareBy(b). */
+        compareBy?: (value: T) => string | number;
         on?: {
             change?: (value: T | null) => void;
             create?: (label: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",