@knime/kds-components 1.1.4 → 1.1.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-components
 
+## 1.1.5
+
+### Patch Changes
+
+- e7ad2b7: Share the icon module cache across all `KdsIcon` instances.
+- 54e6b00: Add KdsTree
+  - @knime/kds-styles@1.1.5
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/index.css

@@ -146,7 +146,7 @@
 }
 }
 .kds-icon {
-&[data-v-bff4f419] {
+&[data-v-9a9cd3e8] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -160,27 +160,27 @@
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
 }
-&.xsmall[data-v-bff4f419] {
+&.xsmall[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.small[data-v-bff4f419] {
+&.small[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-bff4f419] {
+&.large[data-v-9a9cd3e8] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
-.kds-icon.disabled[data-v-bff4f419] {
+.kds-icon.disabled[data-v-9a9cd3e8] {
   color: var(--kds-color-text-and-icon-disabled);
 }
 .kds-icon {
-&[data-v-667bceea] {
+&[data-v-b929f2eb] {
   --icon-width: var(--kds-dimension-icon-1x);
   --icon-height: var(--kds-dimension-icon-1x);
   --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
@@ -194,24 +194,24 @@
   vertical-align: middle;
   stroke-width: var(--icon-stroke-width);
 }
-&.xsmall[data-v-667bceea] {
+&.xsmall[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-0-56x);
     --icon-height: var(--kds-dimension-icon-0-56x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-0-75x);
     --icon-height: var(--kds-dimension-icon-0-75x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-s);
 }
-&.large[data-v-667bceea] {
+&.large[data-v-b929f2eb] {
     --icon-width: var(--kds-dimension-icon-1-25x);
     --icon-height: var(--kds-dimension-icon-1-25x);
     --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
 .kds-data-type-icon-container {
-&[data-v-667bceea] {
+&[data-v-b929f2eb] {
   --data-type-height: var(--kds-dimension-component-height-1x);
   --data-type-width: var(--kds-dimension-component-width-1x);
   --data-type-padding: var(--kds-spacing-container-0-12x);
@@ -229,23 +229,23 @@
 
   /* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
 }
-&.disabled[data-v-667bceea] {
+&.disabled[data-v-b929f2eb] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
     --data-type-height: var(--kds-dimension-icon-0-75x);
     --data-type-width: var(--kds-dimension-icon-0-75x);
     --data-type-padding: var(--kds-spacing-container-none);
 }
-&.large[data-v-667bceea] {
+&.large[data-v-b929f2eb] {
     --data-type-height: var(--kds-dimension-component-height-1-25x);
     --data-type-width: var(--kds-dimension-component-width-1-25x);
 }
 & .kds-icon.kds-data-type-icon {
-&.small[data-v-667bceea] {
+&.small[data-v-b929f2eb] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-m);
 }
-&.medium[data-v-667bceea] {
+&.medium[data-v-b929f2eb] {
       --icon-stroke-width: var(--kds-border-width-icon-stroke-l);
 }
 }
@@ -2076,7 +2076,7 @@ body:has(dialog.modal[open]) {
   cursor: pointer;
 }
 
-.file-explorer[data-v-e6617d12] {
+.file-explorer[data-v-10e65eb3] {
   display: flex;
   flex: 1 0 0%;
   flex-direction: column;
@@ -2085,10 +2085,10 @@ body:has(dialog.modal[open]) {
   /* needed so that the virtualization container can size the wrapper properly */
   min-height: 0;
 }
-.file-explorer-item[data-v-e6617d12] {
-  height: var(--v4f198f8d);
+.file-explorer-item[data-v-10e65eb3] {
+  height: var(--v4225dc64);
 }
-thead[data-v-e6617d12] {
+thead[data-v-10e65eb3] {
   /* Hide table head for better readability but keeping it for a11y reasons */
   position: absolute;
 
@@ -2099,7 +2099,7 @@ thead[data-v-e6617d12] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-e6617d12] {
+table[data-v-10e65eb3] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -2110,31 +2110,31 @@ table[data-v-e6617d12] {
 }
 table,
 tbody {
-&[data-v-e6617d12] {
+&[data-v-10e65eb3] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-e6617d12]:not(:has(.empty)) {
+&[data-v-10e65eb3]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-e6617d12] {
+&[data-v-10e65eb3] {
   outline: none;
   }
-&.keyboard-focus[data-v-e6617d12] {
+&.keyboard-focus[data-v-10e65eb3] {
     outline: 2px solid var(--kds-color-focus-outline);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
 }
-.empty[data-v-e6617d12] {
+.empty[data-v-10e65eb3] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--kds-spacing-container-0-37x);
   margin: var(--kds-spacing-container-4x) 0;
 }
-.custom-preview[data-v-e6617d12] {
+.custom-preview[data-v-10e65eb3] {
   position: fixed;
   top: 0;
   left: 0;
@@ -4611,6 +4611,127 @@ li {
 }
 }
 
+.tree-node-wrapper[data-v-5d13b0e7] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--kds-dimension-component-height-1-5x);
+}
+.tree-node[data-v-5d13b0e7] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-25x);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding-left: var(--kds-spacing-container-1x);
+  overflow: hidden;
+}
+.tree-node-label[data-v-5d13b0e7] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.expandable[data-v-5d13b0e7] {
+  padding-left: var(--kds-spacing-container-none);
+  font: var(--kds-font-base-interactive-small-strong);
+}
+.virtual-tree {
+&[data-v-5d13b0e7] {
+  --virtual-tree-indent: var(--kds-spacing-container-1x);
+  }
+&[data-v-5d13b0e7]:focus {
+    outline: none;
+}
+}
+
+.virtual-tree.keyboard-nav .virtual-tree-node.focused {
+  padding-right: var(--kds-spacing-container-0-37x);
+  padding-left: calc(
+    var(--virtual-tree-level, 0) * var(--virtual-tree-indent) +
+      var(--kds-spacing-container-0-12x)
+  );
+  border: var(--kds-border-action-focused);
+}
+.virtual-tree {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.virtual-tree-node {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--kds-dimension-component-width-0-75x) auto;
+  gap: var(--kds-spacing-container-0-25x);
+  height: var(--kds-dimension-component-height-1-5x);
+  padding-right: var(--kds-spacing-container-0-5x);
+  padding-left: calc(
+    var(--virtual-tree-level, 0) * var(--virtual-tree-indent) +
+      var(--kds-spacing-container-0-25x)
+  );
+  font: var(--kds-font-base-interactive-small);
+  color: var(--kds-color-text-and-icon-neutral);
+  cursor: pointer;
+  border-radius: var(--kds-border-radius-container-0-25x);
+}
+.virtual-tree-node:not(.disabled):hover {
+  background-color: var(--kds-color-background-neutral-hover);
+}
+.virtual-tree-node:not(.disabled):active {
+  background-color: var(--kds-color-background-neutral-active);
+}
+.virtual-tree-node.disabled {
+  color: var(--kds-color-text-and-icon-disabled);
+  cursor: default;
+}
+.virtual-tree-node.selected {
+  color: var(--kds-color-text-and-icon-selected);
+  background-color: var(--kds-color-background-selected-initial);
+}
+.virtual-tree-node.selected::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--kds-dimension-component-width-0-125x);
+  height: var(--kds-dimension-component-height-1x);
+  content: "";
+  background: var(--kds-color-background-selected-bold-initial);
+  border-top-right-radius: var(--kds-border-radius-container-0-12x);
+  border-bottom-right-radius: var(--kds-border-radius-container-0-12x);
+  transform: translateY(-50%);
+}
+.virtual-tree-node.selected:hover {
+  background-color: var(--kds-color-background-selected-hover);
+}
+.virtual-tree-node.selected:active {
+  background-color: var(--kds-color-background-selected-active);
+}
+.virtual-tree-node .node-arrow {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+.virtual-tree-node .node-arrow:empty {
+  display: none;
+}
+.virtual-tree-node:has(.node-arrow:empty) {
+  grid-template-columns: 1fr;
+}
+.virtual-tree-node .node-arrow.expanded:not(.loading) {
+  transform: rotate(90deg);
+}
+.virtual-tree-node .node-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
 .description {
 &[data-v-ed6ba7bb] {
   font: var(--kds-font-base-body-small);