@kws3/ui 2.3.0 → 2.3.2

package/CHANGELOG.mdx

@@ -1,3 +1,15 @@
+# 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
+  - `DatePicker` - bug fix on date range selection colors
+
 # 2.3.0
   - New component `InfiniteList` Added
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "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": "85d7e7534391508f6376907b57142d2eba457d7e"
+  "gitHead": "87ea45639e414b8f652e3a0457516ad1decb5f4f"
 }

package/styles/Datepicker.scss

@@ -1,6 +1,9 @@
 $kws-theme-colors: $colors !default;
 $kws-datepicker-background: $scheme-main-ter !default;
 $kws-datepicker-text: $text !default;
+$kws-datepicker-shadow: 0 2px 5px rgba(0, 0, 0, 0.3),
+  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
+$kws-datepicker-radius: 0px !default;
 
 .flatpickr-calendar {
   $inRangeBg: lighten($kws-datepicker-text, 55);
@@ -8,10 +11,21 @@ $kws-datepicker-text: $text !default;
     $inRangeBg: darken($kws-datepicker-text, 55);
   }
 
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  box-shadow: $kws-datepicker-shadow;
   background: $kws-datepicker-background;
   color: $kws-datepicker-text;
 
+  border-radius: $kws-datepicker-radius;
+  .flatpickr-months {
+    border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+    .flatpickr-month {
+      border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+    }
+  }
+  .flatpickr-innerContainer {
+    border-radius: 0 0 $kws-datepicker-radius $kws-datepicker-radius;
+  }
+
   @each $name, $pair in $kws-theme-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
@@ -94,6 +108,24 @@ $kws-datepicker-text: $text !default;
           color: $color-dark;
         }
       }
+
+      .flatpickr-day.inRange,
+      .flatpickr-day.prevMonthDay.inRange,
+      .flatpickr-day.nextMonthDay.inRange,
+      .flatpickr-day.today.inRange,
+      .flatpickr-day.prevMonthDay.today.inRange,
+      .flatpickr-day.nextMonthDay.today.inRange {
+        color: $color-dark;
+        background: $color-light;
+        border-color: $color-light;
+        box-shadow: -5px 0 0 $color-light, 5px 0 0 $color-light;
+      }
+      .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+      .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+      .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+        box-shadow: -10px 0 0 $color;
+      }
+
       .flatpickr-innerContainer {
         border-bottom: 1px solid $color;
       }