@knime/kds-components 0.22.0 → 0.22.2

package/dist/index.css

@@ -846,12 +846,13 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
   position: relative;
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   width: 100%;
+  min-height: var(--kds-dimension-component-height-1-5x);
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-5x);
   color: var(--kds-color-text-and-icon-neutral);
   cursor: pointer;
@@ -861,36 +862,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     gap: var(--kds-spacing-container-0-25x);
     align-items: flex-start;
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-0df9684f] {
+.accessory[data-v-822789ec] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
 }
 }
 &.large {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-0df9684f] {
+.accessory[data-v-822789ec] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-0df9684f] {
+.large &[data-v-822789ec] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -898,19 +899,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-0df9684f] {
+.prefix[data-v-822789ec] {
         flex-shrink: 0;
 }
-.special[data-v-0df9684f] {
+.special[data-v-822789ec] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-0df9684f] {
+.subtext[data-v-822789ec] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -921,7 +922,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -929,69 +930,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-0df9684f] {
+.shortcut[data-v-822789ec] {
       flex-shrink: 0;
       font: var(--kds-font-base-interactive-xsmall-strong);
       color: var(--kds-color-text-and-icon-muted);
       text-align: right;
       white-space: nowrap;
 }
-.trailing-item-reserve-space[data-v-0df9684f] {
+.trailing-item-reserve-space[data-v-822789ec] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-0df9684f]:hover:not(.disabled),
-  &.active[data-v-0df9684f]:not(.disabled) {
+&[data-v-822789ec]:hover:not(.disabled),
+  &.active[data-v-822789ec]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-0df9684f]:active:not(.disabled) {
+&[data-v-822789ec]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-0df9684f] {
+.subtext[data-v-822789ec] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-0df9684f]:hover,
-    &.active[data-v-0df9684f] {
+&[data-v-822789ec]:hover,
+    &.active[data-v-822789ec] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-0df9684f]:active {
+&[data-v-822789ec]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-0df9684f] {
+&.disabled[data-v-822789ec] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-0df9684f] {
+.subtext[data-v-822789ec] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-0df9684f]:hover,
-    &.active[data-v-0df9684f] {
+&[data-v-822789ec]:hover,
+    &.active[data-v-822789ec] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-0df9684f]:active {
+&[data-v-822789ec]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-0df9684f] {
+&.disabled[data-v-822789ec] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-0df9684f] {
+&[data-v-822789ec] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-0df9684f],
-    .subtext[data-v-0df9684f] {
+.shortcut[data-v-822789ec],
+    .subtext[data-v-822789ec] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -1031,7 +1032,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-446a5ba1] {
+&[data-v-d8750fc1] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1040,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;
@@ -1729,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);
@@ -1740,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;
@@ -1748,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);
@@ -1759,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);
@@ -1777,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));
 }
@@ -3362,23 +3363,23 @@ textarea[data-v-bdf12ef9]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-9f49ff8b] {
+.kds-dropdown-container[data-v-db105594] {
   display: flex;
   flex-direction: column;
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-dropdown-container-sticky-top[data-v-9f49ff8b] {
+.kds-dropdown-container-sticky-top[data-v-db105594] {
   padding: var(--kds-spacing-container-0-25x);
   background-color: var(--kds-color-surface-default);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-dropdown-container-list {
-&[data-v-9f49ff8b] {
+&[data-v-db105594] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-9f49ff8b] {
+&.multiline[data-v-db105594] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -3495,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

@@ -1729,7 +1729,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-0df9684f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-822789ec"]]);
 
 const _sfc_main$T = {  };
 
@@ -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;
@@ -15629,8 +15662,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 
 const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-cf3becf9"]]);
 
+const DROPDOWN_SEARCH_THRESHOLD = 12;
+
 const _hoisted_1$h = { class: "kds-dropdown-container" };
-const _hoisted_2$9 = { class: "kds-dropdown-container-sticky-top" };
+const _hoisted_2$9 = {
+  key: 0,
+  class: "kds-dropdown-container-sticky-top"
+};
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
@@ -15641,10 +15679,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
+  emits: /* @__PURE__ */ mergeModels(["select"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
+    const searchable = computed(
+      () => props.possibleValues.length >= DROPDOWN_SEARCH_THRESHOLD
+    );
     const searchValue = ref("");
     const searchEl = useTemplateRef("searchEl");
     const listContainerRef = useTemplateRef("listContainer");
@@ -15694,12 +15736,24 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     const hasMultiline = computed(
       () => props.possibleValues.some((o) => o.subText !== void 0)
     );
+    const onItemClick = (id) => {
+      if (id !== void 0) {
+        modelValue.value = id;
+        emit("select", id);
+      }
+    };
     __expose({
-      focus: () => searchEl.value?.focus()
+      focus: () => {
+        if (searchable.value) {
+          searchEl.value?.focus();
+        } else {
+          listContainerRef.value?.focus();
+        }
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$9, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15715,23 +15769,23 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onFocus: _cache[2] || (_cache[2] = ($event) => listContainerRef.value?.handleFocus()),
             onBlur: _cache[3] || (_cache[3] = ($event) => listContainerRef.value?.handleBlur())
           }, null, 8, ["modelValue", "aria-activedescendant"])
-        ]),
+        ])) : createCommentVNode("", true),
         createVNode(unref(KdsListContainer), {
           ref: "listContainer",
           class: normalizeClass(["kds-dropdown-container-list", { multiline: hasMultiline.value }]),
           "possible-values": props.loading ? [] : listOptions.value,
           loading: props.loading,
           "empty-text": props.emptyText,
-          "controlled-externally": "",
+          "controlled-externally": searchable.value,
           "aria-label": "Dropdown options",
-          onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && (modelValue.value = $event))
-        }, null, 8, ["class", "possible-values", "loading", "empty-text"])
+          onItemClick
+        }, null, 8, ["class", "possible-values", "loading", "empty-text", "controlled-externally"])
       ]);
     };
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-9f49ff8b"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-db105594"]]);
 
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
@@ -15767,11 +15821,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         nextTick(() => dropdownContainerEl.value?.focus());
       }
     });
-    watch(modelValue, () => {
-      if (open.value) {
-        open.value = false;
-      }
-    });
+    const closeDropdown = () => {
+      open.value = false;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, {
         id: props.id,
@@ -15805,7 +15857,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             placement: "bottom-left",
             role: "dialog",
             "full-width": "",
-            "aria-label": "Searchable dropdown options"
+            "aria-label": "Dropdown menu"
           }, {
             default: withCtx(() => [
               createVNode(DropdownContainer, {
@@ -15815,7 +15867,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
                 "possible-values": props.possibleValues,
                 loading: __props.loading,
-                "empty-text": "No entries found"
+                "empty-text": "No entries found",
+                onSelect: closeDropdown
               }, null, 8, ["modelValue", "possible-values", "loading"])
             ]),
             _: 1
@@ -16281,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 = ({
@@ -16539,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 = () => {