svelte-5-select 1.0.0-beta.1 → 1.0.2

package/dist/Select.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { SelectProps } from './types';
-declare const Select: import("svelte").Component<SelectProps, {}, "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "focused" | "justValue">;
+declare const Select: import("svelte").Component<SelectProps, {
+    reset: () => void;
+}, "loading" | "value" | "hoverItemIndex" | "listOpen" | "filterText" | "items" | "focused" | "justValue">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/index.d.ts

@@ -5,4 +5,4 @@ export { default as LoadingIcon } from './LoadingIcon.svelte';
 export { default as filter } from './filter';
 export { useKeyboardNavigation } from './keyboard-navigation.svelte';
 export { isStringArray, isCancelled, areItemsEqual } from './utils';
-export type { SelectItem, SelectProps, FloatingConfig, FilterConfig, KeyboardNavigationContext, ErrorEvent, } from './types';
+export type { SelectItem, SelectProps, SelectValue, JustValue, FloatingConfig, FilterConfig, KeyboardNavigationContext, ErrorEvent, } from './types';

package/dist/tailwind.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss';
 
 .svelte-select {
     @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
@@ -74,7 +74,7 @@
 }
 
 .list .list-group-title {
-    @apply text-slate-800 cursor-default text-sm font-medium h-10 leading-10 px-5 overflow-ellipsis whitespace-nowrap uppercase;
+    @apply text-slate-800 cursor-default text-sm font-medium h-10 leading-10 px-5 text-ellipsis whitespace-nowrap uppercase;
 }
 
 .list .empty {
@@ -82,7 +82,7 @@
 }
 
 .item {
-    @apply cursor-default h-10 leading-10 px-5 text-gray-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+    @apply cursor-default h-10 leading-10 px-5 text-gray-800 text-ellipsis overflow-hidden whitespace-nowrap;
 }
 
 .item.group-item {
@@ -114,7 +114,7 @@
 }
 
 .multi-item {
-    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
 .multi-item.disabled {

package/dist/types.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { ComputePositionConfig } from 'svelte-floating-ui/dom';
+export type SelectValue = SelectItem | SelectItem[] | null;
 export interface ErrorEvent {
     type: string;
-    details: any;
+    details: unknown;
 }
 export interface FilterConfig {
     loadOptions?: (filterText: string) => Promise<SelectItem[] | string[]>;
@@ -27,7 +28,7 @@ export interface KeyboardNavigationContext {
         filteredItems: SelectItem[];
         hoverItemIndex: number;
         multiple: boolean;
-        value: any;
+        value: SelectProps['value'];
         filterText: string;
         activeValue: number | undefined;
         itemId: string;
@@ -41,6 +42,75 @@ export interface KeyboardNavigationContext {
     handleSelect: (item: SelectItem) => void;
     handleMultiItemClear: (index: number) => Promise<void>;
 }
+export interface HoverContext {
+    getState: () => {
+        listOpen: boolean;
+        filteredItems: SelectItem[];
+        hoverItemIndex: number;
+        multiple: boolean;
+        value: SelectProps['value'];
+        isScrolling: boolean;
+        groupBy: ((item: SelectItem) => string) | undefined;
+        itemId: string;
+    };
+    setHoverItemIndex: (value: number) => void;
+    setIsScrolling: (value: boolean) => void;
+    onhoveritem: (index: number) => void;
+}
+export type JustValue = string | number | string[] | number[] | null;
+export interface ValueContext {
+    getState: () => {
+        value: SelectProps['value'];
+        prevValue: SelectProps['value'];
+        items: SelectItem[] | string[] | null;
+        multiple: boolean;
+        itemId: string;
+        label: string;
+        hasValue: boolean;
+        normalizedValue: SelectItem | SelectItem[] | null;
+        useJustValue: boolean;
+        justValue: JustValue | undefined;
+        clearState: boolean;
+        closeListOnChange: boolean;
+    };
+    setValue: (value: SelectProps['value']) => void;
+    setJustValue: (value: JustValue) => void;
+    setPrevValue: (value: SelectProps['value']) => void;
+    setClearState: (value: boolean) => void;
+    setActiveValue: (value: number | undefined) => void;
+    setFilterText: (value: string) => void;
+    closeList: () => void;
+    oninput: (value: SelectProps['value']) => void;
+    onchange: (value: SelectProps['value']) => void;
+    onclear: (value: SelectProps['value'] | SelectItem) => void;
+    onselect: (selection: SelectItem) => void;
+}
+export interface LoadOptionsContext {
+    getState: () => {
+        filterText: string;
+        prevFilterText: string | undefined;
+        loadOptionsDeps: any[];
+        loadOptions: ((filterText: string) => Promise<SelectItem[] | string[]>) | undefined;
+        disabled: boolean;
+        multiple: boolean;
+        value: SelectProps['value'];
+        items: SelectItem[] | string[] | null;
+        itemId: string;
+        useJustValue: boolean;
+        justValue: JustValue | undefined;
+        listOpen: boolean;
+        debounceWait: number;
+    };
+    setItems: (items: SelectItem[] | string[] | null) => void;
+    setValue: (value: SelectProps['value']) => void;
+    setJustValue: (value: JustValue) => void;
+    setLoading: (value: boolean) => void;
+    setListOpen: (value: boolean) => void;
+    debounce: (fn: () => void, wait: number) => void;
+    convertStringItemsToObjects: (items: string[]) => SelectItem[];
+    onloaded: (options: SelectItem[]) => void;
+    onerror: (error: ErrorEvent) => void;
+}
 export interface ScrollActionParams {
     scroll: boolean;
 }
@@ -59,7 +129,7 @@ export interface SelectProps {
     filterText?: string;
     itemId?: string;
     items?: SelectItem[] | string[] | null;
-    justValue?: any;
+    justValue?: JustValue;
     label?: string;
     value?: SelectItem | SelectItem[] | string | null;
     disabled?: boolean;
@@ -100,26 +170,27 @@ export interface SelectProps {
     getFilteredItems?: () => SelectItem[];
     groupBy?: ((item: SelectItem) => string) | undefined;
     groupFilter?: (groups: string[]) => string[];
-    itemFilter?: (label: string, filterText: string, option: any) => boolean;
+    itemFilter?: (label: string, filterText: string, option: SelectItem) => boolean;
     loadOptions?: (filterText: string) => Promise<SelectItem[] | string[]>;
     ariaFocused?: () => string;
+    ariaLabel?: string;
     ariaListOpen?: (label: string, count: number) => string;
     ariaValues?: (values: string) => string;
     handleClear?: () => void;
     onblur?: (e: FocusEvent) => void;
-    onchange?: (value: any) => void;
-    onclear?: (value: any) => void;
+    onchange?: (value: SelectValue) => void;
+    onclear?: (value: SelectValue) => void;
     onerror?: (error: ErrorEvent) => void;
     onfilter?: (items: SelectItem[]) => void;
     onfocus?: (e: FocusEvent) => void;
     onhoveritem?: (index: number) => void;
-    oninput?: (value: any) => void;
+    oninput?: (value: SelectValue) => void;
     onloaded?: (options: SelectItem[]) => void;
     onselect?: (selection: SelectItem) => void;
     chevronIconSnippet?: Snippet<[boolean]>;
     clearIconSnippet?: Snippet;
     emptySnippet?: Snippet;
-    inputHiddenSnippet?: Snippet<[any]>;
+    inputHiddenSnippet?: Snippet<[SelectValue]>;
     itemSnippet?: Snippet<[SelectItem, number]>;
     listAppendSnippet?: Snippet;
     listPrependSnippet?: Snippet;
@@ -127,8 +198,8 @@ export interface SelectProps {
     loadingIconSnippet?: Snippet;
     multiClearIconSnippet?: Snippet;
     prependSnippet?: Snippet;
-    requiredSnippet?: Snippet<[any]>;
-    selectionSnippet?: Snippet<[any, number?]>;
+    requiredSnippet?: Snippet<[SelectValue]>;
+    selectionSnippet?: Snippet<[SelectItem | SelectItem[], number?]>;
     container?: HTMLDivElement;
     input?: HTMLInputElement;
 }

package/dist/use-hover.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HoverContext, SelectItem } from './types';
+export declare function useHover(context: HoverContext): {
+    computeNextIndex: (filteredItems: SelectItem[], fromIndex: number, increment: number) => number;
+    setHoverIndex: (increment: number) => void;
+    setValueIndexAsHoverIndex: () => void;
+    checkHoverSelectable: (startingIndex?: number, ignoreGroup?: boolean) => void;
+    getFirstSelectableIndex: () => number;
+    isItemActive: (item: SelectItem, val: SelectItem | SelectItem[] | null | undefined, itemId: string) => boolean | undefined;
+    isItemSelectable: (item: SelectItem) => boolean;
+    handleHover: (i: number) => void;
+    handleListScroll: () => void;
+    handleListScrollEnd: () => void;
+};

package/dist/use-hover.svelte.js

@@ -0,0 +1,97 @@
+import { areItemsEqual, isItemSelectableCheck } from './utils';
+export function useHover(context) {
+    function computeNextIndex(filteredItems, fromIndex, increment) {
+        let selectableFilteredItems = filteredItems.filter((item) => !Object.hasOwn(item, 'selectable') || item.selectable === true);
+        if (selectableFilteredItems.length === 0) {
+            return 0;
+        }
+        const currentItem = filteredItems[fromIndex];
+        const isCurrentSelectable = isItemSelectableCheck(currentItem);
+        let currentSelectableIndex;
+        if (isCurrentSelectable) {
+            currentSelectableIndex = selectableFilteredItems.findIndex(item => item === currentItem);
+        }
+        else {
+            currentSelectableIndex = increment > 0 ? -1 : selectableFilteredItems.length;
+        }
+        let newSelectableIndex;
+        if (increment > 0) {
+            newSelectableIndex = (currentSelectableIndex + 1) % selectableFilteredItems.length;
+        }
+        else {
+            newSelectableIndex = (currentSelectableIndex - 1 + selectableFilteredItems.length) % selectableFilteredItems.length;
+        }
+        const newItem = selectableFilteredItems[newSelectableIndex];
+        return filteredItems.findIndex(item => item === newItem);
+    }
+    function setHoverIndex(increment) {
+        const { filteredItems, hoverItemIndex } = context.getState();
+        context.setHoverItemIndex(computeNextIndex(filteredItems, hoverItemIndex, increment));
+    }
+    function setValueIndexAsHoverIndex() {
+        const { value, filteredItems, itemId } = context.getState();
+        const normalizedValue = !value ? null : typeof value === 'string' ? { value, label: value } : value;
+        if (!normalizedValue || Array.isArray(normalizedValue))
+            return;
+        const singleValue = normalizedValue;
+        const valueIndex = filteredItems.findIndex((i) => {
+            return i[itemId] === singleValue[itemId];
+        });
+        checkHoverSelectable(valueIndex, true);
+    }
+    function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
+        const { groupBy, filteredItems } = context.getState();
+        const idx = startingIndex < 0 ? 0 : startingIndex;
+        if (!ignoreGroup && groupBy && filteredItems[idx] && !filteredItems[idx].selectable) {
+            // Compute the final index without intermediate state writes
+            context.setHoverItemIndex(computeNextIndex(filteredItems, idx, 1));
+        }
+        else {
+            context.setHoverItemIndex(idx);
+        }
+    }
+    function getFirstSelectableIndex() {
+        const { groupBy, filteredItems } = context.getState();
+        if (!groupBy || filteredItems.length === 0)
+            return 0;
+        if (!isItemSelectableCheck(filteredItems[0])) {
+            const firstSelectable = filteredItems.findIndex(isItemSelectableCheck);
+            return firstSelectable >= 0 ? firstSelectable : 0;
+        }
+        return 0;
+    }
+    function isItemActive(item, val, itemId) {
+        const { multiple } = context.getState();
+        if (multiple)
+            return;
+        const normalized = !val ? null : typeof val === 'string' ? { value: val, label: val } : val;
+        return areItemsEqual(normalized, item, itemId);
+    }
+    function isItemSelectable(item) {
+        return (item.groupHeader && item.selectable) || isItemSelectableCheck(item);
+    }
+    function handleHover(i) {
+        const { isScrolling } = context.getState();
+        if (isScrolling)
+            return;
+        context.setHoverItemIndex(i);
+    }
+    function handleListScroll() {
+        context.setIsScrolling(true);
+    }
+    function handleListScrollEnd() {
+        context.setIsScrolling(false);
+    }
+    return {
+        computeNextIndex,
+        setHoverIndex,
+        setValueIndexAsHoverIndex,
+        checkHoverSelectable,
+        getFirstSelectableIndex,
+        isItemActive,
+        isItemSelectable,
+        handleHover,
+        handleListScroll,
+        handleListScrollEnd,
+    };
+}

package/dist/use-load-options.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LoadOptionsContext } from './types';
+export declare function useLoadOptions(context: LoadOptionsContext): {
+    handleLoadOptions: (currentFilterText: string, currentDeps: any[]) => void;
+};

package/dist/use-load-options.svelte.js

@@ -0,0 +1,68 @@
+export function useLoadOptions(context) {
+    function handleLoadOptions(currentFilterText, currentDeps) {
+        const { loadOptions, disabled, multiple, value, itemId, useJustValue, justValue, prevFilterText, debounceWait, listOpen } = context.getState();
+        if (loadOptions && !disabled) {
+            context.setLoading(true);
+            const isFilterTextChange = currentFilterText !== prevFilterText;
+            const executeLoad = async () => {
+                try {
+                    const result = await loadOptions(currentFilterText);
+                    if (result && result.length > 0 && typeof result[0] === 'string') {
+                        context.setItems(context.convertStringItemsToObjects(result));
+                    }
+                    else {
+                        context.setItems(result ? result.slice() : null);
+                    }
+                    // Re-read state after async operation
+                    const state = context.getState();
+                    if (state.value && state.items && state.items.length > 0) {
+                        const items = state.items;
+                        const valueExists = state.multiple
+                            ? Array.isArray(state.value) && state.value.every((v) => items.some((item) => (typeof item === 'string' ? item : item[state.itemId]) === (typeof v === 'string' ? v : v[state.itemId])))
+                            : items.some((item) => (typeof item === 'string' ? item : item[state.itemId]) === (typeof state.value === 'string' ? state.value : state.value[state.itemId]));
+                        if (!valueExists) {
+                            context.setValue(state.multiple ? [] : undefined);
+                            if (state.useJustValue) {
+                                context.setJustValue(state.multiple ? [] : '');
+                            }
+                        }
+                    }
+                    else if (state.value && (!state.items || state.items.length === 0)) {
+                        context.setValue(state.multiple ? [] : undefined);
+                    }
+                    context.setLoading(false);
+                    const finalState = context.getState();
+                    context.onloaded((finalState.items || []));
+                }
+                catch (err) {
+                    console.error('loadOptions error:', err);
+                    context.onerror({ type: 'loadOptions', details: err });
+                    context.setItems(null);
+                    context.setLoading(false);
+                }
+            };
+            if (isFilterTextChange) {
+                context.debounce(executeLoad, debounceWait);
+            }
+            else {
+                executeLoad();
+            }
+            if (currentFilterText.length > 0 && !listOpen) {
+                context.setListOpen(true);
+            }
+        }
+        else if (loadOptions && disabled) {
+            const state = context.getState();
+            if (state.value || (state.useJustValue && state.justValue)) {
+                context.setValue(state.multiple ? [] : undefined);
+                if (state.useJustValue) {
+                    context.setJustValue(state.multiple ? [] : '');
+                }
+            }
+            context.setItems(null);
+        }
+    }
+    return {
+        handleLoadOptions,
+    };
+}

package/dist/use-value.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ValueContext, SelectItem, JustValue } from './types';
+export declare function useValue(context: ValueContext): {
+    setValue: () => void;
+    updateValueDisplay: (items?: SelectItem[] | string[] | null) => void;
+    computeJustValue: () => JustValue | undefined;
+    checkValueForDuplicates: () => boolean;
+    findItem: (selection?: SelectItem) => SelectItem | undefined;
+    findItemByValue: (id: string | number) => SelectItem | undefined;
+    dispatchSelectedItem: () => void;
+    itemSelected: (selection: SelectItem) => void;
+    setupMulti: () => void;
+    handleMultiItemClear: (i: number) => Promise<void>;
+    convertStringItemsToObjects: (_items: string[]) => SelectItem[];
+};

package/dist/use-value.svelte.js

@@ -0,0 +1,175 @@
+import { hasValueChanged } from './utils';
+export function useValue(context) {
+    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;
+            }));
+        }
+    }
+    function updateValueDisplay(items) {
+        const { value, itemId } = context.getState();
+        if (!items || items.length === 0 || items.some((item) => typeof item !== 'object'))
+            return;
+        if (!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])
+                return;
+            context.setValue(findItem() || value);
+        }
+    }
+    function computeJustValue() {
+        const { multiple, value, itemId, useJustValue, justValue, clearState } = context.getState();
+        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]);
+            }
+        }
+        const wasClearing = clearState;
+        context.setClearState(false);
+        if (useJustValue && !value && !wasClearing) {
+            return justValue;
+        }
+        if (multiple && Array.isArray(value)) {
+            return value.map((item) => item[itemId]);
+        }
+        if (!value || typeof value === 'string' || Array.isArray(value)) {
+            return value;
+        }
+        return value[itemId];
+    }
+    function checkValueForDuplicates() {
+        const { value, itemId } = context.getState();
+        if (!Array.isArray(value) || value.length === 0)
+            return true;
+        const seen = new Set();
+        const uniqueValues = value.filter((val) => {
+            const id = val[itemId];
+            if (seen.has(id))
+                return false;
+            seen.add(id);
+            return true;
+        });
+        const noDuplicates = uniqueValues.length === value.length;
+        if (!noDuplicates)
+            context.setValue(uniqueValues);
+        return noDuplicates;
+    }
+    function dispatchSelectedItem() {
+        const { multiple, value, prevValue, itemId } = context.getState();
+        if (multiple) {
+            if (hasValueChanged(value, prevValue)) {
+                if (checkValueForDuplicates()) {
+                    context.oninput(value || []);
+                }
+            }
+            return;
+        }
+        if (!prevValue || hasValueChanged(value[itemId], prevValue[itemId])) {
+            context.oninput(value);
+        }
+    }
+    function setupMulti() {
+        const { value } = context.getState();
+        if (value) {
+            if (Array.isArray(value)) {
+                context.setValue([...value]);
+            }
+            else {
+                context.setValue([value]);
+            }
+        }
+    }
+    async function handleMultiItemClear(i) {
+        const { value } = context.getState();
+        if (!Array.isArray(value))
+            return;
+        const itemToRemove = value[i];
+        context.setClearState(true);
+        if (value.length === 1) {
+            context.setValue(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}`,
+            };
+        });
+    }
+    function itemSelected(selection) {
+        const { multiple, value, closeListOnChange } = context.getState();
+        if (selection) {
+            context.setFilterText('');
+            const item = Object.assign({}, selection);
+            if (item.groupHeader && !item.selectable)
+                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);
+        }
+    }
+    return {
+        setValue,
+        updateValueDisplay,
+        computeJustValue,
+        checkValueForDuplicates,
+        findItem,
+        findItemByValue,
+        dispatchSelectedItem,
+        itemSelected,
+        setupMulti,
+        handleMultiItemClear,
+        convertStringItemsToObjects,
+    };
+}

package/dist/utils.d.ts

@@ -1,10 +1,10 @@
 import type { SelectItem } from './types';
 export declare function getItemProperty<T>(item: T, key: keyof T | string): T[keyof T] | undefined;
-export declare function areItemsEqual(a: any, b: any, itemId: string): boolean;
+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[];
 export declare function isItemSelectableCheck(item: SelectItem | undefined): boolean;
-export declare function hasValueChanged(newValue: any, oldValue: any): boolean;
+export declare function hasValueChanged(newValue: unknown, oldValue: unknown): boolean;
 export declare function createGroupHeaderItem(groupValue: string, item: SelectItem, labelKey?: string): SelectItem;