@knime/kds-table 7.2.3 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @knime/kds-table
 
+## 8.1.0
+
+### Minor Changes
+
+- 813b76b: `TableUI` / `TableUIWithAutoSizeCalculation`: added `renderedOnBackgroundColor` prop (`"page-default" | "surface-default" | "surface-muted" | "surface-subtle"`, default `"page-default"`) to set the header's background color, so it can be matched to the surface the table is rendered on.
+
+### Patch Changes
+
+- Updated dependencies
+  - @knime/kds-components@8.1.0
+  - @knime/kds-styles@8.1.0
+
+## 8.0.0
+
+### Patch Changes
+
+- Updated dependencies [336b1b4]
+  - @knime/kds-components@8.0.0
+  - @knime/kds-styles@8.0.0
+
 ## 7.2.3
 
 ### Patch Changes

package/README.md

@@ -18,10 +18,6 @@ From the root of the monorepo:
 pnpm dev       # Starts Storybook with all design system components
 ```
 
-### Git hooks
-
-Git hooks are configured at the monorepo root. See [root README](../README.md) for details.
-
 ### Testing
 
 #### Running unit tests

package/dist/index.css

@@ -416,12 +416,12 @@ tr {
 }
 
 thead {
-&[data-v-885a5768] {
-  background-color: var(--kds-color-page-default);
+&[data-v-8f9b1e4b] {
+  background-color: var(--v24252679);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-885a5768] {
+&[data-v-8f9b1e4b] {
     display: flex;
     height: 100%;
     transition:
@@ -429,51 +429,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-885a5768] {
+&[data-v-8f9b1e4b] {
       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-885a5768] {
+&.deletion-cell-spacer[data-v-8f9b1e4b] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-885a5768] {
+&[data-v-8f9b1e4b] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-885a5768] {
+& .select-checkbox[data-v-8f9b1e4b] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-885a5768] {
+&.new-column-head[data-v-8f9b1e4b] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-885a5768]:hover {
+&[data-v-8f9b1e4b]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-885a5768] {
+&.sub-menu-active tr[data-v-8f9b1e4b] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-885a5768] {
+&[data-v-8f9b1e4b] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-885a5768] {
+&.header-focused[data-v-8f9b1e4b] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -655,7 +655,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-bc9c37d0] {
+.wrapper[data-v-8198a271] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -665,7 +665,7 @@ tr.row {
 }
 }
 table {
-&[data-v-bc9c37d0] {
+&[data-v-8198a271] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -673,20 +673,20 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-bc9c37d0]:focus {
+&[data-v-8198a271]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-bc9c37d0] {
+& .new-row-footer[data-v-8198a271] {
     width: 100%;
 }
 }
 
 /* The empty state is placed into the rows' area by TableCoreVirtual. */
-.empty-state[data-v-bc9c37d0] {
+.empty-state[data-v-8198a271] {
   max-width: 100%;
 }
 
-.table-column-size-calculation[data-v-f0e4039f] {
+.table-column-size-calculation[data-v-8ae322ef] {
   position: absolute;
   top: -9999px;
   left: -9999px;

package/dist/index.js

@@ -1343,6 +1343,28 @@ var constants_default = {
 	CELL_PADDING_HORIZONTAL
 };
 //#endregion
+//#region src/types/BackgroundColor.ts
+/**
+* Background-color tokens the table can be rendered on top of. Used to match
+* the table header's background to the surface surrounding the table.
+*/
+var BACKGROUND_COLORS = [
+	"page-default",
+	"surface-default",
+	"surface-muted",
+	"surface-subtle"
+];
+/**
+* Shared Vue prop options for `renderedOnBackgroundColor`, used by every
+* component that exposes it. The `validator` guards the runtime value for
+* plain-JS callers that bypass the `BackgroundColor` type at compile time.
+*/
+var renderedOnBackgroundColorProp = {
+	type: String,
+	default: "page-default",
+	validator: (value) => BACKGROUND_COLORS.includes(value)
+};
+//#endregion
 //#region src/utils/index.ts
 var isNonEmptyObject = (val) => val !== null && typeof val === "object" && Object.getOwnPropertyNames(val).length > 0;
 var isObjectRepresentation = (val) => {
@@ -5850,7 +5872,7 @@ var columnMenuButtonRef = "columnMenuButton";
 * @emits headerSelect event when the checkbox is selected for table-wide toggling of selection.
 * @emits subMenuItemSelection event when the selection of a submenu item is changed
 */
-var Header_vue_vue_type_script_lang_default = {
+var __default__ = {
 	components: {
 		KdsCheckbox,
 		KdsButton,
@@ -6170,7 +6192,9 @@ var Header_vue_vue_type_script_lang_default = {
 		selectedHeaderIndex: {
 			type: Number,
 			default: null
-		}
+		},
+		/** Background-color token matching the surface the table is rendered on; sets the header's background. */
+		renderedOnBackgroundColor: renderedOnBackgroundColorProp
 	},
 	emits: {
 		headerSelect: (selected) => true,
@@ -6221,6 +6245,9 @@ var Header_vue_vue_type_script_lang_default = {
 		};
 	},
 	computed: {
+		headerBackgroundColor() {
+			return `var(--kds-color-${this.renderedOnBackgroundColor}, var(--kds-color-page-default))`;
+		},
 		/**
 		* The smallest size that can be given to all columns at once, i.e. the
 		* largest of their individual minimums (see {@link minSizeOfColumn}).
@@ -6338,6 +6365,14 @@ var Header_vue_vue_type_script_lang_default = {
 		}
 	}
 };
+var __injectCSSVars__ = () => {
+	useCssVars((_ctx) => ({ "v24252679": _ctx.headerBackgroundColor }));
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+	__injectCSSVars__();
+	return __setup__(props, ctx);
+} : __injectCSSVars__;
 //#endregion
 //#region src/components/layout/Header.vue
 var _hoisted_1$3 = {
@@ -6449,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(Header_vue_vue_type_script_lang_default, [["render", _sfc_render$2], ["__scopeId", "data-v-885a5768"]]);
+var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(__default__, [["render", _sfc_render$2], ["__scopeId", "data-v-8f9b1e4b"]]);
 //#endregion
 //#region src/components/layout/NewRowButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = { class: "sticky-container" };
@@ -7347,6 +7382,8 @@ var TableUI_vue_vue_type_script_lang_default = {
 			type: Object,
 			default: () => ({})
 		},
+		/** Background-color token matching the surface the table is rendered on; sets the header's background. */
+		renderedOnBackgroundColor: renderedOnBackgroundColorProp,
 		disableRowHeightTransition: {
 			type: Boolean,
 			default: false
@@ -8245,6 +8282,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 			class: normalizeClass(["table-header", { "sub-menu-active": $props.subMenuConfig.subMenuItems?.length }]),
 			"show-new-column-button": $setup.showNewColumnAndRowButton,
 			"selected-header-index": $options.selectedHeaderIndex,
+			"rendered-on-background-color": $props.renderedOnBackgroundColor,
 			onHeaderSelect: $options.onSelectAll,
 			onColumnSort: $options.onColumnSort,
 			onDeleteColumn: $options.onDeleteColumn,
@@ -8275,6 +8313,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 			"class",
 			"show-new-column-button",
 			"selected-header-index",
+			"rendered-on-background-color",
 			"onHeaderSelect",
 			"onColumnSort",
 			"onDeleteColumn",
@@ -8349,7 +8388,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		"onPageSizeUpdate"
 	])) : createCommentVNode("", true)], 544)], 4);
 }
-var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-bc9c37d0"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-8198a271"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {
@@ -8404,6 +8443,8 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 			type: Object,
 			default: () => ({})
 		},
+		/** Background-color token matching the surface the table is rendered on (forwarded to TableUI). */
+		renderedOnBackgroundColor: renderedOnBackgroundColorProp,
 		tableConfig: {
 			type: Object,
 			default: () => ({})
@@ -8759,6 +8800,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		"num-rows-below": $props.numRowsBelow,
 		"bottom-data": $props.bottomData,
 		"row-config": $props.rowConfig,
+		"rendered-on-background-color": $props.renderedOnBackgroundColor,
 		"table-config": $props.tableConfig,
 		"table-state": $props.tableState,
 		"page-config": $props.pageConfig,
@@ -8785,6 +8827,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		"num-rows-below",
 		"bottom-data",
 		"row-config",
+		"rendered-on-background-color",
 		"table-config",
 		"table-state",
 		"page-config",
@@ -8818,7 +8861,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		"onVnodeMounted"
 	])) : createCommentVNode("", true)], 64);
 }
-var TableUIWithAutoSizeCalculation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default, [["render", _sfc_render], ["__scopeId", "data-v-f0e4039f"]]);
+var TableUIWithAutoSizeCalculation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default, [["render", _sfc_render], ["__scopeId", "data-v-8ae322ef"]]);
 //#endregion
 export { PopoverContainer_default as PopoverContainer, TableActionBar_default as TableActionBar, TableUI_default as TableUI, TableUIWithAutoSizeCalculation_default as TableUIWithAutoSizeCalculation, columnSortText, columnTypes, constants_default as constants, defaultPageSize, getMissingValueMessage, isMissingValue, unpackObjectRepresentation, useButtonPopoverInteraction, useColumnSizes };