windmill-components 1.473.0 → 1.493.2

package/package/components/apps/svelte-select/lib/Select.svelte

@@ -1,583 +1,522 @@
-<script>
-	// @ts-nocheck
-	import { beforeUpdate, createEventDispatcher, onDestroy, onMount, tick } from 'svelte'
-	import { offset, flip, shift } from '@floating-ui/dom'
-	import { createFloatingActions } from 'svelte-floating-ui'
-
-	const dispatch = createEventDispatcher()
-
-	import _filter from './filter'
-	import _getItems from './get-items'
-
-	import ChevronIcon from './ChevronIcon.svelte'
-	import ClearIcon from './ClearIcon.svelte'
-	import LoadingIcon from './LoadingIcon.svelte'
-	import ConditionalPortal from './ConditionalPortal.svelte'
-	import ConditionalPortalGlobal from './ConditionalPortalGlobal.svelte'
-
-	import { extractCustomProperties, truncate } from '../../../../utils'
-	import { twMerge } from 'tailwind-merge'
-
-	export let portal = true
-
-	export let justValue = null // read-only
-
-	export let inAppEditor = false
-
-	let PortalWrapper = inAppEditor ? ConditionalPortal : ConditionalPortalGlobal
-
-	export let filter = _filter
-	export let getItems = _getItems
-
-	export let id = null
-	export let name = null
-	export let container = undefined
-	export let input = undefined
-
-	export let disabled = false
-	export let focused = false
-	export let value = undefined
-	export let filterText = ''
-	export let placeholder = 'Please select'
-	export let items = undefined
-	export let label = 'label'
-	export let itemFilter = (label, filterText, option) =>
-		`${label}`.toLowerCase().includes(filterText.toLowerCase())
-	export let groupBy = undefined
-	export let groupFilter = (groups) => groups
-	export let groupHeaderSelectable = false
-	export let itemId = 'value'
-	export let loadOptions = undefined
-	export let containerStyles = ''
-	export let hasError = false
-	export let filterSelectedItems = true
-	export let required = false
-	export let closeListOnChange = true
-	export let computeOnClick = false
-
-	export let createGroupHeaderItem = (groupValue, item) => {
-		return {
-			value: groupValue,
-			[label]: groupValue
-		}
-	}
-
-	export const getFilteredItems = () => {
-		return filteredItems
-	}
-
-	export let searchable = true
-	export let inputStyles = ''
-	export let clearable = true
-	export let loading = false
-	export let listOpen = false
-
-	let timeout
-	export let debounce = (fn, wait = 1) => {
-		clearTimeout(timeout)
-		timeout = setTimeout(fn, wait)
-	}
-
-	export let debounceWait = 300
-	export let hideEmptyState = false
-	export let inputAttributes = {}
-	export let listAutoWidth = true
-	export let showChevron = false
-	export let listOffset = 5
-	export let hoverItemIndex = 0
-	export let floatingConfig = {}
-
-	export { containerClasses as class }
-
-	let containerClasses = ''
-	let activeValue
-	let prev_value
-	let prev_filterText
-	let hasClicked = false
-
-	function setValue() {
-		if (typeof value === 'string') {
-			let item = (items || []).find((item) => item[itemId] === value)
-			value = item || {
-				[itemId]: value,
-				label: value
-			}
-		}
-	}
-
-	let _inputAttributes
-	function assignInputAttributes() {
-		_inputAttributes = Object.assign(
-			{
-				autocapitalize: 'none',
-				autocomplete: 'off',
-				autocorrect: 'off',
-				spellcheck: false,
-				tabindex: 0,
-				type: 'text',
-				'aria-autocomplete': 'list'
-			},
-			inputAttributes
-		)
-
-		if (id) {
-			_inputAttributes['id'] = id
-		}
-
-		if (!searchable) {
-			_inputAttributes['readonly'] = true
-		}
-	}
-
-	function convertStringItemsToObjects(_items) {
-		return _items.map((item, index) => {
-			return {
-				index,
-				value: item,
-				label: `${item}`
-			}
-		})
-	}
-
-	function filterGroupedItems(_items) {
-		const groupValues = []
-		const groups = {}
-
-		_items.forEach((item) => {
-			const groupValue = groupBy(item)
-
-			if (!groupValues.includes(groupValue)) {
-				groupValues.push(groupValue)
-				groups[groupValue] = []
-
-				if (groupValue) {
-					groups[groupValue].push(
-						Object.assign(createGroupHeaderItem(groupValue, item), {
-							id: groupValue,
-							groupHeader: true,
-							selectable: groupHeaderSelectable
-						})
-					)
-				}
-			}
-
-			groups[groupValue].push(Object.assign({ groupItem: !!groupValue }, item))
-		})
-
-		const sortedGroupedItems = []
-
-		groupFilter(groupValues).forEach((groupValue) => {
-			if (groups[groupValue]) sortedGroupedItems.push(...groups[groupValue])
-		})
-
-		return sortedGroupedItems
-	}
-
-	function dispatchSelectedItem() {
-		if (!prev_value || JSON.stringify(value[itemId]) !== JSON.stringify(prev_value[itemId])) {
-			dispatch('input', value)
-		}
-	}
-
-	$: if ((items, value)) setValue()
-	$: if (inputAttributes || !searchable) assignInputAttributes()
-	$: if (value) dispatchSelectedItem()
-	$: if (!focused && input) closeList()
-	$: if (filterText !== prev_filterText) setupFilterText()
-	$: if (listOpen && value && filteredItems) setValueIndexAsHoverIndex()
-	$: dispatchHover(hoverItemIndex)
-
-	function setValueIndexAsHoverIndex() {
-		const valueIndex = filteredItems.findIndex((i) => {
-			return i[itemId] === value[itemId]
-		})
-
-		checkHoverSelectable(valueIndex, true)
-	}
-
-	function dispatchHover(i) {
-		dispatch('hoverItem', i)
-	}
-
-	function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
-		hoverItemIndex = startingIndex < 0 ? 0 : startingIndex
-		if (
-			!ignoreGroup &&
-			groupBy &&
-			filteredItems[hoverItemIndex] &&
-			!filteredItems[hoverItemIndex].selectable
-		) {
-			setHoverIndex(1)
-		}
-	}
-
-	function setupFilterText() {
-		if (computeOnClick && !hasClicked) return
-		if (!loadOptions && filterText.length === 0) return
-
-		if (loadOptions) {
-			debounce(async function () {
-				loading = true
-				let res = await getItems({
-					dispatch,
-					loadOptions,
-					convertStringItemsToObjects,
-					filterText
-				})
-
-				if (res) {
-					loading = res.loading
-					listOpen = listOpen ? res.listOpen : filterText.length > 0 ? true : false
-					focused = listOpen && res.focused
-					items = groupBy ? filterGroupedItems(res.filteredItems) : res.filteredItems
-				} else {
-					loading = false
-					focused = true
-					listOpen = true
-				}
-			}, debounceWait)
-		} else {
-			listOpen = true
-		}
-	}
-
-	$: hasValue = value
-	$: hideSelectedItem = hasValue && filterText.length > 0
-	$: showClear = hasValue && clearable && !disabled && !loading
-	$: placeholderText = value ? '' : placeholder
-	$: ariaSelection = value ? handleAriaSelection() : ''
-	$: ariaContext = handleAriaContent({ filteredItems, hoverItemIndex, focused, listOpen })
-	$: updateValueDisplay(items)
-	$: justValue = computeJustValue(value, itemId)
-	$: if (prev_value && !value) dispatch('input', value)
-	$: filteredItems = filter({
-		loadOptions,
-		filterText,
-		items,
-		value,
-		itemId,
-		groupBy,
-		label,
-		filterSelectedItems,
-		itemFilter,
-		convertStringItemsToObjects,
-		filterGroupedItems
-	})
-	$: if (listOpen && filteredItems && !value) checkHoverSelectable()
-	$: handleFilterEvent(filteredItems)
-
-	$: if (container && floatingConfig) floatingUpdate(Object.assign(_floatingConfig, floatingConfig))
-	$: listDom = !!list
-	$: listMounted(list, listOpen)
-	$: if (listOpen && container && list) setListWidth()
-	$: scrollToHoverItem = hoverItemIndex
-	$: if (input && listOpen && !focused) handleFocus()
-	$: if (filterText) hoverItemIndex = 0
-
-	function handleFilterEvent(items) {
-		if (listOpen) dispatch('filter', items)
-	}
-
-	beforeUpdate(async () => {
-		prev_value = value
-		prev_filterText = filterText
-	})
-
-	function computeJustValue() {
-		return value ? value[itemId] : value
-	}
-
-	function findItem(selection) {
-		let matchTo = selection ? selection[itemId] : value[itemId]
-		return items.find((item) => item[itemId] === matchTo)
-	}
-
-	function updateValueDisplay(items) {
-		if (!items || items.length === 0 || items.some((item) => typeof item !== 'object')) return
-		if (!value || !value[itemId]) return
-
-		if (Array.isArray(value)) {
-			value = value.map((selection) => findItem(selection) || selection)
-		} else {
-			value = findItem() || value
-		}
-	}
-
-	function handleKeyDown(e) {
-		if (!focused) return
-		e.stopPropagation()
-		switch (e.key) {
-			case 'Escape':
-				e.preventDefault()
-				closeList()
-				break
-			case 'Enter':
-				e.preventDefault()
-
-				if (listOpen) {
-					if (filteredItems.length === 0) break
-					const hoverItem = filteredItems[hoverItemIndex]
-
-					if (value && value[itemId] === hoverItem[itemId]) {
-						closeList()
-						break
-					} else {
-						handleSelect(filteredItems[hoverItemIndex])
-					}
-				}
-
-				break
-			case 'ArrowDown':
-				e.preventDefault()
-
-				if (listOpen) {
-					setHoverIndex(1)
-				} else {
-					listOpen = true
-					activeValue = undefined
-				}
-
-				break
-			case 'ArrowUp':
-				e.preventDefault()
-
-				if (listOpen) {
-					setHoverIndex(-1)
-				} else {
-					listOpen = true
-					activeValue = undefined
-				}
-
-				break
-			case 'Tab':
-				if (listOpen && focused) {
-					if (
-						filteredItems.length === 0 ||
-						(value && value[itemId] === filteredItems[hoverItemIndex][itemId])
-					)
-						return closeList()
-
-					e.preventDefault()
-					handleSelect(filteredItems[hoverItemIndex])
-					closeList()
-				}
-
-				break
-			case 'Backspace':
-				if (filterText.length > 0) return
-
-				break
-			case 'ArrowLeft':
-				if (!value || filterText.length > 0) return
-				if (activeValue === undefined) {
-					activeValue = value.length - 1
-				} else if (value.length > activeValue && activeValue !== 0) {
-					activeValue -= 1
-				}
-				break
-			case 'ArrowRight':
-				if (!value || filterText.length > 0 || activeValue === undefined) return
-				if (activeValue === value.length - 1) {
-					activeValue = undefined
-				} else if (activeValue < value.length - 1) {
-					activeValue += 1
-				}
-				break
-		}
-	}
-
-	function handleFocus(e) {
-		if (focused && input === document?.activeElement) return
-		if (e) dispatch('focus', e)
-		input.focus()
-		focused = true
-	}
-
-	async function handleBlur(e) {
-		if (listOpen || focused) {
-			dispatch('blur', e)
-			closeList()
-			focused = false
-			activeValue = undefined
-			input.blur()
-		}
-	}
-
-	function handleClick() {
-		if (disabled) return
-		if (computeOnClick && !hasClicked) {
-			hasClicked = true
-			setupFilterText()
-		}
-		listOpen = !listOpen
-	}
-
-	export function handleClear() {
-		dispatch('clear', value)
-		value = undefined
-		closeList()
-		handleFocus()
-	}
-
-	onMount(() => {
-		if (listOpen) focused = true
-		if (focused && input) input.focus()
-	})
-
-	function itemSelected(selection) {
-		if (selection) {
-			filterText = ''
-			const item = Object.assign({}, selection)
-
-			if (item.groupHeader && !item.selectable) return
-			value = value = item
-
-			setTimeout(() => {
-				if (closeListOnChange) closeList()
-				activeValue = undefined
-				dispatch('change', value)
-				dispatch('select', selection)
-			})
-		}
-	}
-
-	function closeList() {
-		filterText = ''
-		listOpen = false
-	}
-
-	export let ariaValues = (values) => {
-		return `Option ${values}, selected.`
-	}
-
-	export let ariaListOpen = (label, count) => {
-		return `You are currently focused on option ${label}. There are ${count} results available.`
-	}
-
-	export let ariaFocused = () => {
-		return `Select is focused, type to refine list, press down to open the menu.`
-	}
-
-	function handleAriaSelection() {
-		let selected = undefined
-		selected = value[label]
-
-		return ariaValues(selected)
-	}
-
-	function handleAriaContent() {
-		if (!filteredItems || filteredItems.length === 0) return ''
-		let _item = filteredItems[hoverItemIndex]
-		if (listOpen && _item) {
-			let count = filteredItems ? filteredItems.length : 0
-			return ariaListOpen(_item[label], count)
-		} else {
-			return ariaFocused()
-		}
-	}
-
-	let list = null
-
-	function handleClickOutside(event) {
-		if (
-			!listOpen &&
-			!focused &&
-			container &&
-			!container.contains(event.target) &&
-			!list?.contains(event.target)
-		) {
-			handleBlur()
-		}
-	}
-
-	onDestroy(() => {
-		list?.remove()
-	})
-
-	function handleSelect(item) {
-		if (!item || item.selectable === false) return
-		itemSelected(item)
-	}
-
-	function handleHover(i) {
-		hoverItemIndex = i
-	}
-
-	function handleItemClick(args) {
-		const { item, i } = args
-		if (item?.selectable === false) return
-		if (value && value[itemId] === item[itemId]) return closeList()
-		if (isItemSelectable(item)) {
-			hoverItemIndex = i
-			handleSelect(item)
-		}
-	}
-
-	function setHoverIndex(increment) {
-		let selectableFilteredItems = filteredItems.filter(
-			(item) => !Object.hasOwn(item, 'selectable') || item.selectable === true
-		)
-
-		if (selectableFilteredItems.length === 0) {
-			return (hoverItemIndex = 0)
-		}
-
-		if (increment > 0 && hoverItemIndex === filteredItems.length - 1) {
-			hoverItemIndex = 0
-		} else if (increment < 0 && hoverItemIndex === 0) {
-			hoverItemIndex = filteredItems.length - 1
-		} else {
-			hoverItemIndex = hoverItemIndex + increment
-		}
-
-		const hover = filteredItems[hoverItemIndex]
-
-		if (hover && hover.selectable === false) {
-			if (increment === 1 || increment === -1) setHoverIndex(increment)
-			return
-		}
-	}
-
-	function isItemActive(item, value, itemId) {
-		return value && value[itemId] === item[itemId]
-	}
-
-	function isItemFirst(itemIndex) {
-		return itemIndex === 0
-	}
-
-	function isItemSelectable(item) {
-		return (
-			(item.groupHeader && item.selectable) || item.selectable || !item.hasOwnProperty('selectable')
-		)
-	}
-
-	function setListWidth() {
-		const { width } = container.getBoundingClientRect()
-		list.style.width =
-			listAutoWidth && list.clientWidth && list.clientWidth < width ? width + 'px' : 'auto'
-	}
-
-	let _floatingConfig = {
-		strategy: 'absolute',
-		placement: 'bottom-start',
-		middleware: [offset(listOffset), flip(), shift()],
-		autoUpdate: false
-	}
-
-	const [floatingRef, floatingContent, floatingUpdate] = createFloatingActions(_floatingConfig)
-
-	$: if (container && floatingConfig?.autoUpdate === undefined) {
-		_floatingConfig.autoUpdate = true
-	}
-
-	let prefloat = true
-	function listMounted(list, listOpen) {
-		if (!list || !listOpen) return (prefloat = true)
-		setTimeout(() => {
-			prefloat = false
-		}, 0)
-	}
+<script lang="ts">// @ts-nocheck
+import { beforeUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { offset, flip, shift } from '@floating-ui/dom';
+import { createFloatingActions } from 'svelte-floating-ui';
+// This component caused trouble with svelte 5 so better be extra safe
+const dispatch = createDispatcherIfMounted(createEventDispatcher());
+import _filter from './filter';
+import _getItems from './get-items';
+import ChevronIcon from './ChevronIcon.svelte';
+import ClearIcon from './ClearIcon.svelte';
+import LoadingIcon from './LoadingIcon.svelte';
+import ConditionalPortal from './ConditionalPortal.svelte';
+import ConditionalPortalGlobal from './ConditionalPortalGlobal.svelte';
+import { extractCustomProperties, truncate } from '../../../../utils';
+import { twMerge } from 'tailwind-merge';
+import { createDispatcherIfMounted } from '../../../../createDispatcherIfMounted';
+export let portal = true;
+export let justValue = null; // read-only
+export let inAppEditor = false;
+let PortalWrapper = inAppEditor ? ConditionalPortal : ConditionalPortalGlobal;
+export let filter = _filter;
+export let getItems = _getItems;
+export let id = null;
+export let name = null;
+export let container = undefined;
+export let input = undefined;
+export let disabled = false;
+export let focused = false;
+export let value = undefined;
+export let filterText = '';
+export let placeholder = 'Please select';
+export let items = undefined;
+export let label = 'label';
+export let itemFilter = (label, filterText, option) => `${label}`.toLowerCase().includes(filterText.toLowerCase());
+export let groupBy = undefined;
+export let groupFilter = (groups) => groups;
+export let groupHeaderSelectable = false;
+export let itemId = 'value';
+export let loadOptions = undefined;
+export let containerStyles = '';
+export let hasError = false;
+export let filterSelectedItems = true;
+export let required = false;
+export let closeListOnChange = true;
+export let computeOnClick = false;
+export let createGroupHeaderItem = (groupValue, item) => {
+    return {
+        value: groupValue,
+        [label]: groupValue
+    };
+};
+export const getFilteredItems = () => {
+    return filteredItems;
+};
+export let searchable = true;
+export let inputStyles = '';
+export let clearable = true;
+export let loading = false;
+export let listOpen = false;
+let timeout;
+export let debounce = (fn, wait = 1) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(fn, wait);
+};
+export let debounceWait = 300;
+export let hideEmptyState = false;
+export let inputAttributes = {};
+export let listAutoWidth = true;
+export let showChevron = false;
+export let listOffset = 5;
+export let hoverItemIndex = 0;
+export let floatingConfig = {};
+export { containerClasses as class };
+let containerClasses = '';
+let activeValue;
+let prev_value;
+let prev_filterText;
+let hasClicked = false;
+function setValue() {
+    if (typeof value === 'string') {
+        let item = (items || []).find((item) => item[itemId] === value);
+        value = item || {
+            [itemId]: value,
+            label: value
+        };
+    }
+}
+let _inputAttributes;
+function assignInputAttributes() {
+    _inputAttributes = Object.assign({
+        autocapitalize: 'none',
+        autocomplete: 'off',
+        autocorrect: 'off',
+        spellcheck: false,
+        tabindex: 0,
+        type: 'text',
+        'aria-autocomplete': 'list'
+    }, inputAttributes);
+    if (id) {
+        _inputAttributes['id'] = id;
+    }
+    if (!searchable) {
+        _inputAttributes['readonly'] = true;
+    }
+}
+function convertStringItemsToObjects(_items) {
+    return _items.map((item, index) => {
+        return {
+            index,
+            value: item,
+            label: `${item}`
+        };
+    });
+}
+function filterGroupedItems(_items) {
+    const groupValues = [];
+    const groups = {};
+    _items.forEach((item) => {
+        const groupValue = groupBy(item);
+        if (!groupValues.includes(groupValue)) {
+            groupValues.push(groupValue);
+            groups[groupValue] = [];
+            if (groupValue) {
+                groups[groupValue].push(Object.assign(createGroupHeaderItem(groupValue, item), {
+                    id: groupValue,
+                    groupHeader: true,
+                    selectable: groupHeaderSelectable
+                }));
+            }
+        }
+        groups[groupValue].push(Object.assign({ groupItem: !!groupValue }, item));
+    });
+    const sortedGroupedItems = [];
+    groupFilter(groupValues).forEach((groupValue) => {
+        if (groups[groupValue])
+            sortedGroupedItems.push(...groups[groupValue]);
+    });
+    return sortedGroupedItems;
+}
+function dispatchSelectedItem() {
+    if (!prev_value || JSON.stringify(value[itemId]) !== JSON.stringify(prev_value[itemId])) {
+        dispatch('input', value);
+    }
+}
+$: if ((items, value))
+    setValue();
+$: if (inputAttributes || !searchable)
+    assignInputAttributes();
+$: if (value)
+    dispatchSelectedItem();
+$: if (!focused && input)
+    closeList();
+$: if (filterText !== prev_filterText)
+    setupFilterText();
+$: if (listOpen && value && filteredItems)
+    setValueIndexAsHoverIndex();
+$: dispatchHover(hoverItemIndex);
+function setValueIndexAsHoverIndex() {
+    const valueIndex = filteredItems.findIndex((i) => {
+        return i[itemId] === value[itemId];
+    });
+    checkHoverSelectable(valueIndex, true);
+}
+function dispatchHover(i) {
+    dispatch('hoverItem', i);
+}
+function checkHoverSelectable(startingIndex = 0, ignoreGroup) {
+    hoverItemIndex = startingIndex < 0 ? 0 : startingIndex;
+    if (!ignoreGroup &&
+        groupBy &&
+        filteredItems[hoverItemIndex] &&
+        !filteredItems[hoverItemIndex].selectable) {
+        setHoverIndex(1);
+    }
+}
+function setupFilterText() {
+    if (computeOnClick && !hasClicked)
+        return;
+    if (!loadOptions && filterText.length === 0)
+        return;
+    if (loadOptions) {
+        debounce(async function () {
+            loading = true;
+            let res = await getItems({
+                dispatch,
+                loadOptions,
+                convertStringItemsToObjects,
+                filterText
+            });
+            if (res) {
+                loading = res.loading;
+                listOpen = listOpen ? res.listOpen : filterText.length > 0 ? true : false;
+                focused = listOpen && res.focused;
+                items = groupBy ? filterGroupedItems(res.filteredItems) : res.filteredItems;
+            }
+            else {
+                loading = false;
+                focused = true;
+                listOpen = true;
+            }
+        }, debounceWait);
+    }
+    else {
+        listOpen = true;
+    }
+}
+$: hasValue = value;
+$: hideSelectedItem = hasValue && filterText.length > 0;
+$: showClear = hasValue && clearable && !disabled && !loading;
+$: placeholderText = value ? '' : placeholder;
+$: ariaSelection = value ? handleAriaSelection() : '';
+$: ariaContext = handleAriaContent({ filteredItems, hoverItemIndex, focused, listOpen });
+$: updateValueDisplay(items);
+$: justValue = computeJustValue(value, itemId);
+$: if (prev_value && !value)
+    dispatch('input', value);
+$: filteredItems = filter({
+    loadOptions,
+    filterText,
+    items,
+    value,
+    itemId,
+    groupBy,
+    label,
+    filterSelectedItems,
+    itemFilter,
+    convertStringItemsToObjects,
+    filterGroupedItems
+});
+$: if (listOpen && filteredItems && !value)
+    checkHoverSelectable();
+$: handleFilterEvent(filteredItems);
+$: if (container && floatingConfig)
+    floatingUpdate(Object.assign(_floatingConfig, floatingConfig));
+$: listDom = !!list;
+$: listMounted(list, listOpen);
+$: if (listOpen && container && list)
+    setListWidth();
+$: scrollToHoverItem = hoverItemIndex;
+$: if (input && listOpen && !focused)
+    handleFocus();
+$: if (filterText)
+    hoverItemIndex = 0;
+function handleFilterEvent(items) {
+    if (listOpen)
+        dispatch('filter', items);
+}
+beforeUpdate(async () => {
+    prev_value = value;
+    prev_filterText = filterText;
+});
+function computeJustValue() {
+    return value ? value[itemId] : value;
+}
+function findItem(selection) {
+    let matchTo = selection ? selection[itemId] : value[itemId];
+    return items.find((item) => item[itemId] === matchTo);
+}
+function updateValueDisplay(items) {
+    if (!items || items.length === 0 || items.some((item) => typeof item !== 'object'))
+        return;
+    if (!value || !value[itemId])
+        return;
+    if (Array.isArray(value)) {
+        value = value.map((selection) => findItem(selection) || selection);
+    }
+    else {
+        value = findItem() || value;
+    }
+}
+function handleKeyDown(e) {
+    if (!focused)
+        return;
+    e.stopPropagation();
+    switch (e.key) {
+        case 'Escape':
+            e.preventDefault();
+            closeList();
+            break;
+        case 'Enter':
+            e.preventDefault();
+            if (listOpen) {
+                if (filteredItems.length === 0)
+                    break;
+                const hoverItem = filteredItems[hoverItemIndex];
+                if (value && value[itemId] === hoverItem[itemId]) {
+                    closeList();
+                    break;
+                }
+                else {
+                    handleSelect(filteredItems[hoverItemIndex]);
+                }
+            }
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            if (listOpen) {
+                setHoverIndex(1);
+            }
+            else {
+                listOpen = true;
+                activeValue = undefined;
+            }
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            if (listOpen) {
+                setHoverIndex(-1);
+            }
+            else {
+                listOpen = true;
+                activeValue = undefined;
+            }
+            break;
+        case 'Tab':
+            if (listOpen && focused) {
+                if (filteredItems.length === 0 ||
+                    (value && value[itemId] === filteredItems[hoverItemIndex][itemId]))
+                    return closeList();
+                e.preventDefault();
+                handleSelect(filteredItems[hoverItemIndex]);
+                closeList();
+            }
+            break;
+        case 'Backspace':
+            if (filterText.length > 0)
+                return;
+            break;
+        case 'ArrowLeft':
+            if (!value || filterText.length > 0)
+                return;
+            if (activeValue === undefined) {
+                activeValue = value.length - 1;
+            }
+            else if (value.length > activeValue && activeValue !== 0) {
+                activeValue -= 1;
+            }
+            break;
+        case 'ArrowRight':
+            if (!value || filterText.length > 0 || activeValue === undefined)
+                return;
+            if (activeValue === value.length - 1) {
+                activeValue = undefined;
+            }
+            else if (activeValue < value.length - 1) {
+                activeValue += 1;
+            }
+            break;
+    }
+}
+function handleFocus(e) {
+    if (focused && input === document?.activeElement)
+        return;
+    if (e)
+        dispatch('focus', e);
+    input.focus();
+    focused = true;
+}
+async function handleBlur(e) {
+    if (listOpen || focused) {
+        dispatch('blur', e);
+        closeList();
+        focused = false;
+        activeValue = undefined;
+        input.blur();
+    }
+}
+function handleClick() {
+    if (disabled)
+        return;
+    if (computeOnClick && !hasClicked) {
+        hasClicked = true;
+        setupFilterText();
+    }
+    listOpen = !listOpen;
+}
+export function handleClear() {
+    dispatch('clear', value);
+    value = undefined;
+    closeList();
+    handleFocus();
+}
+onMount(() => {
+    if (listOpen)
+        focused = true;
+    if (focused && input)
+        input.focus();
+});
+function itemSelected(selection) {
+    if (selection) {
+        filterText = '';
+        const item = Object.assign({}, selection);
+        if (item.groupHeader && !item.selectable)
+            return;
+        value = value = item;
+        setTimeout(() => {
+            if (closeListOnChange)
+                closeList();
+            activeValue = undefined;
+            dispatch('change', value);
+            dispatch('select', selection);
+        });
+    }
+}
+function closeList() {
+    filterText = '';
+    listOpen = false;
+}
+export let ariaValues = (values) => {
+    return `Option ${values}, selected.`;
+};
+export let ariaListOpen = (label, count) => {
+    return `You are currently focused on option ${label}. There are ${count} results available.`;
+};
+export let ariaFocused = () => {
+    return `Select is focused, type to refine list, press down to open the menu.`;
+};
+function handleAriaSelection() {
+    let selected = undefined;
+    selected = value[label];
+    return ariaValues(selected);
+}
+function handleAriaContent() {
+    if (!filteredItems || filteredItems.length === 0)
+        return '';
+    let _item = filteredItems[hoverItemIndex];
+    if (listOpen && _item) {
+        let count = filteredItems ? filteredItems.length : 0;
+        return ariaListOpen(_item[label], count);
+    }
+    else {
+        return ariaFocused();
+    }
+}
+let list = null;
+function handleClickOutside(event) {
+    if (!listOpen &&
+        !focused &&
+        container &&
+        !container.contains(event.target) &&
+        !list?.contains(event.target)) {
+        handleBlur();
+    }
+}
+onDestroy(() => {
+    list?.remove();
+});
+function handleSelect(item) {
+    if (!item || item.selectable === false)
+        return;
+    itemSelected(item);
+}
+function handleHover(i) {
+    hoverItemIndex = i;
+}
+function handleItemClick(args) {
+    const { item, i } = args;
+    if (item?.selectable === false)
+        return;
+    if (value && value[itemId] === item[itemId])
+        return closeList();
+    if (isItemSelectable(item)) {
+        hoverItemIndex = i;
+        handleSelect(item);
+    }
+}
+function setHoverIndex(increment) {
+    let selectableFilteredItems = filteredItems.filter((item) => !Object.hasOwn(item, 'selectable') || item.selectable === true);
+    if (selectableFilteredItems.length === 0) {
+        return (hoverItemIndex = 0);
+    }
+    if (increment > 0 && hoverItemIndex === filteredItems.length - 1) {
+        hoverItemIndex = 0;
+    }
+    else if (increment < 0 && hoverItemIndex === 0) {
+        hoverItemIndex = filteredItems.length - 1;
+    }
+    else {
+        hoverItemIndex = hoverItemIndex + increment;
+    }
+    const hover = filteredItems[hoverItemIndex];
+    if (hover && hover.selectable === false) {
+        if (increment === 1 || increment === -1)
+            setHoverIndex(increment);
+        return;
+    }
+}
+function isItemActive(item, value, itemId) {
+    return value && value[itemId] === item[itemId];
+}
+function isItemFirst(itemIndex) {
+    return itemIndex === 0;
+}
+function isItemSelectable(item) {
+    return ((item.groupHeader && item.selectable) || item.selectable || !item.hasOwnProperty('selectable'));
+}
+function setListWidth() {
+    const { width } = container.getBoundingClientRect();
+    list.style.width =
+        listAutoWidth && list.clientWidth && list.clientWidth < width ? width + 'px' : 'auto';
+}
+let _floatingConfig = {
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    middleware: [offset(listOffset), flip(), shift()],
+    autoUpdate: false
+};
+const [floatingRef, floatingContent, floatingUpdate] = createFloatingActions(_floatingConfig);
+$: if (container && floatingConfig?.autoUpdate === undefined) {
+    _floatingConfig.autoUpdate = true;
+}
+let prefloat = true;
+function listMounted(list, listOpen) {
+    if (!list || !listOpen)
+        return (prefloat = true);
+    setTimeout(() => {
+        prefloat = false;
+    }, 0);
+}
 </script>
 
 <svelte:window on:click={handleClickOutside} on:keydown={handleKeyDown} />
@@ -711,76 +650,13 @@
 
 	{#if required && (!value || value.length === 0)}
 		<slot name="required" {value}>
-			<select class="required" required tabindex="-1" aria-hidden="true" />
+			<select class="required" required tabindex="-1" aria-hidden="true"></select>
 		</slot>
 	{/if}
 </div>
 
 <style>
 	.svelte-select {
-		/* deprecating camelCase custom props in favour of kebab-case for v5 */
-		--borderRadius: var(--border-radius);
-		--clearSelectColor: var(--clear-select-color);
-		--clearSelectWidth: var(--clear-select-width);
-		--disabledBackground: var(--disabled-background);
-		--disabledBorderColor: var(--disabled-border-color);
-		--disabledColor: var(--disabled-color);
-		--disabledPlaceholderColor: var(--disabled-placeholder-color);
-		--disabledPlaceholderOpacity: var(--disabled-placeholder-opacity);
-		--errorBackground: var(--error-background);
-		--errorBorder: var(--error-border);
-		--groupItemPaddingLeft: var(--group-item-padding-left);
-		--groupTitleColor: var(--group-title-color);
-		--groupTitleFontSize: var(--group-title-font-size);
-		--groupTitleFontWeight: var(--group-title-font-weight);
-		--groupTitlePadding: var(--group-title-padding);
-		--groupTitleTextTransform: var(--group-title-text-transform);
-		--indicatorColor: var(--chevron-color);
-		--indicatorHeight: var(--chevron-height);
-		--indicatorWidth: var(--chevron-width);
-		--inputColor: var(--input-color);
-		--inputLeft: var(--input-left);
-		--inputLetterSpacing: var(--input-letter-spacing);
-		--inputMargin: var(--input-margin);
-		--inputPadding: var(--input-padding);
-		--itemActiveBackground: var(--item-active-background);
-		--itemColor: var(--item-color);
-		--itemFirstBorderRadius: var(--item-first-border-radius);
-		--itemHoverBG: var(--item-hover-bg);
-		--itemHoverColor: var(--item-hover-color);
-		--itemIsActiveBG: var(--item-is-active-bg);
-		--itemIsActiveColor: var(--item-is-active-color);
-		--itemIsNotSelectableColor: var(--item-is-not-selectable-color);
-		--itemPadding: var(--item-padding);
-		--listBackground: var(--list-background);
-		--listBorder: var(--list-border);
-		--listBorderRadius: var(--list-border-radius);
-		--listEmptyColor: var(--list-empty-color);
-		--listEmptyPadding: var(--list-empty-padding);
-		--listEmptyTextAlign: var(--list-empty-text-align);
-		--listMaxHeight: var(--list-max-height);
-		--listPosition: var(--list-position);
-		--listShadow: var(--list-shadow);
-		--listZIndex: var(--list-z-index);
-		--multiItemBG: var(--multi-item-bg);
-		--multiItemBorderRadius: var(--multi-item-border-radius);
-		--multiItemDisabledHoverBg: var(--multi-item-disabled-hover-bg);
-		--multiItemDisabledHoverColor: var(--multi-item-disabled-hover-color);
-		--multiItemHeight: var(--multi-item-height);
-		--multiItemMargin: var(--multi-item-margin);
-		--multiItemPadding: var(--multi-item-padding);
-		--multiSelectInputMargin: var(--multi-select-input-margin);
-		--multiSelectInputPadding: var(--multi-select-input-padding);
-		--multiSelectPadding: var(--multi-select-padding);
-		--placeholderColor: var(--placeholder-color);
-		--placeholderOpacity: var(--placeholder-opacity);
-		--selectedItemPadding: var(--selected-item-padding);
-		--spinnerColor: var(--spinner-color);
-		--spinnerHeight: var(--spinner-height);
-		--spinnerWidth: var(--spinner-width);
-
-		--internal-padding: 0 0 0 16px;
-
 		border: var(--border, 1px solid #d8dbdf);
 		border-radius: var(--border-radius, 6px);
 		min-height: var(--height, 42px);
@@ -835,9 +711,9 @@
 		cursor: default;
 		border: none;
 		color: var(--input-color, var(--item-color));
-		padding: var(--input-padding, 0);
+		padding: var(--input-padding, 0) !important;
 		letter-spacing: var(--input-letter-spacing, inherit);
-		margin: var(--input-margin, 0);
+		margin: var(--input-margin, 0) !important;
 		min-width: 10px;
 		top: 0;
 		right: 0;
@@ -845,6 +721,7 @@
 		left: 0;
 		background: transparent !important;
 		font-size: var(--font-size, 16px);
+		border: 0 !important;
 	}
 
 	:not(.multi) > .value-container > input {