svelte-select - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

 # svelte-select changelog
 
+## 1.1.0
+
+* Updated README
+* Added Multi-select
+* Added Grouping
+* IE11 support
+
 ## 1.0.0
 
-* First release
+* First release

index.js

@@ -57,2 +57,7 @@ (function (global, factory) {
 
+	function setAttribute(node, attribute, value) {
+		if (value == null) node.removeAttribute(attribute);
+		else node.setAttribute(attribute, value);
+	}
+
 	function setData(text, data) {
@@ -198,3 +203,3 @@ text.data = '' + data;
 	function create_main_fragment(component, ctx) {
-		var text_value = ctx.item.label, text;
+		var text_value = ctx.getOptionLabel(ctx.item), text;
 
@@ -211,3 +216,3 @@ return {
 			p(changed, ctx) {
-				if ((changed.item) && text_value !== (text_value = ctx.item.label)) {
+				if ((changed.getOptionLabel || changed.item) && text_value !== (text_value = ctx.getOptionLabel(ctx.item))) {
 					setData(text, text_value);
@@ -247,8 +252,8 @@ }
 	    Item,
-	    disableMouseHover: false,
-	    selectedItem: undefined
+	    selectedValue: undefined,
+	    getOptionLabel: (option) => option.label
 	  }
 	}
-	function itemClasses(hoverItemIndex, item, itemIndex, items, selectedItem) {
-	  return `${selectedItem && (selectedItem.value === item.value) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
+	function itemClasses(hoverItemIndex, item, itemIndex, items, selectedValue) {
+	  return `${selectedValue && (selectedValue.value === item.value) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
 	}
@@ -259,13 +264,8 @@ var methods = {
 	  },
-	  handleHover(item) {
-	    const {disableMouseHover} = this.get();
-	    if (!disableMouseHover) {
-	      this.set({hoverItemIndex: item.index});
-	    } else {
-	      this.set({disableMouseHover: false});
-	    }
+	  handleHover(i) {
+	    this.set({hoverItemIndex: i});
 	  },
-	  handleClick(item, event) {
+	  handleClick(item, i, event) {
 	    event.stopPropagation();
-	    this.set({activeItemIndex: item.index, hoverItemIndex: item.index});
+	    this.set({activeItemIndex: i, hoverItemIndex: i});
 	    this.handleSelect(item);
@@ -286,6 +286,8 @@ },
 
-	    this.set({items, hoverItemIndex});
+	    this.set({hoverItemIndex});
+	    this.scrollToActiveItem('hover');
 	  },
 	  handleKeyDown(e) {
 	    const {items, hoverItemIndex} = this.get();
+
 	    switch (e.key) {
@@ -313,9 +315,10 @@ case 'ArrowDown':
 	  scrollToActiveItem(className) {
-	    this.set({disableMouseHover: true});
 	    const {container} = this.refs;
 	    let offsetBounding;
 	    const focusedElemBounding = container.querySelector(`.listItem.${className}`);
+
 	    if (focusedElemBounding) {
 	      offsetBounding = container.getBoundingClientRect().bottom - focusedElemBounding.getBoundingClientRect().bottom;
 	    }
+
 	    container.scrollTop -= offsetBounding;
@@ -325,12 +328,7 @@ }
 
-	function onupdate({changed, current, previous}) {
-
-	  // console.log(current.items);
-
+	function onupdate({changed, current}) {
 	  if (changed.items && current.items.length > 0) {
-	    this.scrollToActiveItem('hover');
-	    if (!current.items.find((item) => item.index === current.hoverItemIndex)) {
+	    if (!current.items[current.hoverItemIndex]) {
 	      this.set({
-	        hoverItemIndex: current.items[0].index,
-	        disableMouseHover: false
+	        hoverItemIndex: current.items.length - 1
 	      });
@@ -340,18 +338,22 @@ }
 	  if (changed.activeItemIndex && current.activeItemIndex > -1) {
-	    this.scrollToActiveItem('active');
 	    this.set({
 	      hoverItemIndex: current.activeItemIndex,
 	    });
+
+	    this.scrollToActiveItem('active');
 	  }
-	  if (changed.selectedItem && current.selectedItem) {
+	  if (changed.selectedValue && current.selectedValue) {
 	    this.scrollToActiveItem('active');
-	    const hoverItemIndex = current.items.find(item => item.value === current.selectedItem.value).index;
-	    this.set({hoverItemIndex});
+	    if (current.items && !current.isMulti) {
+	      const hoverItemIndex = current.items.findIndex((item) => item.value === current.selectedValue.value);
+	      if (hoverItemIndex) {
+	        this.set({hoverItemIndex});
+	      }
+	    }
 	  }
-
 	}
 	function add_css() {
 		var style = createElement("style");
-		style.id = 'svelte-4st1d1-style';
-		style.textContent = ".listContainer.svelte-4st1d1{box-shadow:0 2px 3px 0 rgba(44, 62, 80, 0.24);border-radius:4px;max-height:250px;overflow-y:auto;background:#fff}.listItem.svelte-4st1d1{height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.listItem.hover.svelte-4st1d1{background:#e7f2ff}.listItem.svelte-4st1d1:active{background:#b9daff}.listItem.svelte-4st1d1:first-child{border-radius:4px 4px 0 0}.listItem.active.svelte-4st1d1{background:#007aff;color:#fff}.empty.svelte-4st1d1{text-align:center;padding:20px 0;color:#78848F}";
+		style.id = 'svelte-1h82xdc-style';
+		style.textContent = ".listContainer.svelte-1h82xdc{box-shadow:0 2px 3px 0 rgba(44, 62, 80, 0.24);border-radius:4px;max-height:250px;overflow-y:auto;background:#fff}.listGroupTitle.svelte-1h82xdc{color:#8f8f8f;cursor:default;font-size:12px;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;text-transform:uppercase}.listItem.svelte-1h82xdc{cursor:default;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.listItem.hover.svelte-1h82xdc{background:#e7f2ff}.listItem.svelte-1h82xdc:active{background:#b9daff}.listItem.svelte-1h82xdc:first-child{border-radius:4px 4px 0 0}.listItem.active.svelte-1h82xdc{background:#007aff;color:#fff}.empty.svelte-1h82xdc{text-align:center;padding:20px 0;color:#78848F}";
 		append(document.head, style);
@@ -363,3 +365,3 @@ }
 
-		component.handleClick(ctx.item, event);
+		component.handleClick(ctx.item, ctx.i, event);
 	}
@@ -370,3 +372,3 @@
 
-		component.handleHover(ctx.item);
+		component.handleHover(ctx.i);
 	}
@@ -410,3 +412,3 @@
 				}
-				div.className = "listContainer svelte-4st1d1";
+				div.className = "listContainer svelte-1h82xdc";
 			},
@@ -429,3 +431,3 @@
 			p(changed, ctx) {
-				if (changed.hoverItemIndex || changed.items || changed.selectedItem || changed.Item) {
+				if (changed.hoverItemIndex || changed.items || changed.selectedValue || changed.Item || changed.getOptionLabel) {
 					each_value = ctx.items;
@@ -479,3 +481,3 @@
 
-	// (9:4) {:else}
+	// (15:2) {:else}
 	function create_else_block(component, ctx) {
@@ -488,3 +490,3 @@ var div;
 				div.textContent = "No options";
-				div.className = "empty svelte-4st1d1";
+				div.className = "empty svelte-1h82xdc";
 			},
@@ -504,10 +506,45 @@
 
-	// (4:4) {#each items as item, i}
+	// (5:2) {#if item.groupValue}
+	function create_if_block(component, ctx) {
+		var div, text_value = ctx.item.groupValue, text;
+
+		return {
+			c() {
+				div = createElement("div");
+				text = createText(text_value);
+				div.className = "listGroupTitle svelte-1h82xdc";
+			},
+
+			m(target, anchor) {
+				insert(target, div, anchor);
+				append(div, text);
+			},
+
+			p(changed, ctx) {
+				if ((changed.items) && text_value !== (text_value = ctx.item.groupValue)) {
+					setData(text, text_value);
+				}
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(div);
+				}
+			}
+		};
+	}
+
+	// (4:2) {#each items as item, i}
 	function create_each_block(component, ctx) {
-		var div, text, div_class_value;
+		var text0, div, text1, div_class_value;
 
+		var if_block = (ctx.item.groupValue) && create_if_block(component, ctx);
+
 		var switch_value = ctx.Item;
 
 		function switch_props(ctx) {
-			var switch_instance_initial_data = { item: ctx.item };
+			var switch_instance_initial_data = {
+			 	item: ctx.item,
+			 	getOptionLabel: ctx.getOptionLabel
+			 };
 			return {
@@ -526,5 +563,7 @@ root: component.root,
 			c() {
+				if (if_block) if_block.c();
+				text0 = createText("\n\n  ");
 				div = createElement("div");
 				if (switch_instance) switch_instance._fragment.c();
-				text = createText("\n    ");
+				text1 = createText("\n  ");
 				div._svelte = { component, ctx };
@@ -534,6 +573,8 @@
 				addListener(div, "click", click_handler);
-				div.className = div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.item.index, ctx.items, ctx.selectedItem) + " svelte-4st1d1";
+				div.className = div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue) + " svelte-1h82xdc";
 			},
 
 			m(target, anchor) {
+				if (if_block) if_block.m(target, anchor);
+				insert(target, text0, anchor);
 				insert(target, div, anchor);
@@ -545,3 +586,3 @@
 
-				append(div, text);
+				append(div, text1);
 			},
@@ -551,4 +592,18 @@
 				ctx = _ctx;
+				if (ctx.item.groupValue) {
+					if (if_block) {
+						if_block.p(changed, ctx);
+					} else {
+						if_block = create_if_block(component, ctx);
+						if_block.c();
+						if_block.m(text0.parentNode, text0);
+					}
+				} else if (if_block) {
+					if_block.d(1);
+					if_block = null;
+				}
+
 				var switch_instance_changes = {};
 				if (changed.items) switch_instance_changes.item = ctx.item;
+				if (changed.getOptionLabel) switch_instance_changes.getOptionLabel = ctx.getOptionLabel;
 
@@ -563,3 +618,3 @@ if (switch_value !== (switch_value = ctx.Item)) {
 						switch_instance._fragment.c();
-						switch_instance._mount(div, text);
+						switch_instance._mount(div, text1);
 					} else {
@@ -575,3 +630,3 @@ switch_instance = null;
 				div._svelte.ctx = ctx;
-				if ((changed.hoverItemIndex || changed.items || changed.selectedItem) && div_class_value !== (div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.item.index, ctx.items, ctx.selectedItem) + " svelte-4st1d1")) {
+				if ((changed.hoverItemIndex || changed.items || changed.selectedValue) && div_class_value !== (div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue) + " svelte-1h82xdc")) {
 					div.className = div_class_value;
@@ -582,3 +637,5 @@ }
 			d(detach) {
+				if (if_block) if_block.d(detach);
 				if (detach) {
+					detachNode(text0);
 					detachNode(div);
@@ -601,3 +658,3 @@ }
 
-		if (!document.getElementById("svelte-4st1d1-style")) add_css();
+		if (!document.getElementById("svelte-1h82xdc-style")) add_css();
 
@@ -624,3 +681,3 @@ this._fragment = create_main_fragment$1(this, this._state);
 	function create_main_fragment$2(component, ctx) {
-		var text_value = ctx.selectedItem.label, text;
+		var text_value = ctx.getSelectionLabel(ctx.selectedValue), text;
 
@@ -637,3 +694,3 @@ return {
 			p(changed, ctx) {
-				if ((changed.selectedItem) && text_value !== (text_value = ctx.selectedItem.label)) {
+				if ((changed.getSelectionLabel || changed.selectedValue) && text_value !== (text_value = ctx.getSelectionLabel(ctx.selectedValue))) {
 					setData(text, text_value);
@@ -666,2 +723,163 @@ }
 
+	/* src/MultiSelection.html generated by Svelte v2.15.3 */
+
+	var methods$1 = {
+	  handleClear(i, event) {
+	    event.stopPropagation();
+	    this.fire('multiItemClear', { i });
+	  }
+	};
+
+	function add_css$1() {
+		var style = createElement("style");
+		style.id = 'svelte-9z9fu7-style';
+		style.textContent = ".multiSelectItem.svelte-9z9fu7{background:#EBEDEF;margin-right:5px;border-radius:16px;line-height:32px;display:flex;cursor:default;height:32px;margin-top:6px;padding:0 10px 0 15px}.multiSelectItem_label.svelte-9z9fu7{margin-right:5px}.multiSelectItem_clear.svelte-9z9fu7{border-radius:0 4px 4px 0;width:20px;text-align:center}.multiSelectItem.svelte-9z9fu7:hover,.multiSelectItem.active.svelte-9z9fu7{background-color:#006FFF;color:#fff}.multiSelectItem_clear.svelte-9z9fu7{border-radius:50%;background:#52616F;width:16px;height:16px;position:relative;top:8px;text-align:center;padding:1px}.multiSelectItem_clear.svelte-9z9fu7:hover,.active.svelte-9z9fu7 .multiSelectItem_clear.svelte-9z9fu7{background:#fff}.multiSelectItem_clear.svelte-9z9fu7:hover svg.svelte-9z9fu7,.active.svelte-9z9fu7 .multiSelectItem_clear svg.svelte-9z9fu7{fill:#006FFF}.multiSelectItem_clear.svelte-9z9fu7 svg.svelte-9z9fu7{fill:#EBEDEF;vertical-align:top}";
+		append(document.head, style);
+	}
+
+	function click_handler$1(event) {
+		const { component, ctx } = this._svelte;
+
+		component.handleClear(ctx.i, event);
+	}
+
+	function get_each_context$1(ctx, list, i) {
+		const child_ctx = Object.create(ctx);
+		child_ctx.value = list[i];
+		child_ctx.i = i;
+		return child_ctx;
+	}
+
+	function create_main_fragment$3(component, ctx) {
+		var each_anchor;
+
+		var each_value = ctx.selectedValue;
+
+		var each_blocks = [];
+
+		for (var i = 0; i < each_value.length; i += 1) {
+			each_blocks[i] = create_each_block$1(component, get_each_context$1(ctx, each_value, i));
+		}
+
+		return {
+			c() {
+				for (var i = 0; i < each_blocks.length; i += 1) {
+					each_blocks[i].c();
+				}
+
+				each_anchor = createComment();
+			},
+
+			m(target, anchor) {
+				for (var i = 0; i < each_blocks.length; i += 1) {
+					each_blocks[i].m(target, anchor);
+				}
+
+				insert(target, each_anchor, anchor);
+			},
+
+			p(changed, ctx) {
+				if (changed.activeSelectedValue || changed.selectedValue) {
+					each_value = ctx.selectedValue;
+
+					for (var i = 0; i < each_value.length; i += 1) {
+						const child_ctx = get_each_context$1(ctx, each_value, i);
+
+						if (each_blocks[i]) {
+							each_blocks[i].p(changed, child_ctx);
+						} else {
+							each_blocks[i] = create_each_block$1(component, child_ctx);
+							each_blocks[i].c();
+							each_blocks[i].m(each_anchor.parentNode, each_anchor);
+						}
+					}
+
+					for (; i < each_blocks.length; i += 1) {
+						each_blocks[i].d(1);
+					}
+					each_blocks.length = each_value.length;
+				}
+			},
+
+			d(detach) {
+				destroyEach(each_blocks, detach);
+
+				if (detach) {
+					detachNode(each_anchor);
+				}
+			}
+		};
+	}
+
+	// (1:0) {#each selectedValue as value, i}
+	function create_each_block$1(component, ctx) {
+		var div2, div0, text0_value = ctx.value.label, text0, text1, div1, text2, div2_class_value;
+
+		return {
+			c() {
+				div2 = createElement("div");
+				div0 = createElement("div");
+				text0 = createText(text0_value);
+				text1 = createText("\n  ");
+				div1 = createElement("div");
+				div1.innerHTML = `<svg width="100%" height="100%" viewBox="-2 -2 50 50" focusable="false" role="presentation" class="svelte-9z9fu7"><path 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"></path></svg>`;
+				text2 = createText("\n");
+				div0.className = "multiSelectItem_label svelte-9z9fu7";
+
+				div1._svelte = { component, ctx };
+
+				addListener(div1, "click", click_handler$1);
+				div1.className = "multiSelectItem_clear svelte-9z9fu7";
+				div2.className = div2_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " svelte-9z9fu7";
+			},
+
+			m(target, anchor) {
+				insert(target, div2, anchor);
+				append(div2, div0);
+				append(div0, text0);
+				append(div2, text1);
+				append(div2, div1);
+				append(div2, text2);
+			},
+
+			p(changed, _ctx) {
+				ctx = _ctx;
+				if ((changed.selectedValue) && text0_value !== (text0_value = ctx.value.label)) {
+					setData(text0, text0_value);
+				}
+
+				div1._svelte.ctx = ctx;
+				if ((changed.activeSelectedValue) && div2_class_value !== (div2_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " svelte-9z9fu7")) {
+					div2.className = div2_class_value;
+				}
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(div2);
+				}
+
+				removeListener(div1, "click", click_handler$1);
+			}
+		};
+	}
+
+	function MultiSelection(options) {
+		init(this, options);
+		this._state = assign({}, options.data);
+		this._intro = true;
+
+		if (!document.getElementById("svelte-9z9fu7-style")) add_css$1();
+
+		this._fragment = create_main_fragment$3(this, this._state);
+
+		if (options.target) {
+			this._fragment.c();
+			this._mount(options.target, options.anchor);
+		}
+	}
+
+	assign(MultiSelection.prototype, proto);
+	assign(MultiSelection.prototype, methods$1);
+
 	/* src/Select.html generated by Svelte v2.15.3 */
@@ -671,32 +889,89 @@
 
-	function showSelectedItem({selectedItem, filterText}) {
-	  return selectedItem && filterText.length === 0;
+	function containerClasses({isMulti, isDisabled, isFocused}) {
+	  let classes = `selectContainer`;
+	  classes += isMulti ? ' multiSelect' : '';
+	  classes += isDisabled ? ' disabled' : '';
+	  classes += isFocused ? ' focused' : '';
+
+	  return classes;
 	}
-	function placeholderText({selectedItem}) {
-	  return selectedItem ? '' : 'Select...'
+	function showSelectedItem({selectedValue, filterText}) {
+	  return selectedValue && filterText.length === 0;
 	}
-	function filteredItems({items, filterText}) {
-	  const itemsWithIndex = items.map((item, i) => {
-	    item.index = i;
-	    return item;
+	function placeholderText({selectedValue, placeholder}) {
+	  return selectedValue ? '' : placeholder
+	}
+	function filteredItems({items, filterText, groupBy, groupFilter, getOptionLabel, isMulti, selectedValue}) {
+	  const filteredItems = items.filter(item => {
+	    let keepItem = true;
+
+	    if (isMulti && selectedValue) {
+	      keepItem = !selectedValue.find(({value}) => {
+	        return value === item.value
+	      });
+	    }
+
+	    if (keepItem && filterText.length < 1) return true;
+	    return keepItem && getOptionLabel(item).toLowerCase().includes(filterText.toLowerCase());
 	  });
-	  return itemsWithIndex.filter(item => {
-	    if (filterText.length < 1) return true;
-	    return item.label.toLowerCase().includes(filterText.toLowerCase())
-	  })
+
+	  if (groupBy) {
+	    const groupValues = [];
+	    const groups = {};
+
+	    filteredItems.forEach((item) => {
+	      const groupValue = groupBy(item);
+
+	      if (!groupValues.includes(groupValue)) {
+	        groupValues.push(groupValue);
+	        groups[groupValue] = [];
+	        groups[groupValue].push(Object.assign({groupValue}, item));
+	      } else {
+	        groups[groupValue].push(Object.assign({}, item));
+	      }
+
+	      groups[groupValue].push();
+	    });
+
+	    const sortedGroupedItems = [];
+
+	    groupFilter(groupValues).forEach((groupValue) => {
+	      sortedGroupedItems.push(...groups[groupValue]);
+	    });
+
+	    return sortedGroupedItems;
+	  }
+
+	  return filteredItems;
 	}
 	function data$1() {
 	  return {
+	    Item,
+	    Selection,
+	    MultiSelection,
 	    items: [],
 	    filterText: '',
+	    placeholder: 'Select...',
 	    listOpen: false,
-	    Item,
-	    Selection,
-	    paddingLeft: 0,
+	    containerStyles: undefined,
 	    list: undefined,
 	    target: undefined,
-	    selectedItem: undefined
+	    selectedValue: undefined,
+	    groupBy: undefined,
+	    activeSelectedValue: undefined,
+	    isClearable: true,
+	    isMulti: false,
+	    isSearchable: true,
+	    groupFilter: (groups) => groups,
+	    getOptionLabel: (option) => option.label,
+	    getSelectionLabel: (option) => option.label,
 	  }
 	}
-	var methods$1 = {
+	var methods$2 = {
+	  handleMultiItemClear(i) {
+	    const {selectedValue} = this.get();
+	    selectedValue.splice(i, 1);
+	    this.set({selectedValue: selectedValue.length > 0 ? selectedValue : undefined});
+	    this.getPosition();
+	  },
 	  getPosition() {
@@ -712,3 +987,3 @@ const {target} = this.get();
 	  handleKeyDown(e) {
-	    const {isFocused, listOpen} = this.get();
+	    let {isFocused, listOpen, selectedValue, filterText, isMulti, activeSelectedValue} = this.get();
 	    if (!isFocused) return;
@@ -719,7 +994,7 @@
 	        e.preventDefault();
-	        this.set({listOpen: true});
+	        this.set({listOpen: true, activeSelectedValue: undefined});
 	        break;
 	      case 'ArrowUp':
 	        e.preventDefault();
-	        this.set({listOpen: true});
+	        this.set({listOpen: true, activeSelectedValue: undefined});
 	        break;
@@ -729,2 +1004,26 @@ case 'Tab':
 	        break;
+	      case 'Backspace':
+	        if (!isMulti || filterText.length > 0) return;
+	        this.handleMultiItemClear(activeSelectedValue !== undefined ? activeSelectedValue : selectedValue.length - 1);
+	        if (activeSelectedValue === 0) break;
+	        this.set({activeSelectedValue: selectedValue.length > activeSelectedValue ? activeSelectedValue - 1 : undefined });
+	        break;
+	      case 'ArrowLeft':
+	        if (!isMulti || filterText.length > 0) return;
+	        if (activeSelectedValue === undefined) {
+	          activeSelectedValue = selectedValue.length - 1;
+	        } else if (selectedValue.length > activeSelectedValue && activeSelectedValue !== 0) {
+	          activeSelectedValue -= 1;
+	        }
+	        this.set({activeSelectedValue});
+	        break;
+	      case 'ArrowRight':
+	        if (!isMulti || filterText.length > 0 || activeSelectedValue === undefined) return;
+	        if (activeSelectedValue === selectedValue.length - 1) {
+	          activeSelectedValue = undefined;
+	        } else if (activeSelectedValue < selectedValue.length - 1) {
+	          activeSelectedValue += 1;
+	        }
+	        this.set({activeSelectedValue});
+	        break;
 	    }
@@ -738,3 +1037,3 @@ },
 	    let {list, target} = this.get();
-	    this.set({filterText: ''});
+	    this.set({filterText: '', activeSelectedValue: undefined});
 
@@ -746,3 +1045,3 @@ if (!list) return;
 	    if (!target) return;
-	    target.remove();
+	    target.parentNode.removeChild(target);
 	    target = undefined;
@@ -755,3 +1054,3 @@
 	    if (this.refs.container.contains(event.target)) return;
-	    this.set({isFocused: false, listOpen: false});
+	    this.set({isFocused: false, listOpen: false, activeSelectedValue: undefined});
 	    if (this.refs.input) this.refs.input.blur();
@@ -766,8 +1065,10 @@ },
 	    e.stopPropagation();
-	    this.set({selectedItem: undefined, listOpen: false});
+	    this.set({selectedValue: undefined, listOpen: false});
 	    this.handleFocus();
 	  },
 	  loadList() {
-	    let {target, list} = this.get();
+	    let {target, list, Item: Item$$1, getOptionLabel, items, selectedValue, filteredItems, isMulti} = this.get();
 	    if (target && list) return;
+
+	    const data = {Item: Item$$1};
 	    target = document.createElement('div');
@@ -781,18 +1082,16 @@
 	    this.set({list, target});
-
 	    this.getPosition();
 	    this.refs.container.appendChild(target);
+
+	    if (getOptionLabel) {
+	      data.getOptionLabel = getOptionLabel;
+	    }
+
 	    list = new List({
 	      target,
-	      data: {
-	        Item: this.get().Item
-	      }
+	      data
 	    });
 
-	    const {items, selectedItem, filteredItems} = this.get();
-
 	    if (items) {
-	      // const match = JSON.stringify(selectedItem);
-	      // const activeItemIndex = items.findIndex(item => JSON.stringify(item) === match);
-	      list.set({items: filteredItems, selectedItem });
+	      list.set({items: filteredItems, selectedValue, isMulti});
 	    }
@@ -802,7 +1101,13 @@
 	      if (newSelection) {
-	        const selection = Object.assign({}, newSelection);
-	        delete selection.index;
+	        const item = Object.assign({}, items.find(item => item.value === newSelection.value));
+	        if (isMulti) {
+	          selectedValue = selectedValue ? selectedValue.concat([item]) : [item];
+	        } else {
+	          selectedValue = item;
+	        }
+
 	        this.set({
-	          selectedItem: {...selectedItem, ...selection},
-	          listOpen: false
+	          selectedValue,
+	          listOpen: false,
+	          activeSelectedValue: undefined
 	        });
@@ -834,5 +1139,8 @@ }
 
-	  if (changed.filterText && current.filterText.length === 1) {
+	  if (changed.filterText) {
 	    this.loadList();
 	    this.set({listOpen: true});
+	    if (current.isMulti) {
+	      this.set({activeSelectedValue: undefined});
+	    }
 	  }
@@ -853,11 +1161,11 @@
 	}
-	function add_css$1() {
+	function add_css$2() {
 		var style = createElement("style");
-		style.id = 'svelte-ehrueq-style';
-		style.textContent = ".selectContainer.svelte-ehrueq{border:1px solid #D8DBDF;border-radius:3px;height:44px;position:relative;padding:0 16px}.selectContainer.svelte-ehrueq input.svelte-ehrueq{border:none;color:#3F4F5F;height:44px;line-height:44px;padding:0 16px;width:100%;background:transparent;font-size:14px;letter-spacing:-0.08px;position:absolute;left:0}.selectContainer.svelte-ehrueq input.svelte-ehrueq::placeholder{color:#78848F}.selectContainer.svelte-ehrueq input.svelte-ehrueq:focus{outline:none}.selectContainer.svelte-ehrueq:hover{border-color:#b2b8bf}.selectContainer.focused.svelte-ehrueq{border-color:#006FE8}.selectContainer.disabled.svelte-ehrueq{background:#F6F7F8;border-color:#F6F7F8;color:#C1C6CC}.selectContainer.disabled.svelte-ehrueq input.svelte-ehrueq::placeholder{color:#C1C6CC}.selectedItem.svelte-ehrueq{line-height:44px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;padding-right:20px}.selectedItem.svelte-ehrueq:focus{outline:none}.clearSelectedItem.svelte-ehrueq{position:absolute;right:10px;top:12px;width:20px;height:20px;color:#c5cacf}.clearSelectedItem.svelte-ehrueq:hover{color:#2c3e50}.selectContainer.focused.svelte-ehrueq .clearSelectedItem.svelte-ehrueq{color:#3F4F5F}";
+		style.id = 'svelte-84hful-style';
+		style.textContent = ".selectContainer.svelte-84hful{border:1px solid #D8DBDF;border-radius:3px;height:44px;position:relative;display:flex;padding:0 16px}.selectContainer.svelte-84hful input.svelte-84hful{cursor:default;border:none;color:#3F4F5F;height:42px;line-height:42px;padding:0 16px;width:100%;background:transparent;font-size:14px;letter-spacing:-0.08px;position:absolute;left:0}.selectContainer.svelte-84hful input.svelte-84hful::placeholder{color:#78848F}.selectContainer.svelte-84hful input.svelte-84hful:focus{outline:none}.selectContainer.svelte-84hful:hover{border-color:#b2b8bf}.selectContainer.focused.svelte-84hful{border-color:#006FE8}.selectContainer.disabled.svelte-84hful{background:#F6F7F8;border-color:#F6F7F8;color:#C1C6CC}.selectContainer.disabled.svelte-84hful input.svelte-84hful::placeholder{color:#C1C6CC}.selectedItem.svelte-84hful{line-height:42px;height:42px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;padding-right:20px}.selectedItem.svelte-84hful:focus{outline:none}.clearSelect.svelte-84hful{position:absolute;right:10px;top:11px;bottom:11px;width:20px;color:#c5cacf;flex:none !important}.clearSelect.svelte-84hful:hover{color:#2c3e50}.selectContainer.focused.svelte-84hful .clearSelect.svelte-84hful{color:#3F4F5F}.indicator.svelte-84hful{position:absolute;right:10px;top:11px;width:20px;height:20px;color:#c5cacf}.indicator.svelte-84hful svg.svelte-84hful{display:inline-block;fill:currentcolor;line-height:1;stroke:currentcolor;stroke-width:0}.spinner.svelte-84hful{position:absolute;right:10px;top:11px;width:20px;height:20px;color:#51ce6c;animation:svelte-84hful-rotate 0.75s linear infinite}.spinner_icon.svelte-84hful{display:block;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;-webkit-transform:none}.spinner_path.svelte-84hful{stroke-dasharray:90;stroke-linecap:round}.multiSelect.svelte-84hful{display:flex;padding:0 35px 0 16px;height:auto;flex-wrap:wrap}.multiSelect.svelte-84hful>.svelte-84hful{flex:1 1 50px}.selectContainer.multiSelect.svelte-84hful input.svelte-84hful{padding:0;position:relative}@keyframes svelte-84hful-rotate{100%{transform:rotate(360deg)}}";
 		append(document.head, style);
 	}
 
-	function create_main_fragment$3(component, ctx) {
-		var div, input, input_updating = false, text, div_class_value;
+	function create_main_fragment$4(component, ctx) {
+		var div, text0, input, input_updating = false, input_readonly_value, text1, text2, text3, text4;
 
@@ -876,2 +1184,4 @@ function onwindowclick(event) {
 
+		var if_block0 = (ctx.isMulti && ctx.selectedValue && ctx.selectedValue.length > 0) && create_if_block_4(component, ctx);
+
 		function input_input_handler() {
@@ -887,4 +1197,10 @@ input_updating = true;
 
-		var if_block = (ctx.showSelectedItem) && create_if_block(component, ctx);
+		var if_block1 = (!ctx.isMulti && ctx.showSelectedItem) && create_if_block_3(component, ctx);
 
+		var if_block2 = (ctx.showSelectedItem && ctx.isClearable && !ctx.isDisabled && !ctx.isWaiting) && create_if_block_2(component, ctx);
+
+		var if_block3 = (!ctx.isSearchable && !ctx.isDisabled && !ctx.isWaiting && (ctx.showSelectedItem && !ctx.isClearable || !ctx.showSelectedItem)) && create_if_block_1(component, ctx);
+
+		var if_block4 = (ctx.isWaiting) && create_if_block$1(component, ctx);
+
 		function click_handler(event) {
@@ -897,13 +1213,25 @@ component.handleClick();
 				div = createElement("div");
+				if (if_block0) if_block0.c();
+				text0 = createText("\n\n  ");
 				input = createElement("input");
-				text = createText("\n\n    ");
-				if (if_block) if_block.c();
+				text1 = createText("\n\n  ");
+				if (if_block1) if_block1.c();
+				text2 = createText("\n\n  ");
+				if (if_block2) if_block2.c();
+				text3 = createText("\n\n  ");
+				if (if_block3) if_block3.c();
+				text4 = createText("\n\n  ");
+				if (if_block4) if_block4.c();
 				addListener(input, "input", input_input_handler);
 				addListener(input, "focus", focus_handler);
+				input.readOnly = input_readonly_value = !ctx.isSearchable;
+				input.autocomplete = "off";
+				setAttribute(input, "autocorrect", "off");
+				input.spellcheck = "false";
 				input.placeholder = ctx.placeholderText;
 				input.disabled = ctx.isDisabled;
 				input.style.cssText = ctx.inputStyles;
-				input.className = "svelte-ehrueq";
+				input.className = "svelte-84hful";
 				addListener(div, "click", click_handler);
-				div.className = div_class_value = "selectContainer " + (ctx.isDisabled ? 'disabled' : '') + (ctx.isFocused ? 'focused' : '') + " svelte-ehrueq";
+				div.className = "" + ctx.containerClasses + " svelte-84hful";
 				div.style.cssText = ctx.containerStyles;
@@ -914,2 +1242,4 @@ },
 				insert(target, div, anchor);
+				if (if_block0) if_block0.m(div, null);
+				append(div, text0);
 				append(div, input);
@@ -920,4 +1250,10 @@ component.refs.input = input;
 
-				append(div, text);
-				if (if_block) if_block.m(div, null);
+				append(div, text1);
+				if (if_block1) if_block1.m(div, null);
+				append(div, text2);
+				if (if_block2) if_block2.m(div, null);
+				append(div, text3);
+				if (if_block3) if_block3.m(div, null);
+				append(div, text4);
+				if (if_block4) if_block4.m(div, null);
 				component.refs.container = div;
@@ -927,3 +1263,20 @@ },
 			p(changed, ctx) {
+				if (ctx.isMulti && ctx.selectedValue && ctx.selectedValue.length > 0) {
+					if (if_block0) {
+						if_block0.p(changed, ctx);
+					} else {
+						if_block0 = create_if_block_4(component, ctx);
+						if_block0.c();
+						if_block0.m(div, text0);
+					}
+				} else if (if_block0) {
+					if_block0.d(1);
+					if_block0 = null;
+				}
+
 				if (!input_updating && changed.filterText) input.value = ctx.filterText;
+				if ((changed.isSearchable) && input_readonly_value !== (input_readonly_value = !ctx.isSearchable)) {
+					input.readOnly = input_readonly_value;
+				}
+
 				if (changed.placeholderText) {
@@ -941,19 +1294,52 @@ input.placeholder = ctx.placeholderText;
 
-				if (ctx.showSelectedItem) {
-					if (if_block) {
-						if_block.p(changed, ctx);
+				if (!ctx.isMulti && ctx.showSelectedItem) {
+					if (if_block1) {
+						if_block1.p(changed, ctx);
 					} else {
-						if_block = create_if_block(component, ctx);
-						if_block.c();
-						if_block.m(div, null);
+						if_block1 = create_if_block_3(component, ctx);
+						if_block1.c();
+						if_block1.m(div, text2);
 					}
-				} else if (if_block) {
-					if_block.d(1);
-					if_block = null;
+				} else if (if_block1) {
+					if_block1.d(1);
+					if_block1 = null;
 				}
 
-				if ((changed.isDisabled || changed.isFocused) && div_class_value !== (div_class_value = "selectContainer " + (ctx.isDisabled ? 'disabled' : '') + (ctx.isFocused ? 'focused' : '') + " svelte-ehrueq")) {
-					div.className = div_class_value;
+				if (ctx.showSelectedItem && ctx.isClearable && !ctx.isDisabled && !ctx.isWaiting) {
+					if (!if_block2) {
+						if_block2 = create_if_block_2(component, ctx);
+						if_block2.c();
+						if_block2.m(div, text3);
+					}
+				} else if (if_block2) {
+					if_block2.d(1);
+					if_block2 = null;
 				}
 
+				if (!ctx.isSearchable && !ctx.isDisabled && !ctx.isWaiting && (ctx.showSelectedItem && !ctx.isClearable || !ctx.showSelectedItem)) {
+					if (!if_block3) {
+						if_block3 = create_if_block_1(component, ctx);
+						if_block3.c();
+						if_block3.m(div, text4);
+					}
+				} else if (if_block3) {
+					if_block3.d(1);
+					if_block3 = null;
+				}
+
+				if (ctx.isWaiting) {
+					if (!if_block4) {
+						if_block4 = create_if_block$1(component, ctx);
+						if_block4.c();
+						if_block4.m(div, null);
+					}
+				} else if (if_block4) {
+					if_block4.d(1);
+					if_block4 = null;
+				}
+
+				if (changed.containerClasses) {
+					div.className = "" + ctx.containerClasses + " svelte-84hful";
+				}
+
 				if (changed.containerStyles) {
@@ -975,6 +1361,10 @@ div.style.cssText = ctx.containerStyles;
 
+				if (if_block0) if_block0.d();
 				removeListener(input, "input", input_input_handler);
 				removeListener(input, "focus", focus_handler);
 				if (component.refs.input === input) component.refs.input = null;
-				if (if_block) if_block.d();
+				if (if_block1) if_block1.d();
+				if (if_block2) if_block2.d();
+				if (if_block3) if_block3.d();
+				if (if_block4) if_block4.d();
 				removeListener(div, "click", click_handler);
@@ -986,10 +1376,99 @@ if (component.refs.container === div) component.refs.container = null;
 
-	// (8:4) {#if showSelectedItem }
-	function create_if_block(component, ctx) {
-		var div, text, if_block_anchor;
+	// (13:2) {#if isMulti && selectedValue && selectedValue.length > 0}
+	function create_if_block_4(component, ctx) {
+		var switch_instance_anchor;
 
+		var switch_value = ctx.MultiSelection;
+
+		function switch_props(ctx) {
+			var switch_instance_initial_data = {
+			 	selectedValue: ctx.selectedValue,
+			 	getSelectionLabel: ctx.getSelectionLabel,
+			 	activeSelectedValue: ctx.activeSelectedValue
+			 };
+			return {
+				root: component.root,
+				store: component.store,
+				data: switch_instance_initial_data
+			};
+		}
+
+		if (switch_value) {
+			var switch_instance = new switch_value(switch_props(ctx));
+		}
+
+		function switch_instance_multiItemClear(event) {
+			component.handleMultiItemClear(event.i);
+		}
+
+		if (switch_instance) switch_instance.on("multiItemClear", switch_instance_multiItemClear);
+		function switch_instance_focus(event) {
+			component.handleFocus();
+		}
+
+		if (switch_instance) switch_instance.on("focus", switch_instance_focus);
+
+		return {
+			c() {
+				if (switch_instance) switch_instance._fragment.c();
+				switch_instance_anchor = createComment();
+			},
+
+			m(target, anchor) {
+				if (switch_instance) {
+					switch_instance._mount(target, anchor);
+				}
+
+				insert(target, switch_instance_anchor, anchor);
+			},
+
+			p(changed, ctx) {
+				var switch_instance_changes = {};
+				if (changed.selectedValue) switch_instance_changes.selectedValue = ctx.selectedValue;
+				if (changed.getSelectionLabel) switch_instance_changes.getSelectionLabel = ctx.getSelectionLabel;
+				if (changed.activeSelectedValue) switch_instance_changes.activeSelectedValue = ctx.activeSelectedValue;
+
+				if (switch_value !== (switch_value = ctx.MultiSelection)) {
+					if (switch_instance) {
+						switch_instance.destroy();
+					}
+
+					if (switch_value) {
+						switch_instance = new switch_value(switch_props(ctx));
+						switch_instance._fragment.c();
+						switch_instance._mount(switch_instance_anchor.parentNode, switch_instance_anchor);
+
+						switch_instance.on("multiItemClear", switch_instance_multiItemClear);
+						switch_instance.on("focus", switch_instance_focus);
+					} else {
+						switch_instance = null;
+					}
+				}
+
+				else if (switch_value) {
+					switch_instance._set(switch_instance_changes);
+				}
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(switch_instance_anchor);
+				}
+
+				if (switch_instance) switch_instance.destroy(detach);
+			}
+		};
+	}
+
+	// (37:2) {#if !isMulti && showSelectedItem }
+	function create_if_block_3(component, ctx) {
+		var div;
+
 		var switch_value = ctx.Selection;
 
 		function switch_props(ctx) {
-			var switch_instance_initial_data = { selectedItem: ctx.selectedItem };
+			var switch_instance_initial_data = {
+			 	selectedValue: ctx.selectedValue,
+			 	getSelectionLabel: ctx.getSelectionLabel
+			 };
 			return {
@@ -1010,4 +1489,2 @@ root: component.root,
 
-		var if_block = (!ctx.isDisabled) && create_if_block_1(component, ctx);
-
 		return {
@@ -1017,7 +1494,4 @@ c() {
 				if (switch_instance) switch_instance._fragment.c();
-				text = createText("\n    ");
-				if (if_block) if_block.c();
-				if_block_anchor = createComment();
 				addListener(div, "focus", focus_handler);
-				div.className = "selectedItem svelte-ehrueq";
+				div.className = "selectedItem svelte-84hful";
 			},
@@ -1031,7 +1505,2 @@
 				}
-
-				component.refs.selectedItem = div;
-				insert(target, text, anchor);
-				if (if_block) if_block.m(target, anchor);
-				insert(target, if_block_anchor, anchor);
 			},
@@ -1041,3 +1510,4 @@
 				var switch_instance_changes = {};
-				if (changed.selectedItem) switch_instance_changes.selectedItem = ctx.selectedItem;
+				if (changed.selectedValue) switch_instance_changes.selectedValue = ctx.selectedValue;
+				if (changed.getSelectionLabel) switch_instance_changes.getSelectionLabel = ctx.getSelectionLabel;
 
@@ -1061,13 +1531,2 @@ if (switch_value !== (switch_value = ctx.Selection)) {
 				}
-
-				if (!ctx.isDisabled) {
-					if (!if_block) {
-						if_block = create_if_block_1(component, ctx);
-						if_block.c();
-						if_block.m(if_block_anchor.parentNode, if_block_anchor);
-					}
-				} else if (if_block) {
-					if_block.d(1);
-					if_block = null;
-				}
 			},
@@ -1082,11 +1541,2 @@
 				removeListener(div, "focus", focus_handler);
-				if (component.refs.selectedItem === div) component.refs.selectedItem = null;
-				if (detach) {
-					detachNode(text);
-				}
-
-				if (if_block) if_block.d(detach);
-				if (detach) {
-					detachNode(if_block_anchor);
-				}
 			}
@@ -1096,4 +1546,4 @@ };
 
-	// (12:4) {#if !isDisabled}
-	function create_if_block_1(component, ctx) {
+	// (43:2) {#if showSelectedItem && isClearable && !isDisabled && !isWaiting}
+	function create_if_block_2(component, ctx) {
 		var div;
@@ -1108,5 +1558,5 @@
 				div = createElement("div");
-				div.innerHTML = `<svg class="icon svelte-qw6fkp" width="100%" height="100%" viewBox="-2 -2 50 50" focusable="false" 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"></path></svg>`;
+				div.innerHTML = `<svg width="100%" height="100%" viewBox="-2 -2 50 50" focusable="false" role="presentation" class="svelte-84hful"><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"></path></svg>`;
 				addListener(div, "click", click_handler);
-				div.className = "clearSelectedItem svelte-ehrueq";
+				div.className = "clearSelect svelte-84hful";
 			},
@@ -1128,2 +1578,48 @@
 
+	// (53:2) {#if !isSearchable && !isDisabled && !isWaiting && (showSelectedItem && !isClearable || !showSelectedItem)}
+	function create_if_block_1(component, ctx) {
+		var div;
+
+		return {
+			c() {
+				div = createElement("div");
+				div.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 20 20" focusable="false" class="css-19bqh2r svelte-84hful"><path 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"></path></svg>`;
+				div.className = "indicator svelte-84hful";
+			},
+
+			m(target, anchor) {
+				insert(target, div, anchor);
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(div);
+				}
+			}
+		};
+	}
+
+	// (62:2) {#if isWaiting}
+	function create_if_block$1(component, ctx) {
+		var div;
+
+		return {
+			c() {
+				div = createElement("div");
+				div.innerHTML = `<svg class="spinner_icon svelte-84hful" viewBox="25 25 50 50"><circle class="spinner_path svelte-84hful" cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10"></circle></svg>`;
+				div.className = "spinner svelte-84hful";
+			},
+
+			m(target, anchor) {
+				insert(target, div, anchor);
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(div);
+				}
+			}
+		};
+	}
+
 	function Select(options) {
@@ -1134,3 +1630,3 @@ init(this, options);
 
-		this._recompute({ selectedItem: 1, filterText: 1, items: 1 }, this._state);
+		this._recompute({ isMulti: 1, isDisabled: 1, isFocused: 1, selectedValue: 1, filterText: 1, placeholder: 1, items: 1, groupBy: 1, groupFilter: 1, getOptionLabel: 1 }, this._state);
 		this._intro = true;
@@ -1142,7 +1638,7 @@
 
-		if (!document.getElementById("svelte-ehrueq-style")) add_css$1();
+		if (!document.getElementById("svelte-84hful-style")) add_css$2();
 
 		onstate.call(this, { changed: assignTrue({}, this._state), current: this._state });
 
-		this._fragment = create_main_fragment$3(this, this._state);
+		this._fragment = create_main_fragment$4(this, this._state);
 
@@ -1163,14 +1659,18 @@ this.root._oncreate.push(() => {
 	assign(Select.prototype, proto);
-	assign(Select.prototype, methods$1);
+	assign(Select.prototype, methods$2);
 
 	Select.prototype._recompute = function _recompute(changed, state) {
-		if (changed.selectedItem || changed.filterText) {
+		if (changed.isMulti || changed.isDisabled || changed.isFocused) {
+			if (this._differs(state.containerClasses, (state.containerClasses = containerClasses(state)))) changed.containerClasses = true;
+		}
+
+		if (changed.selectedValue || changed.filterText) {
 			if (this._differs(state.showSelectedItem, (state.showSelectedItem = showSelectedItem(state)))) changed.showSelectedItem = true;
 		}
 
-		if (changed.selectedItem) {
+		if (changed.selectedValue || changed.placeholder) {
 			if (this._differs(state.placeholderText, (state.placeholderText = placeholderText(state)))) changed.placeholderText = true;
 		}
 
-		if (changed.items || changed.filterText) {
+		if (changed.items || changed.filterText || changed.groupBy || changed.groupFilter || changed.getOptionLabel || changed.isMulti || changed.selectedValue) {
 			if (this._differs(state.filteredItems, (state.filteredItems = filteredItems(state)))) changed.filteredItems = true;
@@ -1177,0 +1677,0 @@ }

package.json

 {
   "name": "svelte-select",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "repository": "https://[e-mail]/bob-bea-fre/svelte-select.git",
@@ -5,0 +5,0 @@ "description": "A <Select> component for Svelte apps",

README.md

@@ -1,2 +0,2 @@
-# svelte-select ([demo](https://svelte.technology/repl?version=2.16.0&gist=7d765f6616d632702d2131a7dc48ee0d))
+# svelte-select ([demo](https://stackblitz.com/edit/svelte-rhbzxj))
 
@@ -39,2 +39,21 @@ A select component for Svelte apps.
 
+## Select API options (props)
+
+Common props you may want to specify include:
+
+* `filterText` - text to filter list labels by
+* `placeholder` - placeholder text
+* `listOpen` - open/close list
+* `containerStyles` - add/override container styles 
+* `selectedValue` - Selected value(s) 
+* `groupBy` - Function to group list items
+* `isClearable` - Defaults true set to false to disable clear all
+* `isMulti` - Enable multi select
+* `isSearchable` - Defaults true set to false to disable search/filtering
+* `groupFilter` - Override default groupFilter function
+* `getOptionLabel` - Override default getOptionLabel function
+* `getSelectionLabel` - Override default getSelectionLabel function
+
+
+
 ## Development
@@ -46,2 +65,3 @@
 yarn dev
+yarn test:browser
 ```
@@ -61,2 +81,1 @@
 [LIL](LICENSE)
- 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

115364

increased by58.35%

Number of package files

11

increased by10%

Lines of code

2692

increased by45.83%

Number of lines in readme file

79

increased by33.9%

No dependency changes