@knime/kds-table 0.4.1 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @knime/kds-table
 
+## 0.5.1
+
+### Patch Changes
+
+- bb1f785: Revert removal of background token from header as the row content will be visible during scroll
+
+## 0.5.0
+
+### Minor Changes
+
+- 5445965: Derive table sizes from props, change action bar state prop, add forceShow for action bar
+
+### Patch Changes
+
+- a5fa986: Show table header sub menu only on hover
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/index.css

@@ -4828,17 +4828,17 @@ tr {
 }
 
 .page-navigation {
-&[data-v-f8714af0] {
+&[data-v-95577571] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
 }
-& .navigation-buttons[data-v-f8714af0] {
+& .navigation-buttons[data-v-95577571] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
 }
-& .page-count[data-v-f8714af0] {
+& .page-count[data-v-95577571] {
     font: var(--kds-font-base-title-small);
     color: var(--kds-color-text-and-icon-subtle);
 }
@@ -4861,19 +4861,19 @@ tr {
 }
 
 .page-controls {
-&[data-v-d15a282a] {
+&[data-v-bf51fe76] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-75x);
   background: var(--kds-color-surface-default);
 }
-& .page-row-range[data-v-d15a282a],
-  & .page-size-menu[data-v-d15a282a] {
+& .page-row-range[data-v-bf51fe76],
+  & .page-size-menu[data-v-bf51fe76] {
     flex-grow: 1;
     flex-basis: 0;
 }
-.page-size-menu[data-v-d15a282a] {
+.page-size-menu[data-v-bf51fe76] {
     display: flex;
     justify-content: flex-end;
 }
@@ -4938,7 +4938,7 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-4a59722f] {
+&[data-v-4bc7ffb1] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4947,28 +4947,24 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-top: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-4a59722f] {
+&.temporary-view[data-v-4bc7ffb1] {
     background-color: var(--kds-color-background-static-info-muted);
 }
 & .left {
-&[data-v-4a59722f] {
+&[data-v-4bc7ffb1] {
     display: flex;
     flex: 1 0 0;
     gap: var(--kds-spacing-container-0-5x);
     align-items: center;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .title[data-v-4a59722f] {
-      font: var(--kds-font-base-title-medium-strong);
-      color: var(--kds-color-text-and-icon-neutral);
-}
-& .dimension[data-v-4a59722f] {
+& .dimension[data-v-4bc7ffb1] {
       font: var(--kds-font-base-title-small);
       color: var(--kds-color-text-and-icon-muted);
       white-space: pre;
 }
 }
-& .right[data-v-4a59722f] {
+& .right[data-v-4bc7ffb1] {
     display: flex;
     gap: var(--kds-spacing-container-0-25x);
     align-items: center;
@@ -4978,7 +4974,7 @@ tr {
 }
 
 .column-header {
-&[data-v-b99ef494] {
+&[data-v-34396642] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -4992,10 +4988,10 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-b99ef494] {
+&.header-focused[data-v-34396642] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-b99ef494] {
+&.colored-header[data-v-34396642] {
     /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -5006,44 +5002,48 @@ tr {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-b99ef494] {
+&[data-v-34396642] {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
 }
-&[data-v-b99ef494]:focus {
+&[data-v-34396642]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-b99ef494] {
+&.with-button-in-header[data-v-34396642] {
       width: calc(
         100% - var(--kds-dimension-component-width-1-5x)
       ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-b99ef494] {
+&[data-v-34396642] {
       display: flex;
 }
-& .header-text-container[data-v-b99ef494] {
+& .header-text-container[data-v-34396642] {
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-b99ef494] {
+& .sub-header-text-container[data-v-34396642] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
-& .delete-column-button[data-v-b99ef494] {
+& .menu-button-hidden[data-v-34396642] {
+    pointer-events: none;
+    opacity: 0;
+}
+& .delete-column-button[data-v-34396642] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-b99ef494] {
+&[data-v-34396642] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -5069,26 +5069,28 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-b99ef494] {
+& .resize-handle[data-v-34396642] {
       border-right: var(--kds-border-resize-handle-hover);
       border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-b99ef494] {
+&.hover[data-v-34396642] {
       opacity: 1;
 }
-&.drag[data-v-b99ef494] {
+&.drag[data-v-34396642] {
       opacity: 1;
 }
 }
 }
 
 thead {
-&[data-v-8ffda8bd] {
+&[data-v-faef4e27] {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--knime-white);
   border-top: var(--kds-border-base-subtle);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-8ffda8bd] {
+&[data-v-faef4e27] {
     display: flex;
     height: 100%;
     transition:
@@ -5096,51 +5098,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-8ffda8bd] {
+&[data-v-faef4e27] {
       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-8ffda8bd] {
+&.deletion-cell-spacer[data-v-faef4e27] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-8ffda8bd] {
+&[data-v-faef4e27] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-8ffda8bd] {
+& .select-checkbox[data-v-faef4e27] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-8ffda8bd] {
+&.new-column-head[data-v-faef4e27] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-8ffda8bd]:hover {
+&[data-v-faef4e27]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-8ffda8bd] {
+&.sub-menu-active tr[data-v-faef4e27] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-8ffda8bd] {
+&[data-v-faef4e27] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-8ffda8bd] {
+&.header-focused[data-v-faef4e27] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -5310,7 +5312,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-aed49fa2] {
+.wrapper[data-v-4db02524] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5320,7 +5322,7 @@ tr.row {
 }
 }
 table {
-&[data-v-aed49fa2] {
+&[data-v-4db02524] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -5328,10 +5330,10 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-aed49fa2]:focus {
+&[data-v-4db02524]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-aed49fa2] {
+& .new-row-footer[data-v-4db02524] {
     width: 100%;
 }
 }