@knime/kds-components 0.22.1 → 0.22.2

package/dist/index.css

@@ -1032,7 +1032,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-446a5ba1] {
+&[data-v-d8750fc1] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1041,20 +1041,20 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-446a5ba1] {
+&.standalone[data-v-d8750fc1] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&.menu[data-v-446a5ba1] {
+&.menu[data-v-d8750fc1] {
     border: none;
 }
-&[data-v-446a5ba1]:focus-visible {
+&[data-v-d8750fc1]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.kds-list-container-empty[data-v-446a5ba1] {
+.kds-list-container-empty[data-v-d8750fc1] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1730,7 +1730,7 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-color-picker[data-v-74392b20] {
+.kds-color-picker[data-v-d2bb72e0] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-1x);
@@ -1741,7 +1741,7 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.colorspace[data-v-74392b20] {
+.colorspace[data-v-d2bb72e0] {
   position: relative;
   width: 100%;
   height: 200px;
@@ -1749,7 +1749,7 @@ html.kds-legacy {
   outline: none;
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-.handle[data-v-74392b20] {
+.handle[data-v-d2bb72e0] {
   position: absolute;
   width: var(--kds-dimension-icon-0-75x);
   height: var(--kds-dimension-icon-0-75x);
@@ -1760,7 +1760,7 @@ html.kds-legacy {
   transform: translate(-50%, -50%);
 }
 .hue {
-&[data-v-74392b20] {
+&[data-v-d2bb72e0] {
   position: relative;
   width: 100%;
   height: var(--kds-dimension-component-height-0-75x);
@@ -1778,18 +1778,18 @@ html.kds-legacy {
   );
   border-radius: var(--kds-border-radius-container-pill);
   }
-& .handle[data-v-74392b20] {
+& .handle[data-v-d2bb72e0] {
     top: 50%;
 }
 }
-.colorspace[data-v-74392b20]:focus,
-.hue[data-v-74392b20]:focus {
+.colorspace[data-v-d2bb72e0]:focus,
+.hue[data-v-d2bb72e0]:focus {
   outline: none;
 }
-.colorspace:focus .handle[data-v-74392b20],
-.colorspace:focus-visible .handle[data-v-74392b20],
-.hue:focus .handle[data-v-74392b20],
-.hue:focus-visible .handle[data-v-74392b20] {
+.colorspace:focus .handle[data-v-d2bb72e0],
+.colorspace:focus-visible .handle[data-v-d2bb72e0],
+.hue:focus .handle[data-v-d2bb72e0],
+.hue:focus-visible .handle[data-v-d2bb72e0] {
   outline: var(--kds-border-action-focused);
   outline-offset: calc(-1 * var(--kds-spacing-offset-focus));
 }
@@ -3496,16 +3496,16 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
 }
 
 .kds-resize-container {
-&[data-v-403e065b] {
+&[data-v-46b33b01] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-37x);
 }
-&.dragging[data-v-403e065b] {
+&.dragging[data-v-46b33b01] {
     user-select: none;
 }
 }
-.kds-resize-container-content[data-v-403e065b] {
+.kds-resize-container-content[data-v-46b33b01] {
   inline-size: 100%;
 }
 

package/dist/index.js

@@ -1804,8 +1804,37 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
       return elementId?.slice(idPrefix.length + 1);
     }
+    const warnedDuplicateIds = /* @__PURE__ */ new Set();
+    const deduplicationResult = computed(() => {
+      const seen = /* @__PURE__ */ new Set();
+      const duplicateIds = [];
+      const items = props.possibleValues.filter((o) => {
+        if (seen.has(o.id)) {
+          duplicateIds.push(o.id);
+          return false;
+        }
+        seen.add(o.id);
+        return true;
+      });
+      return { items, duplicateIds };
+    });
+    const sanitizedValues = computed(() => deduplicationResult.value.items);
+    watch(
+      () => deduplicationResult.value.duplicateIds,
+      (duplicateIds) => {
+        for (const id of duplicateIds) {
+          if (!warnedDuplicateIds.has(id)) {
+            console.warn(
+              `[KdsListContainer] Duplicate option id "${id}" detected. Only the first occurrence will be used.`
+            );
+            warnedDuplicateIds.add(id);
+          }
+        }
+      },
+      { immediate: true }
+    );
     const prefixedValues = computed(
-      () => (__props.loading ? [] : props.possibleValues).map((o) => ({
+      () => (__props.loading ? [] : sanitizedValues.value).map((o) => ({
         ...o,
         id: `${idPrefix}-${o.id}`
       }))
@@ -2027,7 +2056,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-446a5ba1"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-d8750fc1"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -3957,6 +3986,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           )),
           onLostpointercapture: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => unref(onColorspacePointerUp) && unref(onColorspacePointerUp)(...args)),
+          onPointerup: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(onColorspacePointerUp) && unref(onColorspacePointerUp)(...args)),
           onKeydown: onColorspaceKeyDown
         }, [
           createElementVNode("div", {
@@ -3975,17 +4006,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           "aria-valuemax": HUE_MAX_DEG,
           "aria-valuetext": hueValueText.value,
           tabindex: "0",
-          onPointerdown: _cache[3] || (_cache[3] = withModifiers(
+          onPointerdown: _cache[4] || (_cache[4] = withModifiers(
             //@ts-ignore
             (...args) => unref(onHuePointerDown) && unref(onHuePointerDown)(...args),
             ["prevent"]
           )),
-          onPointermove: _cache[4] || (_cache[4] = withModifiers(
+          onPointermove: _cache[5] || (_cache[5] = withModifiers(
             //@ts-ignore
             (...args) => unref(onHuePointerMove) && unref(onHuePointerMove)(...args),
             ["prevent"]
           )),
-          onLostpointercapture: _cache[5] || (_cache[5] = //@ts-ignore
+          onLostpointercapture: _cache[6] || (_cache[6] = //@ts-ignore
+          (...args) => unref(onHuePointerUp) && unref(onHuePointerUp)(...args)),
+          onPointerup: _cache[7] || (_cache[7] = //@ts-ignore
           (...args) => unref(onHuePointerUp) && unref(onHuePointerUp)(...args)),
           onKeydown: onHueKeyDown
         }, [
@@ -4005,7 +4038,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-74392b20"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-d2bb72e0"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -16301,15 +16334,16 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           onPointerdown: unref(onPointerDown),
           onPointermove: withModifiers(unref(onPointerMove), ["prevent"]),
           onLostpointercapture: unref(onPointerUp),
+          onPointerup: unref(onPointerUp),
           onKeydown,
           onDblclick: toggleMaximized
-        }, null, 8, ["number-of-handles", "handle-gap", "onPointerdown", "onPointermove", "onLostpointercapture"])
+        }, null, 8, ["number-of-handles", "handle-gap", "onPointerdown", "onPointermove", "onLostpointercapture", "onPointerup"])
       ], 2);
     };
   }
 });
 
-const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-403e065b"]]);
+const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-46b33b01"]]);
 
 const CLICK_META_KEY_TIMEOUT = 250;
 const useMultiSelectListBoxSelection = ({
@@ -16559,7 +16593,9 @@ const useMultiSelectListBoxSelection = ({
       if (currentKeyNavIndex.value < 0) {
         currentKeyNavIndex.value = 0;
       }
-      setSelected([allValues.value[currentKeyNavIndex.value].id]);
+      if (modelValue.value.length === 0) {
+        setSelected([allValues.value[currentKeyNavIndex.value].id]);
+      }
     }
   };
   const onBlur = () => {