@knime/kds-table 7.2.0 → 7.2.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @knime/kds-table
 
+## 7.2.2
+
+### Patch Changes
+
+- Updated dependencies [c4826f2]
+  - @knime/kds-components@7.2.2
+  - @knime/kds-styles@7.2.2
+
+## 7.2.1
+
+### Patch Changes
+
+- ec43060: - `TableUI`:
+  - a cell now only shows a tooltip when its content is truncated, instead of
+    repeating content that already fits into the cell. Missing value cells keep
+    their tooltip explaining the missing value.
+  - hovering a column header no longer reserves room for a sort button the
+    column does not have, which was truncating the column name in narrow
+    columns of tables without sorting.
+- Updated dependencies [ec43060]
+  - @knime/kds-components@7.2.1
+  - @knime/kds-styles@7.2.1
+
 ## 7.2.0
 
 ### Patch Changes

package/dist/index.css

@@ -284,7 +284,7 @@ tr {
 }
 
 .column-header {
-&[data-v-0f9137cc] {
+&[data-v-2bbac71d] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -298,10 +298,10 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-0f9137cc] {
+&.header-focused[data-v-2bbac71d] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-0f9137cc] {
+&.colored-header[data-v-2bbac71d] {
     /* stylelint-disable no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -313,7 +313,7 @@ tr {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-0f9137cc] {
+&[data-v-2bbac71d] {
     display: flex;
     flex-shrink: 1;
     flex-direction: column;
@@ -325,20 +325,20 @@ tr {
        disappears) instead of pushing the header-action buttons outside. */
     min-width: 0;
 }
-&[data-v-0f9137cc]:focus {
+&[data-v-2bbac71d]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-0f9137cc] {
+&.with-button-in-header[data-v-2bbac71d] {
       width: calc(
         100% - var(--kds-dimension-component-width-1-5x)
       ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-0f9137cc] {
+&[data-v-2bbac71d] {
       display: flex;
       min-width: 0;
 }
-& .header-text-container[data-v-0f9137cc] {
+& .header-text-container[data-v-2bbac71d] {
         min-width: 0;
         max-width: 100%;
         overflow: hidden;
@@ -346,37 +346,37 @@ tr {
         font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-0f9137cc] {
+& .sub-header-text-container[data-v-2bbac71d] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
 & .header-action-button {
-&[data-v-0f9137cc] {
+&[data-v-2bbac71d] {
     flex-shrink: 0;
 
     /* Collapsed to zero width by default so it reserves no space in the
        header; it only claims room once hovered/focused (or sorted), at
        which point the column name shrinks/truncates to make room for it. */
 }
-& + .header-action-button[data-v-0f9137cc] {
+& + .header-action-button[data-v-2bbac71d] {
       margin-left: var(--kds-spacing-container-0-12x);
 }
-&.action-button-hidden[data-v-0f9137cc] {
+&.action-button-hidden[data-v-2bbac71d] {
       width: 0;
       overflow: hidden;
       pointer-events: none;
       opacity: 0;
 }
 }
-& .delete-column-button[data-v-0f9137cc] {
+& .delete-column-button[data-v-2bbac71d] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-0f9137cc] {
+&[data-v-2bbac71d] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -402,14 +402,14 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-0f9137cc] {
+& .resize-handle[data-v-2bbac71d] {
       border-right: var(--kds-border-resize-handle-hover);
       border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-0f9137cc] {
+&.hover[data-v-2bbac71d] {
       opacity: 1;
 }
-&.drag[data-v-0f9137cc] {
+&.drag[data-v-2bbac71d] {
       opacity: 1;
 }
 }
@@ -526,7 +526,7 @@ thead {
 }
 
 .data-cell {
-&[data-v-a7720ed9] {
+&[data-v-fa1401e0] {
   display: flex;
   font: var(--kds-font-base-interactive-small);
   color: var(--kds-color-text-and-icon-neutral);
@@ -534,10 +534,10 @@ thead {
   user-select: none;
   background-clip: border-box;
 }
-&.in-cell-selection[data-v-a7720ed9] {
+&.in-cell-selection[data-v-fa1401e0] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-cell[data-v-a7720ed9] {
+&.colored-cell[data-v-fa1401e0] {
     /* stylelint-disable no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -549,7 +549,7 @@ thead {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .cell-content {
-&[data-v-a7720ed9] {
+&[data-v-fa1401e0] {
     position: relative;
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
@@ -560,13 +560,13 @@ thead {
     /* Anchored at the same height as the buttons of padded (non-slotted)
        cells, so it lines up with the other columns' buttons in the row. */
 }
-& > .overlaid[data-v-a7720ed9] {
+& > .overlaid[data-v-fa1401e0] {
       position: absolute;
-      top: var(--ceb68c32);
+      top: var(--v092faed6);
       right: 0;
 }
 }
-& .cell-content .cell-text[data-v-a7720ed9] {
+& .cell-content .cell-text[data-v-fa1401e0] {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;

package/dist/index.js

@@ -6016,8 +6016,7 @@ var Header_vue_vue_type_script_lang_default = {
 				const showMenuButton = computed(() => {
 					return props.additionalMenuItems?.length && (headerHovered.value || menuOpen.value || nativeFocusInsideHeader.value) && !dragging.value;
 				});
-				/** Visible on hover/focus like the menu button, and while the column is sorted. */
-				const sortButtonVisible = computed(() => (headerHovered.value || nativeFocusInsideHeader.value || isSorted.value) && !dragging.value);
+				const sortButtonVisible = computed(() => showSortButton.value && (headerHovered.value || nativeFocusInsideHeader.value || isSorted.value) && !dragging.value);
 				__expose({
 					getHeaderCellWidth,
 					focus,
@@ -6133,7 +6132,7 @@ var Header_vue_vue_type_script_lang_default = {
 					], 38);
 				};
 			}
-		}), [["__scopeId", "data-v-0f9137cc"]])
+		}), [["__scopeId", "data-v-2bbac71d"]])
 	},
 	props: {
 		tableConfig: {
@@ -6541,7 +6540,7 @@ var CellRenderer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		"select"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		useCssVars((_ctx) => ({ "ceb68c32": `${_ctx.defaultTopBottomPadding}px` }));
+		useCssVars((_ctx) => ({ "v092faed6": `${_ctx.defaultTopBottomPadding}px` }));
 		const emit = __emit;
 		const props = __props;
 		const dataCellColorStyle = computed(() => {
@@ -6652,16 +6651,20 @@ var CellRenderer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, [createElementVNode("div", _hoisted_1$1, [__props.isEditing ? renderSlot(_ctx.$slots, "editable-cell", { cellElement: _ctx.$el }, void 0, true, 0) : __props.isMissing ? (openBlock(), createBlock(unref(KdsMissingValueIcon), {
 				key: 1,
 				size: "small"
-			})) : __props.isSlotted ? renderSlot(_ctx.$slots, "default", { width: __props.size - props.defaultLeftRightPadding * 2 - (showCellExpandButton.value && !__props.overlayExpandButton ? unref(EXPAND_BUTTON_WIDTH) : 0) }, void 0, true, 2) : (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.text), 1)), showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton_default, {
+			})) : __props.isSlotted ? renderSlot(_ctx.$slots, "default", { width: __props.size - props.defaultLeftRightPadding * 2 - (showCellExpandButton.value && !__props.overlayExpandButton ? unref(EXPAND_BUTTON_WIDTH) : 0) }, void 0, true, 2) : withDirectives((openBlock(), createElementBlock("span", _hoisted_2$1, [createTextVNode(toDisplayString(__props.text), 1)])), [[
+				unref(vKdsTooltip),
+				props.tooltip,
+				"truncated"
+			]]), showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton_default, {
 				key: 4,
 				class: normalizeClass({ overlaid: __props.overlayExpandButton }),
 				toggled: isExpanded.value,
 				onPointerdown: onExpandButtonPointerDown,
 				onClick: onExpandButtonClick
-			}, null, 8, ["class", "toggled"])) : createCommentVNode("", true)], 512)], 38)), [[unref(vKdsTooltip), props.tooltip === null || __props.isSlotted && !__props.isMissing ? void 0 : props.tooltip]]);
+			}, null, 8, ["class", "toggled"])) : createCommentVNode("", true)], 512)], 38)), [[unref(vKdsTooltip), __props.isMissing ? props.tooltip : void 0]]);
 		};
 	}
-}), [["__scopeId", "data-v-a7720ed9"]]);
+}), [["__scopeId", "data-v-fa1401e0"]]);
 //#endregion
 //#region src/components/layout/Cell.vue
 var Cell_default = /* @__PURE__ */ defineComponent({