@kws3/ui 1.8.1 → 1.8.4

package/CHANGELOG.mdx

@@ -1,3 +1,20 @@
+## 1.8.4
+ - New `AutoComplete` component
+ - Make options text size match the input `size` in `MultiSelect` and `SearchableSelect`.
+ - Prevent default arrow up/down behaviour on `MultiSelect` and `SearchableSelect` when options dropdown is open.
+ 
+## 1.8.3
+ - Allow `clickableRows` and `bulk_actions` to work at the same time on `GridView`
+ - Various bugfixes on `GridRow`
+ - New `visualActivationOnClick` prop for `GridView` and `TileView`
+ - Change the way click activation works on `GridView` and `TileView` rows. Now only one row can be activated at a time
+
+## 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
 

package/controls/NumberInput.svelte

@@ -20,52 +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
-      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
-      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,
@@ -158,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;
@@ -189,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/datagrid/GridView/GridRow.svelte

@@ -4,7 +4,8 @@
 
   @param {number} [row_index=0] - Row index value, Default: `0`
   @param {object} [row={}] - Contains all the column values in a row, Default: `{}`
-  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {object} [isVisible={}] - Determines whether column is visible or not, Default: `{}`
   @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
   @param {object} [transforms={}] - Contains all custom values for each columns, Default: `{}`
@@ -29,10 +30,14 @@
   <tr
     in:fly={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}
+    class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
     {#if bulk_actions}
-      <td style="vertical-align:middle;">
+      <td
+        style="vertical-align:middle;"
+        on:click={(e) => {
+          clickableRows && e.stopImmediatePropagation();
+        }}>
         <Checkbox
           size={selectCheckboxSize}
           color={selectCheckboxColor}
@@ -58,7 +63,7 @@
 {:else}
   <tr
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}
+    class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
@@ -103,9 +108,13 @@
      */
     row = {},
     /**
-     * Determines whether the row is selected or not
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
+    /**
+     * Unique id of row that is activated
      */
-    rowActive = false,
+    activatedId = null,
     /**
      * Determines whether column is visible or not
      */
@@ -161,6 +170,7 @@
   };
 
   $: selectedIds, setCheckedValue();
+  $: activated = activatedId === row.id;
 
   function setCheckedValue() {
     checked = false;
@@ -175,7 +185,6 @@
 
   function rowClick() {
     if (clickableRows) {
-      rowActive = true;
       fire("rowClick", { row });
     }
   }

package/datagrid/GridView/GridView.svelte

@@ -5,9 +5,11 @@
   @param {string} [iteration_key="id"] - Iteration key, Default: `"id"`
   @param {array} [data=[]] - Contains all the results that needs to be displayed, Default: `[]`
   @param {object} [columns={}] - Table column names. {db_field_name: column_name}, Default: `{}`
-  @param {boolean} [transition=false] - Determines if a transision effect is used, Default: `false`
+  @param {boolean} [transition=false] - Determines if a transition effect is used, Default: `false`
   @param {boolean} [is_striped=true] - Determines whether to use alternating row shading in the table view, Default: `true`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
   @param {boolean} [selectAll=false] - Determines if all rows are selected, Default: `false`
   @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
@@ -64,6 +66,7 @@
           {transition}
           {column_keys}
           {clickableRows}
+          {visualActivationOnClick}
           {isVisible}
           {transforms}
           {classNames}
@@ -71,6 +74,7 @@
           {cellComponent}
           {row}
           {bulk_actions}
+          {activatedId}
           {selectedIds}
           {selectCheckboxColor}
           {selectCheckboxSize}
@@ -100,7 +104,7 @@
      */
     columns = {},
     /**
-     * Determines if a transision effect is used
+     * Determines if a transition effect is used
      */
     transition = false,
     /**
@@ -108,10 +112,18 @@
      * @link https://bulma.io/documentation/elements/table/#modifiers
      */
     is_striped = true,
+    /**
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
     /**
      * Determines whether rows are clickable or not
      */
     clickableRows = false,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Determines if selecting multiple rows and doing multiple actions is allowed
      */

package/datagrid/TileView/TileView.svelte

@@ -8,7 +8,9 @@
   @param {object} [tileItemComponent=null] - Contains a custom component, Default: `null`
   @param {number} [per_row=3] - Sets how many items to display in a row, Default: `3`
   @param {object} [columns={}] - Column names for the displayed table {db_field_name: column_name}, Default: `{}`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {object} [valueTransformers={}] - Contains all custom values for each column, Default: `{}`
   @param {object} [classTransformers={}] - CSS class names for each column, Default: `{}`
   @param {object} [styleTransformers={}] - CSS styles for each column, Default: `{}`
@@ -31,6 +33,7 @@
           on:_forwardEvent
           {row_index}
           {column_keys}
+          {visualActivationOnClick}
           {clickableRows}
           {isVisible}
           {transforms}
@@ -38,6 +41,7 @@
           {styles}
           {row}
           {bulk_actions}
+          {activatedId}
           {selectedIds}
           {selectCheckboxColor}
           {selectCheckboxSize}
@@ -75,10 +79,18 @@
      * Column names for the displayed table {db_field_name: column_name}
      */
     columns = {},
+    /**
+     * Determines whether clickable rows activate visually on click
+     */
+    visualActivationOnClick = true,
     /**
      * Determines whether rows are clickable or not
      */
     clickableRows = false,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Contains all custom values for each column
      */

package/datagrid/TileView/TileViewItem.svelte

@@ -3,7 +3,8 @@
 
 
   @param {object} [row={}] - List of all values in a row, Default: `{}`
-  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
+  @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
   @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
   @param {function} [isVisible()] - Returns whether a column can be visible or not
   @param {function} [transforms()] - Returns column custom value
@@ -16,7 +17,7 @@
 
 -->
 <div
-  class:is-selected={rowActive}
+  class:is-selected={activated && visualActivationOnClick}
   class="box {clickableRows ? 'is-hoverable' : ''}"
   on:click|stopPropagation={rowClick}>
   {#each column_keys as column}
@@ -39,9 +40,13 @@
    */
   export let row = {},
     /**
-     * Determines whether the row is selected or not
+     * Determines whether clickable rows activate visually on click
      */
-    rowActive = false,
+    visualActivationOnClick = true,
+    /**
+     * Unique id of row that is activated
+     */
+    activatedId = null,
     /**
      * Determines whether the row is clickable or not
      */
@@ -67,9 +72,10 @@
      */
     column_keys = [];
 
+  $: activated = activatedId === row.id;
+
   function rowClick() {
     if (clickableRows) {
-      rowActive = true;
       /**
        * Fires an event when a row is clicked
        */

package/forms/AutoComplete.svelte

@@ -0,0 +1,426 @@
+<!--
+  @component
+
+
+  @param {string} [value=""] - Value of the Input
+
+This property can be bound to, to fetch the current value, Default: `""`
+  @param {string} [placeholder=""] - Placeholder text for the input, Default: `""`
+  @param {array} [options=[]] - Array of strings, or objects.
+Used to populate the list of options in the dropdown, Default: `[]`
+  @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} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
+  @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: `""`
+  @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
+  @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @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.
+
+By default it renders in a custom container appended to `document.body`., Default: `undefined`
+  @param {string} [class=""] - CSS classes for input container, Default: `""`
+
+  ### Events
+  - `change`
+  - `blur` - Triggered when the input loses focus
+
+  ### Slots
+  - `<slot name="default" {option} />` - Slot containing text for each selectable item
+
+Default value: `<span>{option.label}</span>`
+
+-->
+<div
+  bind:this={el}
+  class="
+     kws-autocomplete input
+    {disabled ? 'is-disabled' : ''}
+    {readonly ? 'is-readonly' : ''}
+    is-{size} is-{color} {klass}
+  "
+  class:readonly
+  {style}
+  on:click|stopPropagation={() => input && input.focus()}>
+  <input
+    class="input is-{size}"
+    bind:this={input}
+    autocomplete="off"
+    {disabled}
+    {readonly}
+    bind:value
+    on:keydown={handleKeydown}
+    on:blur={blurEvent}
+    on:blur={() => setOptionsVisible(false)}
+    {placeholder} />
+  {#if search && options_loading}
+    <button
+      type="button"
+      style="border: none;"
+      class="button is-paddingless delete is-medium is-loading" />
+  {/if}
+  {#if rootContainer}
+    <div class="kws-autocomplete" use:portal={dropdown_portal}>
+      <ul bind:this={dropdown} class="options" class:hidden={!show_options}>
+        {#each filtered_options as option}
+          <li
+            on:mousedown|preventDefault|stopPropagation={() =>
+              handleOptionMouseDown(option)}
+            on:mouseenter|preventDefault|stopPropagation={() => {
+              active_option = option;
+            }}
+            class="is-size-{list_text_size[size]}"
+            class:active={active_option === option}>
+            <!--
+              Slot containing text for each selectable item
+
+              Default value: `<span>{option.label}</span>`
+            -->
+            <slot {option}>
+              <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
+              {@html option.label}
+            </slot>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>
+
+<script>
+  import { portal } from "@kws3/ui";
+  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",
+    enabled: true,
+    phase: "beforeWrite",
+    requires: ["computeStyles"],
+    fn: ({ state }) => {
+      state.styles.popper.width = `${Math.max(
+        200,
+        state.rects.reference.width
+      )}px`;
+    },
+    effect: ({ state }) => {
+      state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+    },
+  };
+
+  const rootContainerId = "kws-overlay-root";
+
+  /**
+   * Value of the Input
+   *
+   * This property can be bound to, to fetch the current value
+   */
+  export let value = "";
+
+  /**
+   * Placeholder text for the input
+   */
+  export let placeholder = "";
+  /**
+   * Array of strings, or objects.
+   * Used to populate the list of options in the dropdown
+   */
+  export let options = [];
+  /**
+   * 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";
+
+  /**
+   * Whether to show the highlighted or plain results in the dropdown.
+   */
+  export let highlighted_results = true;
+  /**
+   * Size of the input
+   *  @type {''|'small'|'medium'|'large'}
+   */
+  export let size = "";
+  /**
+   * Color of the input
+   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   */
+  export let color = "";
+  /**
+   * Inline CSS for input container
+   */
+  export let style = "";
+  /**
+   * Marks component as read-only
+   */
+  export let readonly = false;
+  /**
+   * Disables the component
+   */
+  export let disabled = false;
+
+  /**
+   * Where to render the dropdown list.
+   * Can be a DOM element or a `string` with the CSS selector of the element.
+   *
+   * By default it renders in a custom container appended to `document.body`.
+   *
+   * @type { HTMLElement|string}
+   */
+  export let dropdown_portal = "#" + rootContainerId;
+
+  /**
+   * CSS classes for input container
+   */
+  let klass = "";
+  export { klass as class };
+
+  if (!search && (!options || !options.length))
+    console.error(`Missing options`);
+
+  //ensure we have a root container for all our hoisitng related stuff
+
+  let rootContainer = document.getElementById(rootContainerId);
+  if (!rootContainer) {
+    rootContainer = document.createElement("div");
+    rootContainer.id = rootContainerId;
+    document.body.appendChild(rootContainer);
+  }
+
+  const fire = createEventDispatcher();
+
+  let el, //whole wrapping element
+    dropdown, //dropdown ul
+    input, //the textbox to type in
+    POPPER,
+    active_option = "",
+    searching = true,
+    show_options = false,
+    filtered_options = [], //list of options filtered by search query
+    normalised_options = [], //list of options normalised
+    options_loading = false, //indictaes whether async search function is running
+    mounted = false; //indicates whether component is mounted
+
+  let list_text_size = {
+    small: "7",
+    medium: "5",
+    large: "4",
+  };
+
+  $: asyncMode = search && typeof search === "function";
+
+  $: options, normaliseOptions();
+  $: searching, updateFilteredOptions(value);
+
+  $: allow_fuzzy_match = !search && search_strategy === "fuzzy";
+
+  //convert arrays of strings into normalised arrays of objects
+  function normaliseOptions() {
+    let _items = options || [];
+    if (!_items || !(_items instanceof Array)) {
+      normalised_options = [];
+      return;
+    }
+
+    normalised_options = normaliseArraysToObjects(_items);
+  }
+
+  function updateFilteredOptions(value) {
+    if (!mounted) return;
+
+    if (asyncMode) {
+      searching && debouncedTriggerSearch(sanitizeFilters(value));
+    } else {
+      searching && triggerSearch(sanitizeFilters(value));
+    }
+  }
+
+  function triggerSearch(filters) {
+    let cache = {};
+    //TODO - can optimize more for very long lists
+    filters.forEach((word, idx) => {
+      // iterate over each word in the search query
+      let opts = [];
+      if (word) {
+        opts = [...normalised_options].filter((item) => {
+          // filter out items that don't match `filter`
+          if (typeof item === "object" && item.value) {
+            return typeof item.value === "string" && match(word, item.value);
+          }
+        });
+      }
+
+      cache[idx] = opts; // storing options to current index on cache
+    });
+
+    filtered_options = Object.values(cache) // get values from cache
+      .flat() // flatten array
+      .filter((v, i, self) => self.indexOf(v) === i); // remove duplicates
+
+    if (highlighted_results) {
+      filtered_options = highlightMatches(filtered_options, filters);
+    }
+    setOptionsVisible(true);
+  }
+
+  function triggerExternalSearch(filters) {
+    if (!filters.length) {
+      //do not trigger async search if filters are empty
+      clearDropDownResults();
+      return;
+    }
+    options_loading = true;
+    // filtered_options = [];
+    search(filters).then((_options) => {
+      searching = false;
+      options_loading = false;
+      tick().then(() => {
+        filtered_options = normaliseArraysToObjects(_options);
+
+        if (highlighted_results) {
+          filtered_options = highlightMatches(filtered_options, filters);
+        }
+        setOptionsVisible(true);
+      });
+    });
+  }
+
+  const debouncedTriggerSearch = debounce(triggerExternalSearch, 150, false);
+
+  onMount(() => {
+    POPPER = createPopper(el, dropdown, {
+      strategy: "fixed",
+      placement: "bottom-start",
+      modifiers: [sameWidthPopperModifier],
+    });
+
+    //normalize value
+    if (value === null || typeof value == "undefined") {
+      value = null;
+    }
+    mounted = true;
+
+    return () => {
+      POPPER.destroy();
+    };
+  });
+
+  function setOptionsVisible(show) {
+    if (readonly || disabled || show === show_options) return;
+    if (!value || !filtered_options.length) {
+      show = false;
+    }
+    show_options = show;
+    if (!show) {
+      clearDropDownResults();
+    }
+    POPPER && POPPER.update();
+  }
+
+  function handleKeydown(event) {
+    if (event.key === `Enter`) {
+      show_options && event.preventDefault();
+
+      if (active_option) {
+        handleOptionMouseDown(active_option);
+      } else {
+        // no active option means no option is selected and the actual value should be what typed in input.
+        setOptionsVisible(false);
+      }
+    } else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
+      show_options && event.preventDefault();
+
+      const increment = event.key === `ArrowUp` ? -1 : 1;
+      const newActiveIdx = filtered_options.indexOf(active_option) + increment;
+
+      if (newActiveIdx < 0) {
+        active_option = filtered_options[filtered_options.length - 1];
+      } else {
+        if (newActiveIdx === filtered_options.length)
+          active_option = filtered_options[0];
+        else active_option = filtered_options[newActiveIdx];
+      }
+    } else {
+      active_option = "";
+      searching = true;
+    }
+  }
+
+  function handleOptionMouseDown(option) {
+    add(option);
+  }
+
+  function add(token) {
+    if (readonly || disabled) {
+      return;
+    }
+
+    value = token.value;
+    fire("change", { token, type: `add` });
+
+    setOptionsVisible(false);
+  }
+
+  function blurEvent() {
+    /**
+     * Triggered when the input loses focus
+     */
+    fire("blur");
+  }
+
+  const match = (needle, haystack) => {
+    let _hayStack = haystack.toLowerCase();
+    return allow_fuzzy_match
+      ? fuzzysearch(needle, _hayStack)
+      : _hayStack.indexOf(needle) > -1;
+  };
+
+  const normaliseArraysToObjects = (arr) =>
+    [...arr].map((item) =>
+      typeof item === "object" ? item : { label: item, value: item }
+    );
+
+  const highlightMatches = (options, filters) => {
+    if (!filters.length) return options;
+    // join all filter parts and split into chars and filter out duplicates
+    let common_chars = [...filters.join("")].filter(
+      (v, i, self) => self.indexOf(v) === i
+    );
+    let pattern = new RegExp(`[${common_chars.join("")}]`, "gi");
+    return options.map((item) => {
+      return {
+        ...item,
+        label: item.value.replace(
+          pattern,
+          (match) => `<span class="h">${match}</span>`
+        ),
+      };
+    });
+  };
+
+  const clearDropDownResults = () => {
+    filtered_options = [];
+    searching = false;
+  };
+  function sanitizeFilters(v) {
+    return v && v.trim() ? v.toLowerCase().trim().split(/\s+/) : [];
+  }
+</script>

package/forms/select/MultiSelect.svelte

@@ -131,6 +131,7 @@ Default value: `<span>{option[search_key] || option}</span>`
             on:mouseenter|preventDefault|stopPropagation={() => {
               activeOption = option;
             }}
+            class="is-size-{list_text_size[size]}"
             class:selected={isSelected(option)}
             class:active={activeOption === option}>
             <span class="kws-selected-icon"
@@ -145,7 +146,7 @@ Default value: `<span>{option[search_key] || option}</span>`
           </li>
         {:else}
           {#if !options_loading}
-            <li class="no-options">
+            <li class="no-options is-size-{list_text_size[size]}">
               {searchText ? no_options_msg : async_search_prompt}
             </li>
           {/if}
@@ -160,7 +161,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzysearch from "fuzzysearch";
+  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -322,6 +323,12 @@ Default value: `<span>{option[search_key] || option}</span>`
     selectedOptions = [], //list of options that are selected
     options_loading = false; //indictaes whether async search function is running
 
+  let list_text_size = {
+    small: "7",
+    medium: "5",
+    large: "4",
+  };
+
   $: single = max === 1;
   $: asyncMode = search && typeof search === "function";
   $: hasValue = single
@@ -603,6 +610,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         setOptionsVisible(true);
       }
     } else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
+      showOptions && event.preventDefault();
       const increment = event.key === `ArrowUp` ? -1 : 1;
       const newActiveIdx = filteredOptions.indexOf(activeOption) + increment;
 

package/index.js

@@ -49,6 +49,7 @@ export { default as Transition } from "./transitions/Transition.svelte";
 export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
 export { default as SlidingPaneSet } from "./sliding-panes/SlidingPaneSet.svelte";
 
+export { default as AutoComplete } from "./forms/AutoComplete.svelte";
 export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
 export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
 export { default as MaskedInput } from "./forms/MaskedInput.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.8.1",
+  "version": "1.8.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,9 @@
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
-    "fuzzysearch": "^1.0.3",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "2fdaba3e13397494f06b5881bf92f68b1c7c695d"
+  "gitHead": "440bdaf5e02a0a7ab0b69c2122c2c56da3485c1f"
 }

package/styles/AutoComplete.scss

@@ -0,0 +1,132 @@
+$kws-theme-colors: $colors !default;
+$kws-autocomplete-radius: $radius !default;
+$kws-autocomplete-border-color: $input-border-color !default;
+$kws-autocomplete-box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%),
+  0 0px 0 1px rgb(10 10 10 / 2%) !default;
+$kws-autocomplete-focus-border-color: $input-focus-border-color !default;
+$kws-autocomplete-focus-box-shadow-size: $input-focus-box-shadow-size !default;
+$kws-autocomplete-focus-box-shadow-color: $input-focus-box-shadow-color !default;
+$kws-autocomplete-disabled-background-color: $input-disabled-background-color !default;
+$kws-autocomplete-disabled-border-color: $input-disabled-border-color !default;
+$kws-autocomplete-disabled-color: $input-disabled-color !default;
+$kws-autocomplete-selecting-color: $primary-invert !default;
+$kws-autocomplete-selecting-background: $primary !default;
+$kws-autocomplete-text-matches-color: currentColor !default;
+$kws-autocomplete-text-matches-background: transparent !default;
+$kws-autocomplete-text-matches-font-weight: $weight-bold !default;
+
+$__modal-z: 41 !default;
+@if $modal-z {
+  $__modal-z: $modal-z;
+}
+
+$kws-autocomplete-options-z-index: $__modal-z + 1 !default;
+
+.kws-autocomplete {
+  position: relative;
+  align-items: center;
+  display: flex;
+  cursor: text;
+  height: auto;
+  min-height: 2.5em;
+  padding-top: calc(0.4em - 1px);
+  padding-bottom: calc(0.4em - 1px);
+  &:focus-within {
+    border-color: $kws-autocomplete-focus-border-color;
+    box-shadow: $kws-autocomplete-focus-box-shadow-size
+      $kws-autocomplete-focus-box-shadow-color;
+  }
+  &.is-disabled {
+    background-color: $kws-autocomplete-disabled-background-color;
+    border-color: $kws-autocomplete-disabled-border-color;
+    color: $kws-autocomplete-disabled-color;
+    cursor: not-allowed;
+  }
+  &.is-readonly {
+    box-shadow: none;
+  }
+
+  input {
+    border: none !important;
+    outline: none !important;
+    background: none !important;
+    /* needed to hide red shadow around required inputs in some browsers */
+    box-shadow: none !important;
+    color: inherit;
+    flex: 1;
+    padding: 1pt;
+    height: auto;
+    min-height: 0;
+  }
+
+  ul.options {
+    list-style: none;
+    max-height: 50vh;
+    padding: 0;
+    cursor: pointer;
+    overflow: auto;
+    background: #fff;
+    border: 1px solid $kws-autocomplete-border-color;
+    box-shadow: $kws-autocomplete-box-shadow;
+    position: relative;
+    z-index: 4;
+    &[data-popper-placement="top"] {
+      border-radius: $kws-autocomplete-radius $kws-autocomplete-radius 0 0;
+      box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);
+    }
+    &.hidden {
+      display: none;
+    }
+
+    li {
+      padding: 0.3em 0.5em;
+      position: relative;
+      word-break: break-all;
+      &.active {
+        // keyboard focused item
+        color: $kws-autocomplete-selecting-color;
+        background: $kws-autocomplete-selecting-background;
+      }
+      span.h {
+        // highlight text matches
+        font-weight: $kws-autocomplete-text-matches-font-weight;
+        color: $kws-autocomplete-text-matches-color;
+        background: $kws-autocomplete-text-matches-background;
+      }
+    }
+  }
+}
+
+@each $name, $pair in $kws-theme-colors {
+  $color: nth($pair, 1);
+  $color-invert: nth($pair, 2);
+  $color-light: findLightColor($color);
+  $color-dark: findDarkColor($color);
+  .kws-autocomplete {
+    &.is-#{$name} {
+      border-color: $color;
+      &:focus-within {
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+      }
+      ul.options {
+        li {
+          &.selected {
+            color: $color-dark;
+            background: $color-light;
+          }
+          &.active {
+            color: $color-invert;
+            background: $color;
+          }
+        }
+      }
+    }
+  }
+}
+
+#kws-overlay-root {
+  .kws-autocomplete {
+    position: absolute;
+    z-index: $kws-autocomplete-options-z-index;
+  }
+}

package/styles/Grid.scss

@@ -51,6 +51,7 @@ $kws-gridview-checked-row-background: $primary-light !default;
     background-color: $kws-gridview-checked-row-background !important;
     td {
       background-color: $kws-gridview-checked-row-background !important;
+      color: findColorInvert($kws-gridview-checked-row-background) !important;
     }
   }
 }

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;
+}