@kws3/ui 1.6.0 → 1.6.4

package/datagrid/DataSearch/DataSearch.svelte

@@ -186,7 +186,7 @@
     let ret = [];
     ret.push(query);
     for (var i in filterVals) {
-      filterVals[i] && ret.push(i + ":" + filterVals[i]);
+      ret.push(i + ":" + filterVals[i]);
     }
     /**
      * Event triggered on search

package/forms/select/MultiSelect.svelte

@@ -28,6 +28,10 @@ Instead of listing all the selected items inside 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} [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.
+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
@@ -105,38 +109,41 @@ Default value: `<span>{option[search_key] || option}</span>`
       on:click|stopPropagation={removeAll}
       style={shouldShowClearAll ? "" : "display: none;"} />
   {/if}
-
-  <ul
-    bind:this={dropdown}
-    class="options {single ? 'is-single' : 'is-multi'}"
-    class:hidden={!showOptions}>
-    {#each filteredOptions as option}
-      <li
-        on:mousedown|preventDefault|stopPropagation={() =>
-          handleOptionMouseDown(option)}
-        on:mouseenter|preventDefault|stopPropagation={() => {
-          activeOption = option;
-        }}
-        class:selected={isSelected(option)}
-        class:active={activeOption === option}>
-        <span class="kws-selected-icon"
-          ><Icon icon={selected_icon} size="small" /></span
-        ><!--
-          Slot containing text for each selectable item
-
-          Default value: `<span>{option[search_key] || option}</span>`
-        --><slot
-          search_key={used_search_key}
-          {option}>{option[used_search_key] || option}</slot>
-      </li>
-    {:else}
-      <li class="no-options">{no_options_msg}</li>
-    {/each}
-  </ul>
+  {#if rootContainer}
+    <div class="kws-searchableselect" use:portal={dropdown_portal}>
+      <ul
+        bind:this={dropdown}
+        class="options {single ? 'is-single' : 'is-multi'}"
+        class:hidden={!showOptions}>
+        {#each filteredOptions as option}
+          <li
+            on:mousedown|preventDefault|stopPropagation={() =>
+              handleOptionMouseDown(option)}
+            on:mouseenter|preventDefault|stopPropagation={() => {
+              activeOption = option;
+            }}
+            class:selected={isSelected(option)}
+            class:active={activeOption === option}>
+            <span class="kws-selected-icon"
+              ><Icon icon={selected_icon} size="small" /></span
+            ><!--
+              Slot containing text for each selectable item
+
+              Default value: `<span>{option[search_key] || option}</span>`
+            --><slot
+              search_key={used_search_key}
+              {option}>{option[used_search_key] || option}</slot>
+          </li>
+        {:else}
+          <li class="no-options">{no_options_msg}</li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </div>
 
 <script>
-  import { Icon } from "@kws3/ui";
+  import { Icon, portal } from "@kws3/ui";
   import { createEventDispatcher, onMount } from "svelte";
   import { createPopper } from "@popperjs/core";
 
@@ -156,6 +163,8 @@ Default value: `<span>{option[search_key] || option}</span>`
     },
   };
 
+  const rootContainerId = "kws-overlay-root";
+
   /**
    * Value of the Input
    *
@@ -233,6 +242,15 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Tooltip text for the Clear All button
    */
   export let remove_all_tip = "Remove all";
+  /**
+   * 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
@@ -247,7 +265,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   }
 
   //ensure we have a root container for all our hoisitng related stuff
-  let rootContainerId = "kws-overlay-root";
+
   let rootContainer = document.getElementById(rootContainerId);
   if (!rootContainer) {
     rootContainer = document.createElement("div");
@@ -255,9 +273,6 @@ Default value: `<span>{option[search_key] || option}</span>`
     document.body.appendChild(rootContainer);
   }
 
-  //this is the container that will hold the dropdown
-  let container;
-
   const fire = createEventDispatcher();
 
   let el, //whole wrapping element
@@ -386,22 +401,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     POPPER && POPPER.update();
   }
 
-  /**
-   * Moves dropdown to rootContainer, so that
-   * overflows etc do not mess with it
-   */
-  function hoistDropdown() {
-    if (!container) {
-      container = document.createElement("div");
-      container.className = "kws-searchableselect";
-      rootContainer.appendChild(container);
-      container.appendChild(dropdown);
-    }
-  }
-
   onMount(() => {
-    hoistDropdown();
-
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
       placement: "bottom-start",
@@ -416,10 +416,6 @@ Default value: `<span>{option[search_key] || option}</span>`
 
     return () => {
       POPPER.destroy();
-      //remove hoisted items
-      container &&
-        container.parentNode &&
-        container.parentNode.removeChild(container);
     };
   });
 
@@ -513,6 +509,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     }
 
     if (event.key === `Enter`) {
+      event.preventDefault();
       if (activeOption) {
         handleOptionMouseDown(activeOption);
         if (!single) {

package/forms/select/SearchableSelect.svelte

@@ -20,6 +20,10 @@ 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 {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @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.
+
+By default it renders in a custom container appended to `document.body`., Default: `undefined`
   @param {string} [class=""] - CSS classes for input container, Default: `""`
 
   ### Events
@@ -48,6 +52,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   {selected_icon}
   {remove_all_tip}
   {no_options_msg}
+  {dropdown_portal}
   on:change={change}
   on:blur={blur}
   let:option
@@ -67,6 +72,8 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   const fire = createEventDispatcher();
 
+  const rootContainerId = "kws-overlay-root";
+
   /**
    * Value of the Input
    *
@@ -127,6 +134,15 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Tooltip text for the Clear selection button
    */
   export let remove_all_tip = "Clear Selection";
+  /**
+   * 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

package/index.js

@@ -21,6 +21,8 @@ export {
 } from "./helpers/FloatingUI";
 export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
 export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
+export { portal } from "svelte-portal";
+export { default as Portal } from "svelte-portal";
 
 export { default as ConfirmButton } from "./buttons/ConfirmButton.svelte";
 export { default as DeleteButton } from "./buttons/DeleteButton.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.0",
+  "version": "1.6.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,8 +25,9 @@
   "dependencies": {
     "apexcharts": "^3.32.0",
     "flatpickr": "^4.5.2",
+    "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "e2efe454752c7d59964636f86c27cd1c92a41c2e"
+  "gitHead": "ffa4c66eba9bcb4efe022f39ac288c3bee9295da"
 }