svelte-5-select 1.0.2 → 2.1.0

package/dist/use-value.svelte.js

@@ -1,87 +1,199 @@
-import { hasValueChanged } from './utils';
-export function useValue(context) {
+import { untrack } from 'svelte';
+import { getItemProperty, hasValueChanged } from './utils.js';
+export function useValue(state, actions) {
+    // Tracked-read helper for the effects' trigger sections: reading length AND
+    // every entry makes any in-place mutation of a bound array retrigger the
+    // effect — push (length change) and index assignment (value[0] = x) alike.
+    function trackArrayEntries(value) {
+        if (!Array.isArray(value))
+            return;
+        value.length;
+        for (let i = 0; i < value.length; i += 1)
+            value[i];
+    }
     function findItemByValue(id) {
-        const { items, itemId } = context.getState();
-        return items?.find(item => item[itemId] === id);
-    }
-    function findItem(selection) {
-        const { normalizedValue, items, itemId } = context.getState();
-        let matchTo = selection ? selection[itemId] : normalizedValue[itemId];
-        return items?.find(item => item[itemId] === matchTo);
-    }
-    function setValue() {
-        const { value, multiple, itemId } = context.getState();
-        context.setPrevValue(value);
-        if (typeof value === 'string') {
-            let item = findItemByValue(value);
-            context.setValue(item || {
-                [itemId]: value,
-                label: value,
-            });
-        }
-        else if (multiple && Array.isArray(value) && value.length > 0) {
-            context.setValue(value.map((val) => {
-                if (typeof val === 'string') {
-                    let item = findItemByValue(val);
-                    return item || { value: val, label: val };
-                }
-                return val;
-            }));
+        const { items, itemId } = state;
+        return items?.find((item) => getItemProperty(item, itemId) === id);
+    }
+    // Exactly the shape synthesized below: an id-as-label item with no other keys
+    function isSynthesizedFallback(entry) {
+        const id = getItemProperty(entry, state.itemId);
+        if (id == null || id !== getItemProperty(entry, state.label))
+            return false;
+        return Object.keys(entry).every((key) => key === state.itemId || key === state.label);
+    }
+    // Comparisons here must be structural: Svelte's state proxies mean an item
+    // written into `value` is never identical (===) to the same item re-read
+    // from `items`, so an identity check would re-write (and loop) forever
+    function shallowEqualItems(a, b) {
+        const aKeys = Object.keys(a);
+        const bKeys = Object.keys(b);
+        return aKeys.length === bKeys.length && aKeys.every((key) => a[key] === b[key]);
+    }
+    // Resolves one value entry: a raw string becomes the matching item, or a
+    // synthesized fallback (label = id) so the control can render before items
+    // load; an earlier fallback upgrades to the real item once it exists.
+    function resolveEntry(entry) {
+        const { itemId, label } = state;
+        if (typeof entry === 'string') {
+            // The synthesized fallback is deliberately not a real Item — it only
+            // carries enough shape to render until the matching item exists. It
+            // must be keyed with the configured `label`, not a literal 'label':
+            // the selection display reads `normalizedValue[label]`
+            return findItemByValue(entry) || { [itemId]: entry, [label]: entry };
+        }
+        if (isSynthesizedFallback(entry)) {
+            const found = findItemByValue(getItemProperty(entry, itemId));
+            if (found && !shallowEqualItems(found, entry))
+                return found;
         }
+        return entry;
     }
-    function updateValueDisplay(items) {
-        const { value, itemId } = context.getState();
-        if (!items || items.length === 0 || items.some((item) => typeof item !== 'object'))
+    // Normalizes raw string values into items, resolving against `items` when
+    // possible. Only writes when an entry actually changed — the effect below
+    // tracks `value`, so an unconditional write would loop.
+    function normalizeValue() {
+        const { value, multiple } = state;
+        if (value == null)
             return;
-        if (!value)
+        // A bare (non-array) value written while multiple is on gets the same
+        // wrap setupMulti gives it on the mode transition — mount supported the
+        // shape, so post-mount writes must too. The write re-runs this effect,
+        // which then resolves the entries below.
+        if (multiple && !Array.isArray(value)) {
+            state.value = [value];
             return;
-        if (Array.isArray(value)) {
-            if (value.some((selection) => !selection || !selection[itemId]))
-                return;
-            context.setValue(value.map((selection) => findItem(selection) || selection));
         }
-        else if (typeof value === 'object') {
-            if (!value[itemId])
+        if (multiple && Array.isArray(value)) {
+            if (value.length === 0)
                 return;
-            context.setValue(findItem() || value);
+            const resolved = value.map(resolveEntry);
+            if (resolved.some((item, i) => item !== value[i])) {
+                state.value = resolved;
+            }
+        }
+        else if (!Array.isArray(value)) {
+            const resolved = resolveEntry(value);
+            if (resolved !== value)
+                state.value = resolved;
         }
     }
-    function computeJustValue() {
-        const { multiple, value, itemId, useJustValue, justValue, clearState } = context.getState();
+    // Command: when an initial justValue is supplied without a value, resolve it against items and set value
+    function hydrateValueFromJustValue() {
+        const { multiple, value, itemId, useJustValue, justValue, clearState } = state;
         const hasJustValue = multiple
-            ? (Array.isArray(justValue) && justValue.length > 0)
-            : (justValue !== '' && justValue != null);
-        if (useJustValue && !value && !clearState && hasJustValue) {
-            const { items } = context.getState();
-            const typedItems = items || [];
-            if (multiple && Array.isArray(justValue)) {
-                const justValueArr = justValue;
-                context.setValue(typedItems.filter((item) => justValueArr.includes(item[itemId])));
-            }
-            else {
-                context.setValue(typedItems.filter((item) => item[itemId] === justValue)[0]);
+            ? Array.isArray(justValue) && justValue.length > 0
+            : justValue !== '' && justValue != null;
+        if (!useJustValue || hasRealValue(multiple, value) || clearState || !hasJustValue)
+            return;
+        // Hydration is all-or-nothing and retries when items change: writing a
+        // partial (or empty) match would silently narrow justValue and block
+        // later hydration against fuller items
+        const typedItems = state.items || [];
+        // A raw string item is its own id, so string[] items hydrate too; the
+        // normalize effect upgrades a matched raw string to its synthesized item
+        const idOf = (item) => (typeof item === 'string' ? item : getItemProperty(item, itemId));
+        if (multiple && Array.isArray(justValue)) {
+            const justValueArr = justValue;
+            // Match in justValue order: hydration must not reorder the parent's
+            // entries to items order (the reordered array would then be written
+            // back over the parent's bound justValue as a spurious correction)
+            const matches = [];
+            for (const jv of justValueArr) {
+                const match = typedItems.find((item) => idOf(item) === jv);
+                if (match === undefined)
+                    return;
+                matches.push(match);
             }
+            state.value = matches;
         }
-        const wasClearing = clearState;
-        context.setClearState(false);
-        if (useJustValue && !value && !wasClearing) {
+        else {
+            const match = typedItems.find((item) => idOf(item) === justValue);
+            if (match !== undefined)
+                state.value = match;
+        }
+    }
+    // Query: pure derivation of justValue from a state snapshot
+    function deriveJustValue(snapshot) {
+        const { multiple, value, itemId, useJustValue, justValue, clearState } = snapshot;
+        // hasRealValue, not `!value`: an empty array is "nothing hydrated yet",
+        // and deriving [] from it would clobber a seeded justValue before
+        // hydration can resolve it (permanently, when items arrive late —
+        // hydration needs the justValue that was just overwritten)
+        if (useJustValue && !hasRealValue(multiple, value) && !clearState) {
             return justValue;
         }
+        // Every remaining empty representation (undefined, null, []) derives as
+        // undefined: null and [] are accepted on the way in but never written
+        // back (the JustValue contract) — returning `value` verbatim here would
+        // leak a parent's `bind:value = null` clear into justValue.
+        if (!hasRealValue(multiple, value))
+            return undefined;
         if (multiple && Array.isArray(value)) {
-            return value.map((item) => item[itemId]);
+            return value.map((item) => getItemProperty(item, itemId));
         }
-        if (!value || typeof value === 'string' || Array.isArray(value)) {
+        if (typeof value === 'string' || Array.isArray(value)) {
             return value;
         }
-        return value[itemId];
+        return getItemProperty(value, itemId);
+    }
+    // Sync-loop scratch (deliberately non-reactive): lastSyncedHadValue tells an
+    // external `bind:value` clear apart from "not hydrated yet", and
+    // lastWrittenJustValue tells a justValue we derived ourselves (a stale echo
+    // after such a clear) apart from fresh input that must hydrate.
+    let lastSyncedHadValue = false;
+    let lastWrittenJustValue;
+    function justValuesEqual(a, b) {
+        if (a === b)
+            return true;
+        // Proxied round trips break array identity; compare entries instead
+        return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((entry, i) => entry === b[i]);
+    }
+    function hasRealValue(multiple, value) {
+        // An empty array means "nothing hydrated yet", not a real selection
+        return multiple ? Array.isArray(value) && value.length > 0 : !!value;
+    }
+    function syncJustValue() {
+        // Snapshot before hydration so the derivation sees the pre-hydration state
+        const snapshot = {
+            multiple: state.multiple,
+            value: state.value,
+            itemId: state.itemId,
+            useJustValue: state.useJustValue,
+            justValue: state.justValue,
+            clearState: state.clearState,
+        };
+        // A parent clearing `bind:value` directly must behave like an internal
+        // clear: without this, hydration would resurrect the cleared selection
+        // from the stale justValue echo written on a previous sync.
+        const externallyCleared = !snapshot.clearState &&
+            lastSyncedHadValue &&
+            !hasRealValue(snapshot.multiple, snapshot.value) &&
+            justValuesEqual(snapshot.justValue, lastWrittenJustValue);
+        if (!externallyCleared)
+            hydrateValueFromJustValue();
+        state.clearState = false;
+        lastSyncedHadValue = hasRealValue(state.multiple, state.value);
+        const derived = deriveJustValue(externallyCleared ? { ...snapshot, clearState: true } : snapshot);
+        lastWrittenJustValue = derived;
+        return derived;
     }
     function checkValueForDuplicates() {
-        const { value, itemId } = context.getState();
+        const { value, itemId } = state;
         if (!Array.isArray(value) || value.length === 0)
             return true;
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- local dedup scratch, not reactive state
         const seen = new Set();
         const uniqueValues = value.filter((val) => {
-            const id = val[itemId];
+            // Raw string entries key on the string itself: getItemProperty returns
+            // undefined for non-objects, which would collapse all strings into one
+            const id = typeof val === 'string' ? val : getItemProperty(val, itemId);
+            // An entry with no itemId field yields no evidence of duplication —
+            // collapsing every such entry into the first silently loses data on
+            // a config error (the dev warning in Select.svelte surfaces it).
+            // Only matching real ids may dedup.
+            if (id === undefined)
+                return true;
             if (seen.has(id))
                 return false;
             seen.add(id);
@@ -89,87 +201,198 @@ export function useValue(context) {
         });
         const noDuplicates = uniqueValues.length === value.length;
         if (!noDuplicates)
-            context.setValue(uniqueValues);
+            state.value = uniqueValues;
         return noDuplicates;
     }
     function dispatchSelectedItem() {
-        const { multiple, value, prevValue, itemId } = context.getState();
+        const { multiple, value, prevValue, itemId } = state;
+        // The two empty representations (undefined/null and []) are the same
+        // no-selection state: moving between them is not a change and must not
+        // dispatch. A real clear reports null in single mode — an empty array
+        // is truthy, so `if (payload)` in consumers would read "cleared" as
+        // "has value" — and [] in multiple mode.
+        const hasNoValue = !value || (Array.isArray(value) && value.length === 0);
+        if (hasNoValue) {
+            const hadNoValue = !prevValue || (Array.isArray(prevValue) && prevValue.length === 0);
+            if (!hadNoValue)
+                actions.onValueChange(multiple ? [] : null);
+            state.prevValue = Array.isArray(value) ? value.slice() : value;
+            return;
+        }
         if (multiple) {
-            if (hasValueChanged(value, prevValue)) {
-                if (checkValueForDuplicates()) {
-                    context.oninput(value || []);
-                }
+            if (hasValueChanged(value, prevValue, itemId) && checkValueForDuplicates()) {
+                actions.onValueChange(value);
             }
-            return;
         }
-        if (!prevValue || hasValueChanged(value[itemId], prevValue[itemId])) {
-            context.oninput(value);
+        else if (!prevValue || hasValueChanged(value, prevValue, itemId)) {
+            actions.onValueChange(value);
         }
+        // Snapshot a copy of the settled (post-dedup) value: storing the live
+        // array would alias prevValue to `value`, so an in-place push could
+        // never register as a change
+        const settled = state.value;
+        state.prevValue = Array.isArray(settled) ? settled.slice() : settled;
     }
     function setupMulti() {
-        const { value } = context.getState();
+        const { value, prevValue } = state;
         if (value) {
             if (Array.isArray(value)) {
-                context.setValue([...value]);
+                state.value = [...value];
             }
             else {
-                context.setValue([value]);
+                // A raw string value stays a string here; normalizeValue resolves it to an item
+                state.value = [value];
+            }
+            // Wrapping is shape normalization, not a selection change: mirror it
+            // on the dispatch baseline, so a mount seeded with a bare item (or a
+            // single->multi flip) does not register as a change and fire onValueChange
+            if (prevValue && !Array.isArray(prevValue)) {
+                state.prevValue = [prevValue];
             }
         }
     }
     async function handleMultiItemClear(i) {
-        const { value } = context.getState();
+        const { value } = state;
         if (!Array.isArray(value))
             return;
+        // A stale index (the arrow-key cursor can outlive a mouse removal's
+        // reindexing) must not fire onclear(undefined) — or, via the length-1
+        // branch below, clear a tag it never pointed at
+        if (i < 0 || i >= value.length)
+            return;
         const itemToRemove = value[i];
-        context.setClearState(true);
+        state.clearState = true;
         if (value.length === 1) {
-            context.setValue(undefined);
+            state.value = undefined;
         }
         else {
-            context.setValue(value.filter((item) => {
-                return item !== itemToRemove;
-            }));
-        }
-        context.onclear(itemToRemove);
-    }
-    function convertStringItemsToObjects(_items) {
-        return _items.map((item, index) => {
-            return {
-                index,
-                value: item,
-                label: `${item}`,
-            };
-        });
+            state.value = value.filter((item) => item !== itemToRemove);
+        }
+        actions.onclear(itemToRemove);
     }
     function itemSelected(selection) {
-        const { multiple, value, closeListOnChange } = context.getState();
-        if (selection) {
-            context.setFilterText('');
-            const item = Object.assign({}, selection);
-            if (item.groupHeader && !item.selectable)
+        if (!selection)
+            return;
+        const { multiple, value, closeListOnChange, itemId } = state;
+        const item = { ...selection };
+        if (item.groupHeader && !item.selectable)
+            return;
+        // Re-selecting an already-selected item in multiple mode is a no-op: the
+        // value is a distinct set. Without this the item was concatenated and
+        // onSelectionChange fired synchronously with a duplicate array ([a, a]) before a
+        // later effect deduped state.value — leaving onSelectionChange disagreeing with the
+        // (correctly suppressed) onValueChange. Single mode already no-ops the same way
+        // in handleItemClick / handleEnterKey. The no-op runs before the
+        // filterText wipe below: with filterSelectedItems={false} a re-click
+        // selects nothing and must not clear what the user typed.
+        if (multiple && Array.isArray(value)) {
+            const selectedId = getItemProperty(item, itemId);
+            const alreadySelected = value.some((entry) => (typeof entry === 'string' ? entry : getItemProperty(entry, itemId)) === selectedId);
+            if (alreadySelected) {
+                if (closeListOnChange)
+                    actions.closeList();
+                state.activeValue = undefined;
                 return;
-            setValue();
-            updateValueDisplay(context.getState().items);
-            context.setValue(multiple ? (value ? value.concat([item]) : [item]) : item);
-            if (closeListOnChange)
-                context.closeList();
-            context.setActiveValue(undefined);
-            context.onchange(context.getState().value);
-            context.onselect(selection);
+            }
         }
+        // A committed selection retires a pending deps-reload verdict when the
+        // displayed results it was picked from are fresher than that reload —
+        // otherwise the reload's late response wipes this selection
+        actions.retireStaleValidation?.();
+        state.filterText = '';
+        state.value = multiple ? (value ? value.concat([item]) : [item]) : item;
+        // A completed selection consumes Tab's commit-intent: with
+        // closeListOnChange={false} the list stays open and (with
+        // filterSelectedItems) the cursor re-parks on a neighbouring option,
+        // which a later Tab must not commit. closeList() also resets the flag,
+        // but only when the selection actually closes the list.
+        state.userNavigatedSinceOpen = false;
+        if (closeListOnChange)
+            actions.closeList();
+        state.activeValue = undefined;
+        actions.onSelectionChange(state.value);
+        actions.onselect(selection);
     }
+    // Run once synchronously at creation: effects never run during SSR, so
+    // without this pass the server HTML ships raw string entries — empty chip
+    // text, aria-label="Remove undefined", and a hidden form input carrying
+    // JSON.stringify('NY'). The effect below re-runs the same idempotent
+    // resolution on the client.
+    untrack(() => normalizeValue());
+    // Normalize string values on every value change (not just the hasValue
+    // flip — replacing one string with another must re-resolve), and again when
+    // async items arrive so fallback entries upgrade to the real item
+    $effect(() => {
+        const value = state.value;
+        trackArrayEntries(value); // in-place growth and entry replacement both retrigger
+        state.items;
+        untrack(() => normalizeValue());
+    });
+    // Multiple-mode transitions (single<->multi) and duplicate guard
+    $effect(() => {
+        state.multiple;
+        const value = state.value;
+        trackArrayEntries(value); // in-place growth and entry replacement both retrigger
+        untrack(() => {
+            const wasMultiple = state.prevMultiple;
+            state.prevMultiple = state.multiple;
+            if (state.multiple !== wasMultiple) {
+                if (state.multiple) {
+                    setupMulti();
+                }
+                else if (wasMultiple && Array.isArray(state.value)) {
+                    // Only the old (array-shaped) value is wiped: a replacement
+                    // single value supplied together with the multiple flip is a
+                    // deliberate new selection and must survive.
+                    // `undefined`, not `null`: an emptied value is `undefined`
+                    // everywhere else (clear button, last tag removed, a deps
+                    // reload invalidating the selection), and one empty
+                    // representation is the whole contract
+                    state.value = undefined;
+                    return;
+                }
+            }
+            if (state.multiple && Array.isArray(state.value) && state.value.length > 1) {
+                checkValueForDuplicates();
+            }
+        });
+    });
+    // Dispatch onValueChange when value changes (selection, update, or clear)
+    $effect(() => {
+        const value = state.value;
+        trackArrayEntries(value); // in-place growth and entry replacement both retrigger
+        untrack(() => dispatchSelectedItem());
+    });
+    // Hydrate value from justValue, then keep justValue in sync.
+    // items is a tracked trigger so hydration retries when async items arrive.
+    // justValue is tracked too, so a post-mount write applies deterministically
+    // right away — it hydrates when no selection exists, and is corrected back
+    // to the selection-derived values when one does (value wins). Previously a
+    // late write sat dormant and then hydrated on the next unrelated trigger.
+    // The equality-guarded write breaks the write→track cycle (a derived array
+    // is a new reference every run) and keeps justValue's identity stable when
+    // its entries are unchanged.
+    // clearState is a tracked trigger too, so an explicit clear always reaches
+    // syncJustValue (which consumes and resets the flag) even when it is not
+    // accompanied by a value change — otherwise the flag could stick `true` and
+    // block the next hydration. syncJustValue resets it to `false`, which settles
+    // in one extra run (the false→false write no longer notifies).
+    $effect(() => {
+        state.multiple;
+        state.itemId;
+        const value = state.value;
+        trackArrayEntries(value); // in-place growth and entry replacement both retrigger
+        state.items;
+        state.clearState;
+        state.justValue;
+        untrack(() => {
+            const derived = syncJustValue();
+            if (!justValuesEqual(derived, state.justValue))
+                state.justValue = derived;
+        });
+    });
     return {
-        setValue,
-        updateValueDisplay,
-        computeJustValue,
-        checkValueForDuplicates,
-        findItem,
-        findItemByValue,
-        dispatchSelectedItem,
         itemSelected,
-        setupMulti,
         handleMultiItemClear,
-        convertStringItemsToObjects,
     };
 }

package/dist/utils.d.ts

@@ -1,10 +1,21 @@
-import type { SelectItem } from './types';
+import type { ItemLike, SelectGroupHeader, SelectItem } from './types.js';
+/**
+ * Narrows a rendered list row to a synthesized group header (see the `groupBy` prop).
+ * Rows that fail this guard are your own item type.
+ */
+export declare function isGroupHeader(row: ItemLike | null | undefined): row is SelectGroupHeader;
 export declare function getItemProperty<T>(item: T, key: keyof T | string): T[keyof T] | undefined;
-export declare function areItemsEqual(a: SelectItem | null | undefined, b: SelectItem | null | undefined, itemId: string): boolean;
-export declare function isCancelled(res: any): res is {
-    cancelled: boolean;
-};
-export declare function isStringArray(arr: any[]): arr is string[];
+/** Compares two value entries by their `itemId` field, never by reference. Accepts any {@link ItemLike} item type. */
+export declare function areItemsEqual(a: ItemLike | null | undefined, b: ItemLike | null | undefined, itemId: string): boolean;
+export declare function isStringArray(arr: unknown[]): arr is string[];
 export declare function isItemSelectableCheck(item: SelectItem | undefined): boolean;
-export declare function hasValueChanged(newValue: unknown, oldValue: unknown): boolean;
-export declare function createGroupHeaderItem(groupValue: string, item: SelectItem, labelKey?: string): SelectItem;
+/**
+ * Normalizes a raw string value into a synthesized `{ value, label }` item; items
+ * (and arrays of them) pass through unchanged. Accepts any {@link ItemLike} item
+ * type — a synthesized entry is a `SelectItem`, not your item type.
+ */
+export declare function normalizeItem<Item extends ItemLike = SelectItem>(value: string | Item | null | undefined): Item | SelectItem | null;
+export declare function normalizeItem<Item extends ItemLike = SelectItem>(value: string | Item | (Item | string)[] | null | undefined): Item | SelectItem | (Item | SelectItem)[] | null;
+export declare function hasValueChanged(newValue: SelectItem | string | (SelectItem | string)[] | null | undefined, oldValue: SelectItem | string | (SelectItem | string)[] | null | undefined, itemId: string): boolean;
+export declare function convertStringItemsToObjects(_items: string[]): SelectItem[];
+export declare function createGroupHeaderItem(groupValue: string, labelKey?: string): SelectItem;

package/dist/utils.js

@@ -1,26 +1,70 @@
+/**
+ * Narrows a rendered list row to a synthesized group header (see the `groupBy` prop).
+ * Rows that fail this guard are your own item type.
+ */
+export function isGroupHeader(row) {
+    return !!row && row.groupHeader === true;
+}
 export function getItemProperty(item, key) {
     return item && typeof item === 'object' ? item[key] : undefined;
 }
+/** Compares two value entries by their `itemId` field, never by reference. Accepts any {@link ItemLike} item type. */
 export function areItemsEqual(a, b, itemId) {
     if (!a || !b)
         return false;
     return getItemProperty(a, itemId) === getItemProperty(b, itemId);
 }
-export function isCancelled(res) {
-    return res && typeof res === 'object' && 'cancelled' in res && res.cancelled === true;
-}
 export function isStringArray(arr) {
-    return arr.length > 0 && arr.every(item => typeof item === 'string');
+    return arr.length > 0 && arr.every((item) => typeof item === 'string');
 }
 export function isItemSelectableCheck(item) {
     if (!item)
         return false;
-    return !item.hasOwnProperty('selectable') || item.selectable !== false;
+    return !Object.prototype.hasOwnProperty.call(item, 'selectable') || item.selectable !== false;
+}
+export function normalizeItem(value) {
+    if (!value)
+        return null;
+    // Entries of an array value may still be raw strings; callers normalize per entry
+    return typeof value === 'string' ? { value, label: value } : value;
+}
+// The comparable id of a value entry: a raw string is its own id, an item uses
+// its itemId field.
+function entryId(v, itemId) {
+    return typeof v === 'string' ? v : getItemProperty(v, itemId);
+}
+// Compare by id, not by reference type: a raw string and the item it resolves to
+// share an id, so mount-time string-to-item normalization is the same selection —
+// not a change — and must not dispatch onValueChange. Two items compare by itemId.
+function haveEntriesChanged(a, b, itemId) {
+    if (typeof a === 'string' || typeof b === 'string') {
+        return entryId(a, itemId) !== entryId(b, itemId);
+    }
+    if (!a || !b)
+        return a !== b;
+    return !areItemsEqual(a, b, itemId);
+}
+export function hasValueChanged(newValue, oldValue, itemId) {
+    if (Array.isArray(newValue) !== Array.isArray(oldValue))
+        return true;
+    if (Array.isArray(newValue) && Array.isArray(oldValue)) {
+        if (newValue.length !== oldValue.length)
+            return true;
+        return newValue.some((item, i) => haveEntriesChanged(item, oldValue[i], itemId));
+    }
+    // Neither side is an array here
+    return haveEntriesChanged(newValue, oldValue, itemId);
 }
-export function hasValueChanged(newValue, oldValue) {
-    return JSON.stringify(newValue) !== JSON.stringify(oldValue);
+export function convertStringItemsToObjects(_items) {
+    return _items.map((item, index) => {
+        return {
+            index,
+            value: item,
+            label: `${item}`,
+        };
+    });
 }
-export function createGroupHeaderItem(groupValue, item, labelKey = 'label') {
+export function createGroupHeaderItem(groupValue, labelKey = 'label') {
     return {
         value: groupValue,
         [labelKey]: groupValue,