@pega/lists-react 9.0.0-build.9.8 → 9.0.0

package/lib/Core/Views/Table/StyledTableContainer.js

@@ -4,31 +4,65 @@ import styled, { css } from 'styled-components';
 import { getLuminance, meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
 import { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';
-import { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';
+import { StyledLabel, StyledProgressBackdrop, calculateFontSize, tryCatch, isSameColor } from '@pega/cosmos-react-core';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
 import { CellIcon } from './CellWrapper';
 const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme, view, isFullscreen }) => {
-    const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);
+    let colIdToFillRemainingSpace;
+    let isAggregationApplied = false;
+    (view.columns ?? [])
+        .filter(c => !c.hidden)
+        .forEach(c => {
+        if (!colIdToFillRemainingSpace && c.field.fillAvailableSpace) {
+            colIdToFillRemainingSpace = c.field.id;
+        }
+        if (c.aggregated) {
+            isAggregationApplied = true;
+        }
+    });
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const showFreezeLine = view.state.responsive?.sm &&
         !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);
     const selectedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     const lightGreyColor = theme.base.colors.gray['extra-light'];
-    const freezeLineShadowTransparent = transparentize(0.9, theme.components.table.header['foreground-color']);
-    const oddRowBackgroundColor = getLuminance(theme.components.table.body['secondary-background-color']) > 0.5
-        ? theme.components.table.body['secondary-background-color']
-        : mix(0.75, theme.components.table.body['background-color'], theme.components.table.body['secondary-background-color']);
+    const freezeLineShadowTransparent = transparentize(getLuminance(theme.components.table.header['foreground-color']) < 0.5 ? 0.9 : 0.75, theme.components.table.header['foreground-color']);
+    const headerBackground = theme.components.table.header['background-color'];
+    const bodyPrimaryBackground = theme.components.table.body['background-color'];
+    const bodySecondaryBackground = theme.components.table.body['secondary-background-color'];
+    const secondaryBackgroundForEvenRow = isSameColor(headerBackground, bodyPrimaryBackground);
+    /* Calculating usable striped row background and foreground colors */
+    const stripedRowBackground = getLuminance(bodySecondaryBackground) > 0.5
+        ? bodySecondaryBackground
+        : mix(0.75, bodyPrimaryBackground, bodySecondaryBackground);
+    const stripedRowContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], stripedRowBackground).AA;
+    const useableStripedRowForeground = stripedRowContrast
+        ? theme.components.table.body['foreground-color']
+        : readableColor(theme.components.table.body['foreground-color'], stripedRowBackground);
+    /* Calculating even row and odd row background and foreground colors */
+    const evenRowBackgroundColor = secondaryBackgroundForEvenRow
+        ? bodySecondaryBackground
+        : bodyPrimaryBackground;
+    const useableEvenRowForeground = secondaryBackgroundForEvenRow
+        ? useableStripedRowForeground
+        : theme.components.table.body['foreground-color'];
+    /* Calculating usable odd row background and foreground colors */
+    const oddRowBackgroundColor = secondaryBackgroundForEvenRow
+        ? bodyPrimaryBackground
+        : bodySecondaryBackground;
+    const useableOddRowForeground = secondaryBackgroundForEvenRow
+        ? theme.components.table.body['foreground-color']
+        : useableStripedRowForeground;
     const headerForegroundContrast = meetsContrastGuidelines(theme.components.table.header['foreground-color'], theme.components.table.header['background-color']).AA;
     const usableHeaderForeground = headerForegroundContrast
         ? theme.components.table.header['foreground-color']
         : readableColor(theme.components.table.header['foreground-color'], theme.components.table.header['background-color']);
-    const oddRowContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], oddRowBackgroundColor).AA;
-    const useableOddRowForeground = oddRowContrast
-        ? theme.components.table.body['foreground-color']
-        : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);
+    const borderVerticalInner = theme.components.table.border['vertical-inner'];
+    const borderVerticalOuter = theme.components.table.border['vertical-outer'];
+    const borderHorizontalInner = theme.components.table.border['horizontal-inner'] && !theme.components.table['striped-rows'];
+    const borderHorizontalOuter = theme.components.table.border['horizontal-outer'];
+    const showBorderOnLastStripedRow = theme.components.table.border['horizontal-inner'] && theme.components.table['striped-rows'];
     return css `
-    --primary-background: ${theme.base.palette['primary-background']};
-    --secondary-background: ${theme.components.table.header['background-color']};
     --forground-color: ${theme.base.palette['foreground-color']};
     --interactive: ${theme.base.palette.interactive};
     --medium-blue: ${theme.base.colors.blue.medium};
@@ -40,11 +74,12 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     --letter-spacing: ${theme.components.table.typography['letter-spacing']};
     --cell-padding: ${theme.base.spacing};
     --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);
-    --header-cell-padding: 0 0.5rem 0 var(--cell-padding);
-    --header-bg-color: var(--secondary-background);
+    --header-cell-padding: 0 0.44rem 0 var(--cell-padding);
+    --header-bg-color: ${theme.components.table.header['background-color']};
     --header-fg-color: ${usableHeaderForeground};
     --default-group-header-height: 1.5rem;
     --group-header-height: var(--default-group-header-height);
+    --group-bg-color: ${theme.components.table.body['secondary-background-color']};
     --box-sizing: content-box;
     --animation-ease: ${theme.base.animation.timing.ease};
     --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};
@@ -59,11 +94,27 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
 
     .container {
       ${() => generateRSDataContainerHeightStyles()};
-      border: var(--border-style);
-      border-radius: var(--border-radius, ${theme.base['border-radius']});
+      ${borderHorizontalOuter &&
+        css `
+        border-top: var(--border-style);
+        border-bottom: var(--border-style);
+      `}
+      ${borderVerticalOuter &&
+        css `
+        border-left: var(--border-style);
+        border-right: var(--border-style);
+      `}
+      ${borderVerticalOuter &&
+        borderHorizontalOuter &&
+        css `
+        border-radius: var(--border-radius, ${theme.base['border-radius']});
+      `}
       position: relative;
       letter-spacing: var(--letter-spacing);
       font-stretch: var(--font-stretch);
+      ${StyledTabPanel} & ${StyledProgressBackdrop} {
+        border-radius: var(--border-radius, ${theme.base['border-radius']});
+      }
     }
 
     .hide-rows-till-ready .row[aria-rowindex] {
@@ -113,44 +164,16 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       grid-template-columns: auto;
     }
 
-    .fallback,
-    .fallback-footer {
-      height: var(--row-height);
-      background-color: var(--header-bg-color);
-      color: var(--header-fg-color);
-      position: absolute;
-      width: 100%;
-      z-index: -1;
-      box-sizing: var(--box-sizing);
-    }
-
-    .fallback {
-      /* stylelint-disable unit-allowed-list */
-      top: -1px;
-      border-bottom: var(--border-style);
-    }
-
-    .fallback-footer {
-      top: 0;
-      border-top: var(--border-style);
-    }
-
-    .sticky-header {
-      display: grid;
-      position: sticky;
-      top: 0;
-      z-index: 6;
-      border-start-start-radius: inherit;
-      border-start-end-radius: inherit;
-    }
-
     .cell {
+      /* preventing cell from shrinking during autosize calculations */
+      flex-shrink: 0;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
 
       .icons-ph {
-        min-width: 1rem;
+        /* Maintaining action button aspect ratio of 1:1 with 24*24px width and height */
+        min-width: 1.5rem;
       }
 
       &.custom-item {
@@ -159,19 +182,8 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     }
 
     .cell:focus {
-      outline: 0.125rem auto var(--medium-blue);
-    }
-
-    .cell.selection-border:focus,
-    .cell.editable-cell:focus {
-      outline: none 0;
-    }
-
-    .editable-cell > span {
-      height: 100%;
-      display: flex;
-      padding: 0 6px;
-      align-items: center;
+      box-shadow: ${theme.base.shadow['focus-inset']};
+      outline: none;
     }
 
     .row {
@@ -190,6 +202,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         }
 
         > .header-lable-container {
+          /* stylelint-disable-next-line unit-allowed-list */
           min-width: 20px;
         }
         /* stylelint-disable selector-max-class */
@@ -200,10 +213,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
 
       > .cell,
       .group-header-aggregation-row > .cell {
-        transition: transform 0.5s var(--animation-ease);
-        border-right: var(--border-style);
         position: relative;
-        ${!theme.components.table['striped-rows'] &&
+        transition: transform 0.5s var(--animation-ease);
+        ${borderVerticalInner &&
+        css `
+          border-right: var(--border-style);
+        `}
+        ${borderHorizontalInner &&
         css `
           border-bottom: var(--border-style);
         `}
@@ -227,7 +243,10 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           right: 0;
           border-right: 0;
           justify-content: center;
-          border-left: var(--border-style);
+          ${borderVerticalInner &&
+        css `
+            border-left: var(--border-style);
+          `}
 
           /* The below styles are needed to avoid ellipses in safari when no text is present
             and to hide the 'Actions' label */
@@ -239,13 +258,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           }
         }
         &.aggregateCell {
-          background-color: var(--header-bg-color);
+          background-color: var(--group-bg-color);
         }
       }
 
       /** Adds bottom border to the last row of a group, when striped-rows are enabled */
       &:has(+ .group-header-row) > .cell {
-        ${theme.components.table['striped-rows'] &&
+        ${showBorderOnLastStripedRow &&
         css `
           border-bottom: var(--border-style);
         `}
@@ -254,26 +273,27 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         border-bottom: var(--border-style);
       }
       .group-header-aggregation-row {
-        > .cell {
-          &.cell-action {
-            overflow: initial;
-
-            /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */
-            &::before {
-              content: '';
-              position: absolute;
-              inline-size: 0;
-              inset-inline-start: calc(var(--border-width) * -1);
-              inset-block-start: calc(var(--group-header-height) * -1);
-              block-size: var(--group-header-height);
+        > .cell.cell-action {
+          overflow: initial;
+
+          /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */
+          &::before {
+            content: '';
+            position: absolute;
+            inline-size: 0;
+            inset-inline-start: calc(var(--border-width) * -1);
+            inset-block-start: calc(var(--group-header-height) * -1);
+            block-size: var(--group-header-height);
+            ${borderVerticalInner &&
+        css `
               border-inline-start: var(--border-style);
-            }
+            `}
           }
         }
       }
 
       > .cell-action {
-        background-color: var(--primary-background);
+        background-color: ${bodyPrimaryBackground};
       }
 
       > .row-reorder-handle {
@@ -295,8 +315,10 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         ${showFreezeLine &&
         css `
           &.cell-last-frozen {
-            border-right: solid 1px var(--border-color-freeze);
-            box-shadow: calc(${theme.base.spacing} * 0.25) 0 0 0 ${freezeLineShadowTransparent};
+            border-right: solid var(--border-width) var(--border-color-freeze);
+            filter: drop-shadow(
+              calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}
+            );
             transition: 0.5s;
           }
         `}
@@ -333,7 +355,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
             border-end-end-radius: inherit;
           }
 
-          ${theme.components.table['striped-rows'] &&
+          ${showBorderOnLastStripedRow &&
         css `
             border-bottom: var(--border-style);
           `}
@@ -342,10 +364,10 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     }
     .row:not(.row-error):not(.group-header-row):not(.header) {
       .cell-fixed {
-        background: var(--primary-background);
+        background: ${bodyPrimaryBackground};
       }
       .cell-fixed.aggregateCell {
-        background: var(--header-bg-color);
+        background: var(--group-bg-color);
       }
     }
     ${theme.components.table['striped-rows'] &&
@@ -366,6 +388,68 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           background: ${oddRowBackgroundColor};
         }
       }
+      .row[data-index$='0']:not(.group-header-row):not(.header),
+      .row[data-index$='2']:not(.group-header-row):not(.header),
+      .row[data-index$='4']:not(.group-header-row):not(.header),
+      .row[data-index$='6']:not(.group-header-row):not(.header),
+      .row[data-index$='8']:not(.group-header-row):not(.header) {
+        background: ${evenRowBackgroundColor};
+        color: ${useableEvenRowForeground};
+
+        ${borderVerticalOuter &&
+            css `
+          .cell-fixed {
+            background: ${evenRowBackgroundColor};
+            color: ${useableEvenRowForeground};
+          }
+          > .cell-action {
+            background: ${evenRowBackgroundColor};
+          }
+        `}
+
+        /* Apply border radius if vertical outer border was disabled */
+        ${!borderVerticalOuter &&
+            css `
+          border-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+
+          .cell-fixed {
+            color: ${useableEvenRowForeground};
+          }
+
+          /*  Avoid the non-frozen column's background to come behind the first cell's empty area in corner due to border-radius.
+            Let the first cell-fixed take full rectangale width, add a pseudo element with the background and border radius of same size as the element */
+          .cell-fixed:not(.cell-first) {
+            background: ${evenRowBackgroundColor};
+          }
+          .cell-fixed.cell-first::before {
+            background: ${evenRowBackgroundColor};
+            content: '';
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+            pointer-events: none;
+          }
+
+          > .cell-action::before {
+            background: ${evenRowBackgroundColor};
+            content: '';
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+            pointer-events: none;
+          }
+        `}
+      }
+
+      .row[data-index='0']:not(.group-header-row):not(.header) {
+        ${!borderVerticalOuter &&
+            css `
+          border-radius: 0 0 min(${props => props.theme.base['border-radius']}, 0.25rem)
+            min(${props => props.theme.base['border-radius']}, 0.25rem);
+        `}
+      }
     `}
 
     .row-error {
@@ -383,8 +467,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     }
 
     .sort-info-container {
-      margin-left: 0.312rem;
-
       .sort-sequence {
         font-size: 0.625rem;
         color: ${theme.base.colors.gray['extra-dark']};
@@ -395,10 +477,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 0 0 0 0.312rem;
 
       svg {
+        /* stylelint-disable-next-line unit-allowed-list */
         width: 14px;
+        /* stylelint-disable-next-line unit-allowed-list */
         height: 14px;
       }
     }
@@ -420,26 +503,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       margin: 0 0.312rem 0 0;
     }
 
-    .editable-cell {
-      padding: 0;
-      border: 2px solid ${theme.base.palette.interactive} !important;
-      box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;
-    }
-
-    .editable-cell input {
-      border: none;
-      outline: none;
-      min-width: calc(100%);
-      min-height: 0;
-      max-height: 100%;
-      box-shadow: none !important;
-      border-radius: 0;
-    }
-
-    .editable-cell.align-right input {
-      justify-content: right;
-    }
-
     &.show-expand-collapse-all {
       .row > .cell-first {
         padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);
@@ -448,14 +511,16 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           padding: 0;
         }
         &.row-select-handle {
-          padding-left: calc(var(--expand-collapse-all-width) + 0.25rem);
+          padding-inline-start: var(--expand-collapse-all-width);
         }
       }
 
       .row-container .row > .cell-first {
         &.row-select-handle {
+          /* Offset padding of 0.5rem added to SelectAllCheckbox in grouped views(getting pushed by margin),
+             ensuring row select checkboxes align vertically in header and data rows */
           padding-inline-start: calc(
-            var(--expand-collapse-all-width) - var(--cell-padding) + 0.25rem
+            var(--expand-collapse-all-width) - var(--cell-padding) + 0.5rem
           );
         }
       }
@@ -468,7 +533,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         height: var(--row-height);
         background-color: var(--header-bg-color);
         color: var(--header-fg-color);
-        border-right: var(--border-style);
         border-bottom: var(--border-style);
         border-start-start-radius: ${theme.base['border-radius']};
         padding-inline-start: 0.125rem;
@@ -477,6 +541,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         align-items: center;
         justify-content: center;
 
+        ${borderVerticalInner &&
+        css `
+          border-right: var(--border-style);
+        `}
+
         &::before {
           content: '';
           position: absolute;
@@ -532,7 +601,10 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         color: var(--header-fg-color);
         font-weight: ${theme.base['font-weight'].bold};
         font-size: ${fontSize.xxs};
-        border-right: var(--border-style);
+        ${borderVerticalInner &&
+        css `
+          border-right: var(--border-style);
+        `}
         padding: var(--header-cell-padding);
 
         &:first-child {
@@ -550,6 +622,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           font-size: ${fontSize.xs};
           font-weight: var(--font-weight-semi-bold);
           align-items: center;
+          gap: 0.125rem;
         }
 
         .header-label {
@@ -575,42 +648,65 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       }
 
       > .row-select-handle {
+        /* Nullifying padding applied from .header > .cell */
+        padding: 0;
         justify-content: center;
       }
-
-      > .cell-right-align {
-        padding: var(--header-cell-padding);
-        justify-content: end;
-
-        .header-lable-container {
-          flex-direction: row-reverse;
-        }
-
-        .sort-info-container {
-          margin-left: 0;
-          margin-right: 0.312rem;
-        }
-      }
-
-      > .cell-first {
-        padding: 0 var(--cell-padding);
-      }
-
       .row {
         border-bottom: none;
       }
     }
 
+    .sticky-header {
+      display: grid;
+      position: sticky;
+      top: 0;
+      z-index: 6;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+
+      ${!borderVerticalInner &&
+        css `
+        & .row .cell:not(.cell-last-frozen):not(.cell-last):has(.column-resizer) {
+          &::after {
+            content: '';
+            position: absolute;
+            right: 0.2rem;
+            top: 0.5rem;
+            bottom: 0.5rem;
+            width: 0.062rem;
+            background-color: ${theme.base.palette['border-line']};
+          }
+        }
+      `}
+    }
+
     /* 4 selectors required as aggregateCell of only footer need this effect */
 
     .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {
       border-bottom: none;
     }
 
-    /* stylelint-enable selector-max-class */
     .row .cell.cell-last {
       border-right: 0;
-      flex-grow: 1;
+    }
+
+    ${!colIdToFillRemainingSpace
+        ? css `
+          .row .cell.cell-last {
+            flex-grow: 1;
+          }
+        `
+        : css `
+          .row .cell[data-col-id='${colIdToFillRemainingSpace}'] {
+            flex-grow: 1;
+          }
+        `}
+
+    /* Disable the flex layout size changes when measuring for content based size to get correct width */
+
+    [data-content-size-measuring] & .row .cell {
+      flex-grow: 0 !important;
     }
 
     .row-container {
@@ -623,10 +719,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       &:not(.wrap-content-height) > .row:not(.group-header-row) {
         height: var(--data-row-height);
       }
-
-      & > .row:not(.group-header-row) {
-        min-width: 100%;
-      }
       border-end-start-radius: inherit;
       border-end-end-radius: inherit;
 
@@ -636,10 +728,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
          * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.
          */
         box-sizing: content-box;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        word-break: break-all;
         flex-grow: 1;
 
         /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */
@@ -657,12 +745,47 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         &:has(.combined-cell) {
           padding: 0;
 
-          /* stylelint-disable-next-line selector-max-class */
           .cell-content {
             flex-grow: unset;
           }
         }
       }
+
+      & > .row:not(.group-header-row) {
+        min-width: 100%;
+
+        .cell-content {
+          &:not(:has(.combined-cell)):not(.combined-cell-content):has(${StyledStatus}) {
+            padding: unset;
+
+            &,
+            & > span,
+            & ${StyledStatus} {
+              block-size: 100%;
+            }
+
+            ${StyledStatus} {
+              display: flex;
+              align-items: center;
+              justify-content: space-evenly;
+              border-radius: 0;
+            }
+          }
+        }
+      }
+
+      &.wrap-content-height
+        > .row:not(.group-header-row)
+        .cell:not(:has(.combined-cell)):has(${StyledStatus}) {
+        padding: 0;
+      }
+
+      & > .row .cell:not(.column-type-action) .cell-content {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-all;
+      }
     }
 
     .row .aggregateCell .cell-content {
@@ -693,7 +816,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         > .cell {
           display: inline-grid;
           align-items: start;
-          white-space: normal;
+          white-space: pre-wrap;
           word-break: break-all;
           grid-auto-flow: column;
 
@@ -702,7 +825,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
             justify-content: space-between;
           }
 
-          /* stylelint-disable selector-max-class */
           /* stylelint-disable-next-line selector-max-compound-selectors */
           > .cell-content > .combined-cell > .combined-cell-content,
           > .cell-content {
@@ -733,7 +855,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         height: auto;
         min-height: var(--row-min-height);
         > .cell {
-          white-space: normal;
+          white-space: pre-wrap;
 
           /* -- For BUG-625508 -- */
           word-break: break-word;
@@ -828,11 +950,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     /* stylelint-enable selector-max-class */
 
     .toolbar-button-applied {
+      /* stylelint-disable-next-line unit-allowed-list */
       padding: 0 8px;
       margin: 0 calc(${theme.base.spacing} / 4);
     }
 
     .toolbar-button {
+      /* stylelint-disable-next-line unit-allowed-list */
       padding: 0 8px;
       margin: 0 calc(${theme.base.spacing} / 4);
     }
@@ -876,15 +1000,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       }
     }
 
-    .selection-border {
-      border: 0.125rem solid var(--medium-blue) !important;
-    }
-
-    .disable-select {
-      user-select: none; /* supported by Chrome and Firefox */
-      -webkit-user-select: none; /* Safari */
-    }
-
     .popper {
       div.row {
         display: flex;