@kws3/ui 4.1.1 → 4.1.3

package/CHANGELOG.mdx

@@ -1,3 +1,13 @@
+# 4.1.3
+  - Ensure transitions are global for `Modal`, `CardModal` and `ActionSheet` components
+  - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
+
+# 4.1.2
+  - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
+  - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
+  - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
+  - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
+
 # 4.1.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow
@@ -19,6 +29,16 @@
   - add svelte 4 compatibility
   
 --------------
+# 2.3.3
+  - `InfiniteList` - do not fake a scroll event on a resize event, fixes loading bugs
+
+# 2.3.2
+  - `MultiSelect` - fixed issue where raw object were initially outputted (if provided)
+  - `SearchableSelect and `MultiSelect` (Async): resolved issue with the 'active' class not attaching to the most matched item in dropdown options
+  - `SearchableSelect` - improved behavior, ensuring the `tab` key correctly loses focus
+  - `AutoComplete` - dropdown now closes on loss of focus triggered by the `tab` key
+
+
 # 2.3.1
   - `DatePicker` - add support for configurable border radius
   - `DatePicker` - add support for configurable box shadow

package/forms/AutoComplete.svelte

@@ -421,7 +421,12 @@ Default value: `<span>{option.label}</span>`
       });
     } else {
       active_option = "";
-      searching = true;
+
+      if (event.key === `Tab`) {
+        searching = false;
+      } else {
+        searching = true;
+      }
     }
   }
 

package/forms/select/MultiSelect.svelte

@@ -470,7 +470,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     ) {
       activeOption = filteredOptions[0];
     } else {
-      if (allow_fuzzy_match) {
+      if (asyncMode || allow_fuzzy_match) {
         activeOption = filteredOptions.find((opts) =>
           matchesValue(activeOption, opts)
         );
@@ -557,22 +557,28 @@ Default value: `<span>{option[search_key] || option}</span>`
     //normalize value for single versus multiselect
     if (value === null || typeof value == "undefined") {
       value = single ? null : [];
-    }
-
-    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();
-      });
+    } else {
+      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();
+        });
+      } else {
+        value = single
+          ? value
+          : normaliseArraysToObjects(value).map((v) => v[used_value_key]);
+      }
     }
 
     return () => {
@@ -729,6 +735,10 @@ Default value: `<span>{option[search_key] || option}</span>`
         searching = true;
       }
     } else {
+      if (event.key === `Tab`) {
+        searching = false;
+        return;
+      }
       //for a single select
       //if a value is already selected,
       //ignore keys other than navigation, enter and backspace

package/helpers/ActionSheet.svelte

@@ -23,11 +23,11 @@ If `false` , the component won't have a close button, and will not close on clic
   class="modal kws-action-sheet-outer {klass} {is_active ? 'is-active' : ''}"
   {style}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:fly={{
+      transition:fly|global={{
         duration: transitionDuration,
         y: 300,
         delay: transitionDelay,

package/helpers/CardModal.svelte

@@ -31,11 +31,11 @@ Only visible when the
 -->
 <div class="modal {klass} {is_active ? 'is-active' : ''}" {style} data-cy={cy}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:scale={{
+      transition:scale|global={{
         duration: transitionDuration,
         // @ts-ignore
         from: 0.8,

package/helpers/InfiniteList.svelte

@@ -131,6 +131,5 @@ while more items are loading
 
   const resize = () => {
     viewport_height = viewport.offsetHeight;
-    handle_scroll();
   };
 </script>

package/helpers/Modal.svelte

@@ -23,11 +23,11 @@ Only programmatic closing is possible, Default: `true`
 
 <div class="modal {klass} {is_active ? 'is-active' : ''}" {style} data-cy={cy}>
   {#if is_active}<div
-      transition:fade={{ duration: transitionDuration }}
+      transition:fade|global={{ duration: transitionDuration }}
       class="modal-background"
       on:click={clickOutside} />
     <div
-      transition:scale={{
+      transition:scale|global={{
         duration: transitionDuration,
         // @ts-ignore
         from: 0.8,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.0.4"
   },
-  "gitHead": "454b927449e2b576dfe0335c72834f126204971f"
+  "gitHead": "4fd2b4a801628800fc5498495277ad45b40a01c6"
 }