@pega/lists-react 8.0.0-build.27.14

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

@@ -0,0 +1,861 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { mix, lighten, darken, getLuminance } 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';
+const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme, style, view }) => {
+    const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);
+    const freezeMarginTop = `-${style['--row-height']}`;
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const selectedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    const lightGreyColor = theme.base.colors.gray['extra-light'];
+    const oddRowBackgroundColor = getLuminance(theme.base.palette['secondary-background']) > 0.5
+        ? lighten(0.01, theme.base.palette['secondary-background'])
+        : darken(0.1, theme.base.palette['secondary-background']);
+    return css `
+    --primary-background: ${theme.base.palette['primary-background']};
+    --secondary-background: ${theme.base.palette['secondary-background']};
+    --forground-color: ${theme.base.palette['foreground-color']};
+    --interactive: ${theme.base.palette.interactive};
+    --medium-blue: ${theme.base.colors.blue.medium};
+    --border-color: ${theme.base.palette['border-line']};
+    --border-color-freeze: #a5a5a5;
+    --border-width: 0.062rem;
+    --border-style: var(--border-width) solid var(--border-color);
+    --font-stretch: ${theme.components.table.typography['font-stretch']};
+    --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.12rem 0 var(--cell-padding);
+    --header-cell-right-align-padding: 0 var(--cell-padding) 0 0.12rem;
+    --header-bg-color: var(--secondary-background);
+    --aggregation-footer-bg-color: color-mix(
+      in sRGB,
+      var(--header-bg-color) 66%,
+      ${theme.base.colors.gray.light} 33%
+    );
+    --default-group-header-height: 1.5rem;
+    --group-header-height: var(--default-group-header-height);
+    --box-sizing: content-box;
+    --animation-ease: ${theme.base.animation.timing.ease};
+    --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};
+    --row-height-multiplier: 1.125;
+    --cell-fixed-position: sticky;
+    position: relative;
+    border-radius: ${theme.base['border-radius']};
+
+    .small-screen-table {
+      --cell-fixed-position: static;
+    }
+
+    .container {
+      border: var(--border-style);
+      position: relative;
+      letter-spacing: var(--letter-spacing);
+      font-stretch: var(--font-stretch);
+    }
+
+    .hide-rows-till-ready .row[aria-rowindex] {
+      visibility: hidden;
+    }
+
+    .table-drag-proxy {
+      background: rgba(0, 0, 0, 0.21);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 6;
+      pointer-events: none;
+      display: none;
+    }
+
+    .table-drag-line {
+      background: #999999;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 0.12rem;
+      z-index: 6;
+      pointer-events: none;
+      display: none;
+    }
+
+    .freeze-line {
+      /* stylelint-disable unit-allowed-list */
+      border-right: solid 1px var(--border-color-freeze);
+      position: sticky;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      z-index: 7; /* Footer has 6 z-index so this needs to be more than that */
+      pointer-events: none;
+      height: 100%;
+      float: left;
+      margin-top: ${freezeMarginTop};
+    }
+
+    .freeze-line.freeze-line-hide {
+      display: none;
+    }
+
+    .horizontally-scrolled {
+      .freeze-line {
+        box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);
+        transition: 0.5s;
+      }
+    }
+
+    .cell-fixed {
+      z-index: 1;
+    }
+
+    .group-wrapper {
+      overflow: hidden;
+      display: inline-flex;
+      line-height: var(--group-header-height);
+
+      .group-context-count {
+        display: inline-flex;
+        overflow: hidden;
+      }
+    }
+
+    /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with
+      group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates
+      mark up is generated from cosmos which differentiates from normal table cell markup */
+    .group-wrapper .group-context-count dl {
+      grid-template-columns: auto;
+    }
+
+    .fallback,
+    .fallback-footer {
+      height: var(--row-height);
+      background-color: var(--header-bg-color);
+      position: absolute;
+      width: 100%;
+      z-index: -1;
+      box-sizing: var(--box-sizing);
+    }
+
+    .fallback {
+      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;
+    }
+
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      .icons-ph {
+        min-width: 1rem;
+      }
+
+      &.custom-item {
+        width: 10em;
+      }
+    }
+
+    .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;
+    }
+
+    .row {
+      display: inline-flex;
+      height: var(--row-height);
+      outline: none 0;
+      transition: transform 0.5s var(--animation-ease);
+      box-sizing: var(--box-sizing);
+      position: relative;
+
+      > .cell,
+      .group-header-aggregation-row > .cell {
+        transition: transform 0.5s var(--animation-ease);
+        border-right: var(--border-style);
+        ${!theme.components.table['striped-rows'] &&
+        css `
+          border-bottom: var(--border-style);
+        `}
+        display: flex;
+        align-items: center;
+
+        &::after {
+          opacity: 1;
+          transition: opacity 0.1s var(--animation-ease);
+        }
+
+        /* stylelint-disable selector-max-class */
+        .row-action-menu {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        &.cell-action {
+          position: sticky;
+          z-index: 4;
+          right: 0;
+          border-right: 0;
+          min-width: 32px;
+          justify-content: center;
+          border-left: var(--border-style);
+
+          .cell-content {
+            padding: 0;
+            overflow: visible;
+          }
+
+          /* The below styles are needed to avoid ellipses in safari when no text is present
+            and to hide the 'Actions' label */
+
+          /* stylelint-disable max-nesting-depth */
+
+          div.header-label {
+            text-overflow: unset;
+            span {
+              visibility: hidden;
+            }
+          }
+        }
+        &.aggregateCell {
+          background-color: var(--aggregation-footer-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'] &&
+        css `
+          border-bottom: var(--border-style);
+        `}
+      }
+      &.header > .cell {
+        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);
+              border-inline-start: var(--border-style);
+            }
+          }
+        }
+      }
+
+      > .cell-action {
+        background-color: var(--primary-background);
+      }
+
+      > .row-reorder-handle {
+        padding: 0;
+        border-right: 0 !important;
+        justify-content: center;
+        cursor: move;
+      }
+
+      > .row-select-handle {
+        display: flex;
+        justify-content: center;
+        &:active {
+          outline: none;
+        }
+
+        > .header-lable-container {
+          min-width: 20px;
+        }
+      }
+
+      .aggregateCell.cell {
+        border-right: none;
+      }
+
+      > .cell.cell-fixed,
+      .group-header-aggregation-row > .cell-fixed {
+        position: var(--cell-fixed-position);
+        z-index: 4;
+
+        /* As the row select column and row dragDrop column always have to be frozen */
+        &[data-col-id='RowSelect'],
+        &[data-col-id='RowDragDrop'],
+        &[data-col-id='RowError'] {
+          position: sticky;
+          flex-shrink: 0;
+          z-index: 5;
+        }
+      }
+
+      > .cell.cell-fixed:focus-within,
+      .group-header-aggregation-row > .cell-fixed {
+        z-index: 6;
+      }
+
+      &.click {
+        cursor: pointer;
+      }
+    }
+    .row:not(.row-error):not(.group-header-row):not(.header) {
+      .cell-fixed {
+        background: var(--primary-background);
+      }
+    }
+    ${theme.components.table['striped-rows'] &&
+        css `
+      /* Targets rows with an odd data-index attribute, excluding group header rows */
+      .row[data-index$='1']:not(.group-header-row):not(.header),
+      .row[data-index$='3']:not(.group-header-row):not(.header),
+      .row[data-index$='5']:not(.group-header-row):not(.header),
+      .row[data-index$='7']:not(.group-header-row):not(.header),
+      .row[data-index$='9']:not(.group-header-row):not(.header) {
+        background: ${oddRowBackgroundColor};
+        .cell-fixed {
+          background: ${oddRowBackgroundColor};
+        }
+      }
+    `}
+
+    .row-error {
+      background: ${mix(0.1, theme.components['form-field'].error['status-color'], theme.base.palette['primary-background'])};
+
+      /* stylelint-disable no-descending-specificity */
+      .cell-fixed,
+      .cell-action {
+        background: inherit;
+      }
+
+      > .cell:not(.cell-fixed):not(.cell-action) {
+        background: none;
+      }
+    }
+
+    .sort-info-container {
+      margin-left: 0.312rem;
+
+      .sort-sequence {
+        font-size: 0.625rem;
+        color: ${theme.base.colors.gray['extra-dark']};
+      }
+    }
+
+    .filter-info-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 0 0 0.312rem;
+
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
+    .cell.row-error-column {
+      padding: 0;
+      border-right: 0;
+      text-align: right;
+      outline: none;
+
+      /* Focus handling will be done as part of interation 2: EPIC-88751 */
+
+      svg {
+        color: ${theme.base.colors.red.medium};
+      }
+    }
+
+    .cell-right-align .filter-info-container svg {
+      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));
+        &.row-reorder-handle,
+        &.row-error-column {
+          padding: 0;
+        }
+        &.row-select-handle {
+          padding-left: calc(var(--expand-collapse-all-width));
+        }
+      }
+
+      .row-container .row > .cell-first {
+        &.row-select-handle {
+          padding-inline-start: calc(var(--expand-collapse-all-width) - var(--cell-padding));
+        }
+      }
+
+      /* stylelint-enable selector-max-class */
+      .expand-collapse-all {
+        position: absolute;
+        width: var(--expand-collapse-all-width);
+        z-index: 10;
+        height: var(--row-height);
+        background-color: var(--header-bg-color);
+        border-right: var(--border-style);
+        border-bottom: var(--border-style);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > button {
+          color: var(--forground-color);
+          :focus {
+            box-shadow: ${theme.base.shadow.focus};
+          }
+        }
+      }
+      .no-border-right {
+        border-right: 0;
+      }
+    }
+
+    /* stylelint-disable selector-max-class */
+
+    .scroll-end {
+      &.row-container > .row:last-child {
+        & > .cell,
+        & .group-header-aggregation-row > .cell {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    /* stylelint-enable selector-max-class */
+    .header {
+      font-weight: var(--font-weight-semi-bold);
+      position: relative; /* This is required to position .border-fix element */
+      > .cell.row-error-column {
+        border-right: 0;
+      }
+      > .cell {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 2;
+        position: relative;
+        cursor: pointer;
+        background-color: var(--header-bg-color);
+        font-weight: ${theme.base['font-weight'].bold};
+        font-size: ${fontSize.xxs};
+        border-right: var(--border-style);
+        padding: var(--header-cell-padding);
+
+        .header-lable-container {
+          display: inline-flex;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: ${fontSize.xs};
+          font-weight: var(--font-weight-semi-bold);
+          align-items: center;
+        }
+
+        .header-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          /* To avoid browser tooltip when we get ellipsis in safari */
+          &::after {
+            content: '';
+            display: block;
+          }
+
+          /* To utilize smart tooltip making it as a non-box element */
+          /* stylelint-disable selector-max-class */
+          .cell-content {
+            display: contents;
+          }
+        }
+
+        .header-menu {
+          margin-left: auto;
+          min-width: 1rem;
+          height: auto;
+          width: auto;
+          display: grid;
+        }
+
+        .button-more {
+          gap: ${theme.base.spacing};
+          flex-shrink: 0;
+          white-space: nowrap;
+          border: none;
+          background: none !important;
+          height: auto;
+          width: auto;
+          display: grid;
+          padding: 2px;
+          min-height: 18px;
+          min-width: 18px;
+          margin-right: 0;
+          margin-inline-end: 0.125rem;
+          color: var(--forground-color);
+          :focus,
+          :hover {
+            box-shadow: ${theme.base.shadow.focus};
+          }
+        }
+      }
+
+      > .row-reorder-handle {
+        padding: 0;
+      }
+
+      > .cell-fixed:last-child {
+        border-right: var(--border-style);
+      }
+
+      > .row-select-handle {
+        padding-inline-start: calc(var(--cell-padding) / 4);
+        justify-content: center;
+      }
+
+      > .cell-right-align {
+        padding: var(--header-cell-right-align-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;
+      }
+    }
+
+    /* 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;
+    }
+
+    .row-container {
+      --data-row-height: calc(
+        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)
+      );
+      --group-header-height: ${isAggregationApplied
+        ? 'var(--default-group-header-height)'
+        : 'var(--data-row-height)'};
+      &:not(.full-content-height) > .row:not(.group-header-row) {
+        height: var(--data-row-height);
+      }
+      & > .row .cell-content {
+        /*
+         * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.
+         * 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 */
+        padding: var(--cell-vertical-padding) var(--cell-padding);
+
+        /* setting max-height so that the elements with more height like RTL, align with the row density height */
+        max-height: var(--data-row-height);
+
+        /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */
+        & * {
+          scrollbar-width: none;
+        }
+
+        /* in case of combine columns, removing padding from parent cell-content as children already have the padding */
+        &:has(.combined-cell) {
+          padding: 0;
+
+          /* stylelint-disable-next-line selector-max-class */
+          .cell-content {
+            flex-grow: unset;
+          }
+        }
+      }
+    }
+
+    .row .aggregateCell .cell-content {
+      line-height: initial;
+      padding: 0;
+    }
+
+    .short-height,
+    .medium-height {
+      ${StyledStatus} {
+        white-space: nowrap;
+      }
+    }
+
+    .short-height {
+      ${StyledRadioCheck} ${StyledLabel} {
+        min-height: auto;
+      }
+    }
+
+    .medium-height {
+      --row-height-multiplier: 4 / 3;
+    }
+
+    .tall-height {
+      --row-height-multiplier: calc(4 / 3 + 0.5);
+      > .row:not(.group-header-row) {
+        > .cell {
+          display: inline-grid;
+          align-items: center;
+          white-space: normal;
+          word-break: break-all;
+          grid-auto-flow: column;
+
+          /* stylelint-disable selector-max-class */
+          /* stylelint-disable-next-line selector-max-compound-selectors */
+          > .cell-content > .combined-cell > .combined-cell-content,
+          > .cell-content {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            white-space: inherit;
+            word-break: inherit;
+          }
+        }
+      }
+    }
+
+    .full-content-height {
+      --row-height-multiplier: 4 / 3;
+      --row-min-height: calc(
+        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2
+      );
+      --group-header-height: ${isAggregationApplied
+        ? 'var(--default-group-header-height)'
+        : 'var(--row-min-height)'};
+
+      > .row:not(.group-header-row) {
+        height: auto;
+        min-height: var(--row-min-height);
+        > .cell {
+          white-space: normal;
+
+          /* -- For BUG-625508 -- */
+          word-break: break-word;
+          display: inline-grid;
+          align-items: center;
+          padding-top: var(--cell-vertical-padding);
+          padding-bottom: var(--cell-vertical-padding);
+          grid-auto-flow: column;
+
+          /* stylelint-disable-next-line selector-max-compound-selectors */
+          > .cell-content > .combined-cell > .combined-cell-content,
+          > .cell-content {
+            /* for full-content, the row cells should adjust according to content */
+            max-height: none;
+            white-space: inherit;
+            word-break: inherit;
+          }
+        }
+      }
+    }
+
+    .footer {
+      .row {
+        .cell {
+          padding: 0;
+        }
+      }
+    }
+
+    /* stylelint-disable no-duplicate-selectors */
+    .row-container {
+      position: absolute;
+      display: grid;
+      width: 100%;
+      font-size: ${fontSize.s};
+
+      > .group-header-row,
+      .hierarchical-group-footer-row {
+        height: var(--group-header-height);
+        .cell {
+          padding: 0;
+          border-right-width: 0;
+        }
+      }
+
+      > .hierarchical-group-header-row {
+        height: var(--group-header-height);
+      }
+      input.checkbox-on-hover + label {
+        opacity: 0;
+      }
+      input.checkbox-on-hover:checked + label {
+        opacity: 1;
+      }
+      .row.selected-row {
+        background-color: ${selectedRowColor};
+
+        > .cell,
+        .cell-fixed,
+        .cell-action {
+          background-color: ${selectedRowColor};
+        }
+      }
+      .row-on-hover:hover {
+        background-color: ${lightGreyColor};
+        input.checkbox-on-hover + label {
+          opacity: 1;
+        }
+
+        > .cell,
+        .cell-fixed,
+        .cell-action {
+          background-color: ${lightGreyColor};
+        }
+      }
+      .row.hierarchical-group-footer-row {
+        .cell-fixed {
+          background: ${lightGreyColor};
+        }
+      }
+    }
+
+    /* stylelint-enable selector-max-class */
+
+    .toolbar-button-applied {
+      padding: 0 8px;
+      margin: 0 calc(${theme.base.spacing} / 4);
+    }
+
+    .toolbar-button {
+      padding: 0 8px;
+      margin: 0 calc(${theme.base.spacing} / 4);
+    }
+
+    .column-resizer {
+      cursor: col-resize;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 3;
+      width: 0.25rem;
+      height: 100%;
+    }
+
+    .column-resizer:hover,
+    .column-resizer:active {
+      background: var(--interactive);
+    }
+
+    .align-right {
+      justify-content: right;
+
+      .cell-content {
+        text-align: right;
+      }
+    }
+
+    .align-left {
+      justify-content: left;
+
+      .cell-content {
+        text-align: left;
+      }
+    }
+
+    .align-center {
+      justify-content: center;
+
+      .cell-content {
+        text-align: center;
+      }
+    }
+
+    .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;
+        vertical-align: middle;
+        line-height: unset;
+        border-bottom: none;
+        outline: none 0;
+        height: auto;
+      }
+    }
+  `;
+});
+export default StyledTableContainer;
+//# sourceMappingURL=StyledTableContainer.js.map