@knime/kds-table 8.1.0 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @knime/kds-table
 
+## 8.2.1
+
+### Patch Changes
+
+- 2dbf832: `TableUI`: hide the header selection overlay while a column is being resized, instead of leaving it at the pre-drag position while the columns move.
+- Updated dependencies [c8cdfef, 9cf30f3]
+  - @knime/kds-styles@8.2.1
+  - @knime/kds-components@8.2.1
+
+## 8.2.0
+
+### Patch Changes
+
+- Updated dependencies [256224e, 7b5e7c4]
+  - @knime/kds-components@8.2.0
+  - @knime/kds-styles@8.2.0
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/index.css

@@ -416,12 +416,12 @@ tr {
 }
 
 thead {
-&[data-v-8f9b1e4b] {
-  background-color: var(--v24252679);
+&[data-v-79b0407b] {
+  background-color: var(--v9318f08a);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-8f9b1e4b] {
+&[data-v-79b0407b] {
     display: flex;
     height: 100%;
     transition:
@@ -429,51 +429,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-8f9b1e4b] {
+&[data-v-79b0407b] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-8f9b1e4b] {
+&.deletion-cell-spacer[data-v-79b0407b] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-8f9b1e4b] {
+&[data-v-79b0407b] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-8f9b1e4b] {
+& .select-checkbox[data-v-79b0407b] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-8f9b1e4b] {
+&.new-column-head[data-v-79b0407b] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-8f9b1e4b]:hover {
+&[data-v-79b0407b]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-8f9b1e4b] {
+&.sub-menu-active tr[data-v-79b0407b] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-8f9b1e4b] {
+&[data-v-79b0407b] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-8f9b1e4b] {
+&.header-focused[data-v-79b0407b] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -575,45 +575,46 @@ thead {
 }
 }
 
-tr[data-v-1e8298b4] {
+tr[data-v-2e6bac43] {
   display: flex;
 }
 tr.row {
-&[data-v-1e8298b4] {
+&[data-v-2e6bac43] {
   border-bottom: var(--kds-border-base-subtle);
   }
 & td {
-&[data-v-1e8298b4] {
+&[data-v-2e6bac43] {
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     }
 &.select-cell {
-&[data-v-1e8298b4] {
+&[data-v-2e6bac43] {
       display: flex;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
       }
-& .select-checkbox[data-v-1e8298b4] {
+& .select-checkbox[data-v-2e6bac43] {
         /* With this added padding the checkbox appears centered initially */
         padding: var(--kds-spacing-container-0-10x);
 }
 }
 &.deletion-cell {
-&[data-v-1e8298b4] {
+&[data-v-2e6bac43] {
       display: flex;
       align-items: center;
       justify-content: center;
       width: var(--kds-dimension-component-width-2x);
       min-width: var(--kds-dimension-component-width-2x);
+      overflow: visible;
       opacity: 0;
       }
-&[data-v-1e8298b4]:focus-within {
+&[data-v-2e6bac43]:focus-within {
         opacity: 1;
 }
 }
-&.action[data-v-1e8298b4] {
+&.action[data-v-2e6bac43] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -622,21 +623,21 @@ tr.row {
 }
 }
 &:hover {
-&[data-v-1e8298b4] {
+&[data-v-2e6bac43] {
     outline: none;
     background-color: var(--kds-color-background-neutral-hover);
 
     /* stylelint-disable-next-line no-descending-specificity -- hover needs lower specificity but must come after base rule */
     }
-& .deletion-cell[data-v-1e8298b4] {
+& .deletion-cell[data-v-2e6bac43] {
       opacity: 1;
 }
 }
-& a[data-v-1e8298b4] {
+& a[data-v-2e6bac43] {
     outline: none;
 }
 }
-.row-drag-handle[data-v-1e8298b4] {
+.row-drag-handle[data-v-2e6bac43] {
   height: var(--kds-spacing-container-0-37x);
   margin-top: calc(-1 * var(--kds-spacing-container-0-37x));
   cursor: row-resize;

package/dist/index.js

@@ -89,13 +89,13 @@ var border = {
 		transparent: {
 			color: {
 				light: {
-					h: 345,
+					h: 0,
 					s: 0,
 					l: 11.4,
 					a: 0
 				},
 				dark: {
-					h: 345,
+					h: 0,
 					s: 0,
 					l: 11.4,
 					a: 0
@@ -107,20 +107,20 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid hsl(345 0% 11.4% / 0)",
+				value: "1px solid hsl(0 0% 11.4% / 0)",
 				variable: "var(--kds-border-action-transparent)"
 			}
 		},
 		default: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .4
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .5
@@ -132,7 +132,7 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
 				variable: "var(--kds-border-action-default)"
 			}
 		},
@@ -289,13 +289,13 @@ var border = {
 		input: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .4
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .5
@@ -307,7 +307,7 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
 				variable: "var(--kds-border-action-input)"
 			}
 		}
@@ -316,13 +316,13 @@ var border = {
 		default: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .4
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .5
@@ -334,20 +334,20 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+				value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
 				variable: "var(--kds-border-base-default)"
 			}
 		},
 		muted: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .2
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .2
@@ -359,20 +359,20 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+				value: "1px solid light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2))",
 				variable: "var(--kds-border-base-muted)"
 			}
 		},
 		subtle: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .1
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .1
@@ -384,7 +384,7 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+				value: "1px solid light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
 				variable: "var(--kds-border-base-subtle)"
 			}
 		},
@@ -620,13 +620,13 @@ var border = {
 		initial: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .4
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .4
@@ -638,20 +638,20 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+				value: "2px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4))",
 				variable: "var(--kds-border-resize-handle-initial)"
 			}
 		},
 		hover: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .64
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .58
@@ -663,20 +663,20 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+				value: "2px solid light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58))",
 				variable: "var(--kds-border-resize-handle-hover)"
 			}
 		},
 		active: {
 			color: {
 				light: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 10.2,
 					a: .74
 				},
 				dark: {
-					h: 330,
+					h: 0,
 					s: 0,
 					l: 99,
 					a: .68
@@ -688,7 +688,7 @@ var border = {
 			},
 			style: "solid",
 			css: {
-				value: "2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+				value: "2px solid light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68))",
 				variable: "var(--kds-border-resize-handle-active)"
 			}
 		}
@@ -1396,7 +1396,7 @@ var getMissingValueMessage = (cellData) => {
 };
 var getPropertiesFromColumns = (columnConfigs, key) => columnConfigs.map((colConfig) => colConfig[key]);
 //#endregion
-//#region ../../node_modules/.pnpm/@vueuse+shared@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
+//#region ../../node_modules/.pnpm/@vueuse+shared@14.4.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
 /**
 * Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
 *
@@ -1412,7 +1412,7 @@ function tryOnScopeDispose(fn, failSilently) {
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
 //#endregion
-//#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
+//#region ../../node_modules/.pnpm/@vueuse+core@14.4.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
 var defaultWindow = isClient ? window : void 0;
 isClient && window.document;
 isClient && window.navigator;
@@ -6261,7 +6261,7 @@ var __default__ = {
 		},
 		headerSelectionOverlayStyle() {
 			const columnIndex = this.selectedHeaderIndex;
-			if (columnIndex === null || !this.tableConfig.enableHeaderCellSelection) return null;
+			if (columnIndex === null || !this.tableConfig.enableHeaderCellSelection || this.resizingColumnIndex !== null) return null;
 			let left = 0;
 			if (this.tableConfig.showSelection) left += SPECIAL_COLUMNS_SIZE;
 			if (this.tableConfig.enableRowDeletion) left += SPECIAL_COLUMNS_SIZE;
@@ -6366,7 +6366,7 @@ var __default__ = {
 	}
 };
 var __injectCSSVars__ = () => {
-	useCssVars((_ctx) => ({ "v24252679": _ctx.headerBackgroundColor }));
+	useCssVars((_ctx) => ({ "v9318f08a": _ctx.headerBackgroundColor }));
 };
 var __setup__ = __default__.setup;
 __default__.setup = __setup__ ? (props, ctx) => {
@@ -6484,7 +6484,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 		style: normalizeStyle($options.headerSelectionOverlayStyle)
 	}, null, 6)) : createCommentVNode("", true)]);
 }
-var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(__default__, [["render", _sfc_render$2], ["__scopeId", "data-v-8f9b1e4b"]]);
+var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(__default__, [["render", _sfc_render$2], ["__scopeId", "data-v-79b0407b"]]);
 //#endregion
 //#region src/components/layout/NewRowButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = { class: "sticky-container" };
@@ -7144,7 +7144,7 @@ var TableUI_vue_vue_type_script_lang_default = {
 					}, null, 32)) : createCommentVNode("", true)], 64);
 				};
 			}
-		}), [["__scopeId", "data-v-1e8298b4"]]),
+		}), [["__scopeId", "data-v-2e6bac43"]]),
 		CellSelectionOverlay: /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 			__name: "CellSelectionOverlay",
 			props: {