svelte-5-select 1.0.0-beta.0

package/dist/tailwind.css

@@ -0,0 +1,130 @@
+@import 'tailwindcss/base';
+
+.svelte-select {
+    @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
+        hover:border-gray-400;
+}
+
+.svelte-select input {
+    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
+        focus:outline-none hover:border-gray-400;
+}
+
+.svelte-select.focused {
+    @apply border-blue-600;
+}
+
+.svelte-select.disabled {
+    @apply bg-gray-200 border-gray-200 text-gray-600;
+}
+
+.svelte-select.disabled input {
+    @apply placeholder:text-gray-400 placeholder:opacity-100;
+}
+
+.svelte-select .selected-item {
+    @apply leading-10 h-10 overflow-x-hidden pr-5
+        focus:outline-none;
+}
+
+.svelte-select .icons {
+    @apply absolute flex items-center right-0 translate-y-0 text-gray-200 pointer-events-none top-0 bottom-0;
+}
+
+.svelte-select .icons > * {
+    @apply transition-colors ease-in-out duration-200;
+}
+
+.svelte-select .clear-select {
+    @apply pointer-events-auto;
+}
+
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
+    @apply text-gray-600;
+}
+
+.svelte-select .clear-select {
+    @apply px-2 h-5 text-gray-300 flex-none w-9;
+}
+
+.svelte-select .chevron {
+    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
+}
+
+.svelte-select.multi {
+    @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
+}
+
+.svelte-select.multi input {
+    @apply p-0 relative m-0;
+}
+
+.svelte-select.error {
+    @apply border-red-500 bg-white;
+}
+
+.a11y-text {
+    @apply sr-only;
+}
+
+.list {
+    @apply shadow-md rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
+}
+
+.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;
+}
+
+.list .empty {
+    @apply text-center py-5 text-gray-500;
+}
+
+.item {
+    @apply cursor-default h-10 leading-10 px-5 text-gray-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.item.group-item {
+    @apply px-10;
+}
+
+.item:active {
+    @apply bg-blue-200;
+}
+
+.item.active {
+    @apply bg-blue-600 text-white;
+}
+
+.item.not-selectable {
+    @apply text-gray-300;
+}
+
+.item.first {
+    @apply rounded-t-sm;
+}
+
+.item.hover:not(.active) {
+    @apply bg-blue-100;
+}
+
+.multi input {
+    flex: 1 1 40px;
+}
+
+.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;
+}
+
+.multi-item.disabled {
+    @apply hover:bg-gray-300 hover:text-gray-500;
+}
+
+.multi-item-clear {
+    @apply flex items-center justify-center w-5;
+}
+
+.list-item {
+    @apply list-none;
+}

package/dist/types.d.ts

@@ -0,0 +1,134 @@
+import type { Snippet } from 'svelte';
+import type { ComputePositionConfig } from 'svelte-floating-ui/dom';
+export interface ErrorEvent {
+    type: string;
+    details: any;
+}
+export interface FilterConfig {
+    loadOptions?: (filterText: string) => Promise<SelectItem[] | string[]>;
+    filterText: string;
+    items: SelectItem[] | string[] | null;
+    multiple: boolean;
+    value: SelectItem | SelectItem[] | null | undefined;
+    itemId: string;
+    groupBy?: (item: SelectItem) => string | undefined;
+    label: string;
+    filterSelectedItems: boolean;
+    itemFilter: (label: string, filterText: string, option: SelectItem) => boolean;
+    convertStringItemsToObjects: (items: string[]) => SelectItem[];
+    filterGroupedItems: (items: SelectItem[]) => SelectItem[];
+}
+export interface FloatingConfig extends Partial<ComputePositionConfig> {
+    autoUpdate?: boolean;
+}
+export interface KeyboardNavigationContext {
+    getState: () => {
+        listOpen: boolean;
+        filteredItems: SelectItem[];
+        hoverItemIndex: number;
+        multiple: boolean;
+        value: any;
+        filterText: string;
+        activeValue: number | undefined;
+        itemId: string;
+        focused: boolean;
+    };
+    setListOpen: (value: boolean) => void;
+    setHoverItemIndex: (value: number) => void;
+    setActiveValue: (value: number | undefined) => void;
+    closeList: () => void;
+    setHoverIndex: (increment: number) => void;
+    handleSelect: (item: SelectItem) => void;
+    handleMultiItemClear: (index: number) => Promise<void>;
+}
+export interface ScrollActionParams {
+    scroll: boolean;
+}
+export interface SelectItem {
+    value?: any;
+    label?: string;
+    index?: number;
+    group?: string;
+    groupHeader?: boolean;
+    groupItem?: boolean;
+    selectable?: boolean;
+    id?: string | number;
+    [key: string]: any;
+}
+export interface SelectProps {
+    filterText?: string;
+    itemId?: string;
+    items?: SelectItem[] | string[] | null;
+    justValue?: any;
+    label?: string;
+    value?: SelectItem | SelectItem[] | string | null;
+    disabled?: boolean;
+    focused?: boolean;
+    hasError?: boolean;
+    hideEmptyState?: boolean;
+    id?: string | null;
+    listOpen?: boolean;
+    loading?: boolean;
+    name?: string | null;
+    placeholder?: string;
+    placeholderAlwaysShow?: boolean;
+    showChevron?: boolean;
+    clearable?: boolean;
+    clearFilterTextOnBlur?: boolean;
+    closeListOnChange?: boolean;
+    filterSelectedItems?: boolean;
+    groupHeaderSelectable?: boolean;
+    multiFullItemClearable?: boolean;
+    multiple?: boolean;
+    required?: boolean;
+    searchable?: boolean;
+    useJustValue?: boolean;
+    class?: string;
+    containerStyles?: string;
+    inputStyles?: string;
+    listStyle?: string;
+    debounceWait?: number;
+    floatingConfig?: FloatingConfig;
+    hoverItemIndex?: number;
+    inputAttributes?: Record<string, any>;
+    listAutoWidth?: boolean;
+    listOffset?: number;
+    loadOptionsDeps?: any[];
+    createGroupHeaderItem?: (groupValue: string, item: SelectItem) => SelectItem;
+    debounce?: (fn: () => void, wait: number) => void;
+    filter?: (config: FilterConfig) => SelectItem[];
+    getFilteredItems?: () => SelectItem[];
+    groupBy?: ((item: SelectItem) => string) | undefined;
+    groupFilter?: (groups: string[]) => string[];
+    itemFilter?: (label: string, filterText: string, option: any) => boolean;
+    loadOptions?: (filterText: string) => Promise<SelectItem[] | string[]>;
+    ariaFocused?: () => 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;
+    onerror?: (error: ErrorEvent) => void;
+    onfilter?: (items: SelectItem[]) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onhoveritem?: (index: number) => void;
+    oninput?: (value: any) => void;
+    onloaded?: (options: SelectItem[]) => void;
+    onselect?: (selection: SelectItem) => void;
+    chevronIconSnippet?: Snippet<[boolean]>;
+    clearIconSnippet?: Snippet;
+    emptySnippet?: Snippet;
+    inputHiddenSnippet?: Snippet<[any]>;
+    itemSnippet?: Snippet<[SelectItem, number]>;
+    listAppendSnippet?: Snippet;
+    listPrependSnippet?: Snippet;
+    listSnippet?: Snippet<[SelectItem[]]>;
+    loadingIconSnippet?: Snippet;
+    multiClearIconSnippet?: Snippet;
+    prependSnippet?: Snippet;
+    requiredSnippet?: Snippet<[any]>;
+    selectionSnippet?: Snippet<[any, number?]>;
+    container?: HTMLDivElement;
+    input?: HTMLInputElement;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +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 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 createGroupHeaderItem(groupValue: string, item: SelectItem, labelKey?: string): SelectItem;

package/dist/utils.js

@@ -0,0 +1,28 @@
+export function getItemProperty(item, key) {
+    return item && typeof item === 'object' ? item[key] : undefined;
+}
+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');
+}
+export function isItemSelectableCheck(item) {
+    if (!item)
+        return false;
+    return !item.hasOwnProperty('selectable') || item.selectable !== false;
+}
+export function hasValueChanged(newValue, oldValue) {
+    return JSON.stringify(newValue) !== JSON.stringify(oldValue);
+}
+export function createGroupHeaderItem(groupValue, item, labelKey = 'label') {
+    return {
+        value: groupValue,
+        [labelKey]: groupValue,
+    };
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "svelte-5-select",
+  "version": "1.0.0-beta.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "https://github.com/IDontKnowMyUsername/svelte-5-select.git",
+  "description": "A <Select> component for Svelte 5 apps",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "7.0.0",
+    "@sveltejs/adapter-static": "3.0.10",
+    "@sveltejs/kit": "2.47.3",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "cross-env": "^10.1.0",
+    "find-in-files": "^0.5.0",
+    "fuse.js": "^7.1.0",
+    "happy-dom": "^20.0.8",
+    "npm-check-updates": "^19.1.1",
+    "prettier": "~3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "release-it": "^19.0.5",
+    "svelte-check": "^4.3.3",
+    "svelte-highlight": "^7.9.0",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-virtual-list": "^3.0.1",
+    "svelte2tsx": "^0.7.45",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vitest": "^3.2.4"
+  },
+  "author": "https://github.com/IDontKnowMyUsername/svelte-5-select, https://github.com/kodaicoder, Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
+  "license": "ISC",
+  "homepage": "https://github.com/IDontKnowMyUsername/svelte-5-select#readme",
+  "bugs": {
+    "url": "https://github.com/IDontKnowMyUsername/svelte-5-select/issues"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "select",
+    "dropdown",
+    "component",
+    "select-component"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.41.2"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "svelte-floating-ui": "1.6.2"
+  },
+  "scripts": {
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "dev": "vite dev",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "coverage": "vitest run --coverage",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "gen:docs": "node docs/generate_theming_variables_md.cjs",
+    "package": "svelte-kit sync && svelte-package",
+    "preprepare": "tsx src/remove-styles.ts",
+    "postprepare": "tsx src/post-prepare.ts && npm run gen:docs",
+    "release": "release-it"
+  }
+}