@kws3/ui 4.5.6 → 4.5.8

package/CHANGELOG.mdx

@@ -1,3 +1,9 @@
+## 4.5.8
+ - `MultiSelect` Stop overwriting options prop in async mode
+
+## 4.5.7
+ - Fix SCSS deprecation warnings
+
 ## 4.5.6
  - Fix chart tooltip box shadow colors
  - Add docs for LLMs

package/forms/select/MultiSelect.svelte

@@ -566,7 +566,12 @@ Default value: `<span>{option[search_key] || option}</span>`
       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])] : [];
+        options =
+          options && options.length
+            ? options
+            : value
+              ? [...(single ? [value] : [...value])]
+              : [];
         searching = false;
         tick().then(() => {
           normaliseOptions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.6",
+  "version": "4.5.8",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -67,5 +67,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "700d6e12bc8f969d5f2d39db05a98d02ccbf10a0"
+  "gitHead": "a549b4270c569fb5ec4baa2a5c11c61aff0b24d0"
 }

package/styles/AutoComplete.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -26,7 +27,7 @@ $text-matches-font-weight: cv.getVar("weight-bold") !default;
 $options-background: cv.getVar("scheme-main-ter") !default;
 
 $__modal-z: 41 !default;
-@if variable-exists("modal-z") {
+@if meta.variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 

package/styles/Select.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -27,7 +28,7 @@ $selected-background: cv.getVar("primary-light") !default;
 $options-background: cv.getVar("scheme-main-ter") !default;
 
 $__modal-z: 41 !default;
-@if variable-exists("modal-z") {
+@if meta.variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 

package/styles/ToggleButtons.scss

@@ -7,10 +7,10 @@ $count-color: cv.getVar("danger-invert") !default;
 .kws-toggle-buttons {
   .button,
   .button:focus {
+    box-shadow: none;
     .icon {
       margin: 0;
     }
-    box-shadow: none;
     &.is-active {
       box-shadow: 0 0 0.6rem
         hsla(

package/styles/Tooltip.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -7,7 +8,8 @@ $color: cv.getVar("text-invert") !default;
 $arrow-size: 8px !default;
 $padding: 0.5rem !default;
 $radius: cv.getVar("radius-small") !default;
-$shadow: 0 5px 10px -5px hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
+$shadow: 0 5px 10px -5px
+  hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
 $popover-background: cv.getVar("background") !default;
 $popover-color: cv.getVar("text") !default;
 $popover-arrow-color: cv.getVar("border") !default;
@@ -47,10 +49,21 @@ $popover-radius: $radius !default;
   $placements: "top", "bottom", "left", "right";
   $origins: bottom, top, right, left;
 
+  position: relative;
+  background-color: $background;
+  color: $color;
+  border-radius: $radius;
+  outline: 0;
+  box-shadow: $shadow;
+  transition-property: transform, visibility, opacity;
+
   &[data-animation="scale"] {
     @each $placement in $placements {
       &[data-placement^="#{$placement}"] {
-        transform-origin: nth($origins, index($placements, $placement));
+        transform-origin: list.nth(
+          $origins,
+          list.index($placements, $placement)
+        );
       }
     }
 
@@ -64,14 +77,6 @@ $popover-radius: $radius !default;
     opacity: 0;
   }
 
-  position: relative;
-  background-color: $background;
-  color: $color;
-  border-radius: $radius;
-  outline: 0;
-  box-shadow: $shadow;
-  transition-property: transform, visibility, opacity;
-
   @each $name, $pair in $theme-colors {
     &[data-theme~="#{$name}"] {
       color: cv.getVar($name, "", "-invert");