@kws3/ui 1.7.4 → 1.8.2

package/CHANGELOG.mdx

@@ -1,3 +1,18 @@
+## 1.8.2
+ - Usability fixes for `NumberInput`
+ - New `input_only`, `force_integer`, `style` and `class` props for `NumberInput`
+ - Forward `focus`, `blur` input events for `NumberInput`
+ - Use custom version of `fuzzysearch` for `SearchableSelect` and `MultiSelect`
+ 
+## 1.8.1
+ - New `ScrollableList` component
+
+## 1.8.0
+ - `Modal`, `CardModal` and `ActionSheet` components now play an outro transition instead of abruptly disappearing.
+ - Usability fixes for `SearchableSelect` and `MultiSelect`.
+ - `SearchableSelect` and `MultiSelect` now support loading options via an async function.
+ - `SearchableSelect` and `MultiSelect` now match results using a fuzzy `search_strategy`. This can be changed to old behaviour by specifying `search_strategy="strict"`.
+
 ## 1.7.4
  - Update ApexCharts to version 3.33.2
  - Added support for subscribing to chart events

package/buttons/ConfirmButton.svelte

@@ -28,7 +28,6 @@
   <p class="control">
     {#if _confirm}
       <button
-        role="button"
         class="button is-success is-light is-shadowless is-{size} {button_class}"
         type="button"
         on:click|preventDefault|stopPropagation={cancel}>
@@ -38,7 +37,6 @@
   </p>
   <p class="control is-expanded">
     <button
-      role="button"
       class="button is-{size} {_doing
         ? main_color + ' is-loading'
         : _error

package/controls/NumberInput.svelte

@@ -20,54 +20,84 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {string} [plus_icon="plus"] - Name of the icon that is to be displayed in the plus button, Default: `"plus"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_icon_color="success"] - Color of the Plus Icon, Default: `"success"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_button_color=""] - Color of the Plus Button, Default: `""`
+  @param {boolean} [input_only=false] - Show input without controls, Default: `false`
+  @param {boolean} [force_integer=false] - Prevent decimal numbers such as `1.5`, Default: `false`
+  @param {string} [style=""] - Inline CSS for component, Default: `""`
+  @param {string} [class=""] - CSS classes for component, Default: `""`
 
   ### Events
   - `change` - Triggered when value changes
+  - `blur`
+  - `focus`
 
 -->
-<div class="field has-addons">
-  <div class="control">
-    <button
-      role="button"
-      type="button"
-      class="button is-{size} is-{minus_button_color}"
-      style="box-shadow:none;"
-      on:click={count(-1)}
-      disabled={disabled || value <= min}>
-      <Icon
-        icon={minus_icon}
-        size="small"
-        class="has-text-{minus_icon_color}" />
-    </button>
+{#if input_only}
+  <input
+    {style}
+    data-testid="input"
+    class="input has-text-centered {klass} is-{size} is-{value < min ||
+    value > max
+      ? 'danger'
+      : ''}"
+    type="number"
+    min
+    max
+    {step}
+    {disabled}
+    readonly={!typeable}
+    bind:value
+    on:blur={isBlurred}
+    on:blur
+    on:focus={isFocused}
+    on:focus />
+{:else}
+  <div class="field has-addons {klass}" {style}>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{minus_button_color}"
+        style="box-shadow:none;"
+        on:click={count(-1)}
+        disabled={disabled || value <= min}>
+        <Icon
+          icon={minus_icon}
+          size="small"
+          class="has-text-{minus_icon_color}" />
+      </button>
+    </div>
+    <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
+      <input
+        data-testid="input"
+        class="input has-text-centered is-{size} is-{value < min || value > max
+          ? 'danger'
+          : ''}"
+        type="number"
+        min
+        max
+        {step}
+        {disabled}
+        readonly={!typeable}
+        bind:value
+        on:blur={isBlurred}
+        on:blur
+        on:focus={isFocused}
+        on:focus />
+    </div>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{plus_button_color}"
+        style="box-shadow:none;"
+        on:click|preventDefault={count(+1)}
+        disabled={disabled || value >= max}>
+        <Icon
+          icon={plus_icon}
+          size="small"
+          class="has-text-{plus_icon_color}" />
+      </button>
+    </div>
   </div>
-  <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
-    <input
-      data-testid="input"
-      class="input has-text-centered is-{size} is-{value < min || value > max
-        ? 'danger'
-        : ''}"
-      type="number"
-      min
-      max
-      step
-      {disabled}
-      readonly={!typeable}
-      bind:value
-      on:blur={isBlurred()}
-      on:focus={isFocused()} />
-  </div>
-  <div class="control">
-    <button
-      role="button"
-      type="button"
-      class="button is-{size} is-{plus_button_color}"
-      style="box-shadow:none;"
-      on:click|preventDefault={count(+1)}
-      disabled={disabled || value >= max}>
-      <Icon icon={plus_icon} size="small" class="has-text-{plus_icon_color}" />
-    </button>
-  </div>
-</div>
+{/if}
 
 <style>
   input[type="number"]::-webkit-inner-spin-button,
@@ -160,7 +190,25 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Color of the Plus Button
      * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
      */
-    plus_button_color = "";
+    plus_button_color = "",
+    /**
+     * Show input without controls
+     */
+    input_only = false,
+    /**
+     * Prevent decimal numbers such as `1.5`
+     */
+    force_integer = false,
+    /**
+     * Inline CSS for component
+     */
+    style = "";
+
+  /**
+   * CSS classes for component
+   */
+  let klass = "";
+  export { klass as class };
 
   let _has_focus = false,
     _old_value = null;
@@ -191,6 +239,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 
     if (typeof value == "undefined" || value === null) value = min;
 
+    if (force_integer) value = Math.floor(Number(value));
+
     if (value < min) value = min;
     if (value > max) value = max;
 

package/forms/select/MultiSelect.svelte

@@ -16,6 +16,12 @@ Used to populate the list of options in the dropdown, Default: `[]`
 this property of each object will be searched, Default: `"name"`
   @param {string} [value_key="id"] - If `options` is an array of objects,
 this property of each object will be returned as the value, Default: `"id"`
+  @param {function|null} [search=null] - Async function to fetch options
+
+Only send this prop if you want to fetch `options` asynchronously.
+`options` prop will be ignored if this prop is set., Default: `null`
+  @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
   @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
@@ -24,6 +30,7 @@ this property of each object will be returned as the value, Default: `"id"`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
   @param {boolean} [summary_mode=false] - Shows only the number of items selected, instead of listing all the selected items in the input., Default: `false`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
+  @param {string} [async_search_prompt="Start typing to search..."] - Message to display in dropdown when async search can be performed, Default: `"Start typing to search..."`
   @param {string} [remove_btn_tip="Remove"] - Tooltip text for Remove Item button. This `string` will precede the selected Item Name in the tooltip., Default: `"Remove"`
   @param {string} [remove_all_tip="Remove all"] - Tooltip text for the Clear All button, Default: `"Remove all"`
   @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
@@ -75,7 +82,6 @@ Default value: `<span>{option[search_key] || option}</span>`
             {#if !readonly && !disabled}
               <button
                 on:click|self|stopPropagation={() => remove(tag)}
-                role="button"
                 type="button"
                 class="delete is-small"
                 data-tooltip="{remove_btn_tip} {tag[used_search_key]}" />
@@ -84,6 +90,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         {/each}
       {/if}
     {/if}
+    {#if single}<span>{singleVisibleValue}</span>{/if}
     <input
       class="input is-{size}"
       bind:this={input}
@@ -98,9 +105,13 @@ Default value: `<span>{option[search_key] || option}</span>`
       on:blur={() => setOptionsVisible(false)}
       placeholder={_placeholder} />
   </ul>
-  {#if !readonly && !disabled}
+  {#if search && options_loading}
+    <button
+      type="button"
+      style="border: none;"
+      class="button is-paddingless delete is-medium is-loading" />
+  {:else if !readonly && !disabled}
     <button
-      role="button"
       type="button"
       class="remove-all delete is-small"
       data-tooltip={remove_all_tip}
@@ -133,7 +144,11 @@ Default value: `<span>{option[search_key] || option}</span>`
               {option}>{option[used_search_key] || option}</slot>
           </li>
         {:else}
-          <li class="no-options">{no_options_msg}</li>
+          {#if !options_loading}
+            <li class="no-options">
+              {searchText ? no_options_msg : async_search_prompt}
+            </li>
+          {/if}
         {/each}
       </ul>
     </div>
@@ -142,8 +157,10 @@ Default value: `<span>{option[search_key] || option}</span>`
 
 <script>
   import { Icon, portal } from "@kws3/ui";
-  import { createEventDispatcher, onMount } from "svelte";
+  import { debounce } from "@kws3/ui/utils";
+  import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
+  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -196,6 +213,22 @@ Default value: `<span>{option[search_key] || option}</span>`
    * this property of each object will be returned as the value
    */
   export let value_key = "id";
+  /**
+   * Async function to fetch options
+   *
+   * Only send this prop if you want to fetch `options` asynchronously.
+   * `options` prop will be ignored if this prop is set.
+   *
+   * @type {function|null}
+   */
+  export let search = null;
+
+  /**
+   * Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+   * Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching.
+   * @type {'fuzzy'|'strict'}
+   */
+  export let search_strategy = "fuzzy";
   /**
    * Size of the input
    *  @type {''|'small'|'medium'|'large'}
@@ -230,6 +263,10 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Message to display when no matching options are found
    */
   export let no_options_msg = "No matching options";
+  /**
+   * Message to display in dropdown when async search can be performed
+   */
+  export let async_search_prompt = "Start typing to search...";
   /**
    * Tooltip text for Remove Item button. This `string` will precede the selected Item Name in the tooltip.
    * */
@@ -254,7 +291,8 @@ Default value: `<span>{option[search_key] || option}</span>`
   let klass = "";
   export { klass as class };
 
-  if (!options || !options.length) console.error(`Missing options`);
+  if (!search && (!options || !options.length))
+    console.error(`Missing options`);
 
   if (max !== null && max < 0) {
     throw new TypeError(`max must be null or positive integer, got ${max}`);
@@ -281,9 +319,11 @@ Default value: `<span>{option[search_key] || option}</span>`
     showOptions = false,
     filteredOptions = [], //list of options filtered by search query
     normalisedOptions = [], //list of options normalised
-    selectedOptions = []; //list of options that are selected
+    selectedOptions = [], //list of options that are selected
+    options_loading = false; //indictaes whether async search function is running
 
   $: single = max === 1;
+  $: asyncMode = search && typeof search === "function";
   $: hasValue = single
     ? value !== null && typeof value != "undefined"
       ? true
@@ -324,6 +364,13 @@ Default value: `<span>{option[search_key] || option}</span>`
     else return value.some((v) => matchesValue(v, option));
   };
 
+  $: singleVisibleValue =
+    !searching && single && hasValue && selectedOptions && selectedOptions[0]
+      ? selectedOptions[0][used_search_key]
+      : "";
+
+  $: allow_fuzzy_match = !search && search_strategy === "fuzzy";
+
   //convert arrays of strings into normalised arrays of objects
   function normaliseOptions() {
     let _items = options || [];
@@ -332,15 +379,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       return;
     }
 
-    normalisedOptions = _items.slice().map((item) => {
-      if (typeof item === "object") {
-        return item;
-      }
-      let __obj = {};
-      __obj[used_search_key] = item;
-      __obj[used_value_key] = item;
-      return __obj;
-    });
+    normalisedOptions = normaliseArraysToObjects(_items);
   }
 
   function updateFilteredOptions() {
@@ -353,29 +392,27 @@ Default value: `<span>{option[search_key] || option}</span>`
     } else {
       filter = searchText.toLowerCase();
     }
-
-    filteredOptions = normalisedOptions.slice().filter((item) => {
-      // filter out items that don't match `filter`
-      if (typeof item === "object") {
-        if (used_search_key) {
-          if (
-            typeof item[used_search_key] === "string" &&
-            item[used_search_key].toLowerCase().indexOf(filter) > -1
-          )
-            return true;
-        } else {
-          for (var key in item) {
-            if (
-              typeof item[key] === "string" &&
-              item[key].toLowerCase().indexOf(filter) > -1
-            )
-              return true;
+    if (asyncMode && searching) {
+      debouncedTriggerSearch(filter);
+    } else {
+      filteredOptions = normalisedOptions.slice().filter((item) => {
+        // filter out items that don't match `filter`
+        if (typeof item === "object") {
+          if (used_search_key) {
+            return (
+              typeof item[used_search_key] === "string" &&
+              match(filter, item[used_search_key])
+            );
+          } else {
+            for (var key in item) {
+              return typeof item[key] === "string" && match(filter, item[key]);
+            }
           }
+        } else {
+          return match(filter, item);
         }
-      } else {
-        return item.toLowerCase().indexOf(filter) > -1;
-      }
-    });
+      });
+    }
   }
 
   function fillSelectedOptions() {
@@ -383,9 +420,17 @@ Default value: `<span>{option[search_key] || option}</span>`
       selectedOptions = normalisedOptions.filter(
         (v) => `${v[used_value_key]}` === `${value}`
       );
-      setSingleVisibleValue();
     } else {
-      selectedOptions = normalisedOptions
+      let _normalisedOptions = asyncMode
+        ? [...selectedOptions, ...normalisedOptions].filter(
+            //de-dupe by `used_value_key` when in asyncMode
+            (value, idx, self) =>
+              idx ===
+              self.findIndex((v) => v[used_value_key] === value[used_value_key])
+          )
+        : normalisedOptions;
+
+      selectedOptions = _normalisedOptions
         .filter(
           (v) => value && value.some((vl) => `${v[used_value_key]}` === `${vl}`)
         )
@@ -398,6 +443,23 @@ Default value: `<span>{option[search_key] || option}</span>`
     POPPER && POPPER.update();
   }
 
+  function triggerSearch(filter) {
+    if (filter === "") {
+      //do not trigger async search if filter is empty
+      options = [];
+      searching = false;
+      return;
+    }
+    options_loading = true;
+    search(filter).then((_options) => {
+      options = _options;
+      searching = false;
+      options_loading = false;
+    });
+  }
+
+  const debouncedTriggerSearch = debounce(triggerSearch, 150, false);
+
   onMount(() => {
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
@@ -406,10 +468,25 @@ Default value: `<span>{option[search_key] || option}</span>`
     });
 
     //normalize value for single versus multiselect
-    if (value === null || typeof value == "undefined")
+    if (value === null || typeof value == "undefined") {
       value = single ? null : [];
+    }
 
-    setSingleVisibleValue();
+    if (asyncMode) {
+      // initally on async mode options are empty
+      // so we need to fill selectedOptions with value if value is avaliable
+      options = value ? [...(single ? [value] : [...value])] : [];
+      searching = false;
+      tick().then(() => {
+        normaliseOptions();
+        value = normaliseArraysToObjects(options).map((v) => v[used_value_key]);
+        if (single && Array.isArray(value)) {
+          value = value[0];
+        }
+        fillSelectedOptions();
+        clearDropDownResults();
+      });
+    }
 
     return () => {
       POPPER.destroy();
@@ -424,24 +501,39 @@ Default value: `<span>{option[search_key] || option}</span>`
     let isAlreadySelected = isSelected(token);
 
     if (single) {
-      if (isAlreadySelected) {
-        setSingleVisibleValue();
-      } else {
+      if (!isAlreadySelected) {
         value = token[used_value_key];
-        input && input.blur();
-        setOptionsVisible(false);
         fire("change", { token, type: `add` });
+        //clear dropdown results in asyncMode
+        if (asyncMode) {
+          clearDropDownResults();
+        }
       }
+      setOptionsVisible(false);
     }
 
     if (!isAlreadySelected && !single && (max === null || value.length < max)) {
-      //attach to value array while filtering out invalid values
-      value = [...value, token[used_value_key]].filter((v) => {
-        return normalisedOptions.filter((nv) => nv[used_value_key] === v)
-          .length;
-      });
+      if (asyncMode) {
+        //Do not filter invalid options, as they are async and might not be invalid
+        //but ensure they are unique
+        value = [...value, token[used_value_key]].filter(
+          (v, i, a) => a.indexOf(v) === i
+        );
+      } else {
+        //attach to value array while filtering out invalid values
+        value = [...value, token[used_value_key]].filter((v) => {
+          return normalisedOptions.filter((nv) => nv[used_value_key] === v)
+            .length;
+        });
+      }
+
       searchText = ""; // reset search string on selection
 
+      //clear dropdown results in asyncMode
+      if (asyncMode) {
+        clearDropDownResults();
+      }
+
       if (value && value.length && value.length === max) {
         input && input.blur();
         setOptionsVisible(false);
@@ -460,6 +552,11 @@ Default value: `<span>{option[search_key] || option}</span>`
     value = value.filter
       ? value.filter((item) => !matchesValue(item, token))
       : value;
+
+    //clear dropdown results in asyncMode
+    if (asyncMode) {
+      clearDropDownResults();
+    }
     /**
      * Triggered when an item is removed from selected Items
      */
@@ -483,25 +580,16 @@ Default value: `<span>{option[search_key] || option}</span>`
     showOptions = show;
     if (show) {
       input && input.focus();
-    }
-    POPPER && POPPER.update();
-  }
-
-  function setSingleVisibleValue() {
-    if (single && hasValue) {
-      searchText =
-        selectedOptions && selectedOptions[0]
-          ? selectedOptions[0][used_search_key]
-          : "";
+    } else {
+      searchText = "";
       searching = false;
     }
+    POPPER && POPPER.update();
   }
 
   function handleKeydown(event) {
     if (event.key === `Escape`) {
-      if (!single) {
-        searchText = "";
-      }
+      searchText = "";
     } else {
       setOptionsVisible(true);
     }
@@ -510,9 +598,6 @@ Default value: `<span>{option[search_key] || option}</span>`
       event.preventDefault();
       if (activeOption) {
         handleOptionMouseDown(activeOption);
-        if (!single) {
-          searchText = "";
-        }
       } else {
         // no active option means the options are closed in which case enter means open
         setOptionsVisible(true);
@@ -529,24 +614,31 @@ Default value: `<span>{option[search_key] || option}</span>`
         else activeOption = filteredOptions[newActiveIdx];
       }
     } else if (event.key === `Backspace`) {
-      // only remove selected tags on backspace if there are any and no searchText characters remain
-      if (searchText.length === 0) {
-        if (single) {
-          if (value) {
-            value = null;
-          }
-        } else {
-          if (value && value.length > 0) {
-            value = value.slice(0, value.length - 1);
-          }
+      if (single && hasValue) {
+        //for a single select
+        //if a value is already selected, backspace will clear the value
+        value = null;
+        searchText = "";
+      } else if (!single && searchText.length === 0) {
+        //for a multi select
+        // only remove selected tags on backspace if there are any and no searchText characters remain
+        if (value && value.length > 0) {
+          value = value.slice(0, value.length - 1);
         }
       } else {
-        if (single) {
-          searching = true;
-        }
+        searching = true;
       }
     } else {
+      //for a single select
+      //if a value is already selected,
+      //ignore keys other than navigation, enter and backspace
       if (single) {
+        if (hasValue) {
+          event.preventDefault();
+        } else {
+          searching = true;
+        }
+      } else {
         searching = true;
       }
     }
@@ -565,6 +657,9 @@ Default value: `<span>{option[search_key] || option}</span>`
     fire("change", { token: value, type: `remove` });
     value = single ? null : [];
     searchText = "";
+    if (asyncMode) {
+      clearDropDownResults();
+    }
   };
 
   const matchesValue = (_value, _option) => {
@@ -575,4 +670,30 @@ Default value: `<span>{option[search_key] || option}</span>`
       `${_value[used_value_key] || _value}` === `${_option[used_value_key]}`
     );
   };
+
+  const match = (needle, haystack) => {
+    let _hayStack = haystack.toLowerCase();
+    return allow_fuzzy_match
+      ? fuzzysearch(needle, _hayStack)
+      : _hayStack.indexOf(needle) > -1;
+  };
+
+  const normaliseArraysToObjects = (arr) => {
+    return arr.slice().map((item) => {
+      if (typeof item === "object") {
+        return item;
+      }
+      let __obj = {};
+      __obj[used_search_key] = item;
+      __obj[used_value_key] = item;
+      return __obj;
+    });
+  };
+
+  const clearDropDownResults = () => {
+    tick().then(() => {
+      options = [];
+      searching = false;
+    });
+  };
 </script>

package/forms/select/SearchableSelect.svelte

@@ -16,9 +16,16 @@ this property of each object will be returned as the value, Default: `"id"`
   @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
+  @param {function|null} [search=null] - Async function to fetch options
+
+Only send this prop if you want to fetch `options` asynchronously.
+`options` prop will be ignored if this prop is set., Default: `null`
+  @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
+  @param {string} [async_search_prompt="Start typing to search..."] - Message to display in dropdown when async search can be performed, Default: `"Start typing to search..."`
   @param {string} [remove_all_tip="Clear Selection"] - Tooltip text for the Clear selection button, Default: `"Clear Selection"`
   @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
 Can be a DOM element or a `string` with the CSS selector of the element.
@@ -44,13 +51,16 @@ Default value: `<span>{option[search_key] || option}</span>`
   {options}
   {search_key}
   {value_key}
+  {search_strategy}
   {size}
   {color}
   {style}
   {readonly}
   {disabled}
+  {search}
   {selected_icon}
   {remove_all_tip}
+  async_search_prompt={value ? "Backspace to clear" : async_search_prompt}
   {no_options_msg}
   {dropdown_portal}
   on:change={change}
@@ -118,6 +128,21 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Marks component as read-only
    */
   export let readonly = false;
+  /**
+   * Async function to fetch options
+   *
+   * Only send this prop if you want to fetch `options` asynchronously.
+   * `options` prop will be ignored if this prop is set.
+   *
+   * @type {function|null}
+   */
+  export let search = null;
+  /**
+   * Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+   * Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching.
+   * @type {'fuzzy'|'strict'}
+   */
+  export let search_strategy = "fuzzy";
   /**
    * Disables the component
    */
@@ -130,6 +155,10 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Message to display when no matching options are found
    */
   export let no_options_msg = "No matching options";
+  /**
+   * Message to display in dropdown when async search can be performed
+   */
+  export let async_search_prompt = "Start typing to search...";
   /**
    * Tooltip text for the Clear selection button
    */

package/helpers/ActionSheet.svelte

@@ -19,7 +19,9 @@ If `false` , the component won't have a close button, and will not close on clic
 
 -->
 
-<div class="modal {klass} {is_active ? 'is-active' : ''}" {style}>
+<div
+  class="modal kws-action-sheet-outer {klass} {is_active ? 'is-active' : ''}"
+  {style}>
   {#if is_active}<div
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"

package/helpers/CardModal.svelte

@@ -34,7 +34,6 @@ Only visible when the
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
-
     <div
       transition:scale={{
         duration: transitionDuration,
@@ -83,6 +82,17 @@ Only visible when the
 </div>
 
 <style lang="scss">
+  .modal {
+    display: flex;
+    visibility: hidden;
+    &.is-active {
+      visibility: visible;
+    }
+    .modal-card,
+    .modal-background {
+      transition: all 0.3s;
+    }
+  }
   @media screen and (min-width: 769px), print {
     .modal-card {
       min-width: 640px;

package/helpers/Dialog/index.js

@@ -12,6 +12,8 @@ function createDialog(msg, props) {
 
     dialog.$on("_done", ({ detail }) => {
       fulfil(detail);
+      //Does not outro out because of
+      //https://github.com/sveltejs/svelte/issues/4056
       dialog.$destroy();
     });
   });

package/helpers/Modal.svelte

@@ -26,7 +26,6 @@ Only programmatic closing is possible, Default: `true`
       transition:fade={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
-
     <div
       transition:scale={{
         duration: transitionDuration,
@@ -47,9 +46,19 @@ Only programmatic closing is possible, Default: `true`
 </div>
 
 <style lang="scss">
-  @media screen and (min-width: 769px), print {
+  .modal {
+    display: flex;
+    visibility: hidden;
+    &.is-active {
+      visibility: visible;
+    }
     .modal-content,
-    .modal-card {
+    .modal-background {
+      transition: all 0.3s;
+    }
+  }
+  @media screen and (min-width: 769px), print {
+    .modal-content {
       min-width: 640px;
       &.is-medium {
         width: 70%;

package/helpers/ScrollableList.svelte

@@ -0,0 +1,231 @@
+<!--
+  @component
+
+
+  @param {array} [items=[]] - Array of items, Default: `[]`
+  @param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
+  @param {number | null} [item_height=null] - Height of each list item. If not set, height will be calculated automatically based on each item's offsetHeight, Default: `null`
+  @param {number} [start=0] - First item index rendered inside viewport - readonly, Default: `0`
+  @param {number} [end=0] - Last item index rendered inside viewport - readonly, Default: `0`
+  @param {number} [end_threshold=10] - `end` event will be fired when the list reaches this many items before the end of the list., Default: `10`
+  @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
+  @param {string} [class=""] - CSS classes for scroller container, Default: `""`
+
+  ### Events
+  - `end` - Fired when the list reaches `end_threshold` items before the end of the list.
+
+  ### Slots
+  - `<slot name="default" {item} {index} />` - Default slot for list view items
+  - `<slot name="loader"  />` - Optional slot to display a loading graphic at the bottom of the list
+while more items are loading
+
+-->
+{#if hasResizeObserver}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list with-resize-observer {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    use:resizeObserver
+    on:resize={resize}>
+    <div
+      bind:this={contents}
+      style="padding-top: {top}px; padding-bottom: {bottom}px;">
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{:else}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    bind:offsetHeight={viewport_height}>
+    <div
+      bind:this={contents}
+      style="padding-top: {top}px; padding-bottom: {bottom}px;">
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .kws-scrollable-list {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+    height: 100%;
+  }
+</style>
+
+<script>
+  import { onMount, tick } from "svelte";
+  import { createEventDispatcher } from "svelte";
+  import {
+    resizeObserver,
+    hasResizeObserver,
+  } from "@kws3/ui/utils/resizeObserver";
+
+  const fire = createEventDispatcher();
+  /**
+   * Array of items
+   */
+  export let items = [],
+    /**
+     * Height of the wrapper, CSS String
+     */
+    height = "100%",
+    /**
+     * Height of each list item. If not set, height will be calculated automatically based on each item's offsetHeight
+     * @type {number | null}
+     */
+    item_height = null,
+    /**
+     * First item index rendered inside viewport - readonly
+     */
+    start = 0,
+    /**
+     * Last item index rendered inside viewport - readonly
+     */
+    end = 0,
+    /**
+     *  `end` event will be fired when the list reaches this many items before the end of the list.
+     */
+    end_threshold = 10,
+    /**
+     * Inline CSS for scroller container
+     */
+    style = "";
+
+  /**
+   * CSS classes for scroller container
+   */
+  let klass = "";
+  export { klass as class };
+
+  // local state
+  let height_map = [],
+    rows,
+    viewport,
+    contents,
+    viewport_height = 0,
+    visible,
+    mounted,
+    top = 0,
+    bottom = 0,
+    average_height,
+    items_count = 0;
+
+  $: visible = items.slice(start, end).map((data, i) => {
+    return { index: i + start, data };
+  });
+
+  // whenever `items` changes, invalidate the current heightmap
+  $: items, viewport_height, item_height, mounted, refresh();
+
+  async function refresh() {
+    if (!mounted) return;
+    const scrollTop = viewport.scrollTop;
+    await tick(); // wait until the DOM is up to date
+    let content_height = top - scrollTop;
+    let i = start;
+    while (content_height < viewport_height && i < items.length) {
+      let row = rows[i - start];
+      if (!row) {
+        end = i + 1;
+        await tick(); // render the newly visible row
+        row = rows[i - start];
+      }
+      const row_height = (height_map[i] =
+        item_height || (row ? row.offsetHeight : 0));
+      content_height += row_height;
+      i += 1;
+    }
+    end = i;
+    const remaining = items.length - end;
+    average_height = (top + content_height) / end;
+    bottom = remaining * average_height;
+    height_map.length = items.length;
+  }
+
+  async function handle_scroll() {
+    const scrollTop = viewport.scrollTop;
+    const old_start = start;
+    for (let v = 0; v < rows.length; v += 1) {
+      height_map[start + v] = item_height || rows[v].offsetHeight;
+    }
+    let i = 0;
+    let y = 0;
+    while (i < items.length) {
+      const row_height = height_map[i] || average_height;
+      if (y + row_height > scrollTop) {
+        start = i;
+        top = y;
+        break;
+      }
+      y += row_height;
+      i += 1;
+    }
+    while (i < items.length) {
+      y += height_map[i] || average_height;
+      i += 1;
+      if (y > scrollTop + viewport_height) break;
+    }
+    end = i;
+    const remaining = items.length - end;
+    average_height = y / end;
+    while (i < items.length) height_map[i++] = average_height;
+    bottom = remaining * average_height;
+    // prevent jumping if we scrolled up into unknown territory
+    if (start < old_start) {
+      await tick();
+      let expected_height = 0;
+      let actual_height = 0;
+      for (let i = start; i < old_start; i += 1) {
+        if (rows[i - start]) {
+          expected_height += height_map[i];
+          actual_height += item_height || rows[i - start].offsetHeight;
+        }
+      }
+      const d = actual_height - expected_height;
+      viewport.scrollTo(0, scrollTop + d);
+    }
+    // fire on:end event if we scrolled past the end of the list
+    if (end > items.length - end_threshold) {
+      if (items_count !== items.length) {
+        items_count = items.length;
+        await tick();
+        /**
+         * Fired when the list reaches `end_threshold` items before the end of the list.
+         */
+        fire("end", { start, end });
+      }
+    }
+  }
+
+  const resize = () => {
+    viewport_height = viewport.offsetHeight;
+  };
+
+  // trigger initial refresh
+  onMount(() => {
+    rows = contents.getElementsByClassName("row");
+    mounted = true;
+  });
+</script>

package/index.js

@@ -17,6 +17,7 @@ export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte"
 export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
+export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";
 export {
   Notifications,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.7.4",
+  "version": "1.8.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -29,5 +29,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "fefd40197784db6665d8f74c358931cc5e8becaf"
+  "gitHead": "9fcbe3d34101490398b7bf571334e84e9ee04aee"
 }

package/sliding-panes/SlidingPane.svelte

@@ -25,6 +25,8 @@ This will work only when `track_height` is set to `true`
       : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
     {style}>
     <div
+      use:resizeObserver
+      on:resize={debouncedFireSizeChange}
       bind:this={slideInner}
       class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
         ? 'h-centered'
@@ -52,6 +54,10 @@ This will work only when `track_height` is set to `true`
 <script>
   import { onMount, createEventDispatcher } from "svelte";
   import { debounce } from "@kws3/ui/utils";
+  import {
+    resizeObserver,
+    hasResizeObserver,
+  } from "@kws3/ui/utils/resizeObserver";
 
   const fire = createEventDispatcher();
 
@@ -76,8 +82,7 @@ This will work only when `track_height` is set to `true`
      */
     track_height = true;
 
-  const hasResizeObserver = typeof window.ResizeObserver != "undefined";
-  let _height, slideInner, Observer;
+  let _height, slideInner;
 
   /**
    * CSS classes for the panel
@@ -91,18 +96,22 @@ This will work only when `track_height` is set to `true`
     }
   }
 
+  const max_retries_for_render = 10;
+  let try_count = 0;
   function pollForRender() {
     if (slideInner && typeof slideInner != "undefined") {
       init();
     } else {
       setTimeout(() => {
-        pollForRender();
+        try_count++;
+        if (try_count < max_retries_for_render) {
+          pollForRender();
+        }
       }, 50);
     }
   }
 
   function init() {
-    setupResizeObserver();
     fireSizeChange();
   }
 
@@ -129,23 +138,7 @@ This will work only when `track_height` is set to `true`
 
   const debouncedFireSizeChange = debounce(fireSizeChange, 150, false);
 
-  const setupResizeObserver = () => {
-    if (hasResizeObserver) {
-      if (!slideInner || typeof slideInner == "undefined") {
-        pollForRender();
-      } else {
-        Observer = new ResizeObserver(() => {
-          debouncedFireSizeChange();
-        });
-        Observer.observe(slideInner);
-      }
-    }
-  };
-
   onMount(() => {
     pollForRender();
-    return () => {
-      Observer && Observer.disconnect();
-    };
   });
 </script>

package/styles/ActionSheet.scss

@@ -2,6 +2,16 @@ $kws-actionsheet-background: $background !default;
 $kws-actionsheet-box-shadow: $card-shadow !default;
 $kws-actionsheet-box-radius: $radius !default;
 
+.kws-action-sheet-outer {
+  display: flex;
+  visibility: hidden;
+  &.is-active {
+    visibility: visible;
+  }
+  .modal-background {
+    transition: all 0.3s;
+  }
+}
 .kws-action-sheet {
   border-radius: $kws-actionsheet-box-radius $kws-actionsheet-box-radius 0 0;
   box-shadow: $kws-actionsheet-box-shadow;

package/utils/fuzzysearch.js

@@ -0,0 +1,20 @@
+export default function fuzzysearch(needle, haystack) {
+  var tlen = haystack.length;
+  var qlen = needle.length;
+  if (qlen > tlen) {
+    return false;
+  }
+  if (qlen === tlen) {
+    return needle === haystack;
+  }
+  outer: for (var i = 0, j = 0; i < qlen; i++) {
+    var nch = needle.charCodeAt(i);
+    while (j < tlen) {
+      if (haystack.charCodeAt(j++) === nch) {
+        continue outer;
+      }
+    }
+    return false;
+  }
+  return true;
+}

package/utils/resizeObserver.js

@@ -0,0 +1,24 @@
+export const hasResizeObserver = typeof window.ResizeObserver != "undefined";
+
+/**
+ * Usage: `<div use:resizeObserver on:resize={resizeHandler}>`
+ * @param {HTMLElement} node
+ * @returns {Object}
+ */
+export function resizeObserver(node) {
+  let ro;
+  if (hasResizeObserver) {
+    ro = new ResizeObserver(() => {
+      const e = new CustomEvent("resize", { bubbles: false });
+      node.dispatchEvent(e);
+    });
+
+    ro.observe(node);
+  }
+
+  return {
+    destroy() {
+      hasResizeObserver && ro.disconnect();
+    },
+  };
+}