@knime/kds-components 0.22.0 → 0.22.1

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);
 }
 }
@@ -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);
 }
 }

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 = {  };
 
@@ -15629,8 +15629,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 +15646,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 +15703,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 +15736,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 +15788,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 +15824,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 +15834,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