svelte-5-select 1.0.0-beta.0

package/dist/Select.svelte.d.ts

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

package/dist/aria-handlers.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SelectItem } from './types';
+interface AriaHandlersConfig {
+    ariaValues: (values: string) => string;
+    ariaListOpen: (label: string, count: number) => string;
+    ariaFocused: () => string;
+}
+interface AriaHandlersContext {
+    value: string | SelectItem | SelectItem[] | null | undefined;
+    filteredItems: SelectItem[];
+    hoverItemIndex: number;
+    listOpen: boolean;
+    multiple: boolean;
+    label: string;
+}
+export declare function useAriaHandlers(config: AriaHandlersConfig): {
+    handleAriaSelection: (context: AriaHandlersContext) => string;
+    handleAriaContent: (context: AriaHandlersContext) => string;
+};
+export {};

package/dist/aria-handlers.svelte.js

@@ -0,0 +1,36 @@
+export function useAriaHandlers(config) {
+    const { ariaValues, ariaListOpen, ariaFocused } = config;
+    function handleAriaSelection(context) {
+        const { value, multiple, label } = context;
+        if (!value)
+            return '';
+        let selected = undefined;
+        if (typeof value === 'string') {
+            selected = value;
+        }
+        else if (multiple && Array.isArray(value) && value.length > 0) {
+            selected = value.map((v) => v[label]).join(', ');
+        }
+        else if (!multiple && value) {
+            selected = value[label];
+        }
+        return ariaValues(selected || '');
+    }
+    function handleAriaContent(context) {
+        const { filteredItems, hoverItemIndex, listOpen, label } = context;
+        if (!filteredItems || filteredItems.length === 0)
+            return '';
+        const _item = filteredItems[hoverItemIndex];
+        if (listOpen && _item) {
+            const count = filteredItems.length;
+            return ariaListOpen(_item[label], count);
+        }
+        else {
+            return ariaFocused();
+        }
+    }
+    return {
+        handleAriaSelection,
+        handleAriaContent,
+    };
+}

package/dist/filter.d.ts

@@ -0,0 +1,2 @@
+import type { FilterConfig, SelectItem } from './types';
+export default function filter({ loadOptions, filterText, items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, filterGroupedItems, label, }: FilterConfig): SelectItem[];

package/dist/filter.js

@@ -0,0 +1,30 @@
+import { areItemsEqual, isStringArray } from './utils';
+export default function filter({ loadOptions, filterText = '', items, multiple, value, itemId, groupBy, filterSelectedItems, itemFilter, convertStringItemsToObjects, filterGroupedItems, label, }) {
+    if (items && loadOptions) {
+        return items;
+    }
+    // If no items, return empty array
+    if (!items) {
+        return [];
+    }
+    let typedItems = items;
+    const aStringArray = isStringArray(typedItems);
+    if (aStringArray) {
+        typedItems = convertStringItemsToObjects(typedItems);
+    }
+    // Filter items based on filter text and selection
+    let filterResults = typedItems.filter((item) => {
+        let matchesFilter = itemFilter(item[label], filterText, item);
+        if (matchesFilter && multiple && Array.isArray(value) && value.length > 0) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? areItemsEqual(x, item, itemId) : false;
+            });
+        }
+        return matchesFilter;
+    });
+    // Apply grouping if groupBy function is provided
+    if (groupBy) {
+        filterResults = filterGroupedItems(filterResults);
+    }
+    return filterResults;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Select } from './Select.svelte';
+export { default as ChevronIcon } from './ChevronIcon.svelte';
+export { default as ClearIcon } from './ClearIcon.svelte';
+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';

package/dist/index.js

@@ -0,0 +1,10 @@
+// Main component exports
+export { default as Select } from './Select.svelte';
+// Icon components
+export { default as ChevronIcon } from './ChevronIcon.svelte';
+export { default as ClearIcon } from './ClearIcon.svelte';
+export { default as LoadingIcon } from './LoadingIcon.svelte';
+// Utility functions
+export { default as filter } from './filter';
+export { useKeyboardNavigation } from './keyboard-navigation.svelte';
+export { isStringArray, isCancelled, areItemsEqual } from './utils';

package/dist/keyboard-navigation.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { KeyboardNavigationContext } from './types';
+export declare function useKeyboardNavigation(context: KeyboardNavigationContext): {
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleEscapeKey: (e: KeyboardEvent) => void;
+    handleEnterKey: (e: KeyboardEvent) => void;
+    handleArrowDownKey: (e: KeyboardEvent) => void;
+    handleArrowUpKey: (e: KeyboardEvent) => void;
+    handleTabKey: (e: KeyboardEvent) => void;
+    handleBackspaceKey: (e: KeyboardEvent) => void;
+    handleArrowLeftKey: (e: KeyboardEvent) => void;
+    handleArrowRightKey: (e: KeyboardEvent) => void;
+};

package/dist/keyboard-navigation.svelte.js

@@ -0,0 +1,124 @@
+import { areItemsEqual } from './utils';
+export function useKeyboardNavigation(context) {
+    function handleKeyDown(e) {
+        e.stopPropagation();
+        const { focused } = context.getState();
+        if (!focused)
+            return;
+        const handlers = {
+            'Escape': handleEscapeKey,
+            'Enter': handleEnterKey,
+            'ArrowDown': handleArrowDownKey,
+            'ArrowUp': handleArrowUpKey,
+            'Tab': handleTabKey,
+            'Backspace': handleBackspaceKey,
+            'ArrowLeft': handleArrowLeftKey,
+            'ArrowRight': handleArrowRightKey,
+        };
+        const handler = handlers[e.key];
+        if (handler) {
+            handler(e);
+        }
+    }
+    function handleEscapeKey(e) {
+        e.preventDefault();
+        context.closeList();
+    }
+    function handleEnterKey(e) {
+        e.preventDefault();
+        const { listOpen, filteredItems, hoverItemIndex, value, multiple, itemId } = context.getState();
+        if (!listOpen)
+            return;
+        if (filteredItems.length === 0)
+            return;
+        const hoverItem = filteredItems[hoverItemIndex];
+        if (!multiple && areItemsEqual(value, hoverItem, itemId)) {
+            context.closeList();
+        }
+        else {
+            context.handleSelect(filteredItems[hoverItemIndex]);
+        }
+    }
+    function handleArrowDownKey(e) {
+        e.preventDefault();
+        const { listOpen } = context.getState();
+        if (listOpen) {
+            context.setHoverIndex(1);
+        }
+        else {
+            context.setListOpen(true);
+            context.setActiveValue(undefined);
+        }
+    }
+    function handleArrowUpKey(e) {
+        e.preventDefault();
+        const { listOpen } = context.getState();
+        if (listOpen) {
+            context.setHoverIndex(-1);
+        }
+        else {
+            context.setListOpen(true);
+            context.setActiveValue(undefined);
+        }
+    }
+    function handleTabKey(e) {
+        const { listOpen, focused, filteredItems, hoverItemIndex, value, itemId } = context.getState();
+        if (!listOpen || !focused)
+            return;
+        if (filteredItems.length === 0 || areItemsEqual(value, filteredItems[hoverItemIndex], itemId)) {
+            context.closeList();
+            return;
+        }
+        e.preventDefault();
+        context.handleSelect(filteredItems[hoverItemIndex]);
+        context.closeList();
+    }
+    function handleBackspaceKey(e) {
+        const { multiple, filterText, value, activeValue } = context.getState();
+        if (!multiple || filterText.length > 0)
+            return;
+        if (multiple && value && value.length > 0) {
+            const indexToRemove = activeValue !== undefined ? activeValue : value.length - 1;
+            context.handleMultiItemClear(indexToRemove);
+            if (activeValue === 0 || activeValue === undefined)
+                return;
+            const newActiveValue = value.length > activeValue ? activeValue - 1 : undefined;
+            context.setActiveValue(newActiveValue);
+        }
+    }
+    function handleArrowLeftKey(e) {
+        const { value, multiple, filterText, activeValue } = context.getState();
+        if (!value || !multiple || filterText.length > 0)
+            return;
+        if (Array.isArray(value)) {
+            if (activeValue === undefined) {
+                context.setActiveValue(value.length - 1);
+            }
+            else if (value.length > activeValue && activeValue !== 0) {
+                context.setActiveValue(activeValue - 1);
+            }
+        }
+    }
+    function handleArrowRightKey(e) {
+        const { value, multiple, filterText, activeValue } = context.getState();
+        if (!value || !multiple || filterText.length > 0 || activeValue === undefined)
+            return;
+        if (activeValue === value.length - 1) {
+            context.setActiveValue(undefined);
+        }
+        else if (activeValue < value.length - 1) {
+            context.setActiveValue(activeValue + 1);
+        }
+    }
+    return {
+        handleKeyDown,
+        handleEscapeKey,
+        handleEnterKey,
+        handleArrowDownKey,
+        handleArrowUpKey,
+        handleTabKey,
+        handleBackspaceKey,
+        handleArrowLeftKey,
+        handleArrowRightKey,
+    };
+}

package/dist/styles/default.css

@@ -0,0 +1,387 @@
+.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);
+    --groupTitleBorderColor: var(--group-title-border-color);
+    --groupTitleBorderWidth: var(--group-title-border-width);
+    --groupTitleBorderStyle: var(--group-title-border-style);
+    --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);
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    padding: var(--padding, var(--internal-padding));
+    background: var(--background, #fff);
+    margin: var(--margin, 0);
+    width: var(--width, 100%);
+    font-size: var(--font-size, 16px);
+    max-height: var(--max-height);
+}
+
+* {
+    box-sizing: var(--box-sizing, border-box);
+}
+
+.svelte-select:hover {
+    border: var(--border-hover, 1px solid #b2b8bf);
+}
+
+.value-container {
+    display: flex;
+    flex: 1 1 0%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px 10px;
+    padding: var(--value-container-padding, 5px 0);
+    position: relative;
+    overflow: var(--value-container-overflow, hidden);
+    align-self: stretch;
+}
+
+.prepend,
+.indicators {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.indicators {
+    position: var(--indicators-position);
+    top: var(--indicators-top);
+    right: var(--indicators-right);
+    bottom: var(--indicators-bottom);
+}
+
+input {
+    position: absolute;
+    cursor: default;
+    border: none;
+    color: var(--input-color, var(--item-color));
+    padding: var(--input-padding, 0);
+    letter-spacing: var(--input-letter-spacing, inherit);
+    margin: var(--input-margin, 0);
+    min-width: 10px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: transparent;
+    font-size: var(--font-size, 16px);
+}
+
+:not(.multi) > .value-container > input {
+    width: 100%;
+    height: 100%;
+}
+
+input::placeholder {
+    color: var(--placeholder-color, #78848f);
+    opacity: var(--placeholder-opacity, 1);
+}
+
+input:focus {
+    outline: none;
+}
+
+.svelte-select.focused {
+    border: var(--border-focused, 1px solid #006fe8);
+    border-radius: var(--border-radius-focused, var(--border-radius, 6px));
+}
+
+.disabled {
+    background: var(--disabled-background, #ebedef);
+    border-color: var(--disabled-border-color, #ebedef);
+    color: var(--disabled-color, #c1c6cc);
+}
+
+.disabled input::placeholder {
+    color: var(--disabled-placeholder-color, #c1c6cc);
+    opacity: var(--disabled-placeholder-opacity, 1);
+}
+
+.selected-item {
+    position: relative;
+    overflow: var(--selected-item-overflow, hidden);
+    padding: var(--selected-item-padding, 0 20px 0 0);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--selected-item-color, inherit);
+    font-size: var(--font-size, 16px);
+}
+
+.multi .selected-item {
+    position: absolute;
+    line-height: var(--height, 42px);
+    height: var(--height, 42px);
+}
+
+.selected-item:focus {
+    outline: none;
+}
+
+.hide-selected-item {
+    opacity: 0;
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.clear-select {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--clear-select-width, 40px);
+    height: var(--clear-select-height, 100%);
+    color: var(--clear-select-color, var(--icons-color));
+    margin: var(--clear-select-margin, 0);
+    pointer-events: all;
+    flex-shrink: 0;
+}
+
+.clear-select:focus {
+    outline: var(--clear-select-focus-outline, 1px solid #006fe8);
+}
+
+.loading {
+    width: var(--loading-width, 40px);
+    height: var(--loading-height);
+    color: var(--loading-color, var(--icons-color));
+    margin: var(--loading--margin, 0);
+    flex-shrink: 0;
+}
+
+.chevron {
+    width: var(--chevron-width, 40px);
+    height: var(--chevron-height, 40px);
+    background: var(--chevron-background, transparent);
+    pointer-events: var(--chevron-pointer-events, none);
+    color: var(--chevron-color, var(--icons-color));
+    border: 0;
+    border-left: var(--chevron-border-left, 1px solid #d8dbdf);
+    flex-shrink: 0;
+}
+
+.multi {
+    padding: var(--multi-select-padding, var(--internal-padding));
+}
+
+.multi input {
+    padding: var(--multi-select-input-padding, 0);
+    position: relative;
+    margin: var(--multi-select-input-margin, 5px 0);
+    flex: 1 1 40px;
+}
+
+.svelte-select.error {
+    border: var(--error-border, 1px solid #ff2d55);
+    background: var(--error-background, #fff);
+}
+
+.a11y-text {
+    z-index: 9999;
+    border: 0px;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    width: 1px;
+    position: absolute;
+    overflow: hidden;
+    padding: 0px;
+    white-space: nowrap;
+}
+
+.multi-item {
+    background: var(--multi-item-bg, #ebedef);
+    margin: var(--multi-item-margin, 0);
+    outline: var(--multi-item-outline, 1px solid #ddd);
+    border-radius: var(--multi-item-border-radius, 4px);
+    height: var(--multi-item-height, 25px);
+    line-height: var(--multi-item-height, 25px);
+    display: flex;
+    cursor: default;
+    padding: var(--multi-item-padding, 0 5px);
+    overflow: hidden;
+    gap: var(--multi-item-gap, 4px);
+    outline-offset: -1px;
+    max-width: var(--multi-max-width, none);
+    color: var(--multi-item-color, var(--item-color));
+}
+
+.multi-item.disabled:hover {
+    background: var(--multi-item-disabled-hover-bg, #ebedef);
+    color: var(--multi-item-disabled-hover-color, #c1c6cc);
+}
+
+.multi-item-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.multi-item-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --clear-icon-color: var(--multi-item-clear-icon-color, #000);
+}
+
+.multi-item.active {
+    outline: var(--multi-item-active-outline, 1px solid #006fe8);
+}
+
+.svelte-select-list {
+    box-shadow: var(--list-shadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
+    border-radius: var(--list-border-radius, 4px);
+    max-height: var(--list-max-height, 252px);
+    overflow-y: auto;
+    background: var(--list-background, #fff);
+    position: var(--list-position, absolute);
+    z-index: var(--list-z-index, 2);
+    border: var(--list-border);
+}
+
+.prefloat {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.list-group-title {
+    color: var(--group-title-color, #000000);
+    cursor: default;
+    font-size: var(--group-title-font-size, 16px);
+    font-weight: var(--group-title-font-weight, 600);
+    height: var(--height, 42px);
+    line-height: var(--height, 42px);
+    padding: var(--group-title-padding, 0 20px);
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-transform: var(--group-title-text-transform, uppercase);
+    border-width: var(--group-title-border-width, medium);
+    border-style: var(--group-title-border-style, none);
+    border-color: var(--group-title-border-color, transparent);
+}
+
+.empty {
+    text-align: var(--list-empty-text-align, center);
+    padding: var(--list-empty-padding, 20px 0);
+    color: var(--list-empty-color, #78848f);
+}
+
+.item {
+    cursor: default;
+    height: var(--item-height, var(--height, 42px));
+    line-height: var(--item-line-height, var(--height, 42px));
+    padding: var(--item-padding, 0 20px);
+    color: var(--item-color, inherit);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: var(--item-transition, all 0.2s);
+    align-items: center;
+    width: 100%;
+}
+
+.item.group-item {
+    padding-left: var(--group-item-padding-left, 40px);
+}
+
+.item:active {
+    background: var(--item-active-background, #b9daff);
+}
+
+.item.active {
+    background: var(--item-is-active-bg, #007aff);
+    color: var(--item-is-active-color, #fff);
+}
+
+.item.first {
+    border-radius: var(--item-first-border-radius, 4px 4px 0 0);
+}
+
+.item.hover:not(.active) {
+    background: var(--item-hover-bg, #e7f2ff);
+    color: var(--item-hover-color, inherit);
+}
+
+.item.not-selectable,
+.item.hover.item.not-selectable,
+.item.active.item.not-selectable,
+.item.not-selectable:active {
+    color: var(--item-is-not-selectable-color, #999);
+    background: transparent;
+}
+
+.required {
+    opacity: 0;
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}