svelte-select-5 6.0.0

package/README.md

@@ -0,0 +1,316 @@
+# svelte-select-5
+
+A select/autocomplete/typeahead component for **Svelte 5**.
+
+This is a fork of [svelte-select](https://github.com/rob-balfre/svelte-select) with full Svelte 5 support.
+
+## Installation
+
+```bash
+npm install svelte-select-5
+```
+
+## Svelte 5 Migration
+
+This fork has been fully migrated to Svelte 5:
+- Uses Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`)
+- Slots replaced with snippets (e.g., `slot="clear-icon"` → `{#snippet clearIcon()}`)
+- Events use callback props (e.g., `on:select` → `onselect`)
+
+See [CHANGELOG.md](./CHANGELOG.md) for breaking changes.
+
+
+## Upgrading Svelte Select
+See [migration guide](/MIGRATION_GUIDE.md) if upgrading
+
+
+## Rollup and low/no-build setups
+
+List position and floating is powered by `floating-ui`, see their [package-entry-points](https://github.com/floating-ui/floating-ui#package-entry-points) docs if you encounter build errors.
+
+
+
+## Props
+
+| Prop                   | Type      | Default         | Description                                                    |
+| ---------------------- | --------- | --------------- | -------------------------------------------------------------- |
+| items                  | `any[]`   | `[]`            | Array of items available to display / filter                   |
+| value                  | `any`     | `null`          | Selected value(s)                                              |
+| justValue              | `any`     | `null`          | **READ-ONLY** Selected value(s) excluding container object     |
+| itemId                 | `string`  | `value`         | Override default identifier                                    |
+| label                  | `string`  | `label`         | Override default label                                         |
+| id                     | `string`  | `null`          | id attr for input field                                        |
+| filterText             | `string`  | `''`            | Text to filter `items` by                                      |
+| placeholder            | `string`  | `Please select` | Placeholder text                                               |
+| hideEmptyState         | `boolean` | `false`         | When no items hide list                                        |
+| listOpen               | `boolean` | `false`         | Open/close list                                                |
+| class                  | `string`  | `''`            | container classes                                              |
+| containerStyles        | `string`  | `''`            | Add inline styles to container                                 |
+| clearable              | `boolean` | `true`          | Enable clearing of value(s)                                    |
+| disabled               | `boolean` | `false`         | Disable select                                                 |
+| multiple               | `boolean` | `false`         | Enable multi-select                                            |
+| searchable             | `boolean` | `true`          | If `false` search/filtering is disabled                        |
+| groupHeaderSelectable  | `boolean` | `false`         | Enable selectable group headers                                |
+| focused                | `boolean` | `false`         | Controls input focus                                           |
+| listAutoWidth          | `boolean` | `true`          | If `false` will ignore width of select                         |
+| showChevron            | `boolean` | `false`         | Show chevron                                                   |
+| inputAttributes        | `object`  | `{}`            | Pass in HTML attributes to Select's input                      |
+| placeholderAlwaysShow  | `boolean` | `false`         | When `multiple` placeholder text will always show              |
+| loading                | `boolean` | `false`         | Shows `loading-icon`. `loadOptions` will override this         |
+| listOffset             | `number`  | `5`             | `px` space between select and list                             |
+| debounceWait           | `number`  | `300`           | `milliseconds` debounce wait                                   |
+| floatingConfig         | `object`  | `{}`            | [Floating UI Config](https://floating-ui.com/)                 |
+| hasError               | `boolean` | `false`         | If `true` sets error class and styles                          |
+| name                   | `string`  | `null`          | Name attribute of hidden input, helpful for form actions       |
+| required               | `boolean` | `false`         | If `Select` is within a `<form>` will restrict form submission |
+| multiFullItemClearable | `boolean` | `false`         | When `multiple` selected items will clear on click             |
+| closeListOnChange      | `boolean` | `true`          | After `on:change` list will close                              |
+| clearFilterTextOnBlur  | `boolean` | `true`          | If `false`, `filterText` value is preserved on:blur            |
+
+
+## Named slots
+
+```svelte
+<Select>
+  <div slot="prepend" />
+  <div slot="selection" let:selection let:index /> <!-- index only available when multiple -->
+  <div slot="clear-icon" />  
+  <div slot="multi-clear-icon" />  
+  <div slot="loading-icon" />  
+  <div slot="chevron-icon" /> 
+  <div slot="list-prepend" />  
+  <div slot="list" let:filteredItems />  
+  <div slot="list-append" />  
+  <div slot="item" let:item let:index />  
+  <div slot="input-hidden" let:value />
+  <div slot="required" let:value />
+  <!-- Remember you can also use `svelte:fragment` to avoid a container DOM element. -->
+  <svelte:fragment slot="empty" />  
+</Select>
+```
+
+
+## Events
+
+| Event Name | Callback          | Description                                                                |
+| ---------- | ----------------- | -------------------------------------------------------------------------- |
+| change     | { detail }        | fires when the user selects an option                                      |
+| input      | { detail }        | fires when the value has been changed                                      |
+| focus      | { detail }        | fires when select > input on:focus                                         |
+| blur       | { detail }        | fires when select > input on:blur                                          |
+| clear      | { detail }        | fires when clear is invoked or item is removed (by user) from multi select |
+| loaded     | { options }       | fires when `loadOptions` resolves                                          |
+| error      | { type, details } | fires when error is caught                                                 |
+| filter     | { detail }        | fires when `listOpen: true` and items are filtered                         |
+| hoverItem  | { detail }        | fires when hoverItemIndex changes                                          |
+
+
+### Items
+
+`items` can be simple arrays or collections.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  let simple = ['one', 'two', 'three'];
+
+  let collection = [
+    { value: 1, label: 'one' },
+    { value: 2, label: 'two' },
+    { value: 3, label: 'three' },
+  ];
+</script>
+
+<Select items={simple} />
+
+<Select items={collection} />
+```
+
+They can also be grouped and include non-selectable items.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  const items = [
+    {value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
+    {value: 'pizza', label: 'Pizza', group: 'Savory'},
+    {value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
+    {value: 'chips', label: 'Chips', group: 'Savory'},
+    {value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
+  ];
+
+  const groupBy = (item) => item.group;
+</script>
+
+<Select {items} {groupBy} />
+```
+
+You can also use custom collections.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  const itemId = 'id';
+  const label = 'title';
+
+  const items = [
+    {id: 0, title: 'Foo'},
+    {id: 1, title: 'Bar'},
+  ];
+</script>
+
+<Select {itemId} {label} {items} />
+```
+
+### Async Items
+
+To load items asynchronously then `loadOptions` is the simplest solution. Supply a function that returns a `Promise` that resolves with a list of items. `loadOptions` has debounce baked in and fires each time `filterText` is updated.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  import { someApiCall } from './services';
+
+  async function examplePromise(filterText) {
+    // Put your async code here...
+    // For example call an API using filterText as your search params
+    // When your API responds resolve your Promise
+    let res = await someApiCall(filterText);
+    return res;
+  }
+</script>
+
+<Select loadOptions={examplePromise} />
+```
+
+
+### Advanced List Positioning / Floating 
+
+`svelte-select` uses [floating-ui](https://floating-ui.com/) to control the list floating. See their docs and pass in your config via the `floatingConfig` prop.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  let floatingConfig = {
+    strategy: 'fixed'
+  }
+</script>
+
+<Select {floatingConfig} />
+```
+
+### Exposed methods
+These internal functions are exposed to override if needed. Look through the test file (test/src/index.js) for examples.
+
+```js
+export let itemFilter = (label, filterText, option) => label.toLowerCase().includes(filterText.toLowerCase());
+```
+
+```js
+export let groupBy = undefined;
+```
+
+```js
+export let groupFilter = groups => groups;
+```
+
+```js
+export let createGroupHeaderItem = groupValue => {
+  return {
+    value: groupValue,
+    label: groupValue
+  };
+};
+```
+
+```js
+export function handleClear() {
+  value = undefined;
+  listOpen = false;
+  dispatch("clear", value);
+  handleFocus();
+}
+```
+
+```js
+export let loadOptions = undefined; // if used must return a Promise that updates 'items'
+/* Return an object with { cancelled: true } to keep the loading state as active. */
+```
+
+```js
+export const getFilteredItems = () => {
+  return filteredItems;
+};
+```
+
+```js
+export let debounce = (fn, wait = 1) => {
+  clearTimeout(timeout);
+  timeout = setTimeout(fn, wait);
+};
+```
+
+Override core functionality at your own risk! See ([get-items.js](/src/lib/get-items.js) & [filter.js](/src/lib/filter.js))
+
+```js
+    // core replaceable methods...
+    <Select 
+      filter={...}
+      getItems={...}
+    />
+```
+
+## A11y (Accessibility)
+
+Override these methods to change the `aria-context` and `aria-selection` text.
+
+```js
+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.`;
+}
+```
+
+## CSS custom properties (variables)
+
+You can style a component by overriding [the available CSS custom properties](/docs/theming_variables.md).
+
+```html
+<script>
+  import Select from 'svelte-select';
+</script>
+
+<Select --border-radius= "10px" --placeholder-color="blue" />
+```
+
+You can also use the `inputStyles` prop to write in any override styles needed for the input.
+
+```html
+<script>
+  import Select from 'svelte-select';
+
+  const items = ['One', 'Two', 'Three'];
+</script>
+
+<Select {items} inputStyles="box-sizing: border-box;"></Select>
+```
+
+### 🧪 Experimental: Replace styles (Tailwind, Bootstrap, Bulma etc)
+If you'd like to supply your own styles use: `import Select from 'svelte-select/no-styles/Select.svelte'`. Then somewhere in your code or build pipeline add your own. There is a tailwind stylesheet via `import 'svelte-select/tailwind.css'`. It uses `@extend` so PostCSS is required.
+
+
+## License
+
+[LIL](LICENSE)

package/docs/generate_theming_variables_md.cjs

@@ -0,0 +1,53 @@
+const fs = require("fs");
+const path = require("path");
+
+const { find } = require("find-in-files");
+
+const VARIABLE_USAGE_PATTERN = "var\\(--([A-Za-z\\-_]*)";
+const SOURCE_FOLDER = path.join(__dirname, "..", "src/lib");
+
+const DOC_FILE_PATH = path.join(__dirname, "theming_variables.md");
+const VARIABLE_SECTION_PATTERN = /(<!-- List start -->)(.|\n)*(<!-- List end -->)/gm;
+
+(async () => {
+  const searchResults = await find(
+    VARIABLE_USAGE_PATTERN,
+    SOURCE_FOLDER,
+    ".svelte"
+  );
+  const justTheMatchedParts = Object.keys(searchResults).reduce(
+    (accumulator, nextKey) => [
+      ...accumulator,
+      ...searchResults[nextKey].matches
+    ],
+    []
+  );
+  const uniqueMatches = [...new Set(justTheMatchedParts).values()];
+  uniqueMatches.sort();
+  const matchesAsMarkdownListItems = uniqueMatches.map(b =>
+    b.replace(/var\((--[A-Za-z\-_]*)/, "- `$1`")
+  );
+
+  const START_TAG_CAPTURE_GROUP = "$1";
+  const END_TAG_CAPTURE_GROUP = "$3";
+  const newDependencySectionAsRegexReplaceExpression = [
+    START_TAG_CAPTURE_GROUP,
+    ...matchesAsMarkdownListItems,
+    END_TAG_CAPTURE_GROUP
+  ].join("\n");
+  const oldContent = fs.readFileSync(DOC_FILE_PATH).toString();
+  const oldFileDoesNotContainSection =
+    oldContent.search(VARIABLE_SECTION_PATTERN) === -1;
+  if (oldFileDoesNotContainSection) {
+    console.error(`Could not find variable section in ${DOC_FILE_PATH}`);
+    process.exit(1);
+  }
+  fs.writeFileSync(
+    DOC_FILE_PATH,
+    oldContent.replace(
+      VARIABLE_SECTION_PATTERN,
+      newDependencySectionAsRegexReplaceExpression
+    )
+  );
+  console.log(`Successfully wrote to ${DOC_FILE_PATH}`);
+})();

package/docs/theming_variables.md

@@ -0,0 +1,113 @@
+# Theming variables
+
+Override the following CSS custom properties (variables) to style svelte-select components.
+
+<!-- List start -->
+- `--background`
+- `--border`
+- `--border-focused`
+- `--border-hover`
+- `--border-radius`
+- `--border-radius-focused`
+- `--box-sizing`
+- `--chevron-background`
+- `--chevron-border`
+- `--chevron-color`
+- `--chevron-height`
+- `--chevron-icon-colour`
+- `--chevron-icon-width`
+- `--chevron-pointer-events`
+- `--chevron-width`
+- `--clear-icon-color`
+- `--clear-icon-width`
+- `--clear-select-color`
+- `--clear-select-focus-outline`
+- `--clear-select-height`
+- `--clear-select-margin`
+- `--clear-select-width`
+- `--disabled-background`
+- `--disabled-border-color`
+- `--disabled-color`
+- `--disabled-placeholder-color`
+- `--disabled-placeholder-opacity`
+- `--error-background`
+- `--error-border`
+- `--font-size`
+- `--group-item-padding-left`
+- `--group-title-border-color`
+- `--group-title-border-style`
+- `--group-title-border-width`
+- `--group-title-color`
+- `--group-title-font-size`
+- `--group-title-font-weight`
+- `--group-title-padding`
+- `--group-title-text-transform`
+- `--height`
+- `--icons-color`
+- `--indicators-bottom`
+- `--indicators-position`
+- `--indicators-right`
+- `--indicators-top`
+- `--input-color`
+- `--input-left`
+- `--input-letter-spacing`
+- `--input-margin`
+- `--input-padding`
+- `--internal-padding`
+- `--item-active-background`
+- `--item-color`
+- `--item-first-border-radius`
+- `--item-height`
+- `--item-hover-bg`
+- `--item-hover-color`
+- `--item-is-active-bg`
+- `--item-is-active-color`
+- `--item-is-not-selectable-color`
+- `--item-line-height`
+- `--item-padding`
+- `--item-transition`
+- `--list-background`
+- `--list-border`
+- `--list-border-radius`
+- `--list-empty-color`
+- `--list-empty-padding`
+- `--list-empty-text-align`
+- `--list-max-height`
+- `--list-position`
+- `--list-shadow`
+- `--list-z-index`
+- `--loading--margin`
+- `--loading-color`
+- `--loading-height`
+- `--loading-width`
+- `--margin`
+- `--max-height`
+- `--multi-item-active-outline`
+- `--multi-item-bg`
+- `--multi-item-border-radius`
+- `--multi-item-clear-icon-color`
+- `--multi-item-color`
+- `--multi-item-disabled-hover-bg`
+- `--multi-item-disabled-hover-color`
+- `--multi-item-gap`
+- `--multi-item-height`
+- `--multi-item-margin`
+- `--multi-item-outline`
+- `--multi-item-padding`
+- `--multi-max-width`
+- `--multi-select-input-margin`
+- `--multi-select-input-padding`
+- `--multi-select-padding`
+- `--padding`
+- `--placeholder-color`
+- `--placeholder-opacity`
+- `--selected-item-color`
+- `--selected-item-overflow`
+- `--selected-item-padding`
+- `--spinner-color`
+- `--spinner-height`
+- `--spinner-width`
+- `--value-container-overflow`
+- `--value-container-padding`
+- `--width`
+<!-- List end -->

package/jsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json"
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "svelte-select-5",
+  "version": "6.0.0",
+  "repository": "https://github.com/Dbone29/svelte-select-5.git",
+  "description": "A <Select> component for Svelte 5 apps (fork of svelte-select)",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "npm run test:dev & npm run test:browser",
+    "test:dev": "rollup -cw",
+    "test:browser": "sirv test/public -p 3000 --dev --open",
+    "gen:docs": "node docs/generate_theming_variables_md.cjs",
+    "preprepare": "node src/remove-styles.cjs",
+    "prepare": "svelte-package",
+    "postprepare": "node src/post-prepare.cjs && npm run gen:docs",
+    "release": "release-it"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-replace": "^5.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "find-in-files": "^0.5.0",
+    "fuse.js": "^6.6.2",
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.0.0",
+    "release-it": "^17.0.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-svelte": "^7.2.0",
+    "sirv-cli": "^2.0.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-highlight": "^7.7.0",
+    "svelte-tiny-virtual-list": "^2.0.5",
+    "tape-modern": "^1.1.2",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
+  "license": "ISC",
+  "keywords": [
+    "svelte"
+  ],
+  "release-it": {
+    "hooks": {
+      "after:bump": "npm run prepare"
+    },
+    "github": {
+      "release": false
+    },
+    "npm": {
+      "publishPath": "./package"
+    }
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "svelte": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "svelte-floating-ui": "^1.5.9"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,33 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import css from 'rollup-plugin-css-only';
+import replace from '@rollup/plugin-replace';
+
+export default [
+    {
+        input: 'test/src/tests.js',
+        output: {
+            dir: './test/public',
+            inlineDynamicImports: true,
+        },
+        plugins: [
+            svelte({
+                emitCss: false,
+                compilerOptions: {
+                    accessors: true,
+                    dev: true,
+                },
+            }),
+            css(),
+            resolve({
+                browser: true,
+                exportConditions: ['svelte', 'development'],
+                dedupe: ['svelte'],
+            }),
+            replace({
+                preventAssignment: true,
+                'process.env.NODE_ENV': JSON.stringify('development'),
+            }),
+        ],
+    },
+];

package/src/app.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" class="text-gray-500 antialiased bg-white">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="/svelte-select.png" />
+
+        <style>
+
+            @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
+
+            html,body  {
+                padding: 0;
+                margin: 0;
+                font-family: 'Source Sans Pro', sans-serif;
+            }
+
+            * {
+                box-sizing: border-box;
+            }
+        </style>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+        %sveltekit.head%
+    </head>
+    <body class="container mx-auto">
+        <div id="svelte">%sveltekit.body%</div>
+    </body>
+</html>

package/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

package/src/lib/ChevronIcon.svelte

@@ -0,0 +1,22 @@
+<svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden="true">
+    <path
+    fill="currentColor"
+        d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747
+          3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0
+          1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502
+          0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0
+          0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" />
+</svg>
+
+<style>
+  svg {
+      width: var(--chevron-icon-width, 20px);
+      height: var(--chevron-icon-width, 20px);
+      color: var(--chevron-icon-colour, currentColor);
+  }
+</style>

package/src/lib/ClearIcon.svelte

@@ -0,0 +1,22 @@
+<svg
+    width="100%"
+    height="100%"
+    viewBox="-2 -2 50 50"
+    focusable="false"
+    aria-hidden="true"
+    role="presentation"
+>
+    <path
+        fill="currentColor"
+        d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124
+    l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"
+    />
+</svg>
+
+<style>
+    svg {
+        width: var(--clear-icon-width, 20px);
+        height: var(--clear-icon-width, 20px);
+        color: var(--clear-icon-color, currentColor);
+    }
+</style>