@knime/kds-components 0.9.0 → 0.9.1

package/dist/index.css

@@ -1390,7 +1390,7 @@ body:has(dialog.modal[open]) {
 }
 
 .kds-modal {
-&[data-v-c95b809a] {
+&[data-v-d8ed98e7] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
@@ -1402,7 +1402,7 @@ body:has(dialog.modal[open]) {
   height: var(--modal-height);
   max-height: var(--modal-full-size);
   padding: 0;
-  overflow: var(--v085a353b);
+  overflow: var(--v1ee8fa3c);
   font: var(--kds-font-base-body-small);
   color: var(--kds-color-text-and-icon-neutral);
   background-color: var(--kds-color-surface-default);
@@ -1419,55 +1419,55 @@ body:has(dialog.modal[open]) {
 
   /* hide if its not open */
 }
-&.width-small[data-v-c95b809a] {
+&.width-small[data-v-d8ed98e7] {
     --modal-width: var(--kds-dimension-component-width-25x);
     --modal-animation-time: 100ms;
     --modal-scale-base: 0.85;
 }
-&.width-medium[data-v-c95b809a] {
+&.width-medium[data-v-d8ed98e7] {
     --modal-width: var(--kds-dimension-component-width-32x);
     --modal-animation-time: 140ms;
     --modal-scale-base: 0.88;
 }
-&.width-large[data-v-c95b809a] {
+&.width-large[data-v-d8ed98e7] {
     --modal-width: var(--kds-dimension-component-width-45x);
     --modal-animation-time: 210ms;
     --modal-scale-base: 0.88;
 }
-&.width-xlarge[data-v-c95b809a] {
+&.width-xlarge[data-v-d8ed98e7] {
     --modal-width: var(--kds-dimension-component-width-61x);
     --modal-animation-time: 300ms;
     --modal-scale-base: 0.88;
 }
-&.width-full[data-v-c95b809a] {
+&.width-full[data-v-d8ed98e7] {
     --modal-width: var(--modal-full-size);
     --modal-animation-time: 350ms;
     --modal-scale-base: 0.92;
 }
-&.height-full[data-v-c95b809a] {
+&.height-full[data-v-d8ed98e7] {
     --modal-height: var(--modal-full-size);
 }
-&.height-auto[data-v-c95b809a] {
+&.height-auto[data-v-d8ed98e7] {
     --modal-height: fit-content;
 }
-&[data-v-c95b809a]:not([open]) {
+&[data-v-d8ed98e7]:not([open]) {
     display: none;
 }
-&[data-v-c95b809a]:focus-visible,
-  &[data-v-c95b809a]:focus {
+&[data-v-d8ed98e7]:focus-visible,
+  &[data-v-d8ed98e7]:focus {
     outline: none;
 }
-&[data-v-c95b809a]::backdrop {
+&[data-v-d8ed98e7]::backdrop {
     background: var(--kds-color-blanket-default);
     opacity: 0;
     transition: var(--modal-animation-time) allow-discrete;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-property: display, opacity, overlay;
 }
-&[open][data-v-c95b809a]::backdrop {
+&[open][data-v-d8ed98e7]::backdrop {
     opacity: 1;
 }
-&[open][data-v-c95b809a] {
+&[open][data-v-d8ed98e7] {
     opacity: 1;
     transform: scale(1);
 }
@@ -1476,18 +1476,18 @@ body:has(dialog.modal[open]) {
 /** Animation starting styles */
 @starting-style {
 .kds-modal {
-&[data-v-c95b809a] {
+&[data-v-d8ed98e7] {
     opacity: 1;
     transform: scale(1);
 }
-&[open][data-v-c95b809a] {
+&[open][data-v-d8ed98e7] {
       opacity: 0;
       transform: scale(var(--modal-scale-base));
 }
-&[data-v-c95b809a]::backdrop {
+&[data-v-d8ed98e7]::backdrop {
       opacity: 1;
 }
-&[open][data-v-c95b809a]::backdrop {
+&[open][data-v-d8ed98e7]::backdrop {
       opacity: 0;
 }
 }

package/dist/index.js

@@ -3154,6 +3154,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-64296d74"]]);
 
+const createUnwrappedPromise = () => {
+  let resolve = () => {
+  };
+  let reject = () => {
+  };
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { resolve, reject, promise };
+};
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 const kdsModalClosedBy = {
   ANY: "any",
   CLOSEREQUEST: "closerequest",
@@ -3263,7 +3279,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   emits: ["close", "closed"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v085a353b": _ctx.overflow
+      "v1ee8fa3c": _ctx.overflow
     }));
     const props = __props;
     const emit = __emit;
@@ -3285,17 +3301,22 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     );
     const renderDialog = ref(props.active);
     const removeDialog = () => {
+      if (!renderDialog.value) {
+        return;
+      }
       renderDialog.value = false;
       emit("closed");
     };
     watch(
       () => props.active,
-      (value, lastValue) => {
+      async (value, lastValue) => {
         if (value === false && lastValue === true) {
           if (dialog.value) {
             Promise.all(
               dialog.value.getAnimations({ subtree: true }).map((animation) => animation.finished)
             ).then(removeDialog);
+            await sleep(350);
+            removeDialog();
           } else {
             removeDialog();
           }
@@ -3345,19 +3366,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c95b809a"]]);
-
-const createUnwrappedPromise = () => {
-  let resolve = () => {
-  };
-  let reject = () => {
-  };
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { resolve, reject, promise };
-};
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d8ed98e7"]]);
 
 const defaultCancelButton = {
   type: "cancel",