remove props selectedLabels and selectedValues

Author: janosh

readme.md

@@ -36,13 +36,14 @@
 
 ## Recent breaking changes
 
-- **v5.0.0** Supports both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`. See [PR 76](https://github.com/janosh/svelte-multiselect/pull/76).
-- **v6.0.0** The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
-- **v6.0.1** The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
-- **v6.0.1** The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
-- **6.1.0** The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
-- **v7.0.0** `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
-- **v7.1.1** Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. See [PR 133](https://github.com/janosh/svelte-multiselect/pull/123).
+- **v5.0.0**&nbsp; Supports both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`. See [PR 76](https://github.com/janosh/svelte-multiselect/pull/76).
+- **v6.0.0**&nbsp; The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
+- **v6.0.1**&nbsp; The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
+- **v6.0.1**&nbsp; The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
+- **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
+- **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
+- **v7.1.1**&nbsp; Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. See [PR 133](https://github.com/janosh/svelte-multiselect/pull/123).
+- **To be released**&nbsp; Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)`.
 
 ## Installation
 
@@ -316,18 +317,6 @@ import type { Option } from 'svelte-multiselect'
 
    Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally or passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction. If `maxSelect={1}`, selected will not be an array but a single `Option` or `null` if no options are selected.
 
-1. ```ts
-   selectedLabels: (string | number)[] | string | number | null = []
-   ```
-
-   Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings (or numbers), `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedLabels`. If `maxSelect={1}`, selectedLabels will not be an array but a single `string | number` or `null` if no options are selected.
-
-1. ```ts
-   selectedValues: unknown[] | unknown | null = []
-   ```
-
-   Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings (or numbers), `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedValues`. If `maxSelect={1}`, selectedLabels will not be an array but a single value or `null` if no options are selected.
-
 1. ```ts
    sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
    ```

src/lib/MultiSelect.svelte

@@ -58,29 +58,20 @@
     options
       ?.filter((op) => (op as ObjectOption)?.preselected)
       .slice(0, maxSelect ?? undefined) ?? []
-  export let selectedLabels: (string | number)[] | string | number | null = []
-  export let selectedValues: unknown[] | unknown | null = []
   export let sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
   export let ulOptionsClass: string = ``
   export let ulSelectedClass: string = ``
 
   // get the label key from an option object or the option itself if it's a string or number
   const get_label = (op: Option) => (op instanceof Object ? op.label : op)
 
-  // fallback on label if option is object and value is undefined
-  const get_value = (op: Option) => (op instanceof Object ? op.value ?? op.label : op)
-
   // selected and _selected are identical except if maxSelect=1, selected will be the single item (or null)
   // in _selected which will always be an array for easier component internals. selected then solves
   // https://github.com/janosh/svelte-multiselect/issues/86
   let _selected = (selected ?? []) as Option[]
   $: selected = maxSelect === 1 ? _selected[0] ?? null : _selected
 
   let wiggle = false // controls wiggle animation when user tries to exceed maxSelect
-  $: _selectedLabels = _selected?.map(get_label) ?? []
-  $: selectedLabels = maxSelect === 1 ? _selectedLabels[0] ?? null : _selectedLabels
-  $: _selectedValues = _selected?.map(get_value) ?? []
-  $: selectedValues = maxSelect === 1 ? _selectedValues[0] ?? null : _selectedValues
 
   type $$Events = MultiSelectEvents // for type-safe event listening on this component
 
@@ -112,7 +103,8 @@
 
   // options matching the current search text
   $: matchingOptions = options.filter(
-    (op) => filterFunc(op, searchText) && !_selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
+    (op) =>
+      filterFunc(op, searchText) && !_selected.map(get_label).includes(get_label(op)) // remove already selected options from dropdown list
   )
   // raise if matchingOptions[activeIndex] does not yield a value
   if (activeIndex !== null && !matchingOptions[activeIndex]) {
@@ -124,7 +116,7 @@
   // add an option to selected list
   function add(label: string | number, event: Event) {
     if (maxSelect && maxSelect > 1 && _selected.length >= maxSelect) wiggle = true
-    if (!isNaN(Number(label)) && typeof _selectedLabels[0] === `number`)
+    if (!isNaN(Number(label)) && typeof _selected.map(get_label)[0] === `number`)
       label = Number(label) // convert to number if possible
 
     const is_duplicate = _selected.some((option) => duplicateFunc(option, label))
@@ -200,7 +192,7 @@
   function remove(label: string | number) {
     if (_selected.length === 0) return
 
-    _selected.splice(_selectedLabels.lastIndexOf(label), 1)
+    _selected.splice(_selected.map(get_label).lastIndexOf(label), 1)
     _selected = _selected // Svelte rerender after in-place splice
 
     const option =
@@ -249,7 +241,7 @@
 
       if (activeOption) {
         const label = get_label(activeOption)
-        selectedLabels?.includes(label) ? remove(label) : add(label, event)
+        _selected.map(get_label).includes(label) ? remove(label) : add(label, event)
         searchText = ``
       } else if (allowUserOptions && searchText.length > 0) {
         // user entered text but no options match, so if allowUserOptions is truthy, we create new option
@@ -293,8 +285,8 @@
       }
     }
     // on backspace key: remove last selected option
-    else if (event.key === `Backspace` && _selectedLabels.length > 0 && !searchText) {
-      remove(_selectedLabels.at(-1) as string | number)
+    else if (event.key === `Backspace` && _selected.length > 0 && !searchText) {
+      remove(_selected.map(get_label).at(-1) as string | number)
     }
   }
 
@@ -305,7 +297,7 @@
     searchText = ``
   }
 
-  $: is_selected = (label: string | number) => _selectedLabels.includes(label)
+  $: is_selected = (label: string | number) => _selected.map(get_label).includes(label)
 
   const if_enter_or_space = (handler: () => void) => (event: KeyboardEvent) => {
     if ([`Enter`, `Space`].includes(event.code)) {