@pega/lists-react 9.0.0-build.18.2 → 9.0.0-build.18.3

package/lib/Core/Components/AggregateMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"AAkEA;;;mDAwDC;;;;;;;;;;;;;;;;;;AA3EM,kEALI,MAAM,GAAC,MAAM,mBACb,MAAM,UACN,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM,GACzD,MAAM,GAAC,MAAM,CAmBzB;sBA/DqB,YAAY"}
+{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"AAqEA;;;mDA2DC;;;;;;;;;;;;;;;;;;AA9EM,kEALI,MAAM,GAAC,MAAM,mBACb,MAAM,UACN,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM,GACzD,MAAM,GAAC,MAAM,CAmBzB;sBAlEqB,YAAY"}

package/lib/Core/Components/AggregateMenu.js

@@ -12,6 +12,9 @@ const StyledMenuButton = styled(MenuButton) `
   }
 `;
 const StyledCell = styled.div `
+  &:not(:has(${StyledMenuButton})) {
+    gap: 0.25rem;
+  }
   display: flex;
   text-align: right;
   justify-content: flex-end;
@@ -54,6 +57,7 @@ export default function AggregateMenu({ column, context }) {
     const { aggregationType } = column;
     const uid = createUID();
     const [translate] = useTranslate();
+    const isFooterAggregate = context.getExecutionContext?.()?.name === 'footer';
     const actions = aggregateOptions[column.field.type]?.map(label => ({
         primary: translate(label),
         id: label,
@@ -65,12 +69,12 @@ export default function AggregateMenu({ column, context }) {
     const rawAggregationValue = context.getValue();
     const aggregationValue = getFormattedAggregationValue(rawAggregationValue, aggregationType, column);
     const buttonText = translate('Aggregate options');
-    return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }), _jsx(StyledMenuButton, { className: 'aggregate-button', menu: {
+    return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }), isFooterAggregate && (_jsx(StyledMenuButton, { className: 'aggregate-button', menu: {
                     items: actions,
                     mode: 'single-select'
                 }, popover: {
                     portal: true
-                }, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` }), _jsx(Flex, { container: true, as: StyledAggregationValue, item: { shrink: 0 }, "data-testid": TestIdConstants.aggregateDisplayValue, children: aggregationValue }), _jsx(VisuallyHiddenText, { id: `${uid}_label`, "aria-hidden": true, children: `${translate(aggregationType)} ${context.getValue()} ${buttonText}` })] }));
+                }, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` })), _jsx(Flex, { container: true, as: StyledAggregationValue, item: { shrink: 0 }, "data-testid": TestIdConstants.aggregateDisplayValue, children: aggregationValue }), _jsx(VisuallyHiddenText, { id: `${uid}_label`, "aria-hidden": true, children: `${translate(aggregationType)} ${context.getValue()} ${buttonText}` })] }));
 }
 AggregateMenu.propTypes = {
     column: PropTypes.objectOf(PropTypes.any),

package/lib/Core/Components/AggregateMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport {\n  Flex,\n  MenuButton,\n  VisuallyHiddenText,\n  createUID,\n  formatNumber\n} from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\n\nimport TestIdConstants from './TestIdConstants';\n\nconst StyledMenuButton = styled(MenuButton)`\n  color: ${props => props.theme.base.palette['foreground-color']};\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n`;\n\nconst StyledCell = styled.div`\n  display: flex;\n  text-align: right;\n  justify-content: flex-end;\n  align-items: center;\n  margin-inline-end: var(--cell-padding);\n\n  &:hover {\n    background-clip: padding-box;\n  }\n`;\n\nconst StyledAggregationValue = styled.div`\n  font-weight: ${props => props.theme.base['font-weight']['semi-bold']};\n`;\n\n/**\n * Formats the aggregation value based on the aggregation type and column context.\n *\n * @param {number|string} rawAggregationValue - The raw aggregation value to format.\n * @param {string} aggregationType - The type of aggregation (e.g., 'Avg').\n * @param {import('pega-repeating-structures-core').RsCoreTypes.Column} column - The column object.\n * @returns {string|number} The formatted aggregation value or the raw value if no formatter is available.\n */\nexport const getFormattedAggregationValue = (rawAggregationValue, aggregationType, column) => {\n  const formatter = column.getContext().getFormatter();\n  const fieldDef = column.getContext().getField();\n  const { fieldType } = fieldDef;\n  const { locale, timezone } = column.parent.meta;\n\n  if (!formatter) return rawAggregationValue;\n\n  if (aggregationType === 'Avg' && fieldType === 'Integer') {\n    return formatNumber(Number(rawAggregationValue), {\n      locale,\n      useGrouping: true,\n      maximumFractionDigits: 2\n    });\n  }\n\n  return formatter(rawAggregationValue, { locale, timezone, fieldDef });\n};\n\nexport default function AggregateMenu({ column, context }) {\n  const { aggregateOptions } = column.parent.meta;\n  const { aggregationType } = column;\n  const uid = createUID();\n  const [translate] = useTranslate();\n\n  const actions = aggregateOptions[column.field.type]?.map(label => ({\n    primary: translate(label),\n    id: label,\n    onClick: () => column.applyAggregation(label),\n    selected: aggregationType === label\n  }));\n  if (!actions) return null;\n\n  const rawAggregationValue = context.getValue();\n\n  const aggregationValue = getFormattedAggregationValue(\n    rawAggregationValue,\n    aggregationType,\n    column\n  );\n\n  const buttonText = translate('Aggregate options');\n\n  return (\n    <StyledCell>\n      <span>{translate(aggregationType)}</span>\n      <StyledMenuButton\n        className='aggregate-button'\n        menu={{\n          items: actions,\n          mode: 'single-select'\n        }}\n        popover={{\n          portal: true\n        }}\n        icon='arrow-micro-down'\n        iconOnly\n        variant='simple'\n        compact\n        text={buttonText} // Text property to display tooltip on hover\n        aria-labelledby={`${uid}_label`}\n      />\n      <Flex\n        container\n        as={StyledAggregationValue}\n        item={{ shrink: 0 }}\n        data-testid={TestIdConstants.aggregateDisplayValue}\n      >\n        {aggregationValue}\n      </Flex>\n      <VisuallyHiddenText id={`${uid}_label`} aria-hidden>\n        {`${translate(aggregationType)} ${context.getValue()} ${buttonText}`}\n      </VisuallyHiddenText>\n    </StyledCell>\n  );\n}\n\nAggregateMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\n};\n\nAggregateMenu.defaultProps = {\n  column: {},\n  context: {}\n};\n"]}
+{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport {\n  Flex,\n  MenuButton,\n  VisuallyHiddenText,\n  createUID,\n  formatNumber\n} from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\n\nimport TestIdConstants from './TestIdConstants';\n\nconst StyledMenuButton = styled(MenuButton)`\n  color: ${props => props.theme.base.palette['foreground-color']};\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n`;\n\nconst StyledCell = styled.div`\n  &:not(:has(${StyledMenuButton})) {\n    gap: 0.25rem;\n  }\n  display: flex;\n  text-align: right;\n  justify-content: flex-end;\n  align-items: center;\n  margin-inline-end: var(--cell-padding);\n\n  &:hover {\n    background-clip: padding-box;\n  }\n`;\n\nconst StyledAggregationValue = styled.div`\n  font-weight: ${props => props.theme.base['font-weight']['semi-bold']};\n`;\n\n/**\n * Formats the aggregation value based on the aggregation type and column context.\n *\n * @param {number|string} rawAggregationValue - The raw aggregation value to format.\n * @param {string} aggregationType - The type of aggregation (e.g., 'Avg').\n * @param {import('pega-repeating-structures-core').RsCoreTypes.Column} column - The column object.\n * @returns {string|number} The formatted aggregation value or the raw value if no formatter is available.\n */\nexport const getFormattedAggregationValue = (rawAggregationValue, aggregationType, column) => {\n  const formatter = column.getContext().getFormatter();\n  const fieldDef = column.getContext().getField();\n  const { fieldType } = fieldDef;\n  const { locale, timezone } = column.parent.meta;\n\n  if (!formatter) return rawAggregationValue;\n\n  if (aggregationType === 'Avg' && fieldType === 'Integer') {\n    return formatNumber(Number(rawAggregationValue), {\n      locale,\n      useGrouping: true,\n      maximumFractionDigits: 2\n    });\n  }\n\n  return formatter(rawAggregationValue, { locale, timezone, fieldDef });\n};\n\nexport default function AggregateMenu({ column, context }) {\n  const { aggregateOptions } = column.parent.meta;\n  const { aggregationType } = column;\n  const uid = createUID();\n  const [translate] = useTranslate();\n  const isFooterAggregate = context.getExecutionContext?.()?.name === 'footer';\n\n  const actions = aggregateOptions[column.field.type]?.map(label => ({\n    primary: translate(label),\n    id: label,\n    onClick: () => column.applyAggregation(label),\n    selected: aggregationType === label\n  }));\n  if (!actions) return null;\n\n  const rawAggregationValue = context.getValue();\n\n  const aggregationValue = getFormattedAggregationValue(\n    rawAggregationValue,\n    aggregationType,\n    column\n  );\n\n  const buttonText = translate('Aggregate options');\n\n  return (\n    <StyledCell>\n      <span>{translate(aggregationType)}</span>\n      {isFooterAggregate && (\n        <StyledMenuButton\n          className='aggregate-button'\n          menu={{\n            items: actions,\n            mode: 'single-select'\n          }}\n          popover={{\n            portal: true\n          }}\n          icon='arrow-micro-down'\n          iconOnly\n          variant='simple'\n          compact\n          text={buttonText} // Text property to display tooltip on hover\n          aria-labelledby={`${uid}_label`}\n        />\n      )}\n      <Flex\n        container\n        as={StyledAggregationValue}\n        item={{ shrink: 0 }}\n        data-testid={TestIdConstants.aggregateDisplayValue}\n      >\n        {aggregationValue}\n      </Flex>\n      <VisuallyHiddenText id={`${uid}_label`} aria-hidden>\n        {`${translate(aggregationType)} ${context.getValue()} ${buttonText}`}\n      </VisuallyHiddenText>\n    </StyledCell>\n  );\n}\n\nAggregateMenu.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  context: PropTypes.objectOf(PropTypes.any)\n};\n\nAggregateMenu.defaultProps = {\n  column: {},\n  context: {}\n};\n"]}

package/lib/Core/Components/FooterAggregators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterAggregators.d.ts","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";;AAaA;;mDAaC;;;;;;;;;;sBAzBqB,YAAY"}
+{"version":3,"file":"FooterAggregators.d.ts","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";;AAUA;;mDAcC;;;;;;;;;;sBAvBqB,YAAY"}

package/lib/Core/Components/FooterAggregators.js

@@ -5,16 +5,14 @@ import styled from 'styled-components';
 import AggregatorCell from './AggregatorCell';
 const StyledAggregatorWrapper = styled.div `
   border-bottom: 0;
-  .aggregateCell {
-    border-top: var(--border-style);
-  }
 `;
 function FooterAggregators({ columns }) {
     if (columns.filter(c => c.aggregated).length === 0)
         return null;
     return (_jsx(StyledAggregatorWrapper, { className: 'row', children: columns.map(column => {
             const context = {
-                getValue: () => column.aggregateValue
+                getValue: () => column.aggregateValue,
+                getExecutionContext: () => ({ name: 'footer' })
             };
             return _jsx(AggregatorCell, { column: column, context: context }, column.field?.id);
         }) }));

package/lib/Core/Components/FooterAggregators.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterAggregators.js","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EAAE,OAAO,EAAE;IACpC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhE,OAAO,CACL,KAAC,uBAAuB,IAAC,SAAS,EAAC,KAAK,YACrC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACpB,MAAM,OAAO,GAAG;gBACd,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc;aACtC,CAAC;YACF,OAAO,KAAC,cAAc,IAAwB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAlD,MAAM,CAAC,KAAK,EAAE,EAAE,CAAsC,CAAC;QACrF,CAAC,CAAC,GACsB,CAC3B,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,SAAS,GAAG;IAC5B,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;CAC1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG;IAC/B,OAAO,EAAE,EAAE;CACZ,CAAC;AAEF,eAAe,IAAI,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport AggregatorCell from './AggregatorCell';\n\nconst StyledAggregatorWrapper = styled.div`\n  border-bottom: 0;\n  .aggregateCell {\n    border-top: var(--border-style);\n  }\n`;\n\nfunction FooterAggregators({ columns }) {\n  if (columns.filter(c => c.aggregated).length === 0) return null;\n\n  return (\n    <StyledAggregatorWrapper className='row'>\n      {columns.map(column => {\n        const context = {\n          getValue: () => column.aggregateValue\n        };\n        return <AggregatorCell key={column.field?.id} column={column} context={context} />;\n      })}\n    </StyledAggregatorWrapper>\n  );\n}\n\nFooterAggregators.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any)\n};\n\nFooterAggregators.defaultProps = {\n  columns: []\n};\n\nexport default memo(FooterAggregators);\n"]}
+{"version":3,"file":"FooterAggregators.js","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEzC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EAAE,OAAO,EAAE;IACpC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhE,OAAO,CACL,KAAC,uBAAuB,IAAC,SAAS,EAAC,KAAK,YACrC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACpB,MAAM,OAAO,GAAG;gBACd,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc;gBACrC,mBAAmB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;aAChD,CAAC;YACF,OAAO,KAAC,cAAc,IAAwB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAlD,MAAM,CAAC,KAAK,EAAE,EAAE,CAAsC,CAAC;QACrF,CAAC,CAAC,GACsB,CAC3B,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,SAAS,GAAG;IAC5B,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;CAC1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG;IAC/B,OAAO,EAAE,EAAE;CACZ,CAAC;AAEF,eAAe,IAAI,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport AggregatorCell from './AggregatorCell';\n\nconst StyledAggregatorWrapper = styled.div`\n  border-bottom: 0;\n`;\n\nfunction FooterAggregators({ columns }) {\n  if (columns.filter(c => c.aggregated).length === 0) return null;\n\n  return (\n    <StyledAggregatorWrapper className='row'>\n      {columns.map(column => {\n        const context = {\n          getValue: () => column.aggregateValue,\n          getExecutionContext: () => ({ name: 'footer' })\n        };\n        return <AggregatorCell key={column.field?.id} column={column} context={context} />;\n      })}\n    </StyledAggregatorWrapper>\n  );\n}\n\nFooterAggregators.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any)\n};\n\nFooterAggregators.defaultProps = {\n  columns: []\n};\n\nexport default memo(FooterAggregators);\n"]}

package/lib/Core/Components/GroupRenderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"AAoNA;;;;;;QAwCC;AA2GD;;;mDA6IC;;;;;;;;;;sBApfqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"AAoOA;;;;;;QAwCC;AA2GD;;;mDAiJC;;;;;;;;;;sBAxgBqB,YAAY"}

package/lib/Core/Components/GroupRenderer/index.js

@@ -14,6 +14,24 @@ import DateValueDisplay from '../DateValueDisplay';
 import TestIdConstants from '../TestIdConstants';
 import GroupAdditionalInfo from './GroupAdditionalInfo';
 const groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;
+const ColorBadge = styled.div `
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 10;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 0.25rem;
+    height: 100%;
+    background-color: ${props => props.colorIndicator};
+    border-top-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+    border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+    z-index: 12;
+  }
+`;
 /**
  * TODO: remove currentColor style after cosmos fixes the issue
  * Cosmos yet to handle dark theme on BareButton
@@ -22,9 +40,7 @@ const StyledGroupHeader = styled.div `
   --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};
   --group-bg-color: ${props => props.theme.base.palette['secondary-background']};
   background-color: var(--group-bg-color);
-  &:has(button[aria-expanded='true']) {
-    filter: ${props => props.theme.base.shadow['low-filter']};
-  }
+  filter: ${props => props.theme.base.shadow['low-filter']};
 
   &.row.sticky-group-header {
     position: sticky;
@@ -60,7 +76,6 @@ const StyledGroupHeader = styled.div `
 
   &.row.group-header-row {
     height: auto;
-    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};
 
     .group-header-aggregation-row {
       display: flex;
@@ -70,6 +85,33 @@ const StyledGroupHeader = styled.div `
     }
   }
 
+  /* consider three group-header-rows stacked vertically, the first and second group headers have RULE 2 AND RULE 3 applied, the third group-header has only RULE 3 applied */
+  &.group-header-row {
+    /* RULE 1- if there are no adjacent group-headers, apply border-radius to all corners */
+    border-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+
+    /* RULE-2- if there is an adjacent group-header below, remove bottom border-radius */
+
+    &:has(+ .group-header-row) {
+      border-radius: 0;
+
+      & ${ColorBadge}::before {
+        border-radius: 0;
+      }
+    }
+
+    /*RULE 3- if there is an adjacent group-header, go to the adjacent group header and remove top border-radius */
+    &:has(+ .group-header-row) + .group-header-row {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      & ${ColorBadge}::before {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
   &.group-header-row .stickyGroupHeader {
     position: sticky;
     left: 0;
@@ -109,17 +151,6 @@ const StyledGroupHeader = styled.div `
     button:focus {
       box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};
     }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      width: 0.25rem;
-      height: 100%;
-      background-color: ${props => props.groupHeader.colorIndicator};
-      z-index: 12;
-    }
   }
   .group-header.cell {
     left: 0;
@@ -140,22 +171,6 @@ const StyledMetaList = styled(MetaList) `
 const GroupAdditionalInfoSeparator = styled.span `
   margin-inline-start: 0.3rem;
 `;
-const ColorBadge = styled.div `
-  position: sticky;
-  inset-inline-start: 0;
-  z-index: 10;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    width: 0.25rem;
-    height: 100%;
-    background-color: ${props => props.colorIndicator};
-    z-index: 12;
-  }
-`;
 /**
  * Generates unique ARIA label IDs for accessibility.
  * - groupLabelId: for the group label (e.g., "Status:")
@@ -294,29 +309,29 @@ export default function GroupHeader({ groupHeader, columns }) {
         }, []);
     }
     // FIXME: Import rather than COPY, i would rather
-    return (_jsxs(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": `${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
+    return (_jsx(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": `${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
             if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {
                 e.preventDefault();
                 buttonRef.current.focus();
             }
-        }, children: [_jsxs("div", { className: 'stickyGroupHeader', children: [_jsxs(BareButton, { ref: buttonRef, "aria-labelledby": [groupLabelId, groupNameId, ...additionalInfoIds].join(' '), "aria-expanded": !!groupHeader.isExpanded, style: {
-                            paddingRight: 'var(--group-left)'
-                        }, onClick: () => toggleGroup(), onKeyDown: event => {
-                            if (event.key === 'Enter') {
-                                // Prevent capturing of group header toggle click to its child renderers.
-                                event.preventDefault();
-                                event.stopPropagation();
-                                toggleGroup();
-                            }
-                        }, tabIndex: -1, icon: true, children: [groupHeader.count > 0 &&
-                                (groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', children: [_jsx(GroupHeaderLabel, { column: column, groupHeader: groupHeader }), groupAdditionalInfo && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: GroupAdditionalInfoSeparator, children: "\u2022" }), _jsx(StyledMetaList, { wrapItems: false, items: groupAdditionalInfo })] }))] })] }), buttonRef.current && (_jsx(GroupHeaderToolTip, { target: buttonRef.current, column: column, groupHeader: groupHeader, columns: columns, additionalFields: additionalFields }))] }), _jsxs("div", { className: 'group-header-aggregation-row', children: [_jsx(ColorBadge, { colorIndicator: groupHeader.colorIndicator }), columns.map(c => {
-                        const cxt = {
-                            getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
-                        };
-                        return (_jsx(AggregatorCell, { column: c, context: cxt, className: cx('cell', {
-                                'cell-fixed': column.frozen
-                            }) }, c.field.id));
-                    })] })] }));
+        }, children: _jsxs(Flex, { container: true, children: [_jsx(ColorBadge, { colorIndicator: groupHeader.colorIndicator }), _jsxs("div", { children: [_jsxs("div", { className: 'stickyGroupHeader', children: [_jsxs(BareButton, { ref: buttonRef, "aria-labelledby": [groupLabelId, groupNameId, ...additionalInfoIds].join(' '), "aria-expanded": !!groupHeader.isExpanded, style: {
+                                        paddingRight: 'var(--group-left)'
+                                    }, onClick: () => toggleGroup(), onKeyDown: event => {
+                                        if (event.key === 'Enter') {
+                                            // Prevent capturing of group header toggle click to its child renderers.
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            toggleGroup();
+                                        }
+                                    }, tabIndex: -1, icon: true, children: [groupHeader.count > 0 &&
+                                            (groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', children: [_jsx(GroupHeaderLabel, { column: column, groupHeader: groupHeader }), groupAdditionalInfo && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: GroupAdditionalInfoSeparator, children: "\u2022" }), _jsx(StyledMetaList, { wrapItems: false, items: groupAdditionalInfo })] }))] })] }), buttonRef.current && (_jsx(GroupHeaderToolTip, { target: buttonRef.current, column: column, groupHeader: groupHeader, columns: columns, additionalFields: additionalFields }))] }), _jsx("div", { className: 'group-header-aggregation-row', children: columns.map(c => {
+                                const cxt = {
+                                    getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
+                                };
+                                return (_jsx(AggregatorCell, { column: c, context: cxt, className: cx('cell', {
+                                        'cell-fixed': column.frozen
+                                    }) }, c.field.id));
+                            }) })] })] }) }));
 }
 GroupHeader.propTypes = {
     columns: PropTypes.arrayOf(PropTypes.any).isRequired,

package/lib/Core/Components/GroupRenderer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon, Text, MetaList, Tooltip, VisuallyHiddenText, Flex } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../../constants';\nimport AggregatorCell from '../AggregatorCell';\nimport RenderingEngine from '../RenderingEngine/RenderCell';\nimport DateValueDisplay from '../DateValueDisplay';\nimport TestIdConstants from '../TestIdConstants';\n\nimport GroupAdditionalInfo from './GroupAdditionalInfo';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n  background-color: var(--group-bg-color);\n  &:has(button[aria-expanded='true']) {\n    filter: ${props => props.theme.base.shadow['low-filter']};\n  }\n\n  &.row.sticky-group-header {\n    position: sticky;\n    display: block;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n\n    /* z-index starting from 8 because freeze-line has z-index 7 */\n    z-index: ${props => `${8 + props.groupHeader.index}`};\n    > .cell-action,\n    .cell-fixed {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n\n  .group-header-groupby {\n    font-weight: ${props => props.theme.base['font-weight'].normal};\n  }\n\n  .group-context-count .group-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n    white-space: pre;\n  }\n\n  &.row.group-header-row {\n    height: auto;\n    border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};\n\n    .group-header-aggregation-row {\n      display: flex;\n\n      /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */\n      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n    }\n  }\n\n  &.group-header-row .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    height: var(--group-header-height);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: max-content;\n      max-width: var(--container-width);\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      margin-inline-start: 0.25rem;\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n      text-align: inherit;\n      font-stretch: inherit;\n\n      > .group-wrapper {\n        margin-inline-start: ${({ groupHeader, theme }) =>\n          groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n        align-items: baseline;\n      }\n\n      .cell-content {\n        max-height: var(--group-header-height);\n        padding: 0;\n      }\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      width: 0.25rem;\n      height: 100%;\n      background-color: ${props => props.groupHeader.colorIndicator};\n      z-index: 12;\n    }\n  }\n  .group-header.cell {\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledMetaList = styled(MetaList)`\n  margin-inline-start: 0;\n\n  /* Overrides default MetaList padding and margin which was causing text-overflow issues */\n  margin: 0;\n  padding: 0 0.3rem;\n`;\nconst GroupAdditionalInfoSeparator = styled.span`\n  margin-inline-start: 0.3rem;\n`;\n\nconst ColorBadge = styled.div`\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 10;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 0.25rem;\n    height: 100%;\n    background-color: ${props => props.colorIndicator};\n    z-index: 12;\n  }\n`;\n\n/**\n * Generates unique ARIA label IDs for accessibility.\n * - groupLabelId: for the group label (e.g., \"Status:\")\n * - groupNameId: for the group value (e.g., \"Open\")\n * - additionalInfoIds: for any additional fields shown in the group header\n * These IDs are used in aria-labelledby to improve screen reader support.\n */\nconst getAriaLabelIds = (uniqueId, additionalFields) => {\n  const groupLabelId = `group-label-${uniqueId}`;\n  const groupNameId = `group-name-${uniqueId}`;\n  const additionalInfoIds = additionalFields?.map(\n    additionalField =>\n      `group-additional-info-${uniqueId}-${additionalField.id}` /* used in aria-labelledby */\n  );\n  return { groupLabelId, groupNameId, additionalInfoIds };\n};\n/**\n *  Returns label for interval grouping based on interval and boundaries\n  Response data depends on boundary settings.\n Ex: For sample data of profit\n    profit  --> cases(count)\n   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}\n  For Interval 10\n  If the boundary is 'include-lower-only',\n    and  value is 10 then label -> 10 to 20\n\n  If boundary is 'include-upper-only',\n    and value is 10 then label ->  0 to 10\n  * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n  const { interval, boundaries } = customFunction;\n  // To restrict the decimals in labels\n  const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n  value = Number(value);\n  // In case of 'include-lower-only'\n  let lowerValue = value.toFixed(intervalDecimalLength);\n  let upperValue = (value + interval).toFixed(intervalDecimalLength);\n  // In case of boundary 'include-upper-only'\n  if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n    lowerValue = (value - interval).toFixed(intervalDecimalLength);\n    upperValue = value.toFixed(intervalDecimalLength);\n  }\n  return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nexport function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n  const [translate] = useTranslate();\n  const { locale, timezone } = view.meta;\n  const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n  const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n  if (dateFunction) {\n    return (\n      <DateValueDisplay\n        value={groupHeader.name}\n        dateFunction={dateFunction}\n        locale={locale}\n        timezone={timezone}\n      />\n    );\n  }\n\n  if (isRangeGrouping) {\n    /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n    return groupHeader.name;\n  }\n\n  if (isIntervalGrouping) {\n    /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n    return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n  }\n\n  column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n  const columnRendererProps = {\n    ...column.getRenderingEngineProps(),\n    context: {\n      getValue: () => groupHeader.name,\n      getExecutionContext: () => {\n        return { getValue: () => groupHeader.data, name: 'groupHeader' };\n      }\n    }\n  };\n\n  return <RenderingEngine {...columnRendererProps} />;\n}\n\n/**\n * Tooltip content for the group header.\n * Shows the group label, value, and any additional fields.\n * Used for hover/focus tooltips on the group header button.\n */\nfunction GroupHeaderToolTip({ column, groupHeader, columns, additionalFields, target }) {\n  const view = column.parent;\n  const { dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n\n  return (\n    <Tooltip smart target={target} showDelay='short' hideDelay='none' describeTarget={false}>\n      <Text>{!column.field.hideGroupColumnNameLabel && groupHeader.label}: </Text>\n      <Text>\n        <GroupName\n          view={view}\n          column={column}\n          groupHeader={groupHeader}\n          dateFunction={dateFunction}\n          customFunction={customFunction}\n        />\n        <Text>{` (${groupCountFormatted})`}</Text>\n      </Text>\n      {!!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (\n        <>\n          {groupHeader.additionalFieldsData?.map(additionalFieldData => {\n            return (\n              <>\n                {' • '}\n                <GroupAdditionalInfo\n                  groupHeader={groupHeader}\n                  additionalField={additionalFields.find(\n                    additionalField => additionalField.id === additionalFieldData.id\n                  )}\n                  columns={columns}\n                  additionalFieldData={additionalFieldData}\n                  rendererContext='GroupHeaderTooltip'\n                />\n              </>\n            );\n          })}\n        </>\n      )}\n    </Tooltip>\n  );\n}\n\n/**\n * Renders the main group header label and count.\n * - Shows the group label (e.g., \"Status:\") unless hidden by column config.\n * - Shows the group value and item count.\n * - Uses ARIA IDs for accessibility.\n */\nfunction GroupHeaderLabel({ column, groupHeader }) {\n  const view = column.parent;\n  const { dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n  const { groupLabelId, groupNameId } = getAriaLabelIds(groupHeader.uniqueId);\n  return (\n    <>\n      <div className='group-label' />\n      {!column.field.hideGroupColumnNameLabel && (\n        <span\n          className='group-header-groupby'\n          data-test-id={groupHeader.groupBy}\n          data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n          id={groupLabelId}\n        >\n          {groupHeader.label}:\n        </span>\n      )}\n      <div className='group-label' />\n      <span\n        className='group-context-count'\n        style={{ display: 'inline-flex' }}\n        data-test-id='groupHeader'\n        data-testid={TestIdConstants.groupHeaderCount}\n        id={groupNameId}\n      >\n        <GroupName\n          view={view}\n          column={column}\n          groupHeader={groupHeader}\n          dateFunction={dateFunction}\n          customFunction={customFunction}\n        />\n        {/* adding whitespace pre to preserve the space at the begining of count text */}\n        <span className='group-count'>{` (${groupCountFormatted})`}</span>\n        <VisuallyHiddenText> items</VisuallyHiddenText>\n      </span>\n    </>\n  );\n}\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n  const buttonRef = useRef();\n  const view = columns[0].parent;\n  const toggleGroup = useCallback(() => {\n    if (groupHeader.count > 0) {\n      view.type.toggleGroupExpansion({ groupHeader });\n    }\n  }, [groupHeader, view]);\n\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n\n  // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n  const { columnId, additionalFields = [] } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n  if (!columnId) {\n    return null;\n  }\n\n  const column = columns.find(c => c.field.id === columnId);\n  const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n  // Generate unique ARIA label IDs for accessibility\n  const {\n    groupLabelId,\n    groupNameId,\n    additionalInfoIds = []\n  } = getAriaLabelIds(groupHeader.uniqueId, additionalFields);\n  let groupAdditionalInfo;\n\n  // Prepare additional info components if present\n  if (groupHeader.additionalFieldsData?.length && additionalFields.length) {\n    groupAdditionalInfo = groupHeader.additionalFieldsData.reduce(\n      (acc, additionalFieldData, idx) => {\n        const additionalField = additionalFields.find(field => field.id === additionalFieldData.id);\n        if (additionalField) {\n          acc.push(\n            <Flex container={{ gap: 0.5 }} id={additionalInfoIds[idx]}>\n              <GroupAdditionalInfo\n                additionalFieldData={additionalFieldData}\n                additionalField={additionalField}\n                columns={columns}\n                groupHeader={groupHeader}\n                rendererContext='GroupHeader'\n              />\n            </Flex>\n          );\n        }\n        return acc;\n      },\n      []\n    );\n  }\n\n  // FIXME: Import rather than COPY, i would rather\n  return (\n    <StyledGroupHeader\n      groupHeader={groupHeader}\n      className={cx('row group-header-row sticky-group-header')}\n      data-test-id='groupHeader'\n      data-testid={`${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`}\n      isAggregationApplied={isAggregationApplied}\n      role='row'\n      onFocus={e => {\n        if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n          e.preventDefault();\n          buttonRef.current.focus();\n        }\n      }}\n    >\n      <div className='stickyGroupHeader'>\n        <BareButton\n          ref={buttonRef}\n          // ARIA labels for accessibility, includes additional info if present\n          aria-labelledby={[groupLabelId, groupNameId, ...additionalInfoIds].join(' ')}\n          aria-expanded={!!groupHeader.isExpanded}\n          style={{\n            paddingRight: 'var(--group-left)'\n          }}\n          onClick={() => toggleGroup()}\n          onKeyDown={event => {\n            if (event.key === 'Enter') {\n              // Prevent capturing of group header toggle click to its child renderers.\n              event.preventDefault();\n              event.stopPropagation();\n              toggleGroup();\n            }\n          }}\n          tabIndex={-1}\n          icon\n        >\n          {groupHeader.count > 0 &&\n            (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n          <div className='group-wrapper'>\n            {/* Main group label and count */}\n            <GroupHeaderLabel column={column} groupHeader={groupHeader} />\n            {/* Render additional info if present */}\n            {groupAdditionalInfo && (\n              <>\n                <Text variant='secondary' as={GroupAdditionalInfoSeparator}>\n                  •\n                </Text>\n                <StyledMetaList wrapItems={false} items={groupAdditionalInfo} />\n              </>\n            )}\n          </div>\n        </BareButton>\n        {/* Tooltip for group header, shown on hover/focus */}\n        {buttonRef.current && (\n          <GroupHeaderToolTip\n            target={buttonRef.current}\n            column={column}\n            groupHeader={groupHeader}\n            columns={columns}\n            additionalFields={additionalFields}\n          />\n        )}\n      </div>\n      <div className='group-header-aggregation-row'>\n        <ColorBadge colorIndicator={groupHeader.colorIndicator} />\n        {columns.map(c => {\n          const cxt = {\n            getValue: () =>\n              groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n          };\n          return (\n            <AggregatorCell\n              key={c.field.id}\n              column={c}\n              context={cxt}\n              className={cx('cell', {\n                'cell-fixed': column.frozen\n              })}\n            />\n          );\n        })}\n      </div>\n    </StyledGroupHeader>\n  );\n}\n\nGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon, Text, MetaList, Tooltip, VisuallyHiddenText, Flex } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../../constants';\nimport AggregatorCell from '../AggregatorCell';\nimport RenderingEngine from '../RenderingEngine/RenderCell';\nimport DateValueDisplay from '../DateValueDisplay';\nimport TestIdConstants from '../TestIdConstants';\n\nimport GroupAdditionalInfo from './GroupAdditionalInfo';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n\nconst ColorBadge = styled.div`\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 10;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 0.25rem;\n    height: 100%;\n    background-color: ${props => props.colorIndicator};\n    border-top-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n    border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n    z-index: 12;\n  }\n`;\n\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n  --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n  --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n  background-color: var(--group-bg-color);\n  filter: ${props => props.theme.base.shadow['low-filter']};\n\n  &.row.sticky-group-header {\n    position: sticky;\n    display: block;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n\n    /* z-index starting from 8 because freeze-line has z-index 7 */\n    z-index: ${props => `${8 + props.groupHeader.index}`};\n    > .cell-action,\n    .cell-fixed {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n    flex-shrink: 0;\n  }\n\n  .group-header-groupby {\n    font-weight: ${props => props.theme.base['font-weight'].normal};\n  }\n\n  .group-context-count .group-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n    white-space: pre;\n  }\n\n  &.row.group-header-row {\n    height: auto;\n\n    .group-header-aggregation-row {\n      display: flex;\n\n      /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */\n      height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n    }\n  }\n\n  /* consider three group-header-rows stacked vertically, the first and second group headers have RULE 2 AND RULE 3 applied, the third group-header has only RULE 3 applied */\n  &.group-header-row {\n    /* RULE 1- if there are no adjacent group-headers, apply border-radius to all corners */\n    border-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n\n    /* RULE-2- if there is an adjacent group-header below, remove bottom border-radius */\n\n    &:has(+ .group-header-row) {\n      border-radius: 0;\n\n      & ${ColorBadge}::before {\n        border-radius: 0;\n      }\n    }\n\n    /*RULE 3- if there is an adjacent group-header, go to the adjacent group header and remove top border-radius */\n    &:has(+ .group-header-row) + .group-header-row {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      & ${ColorBadge}::before {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n\n  &.group-header-row .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    height: var(--group-header-height);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: max-content;\n      max-width: var(--container-width);\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      margin-inline-start: 0.25rem;\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n      text-align: inherit;\n      font-stretch: inherit;\n\n      > .group-wrapper {\n        margin-inline-start: ${({ groupHeader, theme }) =>\n          groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n        align-items: baseline;\n      }\n\n      .cell-content {\n        max-height: var(--group-header-height);\n        padding: 0;\n      }\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n    }\n  }\n  .group-header.cell {\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledMetaList = styled(MetaList)`\n  margin-inline-start: 0;\n\n  /* Overrides default MetaList padding and margin which was causing text-overflow issues */\n  margin: 0;\n  padding: 0 0.3rem;\n`;\nconst GroupAdditionalInfoSeparator = styled.span`\n  margin-inline-start: 0.3rem;\n`;\n\n/**\n * Generates unique ARIA label IDs for accessibility.\n * - groupLabelId: for the group label (e.g., \"Status:\")\n * - groupNameId: for the group value (e.g., \"Open\")\n * - additionalInfoIds: for any additional fields shown in the group header\n * These IDs are used in aria-labelledby to improve screen reader support.\n */\nconst getAriaLabelIds = (uniqueId, additionalFields) => {\n  const groupLabelId = `group-label-${uniqueId}`;\n  const groupNameId = `group-name-${uniqueId}`;\n  const additionalInfoIds = additionalFields?.map(\n    additionalField =>\n      `group-additional-info-${uniqueId}-${additionalField.id}` /* used in aria-labelledby */\n  );\n  return { groupLabelId, groupNameId, additionalInfoIds };\n};\n/**\n *  Returns label for interval grouping based on interval and boundaries\n  Response data depends on boundary settings.\n Ex: For sample data of profit\n    profit  --> cases(count)\n   {'0': 10, 1': 100,  '2':30, '10': 35, '15':45, '20':2}\n  For Interval 10\n  If the boundary is 'include-lower-only',\n    and  value is 10 then label -> 10 to 20\n\n  If boundary is 'include-upper-only',\n    and value is 10 then label ->  0 to 10\n  * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n  const { interval, boundaries } = customFunction;\n  // To restrict the decimals in labels\n  const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n  value = Number(value);\n  // In case of 'include-lower-only'\n  let lowerValue = value.toFixed(intervalDecimalLength);\n  let upperValue = (value + interval).toFixed(intervalDecimalLength);\n  // In case of boundary 'include-upper-only'\n  if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n    lowerValue = (value - interval).toFixed(intervalDecimalLength);\n    upperValue = value.toFixed(intervalDecimalLength);\n  }\n  return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nexport function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n  const [translate] = useTranslate();\n  const { locale, timezone } = view.meta;\n  const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n  const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n  if (dateFunction) {\n    return (\n      <DateValueDisplay\n        value={groupHeader.name}\n        dateFunction={dateFunction}\n        locale={locale}\n        timezone={timezone}\n      />\n    );\n  }\n\n  if (isRangeGrouping) {\n    /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n    return groupHeader.name;\n  }\n\n  if (isIntervalGrouping) {\n    /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n    return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n  }\n\n  column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n  const columnRendererProps = {\n    ...column.getRenderingEngineProps(),\n    context: {\n      getValue: () => groupHeader.name,\n      getExecutionContext: () => {\n        return { getValue: () => groupHeader.data, name: 'groupHeader' };\n      }\n    }\n  };\n\n  return <RenderingEngine {...columnRendererProps} />;\n}\n\n/**\n * Tooltip content for the group header.\n * Shows the group label, value, and any additional fields.\n * Used for hover/focus tooltips on the group header button.\n */\nfunction GroupHeaderToolTip({ column, groupHeader, columns, additionalFields, target }) {\n  const view = column.parent;\n  const { dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n\n  return (\n    <Tooltip smart target={target} showDelay='short' hideDelay='none' describeTarget={false}>\n      <Text>{!column.field.hideGroupColumnNameLabel && groupHeader.label}: </Text>\n      <Text>\n        <GroupName\n          view={view}\n          column={column}\n          groupHeader={groupHeader}\n          dateFunction={dateFunction}\n          customFunction={customFunction}\n        />\n        <Text>{` (${groupCountFormatted})`}</Text>\n      </Text>\n      {!!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (\n        <>\n          {groupHeader.additionalFieldsData?.map(additionalFieldData => {\n            return (\n              <>\n                {' • '}\n                <GroupAdditionalInfo\n                  groupHeader={groupHeader}\n                  additionalField={additionalFields.find(\n                    additionalField => additionalField.id === additionalFieldData.id\n                  )}\n                  columns={columns}\n                  additionalFieldData={additionalFieldData}\n                  rendererContext='GroupHeaderTooltip'\n                />\n              </>\n            );\n          })}\n        </>\n      )}\n    </Tooltip>\n  );\n}\n\n/**\n * Renders the main group header label and count.\n * - Shows the group label (e.g., \"Status:\") unless hidden by column config.\n * - Shows the group value and item count.\n * - Uses ARIA IDs for accessibility.\n */\nfunction GroupHeaderLabel({ column, groupHeader }) {\n  const view = column.parent;\n  const { dateFunction, customFunction } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  const formatter = view.getFormatterByKey('Integer');\n  const { locale } = view.meta;\n  const groupCountFormatted = formatter\n    ? formatter(groupHeader.count, { locale })\n    : groupHeader.count;\n  const { groupLabelId, groupNameId } = getAriaLabelIds(groupHeader.uniqueId);\n  return (\n    <>\n      <div className='group-label' />\n      {!column.field.hideGroupColumnNameLabel && (\n        <span\n          className='group-header-groupby'\n          data-test-id={groupHeader.groupBy}\n          data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n          id={groupLabelId}\n        >\n          {groupHeader.label}:\n        </span>\n      )}\n      <div className='group-label' />\n      <span\n        className='group-context-count'\n        style={{ display: 'inline-flex' }}\n        data-test-id='groupHeader'\n        data-testid={TestIdConstants.groupHeaderCount}\n        id={groupNameId}\n      >\n        <GroupName\n          view={view}\n          column={column}\n          groupHeader={groupHeader}\n          dateFunction={dateFunction}\n          customFunction={customFunction}\n        />\n        {/* adding whitespace pre to preserve the space at the begining of count text */}\n        <span className='group-count'>{` (${groupCountFormatted})`}</span>\n        <VisuallyHiddenText> items</VisuallyHiddenText>\n      </span>\n    </>\n  );\n}\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n  const buttonRef = useRef();\n  const view = columns[0].parent;\n  const toggleGroup = useCallback(() => {\n    if (groupHeader.count > 0) {\n      view.type.toggleGroupExpansion({ groupHeader });\n    }\n  }, [groupHeader, view]);\n\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n\n  // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n  const { columnId, additionalFields = [] } =\n    getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n  // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n  if (!columnId) {\n    return null;\n  }\n\n  const column = columns.find(c => c.field.id === columnId);\n  const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n  // Generate unique ARIA label IDs for accessibility\n  const {\n    groupLabelId,\n    groupNameId,\n    additionalInfoIds = []\n  } = getAriaLabelIds(groupHeader.uniqueId, additionalFields);\n  let groupAdditionalInfo;\n\n  // Prepare additional info components if present\n  if (groupHeader.additionalFieldsData?.length && additionalFields.length) {\n    groupAdditionalInfo = groupHeader.additionalFieldsData.reduce(\n      (acc, additionalFieldData, idx) => {\n        const additionalField = additionalFields.find(field => field.id === additionalFieldData.id);\n        if (additionalField) {\n          acc.push(\n            <Flex container={{ gap: 0.5 }} id={additionalInfoIds[idx]}>\n              <GroupAdditionalInfo\n                additionalFieldData={additionalFieldData}\n                additionalField={additionalField}\n                columns={columns}\n                groupHeader={groupHeader}\n                rendererContext='GroupHeader'\n              />\n            </Flex>\n          );\n        }\n        return acc;\n      },\n      []\n    );\n  }\n\n  // FIXME: Import rather than COPY, i would rather\n  return (\n    <StyledGroupHeader\n      groupHeader={groupHeader}\n      className={cx('row group-header-row sticky-group-header')}\n      data-test-id='groupHeader'\n      data-testid={`${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`}\n      isAggregationApplied={isAggregationApplied}\n      role='row'\n      onFocus={e => {\n        if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n          e.preventDefault();\n          buttonRef.current.focus();\n        }\n      }}\n    >\n      <Flex container>\n        <ColorBadge colorIndicator={groupHeader.colorIndicator} />\n        <div>\n          <div className='stickyGroupHeader'>\n            <BareButton\n              ref={buttonRef}\n              // ARIA labels for accessibility, includes additional info if present\n              aria-labelledby={[groupLabelId, groupNameId, ...additionalInfoIds].join(' ')}\n              aria-expanded={!!groupHeader.isExpanded}\n              style={{\n                paddingRight: 'var(--group-left)'\n              }}\n              onClick={() => toggleGroup()}\n              onKeyDown={event => {\n                if (event.key === 'Enter') {\n                  // Prevent capturing of group header toggle click to its child renderers.\n                  event.preventDefault();\n                  event.stopPropagation();\n                  toggleGroup();\n                }\n              }}\n              tabIndex={-1}\n              icon\n            >\n              {groupHeader.count > 0 &&\n                (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n              <div className='group-wrapper'>\n                {/* Main group label and count */}\n                <GroupHeaderLabel column={column} groupHeader={groupHeader} />\n                {/* Render additional info if present */}\n                {groupAdditionalInfo && (\n                  <>\n                    <Text variant='secondary' as={GroupAdditionalInfoSeparator}>\n                      •\n                    </Text>\n                    <StyledMetaList wrapItems={false} items={groupAdditionalInfo} />\n                  </>\n                )}\n              </div>\n            </BareButton>\n            {/* Tooltip for group header, shown on hover/focus */}\n            {buttonRef.current && (\n              <GroupHeaderToolTip\n                target={buttonRef.current}\n                column={column}\n                groupHeader={groupHeader}\n                columns={columns}\n                additionalFields={additionalFields}\n              />\n            )}\n          </div>\n          <div className='group-header-aggregation-row'>\n            {columns.map(c => {\n              const cxt = {\n                getValue: () =>\n                  groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n              };\n              return (\n                <AggregatorCell\n                  key={c.field.id}\n                  column={c}\n                  context={cxt}\n                  className={cx('cell', {\n                    'cell-fixed': column.frozen\n                  })}\n                />\n              );\n            })}\n          </div>\n        </div>\n      </Flex>\n    </StyledGroupHeader>\n  );\n}\n\nGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/HierarchicalGroupRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalGroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"AAoIA;;;mDAyHC;;;;;;;;;AA/OM,kFAC0B;AAI1B,qCAEN;AA+OM;;;mDAqCN;;;;;;;;;;;;sBAzSqB,YAAY"}
+{"version":3,"file":"HierarchicalGroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"AAmIA;;;mDAyHC;;;;;;;;;AA9OM,kFAC0B;AAI1B,qCAEN;AA8OM;;;mDAqCN;;;;;;;;;;;;sBAxSqB,YAAY"}

package/lib/Core/Components/HierarchicalGroupRenderer.js

@@ -58,7 +58,6 @@ const StyledHierarchicalGroupHeader = styled.div `
     left: 0;
     width: 0;
     z-index: 10;
-    border-bottom: var(--border-style);
 
     > button {
       color: currentColor;

package/lib/Core/Components/HierarchicalGroupRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalGroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport HierarchicalCell from './HierarchicalCell';\n\nexport const hierarchicalgroupheaderleftdisplacement = headerLevel =>\n  `${(headerLevel + 1) * 1.5}rem`;\n\nlet counter = 0;\n\nexport const resetCounter = () => {\n  counter = 0;\n};\n\nconst StyledHierarchicalGroupHeader = styled.div`\n  --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['primary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.sticky-group-header {\n    position: sticky;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n    z-index: ${props => {\n      const zIndex = 5 + props.groupHeader.level + counter;\n      if (props.groupHeader.isLeafNode) {\n        counter += props.groupHeader.level;\n      }\n      return zIndex;\n    }};\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n  }\n\n  .group-context-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n  }\n\n  .group-icon-spacer {\n    padding-left: var(--icon-size);\n  }\n\n  .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    border-bottom: var(--border-style);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow.focus};\n    }\n  }\n  .group-header.cell {\n    width: ${props => props.groupWidth};\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledHierarchicalGroupFooter = styled.div`\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['secondary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.hierarchical-group-footer-row {\n    position: relative;\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  & .footer-label-container {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 0;\n    z-index: 5;\n    & .label {\n      position: absolute;\n      background-color: var(--group-bg-color);\n      height: calc(100% - var(--border-width));\n      left: ${props => {\n        return `${props.labelLeft}px`;\n      }};\n      width: max-content;\n      /* stylelint-disable unit-allowed-list */\n      padding: 0 5px;\n    }\n  }\n`;\n\nexport function HierarchicalGroupHeader({ groupHeader, columns }) {\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n  let groupWidth = '';\n  const view = columns[0].parent;\n  let freezeColCount = 0;\n  columns\n    .filter(c => !c.hidden && c.frozen)\n    .forEach(c => {\n      groupWidth += `var(--col-width-${c.field.id}) + `;\n      freezeColCount += 1;\n    });\n  if (freezeColCount > 0) groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;\n\n  const renderStickyHeader = () => {\n    // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere\n    const { columnId, dateFunction } =\n      getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n    // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n    if (!columnId) {\n      return null;\n    }\n    let columnRendererProps;\n    if (!dateFunction) {\n      const column = columns.find(c => c.field.id === columnId);\n      column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n      columnRendererProps = {\n        ...column.getRenderingEngineProps(),\n        context: {\n          getValue: () => groupHeader.name,\n          getExecutionContext: () => {\n            return { getValue: () => groupHeader.data, name: 'groupHeader' };\n          }\n        }\n      };\n    }\n\n    const formatter = view.getFormatterByKey('Integer');\n    const { locale } = view.meta;\n    const groupCountFormatted = formatter\n      ? formatter(groupHeader.count, { locale })\n      : groupHeader.count;\n    const expandCollapseIcon = groupHeader.isExpanded ? (\n      <Icon name='caret-down' />\n    ) : (\n      <Icon name='caret-right' />\n    );\n\n    return (\n      <div className='stickyGroupHeader'>\n        <BareButton\n          aria-label={`${groupHeader.label} ${groupCountFormatted} items`}\n          style={{\n            paddingRight: '3px',\n            maxWidth: freezeColCount > 0 ? groupWidth : 'auto'\n          }}\n          onClick={() => view.type.toggleGroupExpansion({ groupHeader })}\n        >\n          {groupHeader.count > 0 ? expandCollapseIcon : <div className='group-icon-spacer' />}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            <span className='group-context-count' style={{ display: 'inline-flex' }}>\n              <RenderingEngine {...columnRendererProps} highlighter />\n            </span>\n          </div>\n        </BareButton>\n      </div>\n    );\n  };\n\n  const getRenderingEnginePropsById = id => {\n    const column = columns.find(c => c.field.id === id);\n    const columnContext = column.getContext();\n    const parentContext = columnContext.getParentContext();\n\n    return {\n      ...column.getRenderingEngineProps(),\n      context: {\n        getValue: () => {\n          return groupHeader.info[column.field?.name];\n        },\n        getExecutionContext: () => {\n          return { getValue: () => groupHeader.info, name: 'groupHeader' };\n        },\n        getParentContext: () => {\n          return {\n            ...parentContext,\n            getRenderingEnginePropsById\n          };\n        }\n      }\n    };\n  };\n\n  const renderHierarchicalCells = () => {\n    return columns.map(column => {\n      const columnRendererProps = getRenderingEnginePropsById(column.field.id);\n\n      return (\n        <HierarchicalCell\n          key={column.field.id}\n          column={column}\n          columnRendererProps={columnRendererProps}\n        />\n      );\n    });\n  };\n\n  return (\n    <StyledHierarchicalGroupHeader\n      groupHeader={groupHeader}\n      groupWidth={groupWidth}\n      className={cx('row hierarchical-group-header-row sticky-group-header')}\n      data-test-id='hierarchicalGroupHeader'\n    >\n      {renderStickyHeader()}\n      {renderHierarchicalCells()}\n    </StyledHierarchicalGroupHeader>\n  );\n}\n\nHierarchicalGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport const HierarchicalGroupFooter = ({ columns, groupHeader }) => {\n  const labelRef = useRef(null);\n  const [labelLeft, setLabelLeft] = useState(0);\n  const view = columns[0].parent;\n  const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();\n  const footerWidth = parentContainer?.clientWidth;\n\n  useLayoutEffect(() => {\n    if (labelRef.current) {\n      const { width } = labelRef.current.getBoundingClientRect();\n      setLabelLeft(footerWidth - width - 5);\n    }\n  }, [groupHeader.isVisible, footerWidth]);\n\n  if (!groupHeader.isVisible) return null;\n\n  return (\n    <StyledHierarchicalGroupFooter\n      groupHeader={groupHeader}\n      className={cx('row hierarchical-group-footer-row')}\n      labelLeft={labelLeft}\n      data-test-id='hierarchicalGroupFooter'\n    >\n      <div className='footer-label-container'>\n        <div ref={labelRef} className='label'>\n          {groupHeader.name}\n        </div>\n      </div>\n      {columns.map(c => {\n        const cxt = {\n          getValue: () =>\n            groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n        };\n        return <AggregatorCell key={c.field.id} column={c} context={cxt} />;\n      })}\n    </StyledHierarchicalGroupFooter>\n  );\n};\n\nHierarchicalGroupFooter.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
+{"version":3,"file":"HierarchicalGroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport HierarchicalCell from './HierarchicalCell';\n\nexport const hierarchicalgroupheaderleftdisplacement = headerLevel =>\n  `${(headerLevel + 1) * 1.5}rem`;\n\nlet counter = 0;\n\nexport const resetCounter = () => {\n  counter = 0;\n};\n\nconst StyledHierarchicalGroupHeader = styled.div`\n  --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['primary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.sticky-group-header {\n    position: sticky;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n    z-index: ${props => {\n      const zIndex = 5 + props.groupHeader.level + counter;\n      if (props.groupHeader.isLeafNode) {\n        counter += props.groupHeader.level;\n      }\n      return zIndex;\n    }};\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n  }\n\n  .group-context-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n  }\n\n  .group-icon-spacer {\n    padding-left: var(--icon-size);\n  }\n\n  .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow.focus};\n    }\n  }\n  .group-header.cell {\n    width: ${props => props.groupWidth};\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledHierarchicalGroupFooter = styled.div`\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['secondary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.hierarchical-group-footer-row {\n    position: relative;\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  & .footer-label-container {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 0;\n    z-index: 5;\n    & .label {\n      position: absolute;\n      background-color: var(--group-bg-color);\n      height: calc(100% - var(--border-width));\n      left: ${props => {\n        return `${props.labelLeft}px`;\n      }};\n      width: max-content;\n      /* stylelint-disable unit-allowed-list */\n      padding: 0 5px;\n    }\n  }\n`;\n\nexport function HierarchicalGroupHeader({ groupHeader, columns }) {\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n  let groupWidth = '';\n  const view = columns[0].parent;\n  let freezeColCount = 0;\n  columns\n    .filter(c => !c.hidden && c.frozen)\n    .forEach(c => {\n      groupWidth += `var(--col-width-${c.field.id}) + `;\n      freezeColCount += 1;\n    });\n  if (freezeColCount > 0) groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;\n\n  const renderStickyHeader = () => {\n    // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere\n    const { columnId, dateFunction } =\n      getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n    // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n    if (!columnId) {\n      return null;\n    }\n    let columnRendererProps;\n    if (!dateFunction) {\n      const column = columns.find(c => c.field.id === columnId);\n      column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n      columnRendererProps = {\n        ...column.getRenderingEngineProps(),\n        context: {\n          getValue: () => groupHeader.name,\n          getExecutionContext: () => {\n            return { getValue: () => groupHeader.data, name: 'groupHeader' };\n          }\n        }\n      };\n    }\n\n    const formatter = view.getFormatterByKey('Integer');\n    const { locale } = view.meta;\n    const groupCountFormatted = formatter\n      ? formatter(groupHeader.count, { locale })\n      : groupHeader.count;\n    const expandCollapseIcon = groupHeader.isExpanded ? (\n      <Icon name='caret-down' />\n    ) : (\n      <Icon name='caret-right' />\n    );\n\n    return (\n      <div className='stickyGroupHeader'>\n        <BareButton\n          aria-label={`${groupHeader.label} ${groupCountFormatted} items`}\n          style={{\n            paddingRight: '3px',\n            maxWidth: freezeColCount > 0 ? groupWidth : 'auto'\n          }}\n          onClick={() => view.type.toggleGroupExpansion({ groupHeader })}\n        >\n          {groupHeader.count > 0 ? expandCollapseIcon : <div className='group-icon-spacer' />}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            <span className='group-context-count' style={{ display: 'inline-flex' }}>\n              <RenderingEngine {...columnRendererProps} highlighter />\n            </span>\n          </div>\n        </BareButton>\n      </div>\n    );\n  };\n\n  const getRenderingEnginePropsById = id => {\n    const column = columns.find(c => c.field.id === id);\n    const columnContext = column.getContext();\n    const parentContext = columnContext.getParentContext();\n\n    return {\n      ...column.getRenderingEngineProps(),\n      context: {\n        getValue: () => {\n          return groupHeader.info[column.field?.name];\n        },\n        getExecutionContext: () => {\n          return { getValue: () => groupHeader.info, name: 'groupHeader' };\n        },\n        getParentContext: () => {\n          return {\n            ...parentContext,\n            getRenderingEnginePropsById\n          };\n        }\n      }\n    };\n  };\n\n  const renderHierarchicalCells = () => {\n    return columns.map(column => {\n      const columnRendererProps = getRenderingEnginePropsById(column.field.id);\n\n      return (\n        <HierarchicalCell\n          key={column.field.id}\n          column={column}\n          columnRendererProps={columnRendererProps}\n        />\n      );\n    });\n  };\n\n  return (\n    <StyledHierarchicalGroupHeader\n      groupHeader={groupHeader}\n      groupWidth={groupWidth}\n      className={cx('row hierarchical-group-header-row sticky-group-header')}\n      data-test-id='hierarchicalGroupHeader'\n    >\n      {renderStickyHeader()}\n      {renderHierarchicalCells()}\n    </StyledHierarchicalGroupHeader>\n  );\n}\n\nHierarchicalGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport const HierarchicalGroupFooter = ({ columns, groupHeader }) => {\n  const labelRef = useRef(null);\n  const [labelLeft, setLabelLeft] = useState(0);\n  const view = columns[0].parent;\n  const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();\n  const footerWidth = parentContainer?.clientWidth;\n\n  useLayoutEffect(() => {\n    if (labelRef.current) {\n      const { width } = labelRef.current.getBoundingClientRect();\n      setLabelLeft(footerWidth - width - 5);\n    }\n  }, [groupHeader.isVisible, footerWidth]);\n\n  if (!groupHeader.isVisible) return null;\n\n  return (\n    <StyledHierarchicalGroupFooter\n      groupHeader={groupHeader}\n      className={cx('row hierarchical-group-footer-row')}\n      labelLeft={labelLeft}\n      data-test-id='hierarchicalGroupFooter'\n    >\n      <div className='footer-label-container'>\n        <div ref={labelRef} className='label'>\n          {groupHeader.name}\n        </div>\n      </div>\n      {columns.map(c => {\n        const cxt = {\n          getValue: () =>\n            groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n        };\n        return <AggregatorCell key={c.field.id} column={c} context={cxt} />;\n      })}\n    </StyledHierarchicalGroupFooter>\n  );\n};\n\nHierarchicalGroupFooter.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Views/Table/StyledTableContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAwBA,oNAi5BG"}
+{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAwBA,oNAq6BG"}

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

@@ -26,35 +26,40 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         !(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
+    const freezeLineShadowTransparent = transparentize(getLuminance(theme.components.table.header['foreground-color']) < 0.5 ? 0.9 : 0.75, theme.components.table.header['foreground-color']);
+    const evenRowBackgroundColor = 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 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
+    const groupHeaderForegroundContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], theme.components.table.body['secondary-background-color']).AA;
+    const usableGroupHeaderForeground = groupHeaderForegroundContrast
         ? theme.components.table.body['foreground-color']
-        : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);
+        : readableColor(theme.components.table.body['foreground-color'], theme.components.table.body['secondary-background-color']);
+    const evenRowContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], evenRowBackgroundColor).AA;
+    const useableEvenRowForeground = evenRowContrast
+        ? theme.components.table.body['foreground-color']
+        : readableColor(theme.components.table.body['foreground-color'], evenRowBackgroundColor);
     return css `
-    --primary-background: ${theme.base.palette['primary-background']};
-    --secondary-background: ${theme.components.table.header['background-color']};
+    --primary-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};
     --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']};
+    --border-style: var(--border-width) solid var(--border-color);
     --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.44rem 0 var(--cell-padding);
-    --header-bg-color: var(--secondary-background);
+    --header-bg-color: ${theme.components.table.header['background-color']};
     --header-fg-color: ${usableHeaderForeground};
+    --group-header-bg-color: ${theme.components.table.body['secondary-background-color']};
+    --group-header-fg-color: ${usableGroupHeaderForeground};
     --default-group-header-height: 1.5rem;
     --group-header-height: var(--default-group-header-height);
     --box-sizing: content-box;
@@ -62,6 +67,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};
     --row-height-multiplier: 1.125;
     --cell-fixed-position: sticky;
+    --table-header-border-radius: min(
+      var(--border-radius),
+      ${props => props.theme.base['border-radius']},
+      0.5rem
+    );
     position: relative;
     ${() => generateRSHeightStyles({ view, isFullscreen })}
 
@@ -71,13 +81,23 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
 
     .container {
       ${() => generateRSDataContainerHeightStyles()};
-      border: var(--border-style);
-      border-radius: var(--border-radius, ${theme.base['border-radius']});
+      border-radius: var(--table-header-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']});
+        border-radius: var(--table-header-border-radius);
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: var(--row-height);
+        border: var(--border-style);
+        z-index: 12;
+        border-radius: var(--table-header-border-radius) var(--table-header-border-radius) 0 0;
+        pointer-events: none;
       }
     }
 
@@ -139,26 +159,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       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;
@@ -197,6 +197,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 */
@@ -208,12 +209,7 @@ 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'] &&
-        css `
-          border-bottom: var(--border-style);
-        `}
         display: flex;
         align-items: center;
 
@@ -234,7 +230,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           right: 0;
           border-right: 0;
           justify-content: center;
-          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 */
@@ -246,20 +241,10 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           }
         }
         &.aggregateCell {
-          background-color: var(--header-bg-color);
+          background-color: var(--group-header-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 {
@@ -273,7 +258,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
               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);
             }
           }
         }
@@ -298,11 +282,9 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       .group-header-aggregation-row > .cell-fixed {
         position: var(--cell-fixed-position);
         z-index: 4;
-
         ${showFreezeLine &&
         css `
           &.cell-last-frozen {
-            border-right: solid 1px var(--border-color-freeze);
             filter: drop-shadow(
               calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}
             );
@@ -328,33 +310,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       &.click {
         cursor: pointer;
       }
-
-      &:last-child {
-        border-end-start-radius: inherit;
-        border-end-end-radius: inherit;
-
-        > .cell {
-          &:first-child {
-            border-end-start-radius: inherit;
-          }
-
-          &:last-child {
-            border-end-end-radius: inherit;
-          }
-
-          ${theme.components.table['striped-rows'] &&
-        css `
-            border-bottom: var(--border-style);
-          `}
-        }
-      }
     }
     .row:not(.row-error):not(.group-header-row):not(.header) {
       .cell-fixed {
         background: var(--primary-background);
       }
       .cell-fixed.aggregateCell {
-        background: var(--header-bg-color);
+        background: var(--group-header-bg-color);
       }
     }
     ${theme.components.table['striped-rows'] &&
@@ -365,27 +327,53 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       .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};
-        color: ${useableOddRowForeground};
+        background: var(--primary-background);
         .cell-fixed {
-          background: ${oddRowBackgroundColor};
-          color: ${useableOddRowForeground};
+          background: var(--primary-background);
         }
         > .cell-action {
-          background: ${oddRowBackgroundColor};
+          background: var(--primary-background);
         }
       }
+
+      /* Targets rows with an even data-index attribute, excluding group header rows */
       .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: var(--primary-background);
+        background: ${evenRowBackgroundColor};
+        color: ${useableEvenRowForeground};
+        border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+        border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
+
         .cell-fixed {
-          background: var(--primary-background);
+          color: ${useableEvenRowForeground};
         }
-        > .cell-action {
-          background: var(--primary-background);
+
+        /* 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;
         }
       }
     `}
@@ -411,13 +399,36 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       }
     }
 
+    .sticky-header {
+      display: grid;
+      position: sticky;
+      top: 0;
+      z-index: 6;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+
+      & .row .cell:not(.cell-last-frozen):not(.cell-last) {
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 0.5rem;
+          bottom: 0.5rem;
+          width: 0.062rem;
+          background-color: ${theme.base.palette['border-line']};
+        }
+      }
+    }
+
     .filter-info-container {
       display: flex;
       justify-content: center;
       align-items: center;
 
       svg {
+        /* stylelint-disable-next-line unit-allowed-list */
         width: 14px;
+        /* stylelint-disable-next-line unit-allowed-list */
         height: 14px;
       }
     }
@@ -464,13 +475,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       /* stylelint-enable selector-max-class */
       .expand-collapse-all {
         position: absolute;
+        background-color: var(--header-bg-color);
         width: var(--expand-collapse-all-width);
         z-index: 10;
         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;
         margin-inline-start: 0.25rem;
@@ -485,8 +494,8 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
           inset-inline-start: -0.25rem;
           width: 0.25rem;
           height: 100%;
-          background-color: var(--header-bg-color);
           z-index: 12;
+          background-color: var(--header-bg-color);
         }
 
         > button {
@@ -518,7 +527,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       position: relative; /* This is required to position .border-fix element */
       border-start-start-radius: inherit;
       border-start-end-radius: inherit;
-
       > .cell.row-error-column {
         border-right: 0;
       }
@@ -533,7 +541,6 @@ 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);
         padding: var(--header-cell-padding);
 
         &:first-child {
@@ -830,11 +837,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);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport {\n  getLuminance,\n  meetsContrastGuidelines,\n  mix,\n  readableColor,\n  transparentize\n} from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport {\n  StyledLabel,\n  StyledProgressBackdrop,\n  calculateFontSize,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n  theme,\n  view,\n  isFullscreen\n}) => {\n  let colIdToFillRemainingSpace;\n  let isAggregationApplied = false;\n\n  (view.columns ?? [])\n    .filter(c => !c.hidden)\n    .forEach(c => {\n      if (!colIdToFillRemainingSpace && c.field.fillAvailableSpace) {\n        colIdToFillRemainingSpace = c.field.id;\n      }\n      if (c.aggregated) {\n        isAggregationApplied = true;\n      }\n    });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const showFreezeLine =\n    view.state.responsive?.sm &&\n    !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);\n  const selectedRowColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  const lightGreyColor = theme.base.colors.gray['extra-light'];\n  const freezeLineShadowTransparent = transparentize(\n    0.9,\n    theme.components.table.header['foreground-color']\n  );\n  const oddRowBackgroundColor =\n    getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n      ? theme.components.table.body['secondary-background-color']\n      : mix(\n          0.75,\n          theme.components.table.body['background-color'],\n          theme.components.table.body['secondary-background-color']\n        );\n\n  const headerForegroundContrast = meetsContrastGuidelines(\n    theme.components.table.header['foreground-color'],\n    theme.components.table.header['background-color']\n  ).AA;\n  const usableHeaderForeground = headerForegroundContrast\n    ? theme.components.table.header['foreground-color']\n    : readableColor(\n        theme.components.table.header['foreground-color'],\n        theme.components.table.header['background-color']\n      );\n  const oddRowContrast = meetsContrastGuidelines(\n    theme.components.table.body['foreground-color'],\n    oddRowBackgroundColor\n  ).AA;\n  const useableOddRowForeground = oddRowContrast\n    ? theme.components.table.body['foreground-color']\n    : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);\n\n  return css`\n    --primary-background: ${theme.base.palette['primary-background']};\n    --secondary-background: ${theme.components.table.header['background-color']};\n    --forground-color: ${theme.base.palette['foreground-color']};\n    --interactive: ${theme.base.palette.interactive};\n    --medium-blue: ${theme.base.colors.blue.medium};\n    --border-color: ${theme.base.palette['border-line']};\n    --border-color-freeze: #a5a5a5;\n    --border-width: 0.062rem;\n    --border-style: var(--border-width) solid var(--border-color);\n    --font-stretch: ${theme.components.table.typography['font-stretch']};\n    --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n    --cell-padding: ${theme.base.spacing};\n    --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n    --header-cell-padding: 0 0.44rem 0 var(--cell-padding);\n    --header-bg-color: var(--secondary-background);\n    --header-fg-color: ${usableHeaderForeground};\n    --default-group-header-height: 1.5rem;\n    --group-header-height: var(--default-group-header-height);\n    --box-sizing: content-box;\n    --animation-ease: ${theme.base.animation.timing.ease};\n    --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n    --row-height-multiplier: 1.125;\n    --cell-fixed-position: sticky;\n    position: relative;\n    ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n    .small-screen-table {\n      --cell-fixed-position: static;\n    }\n\n    .container {\n      ${() => generateRSDataContainerHeightStyles()};\n      border: var(--border-style);\n      border-radius: var(--border-radius, ${theme.base['border-radius']});\n      position: relative;\n      letter-spacing: var(--letter-spacing);\n      font-stretch: var(--font-stretch);\n      ${StyledTabPanel} & ${StyledProgressBackdrop} {\n        border-radius: var(--border-radius, ${theme.base['border-radius']});\n      }\n    }\n\n    .hide-rows-till-ready .row[aria-rowindex] {\n      visibility: hidden;\n    }\n\n    .table-drag-proxy {\n      background: rgba(0, 0, 0, 0.21);\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .table-drag-line {\n      background: #999999;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 0.12rem;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .cell-fixed {\n      z-index: 1;\n    }\n\n    .group-wrapper {\n      overflow: hidden;\n      display: inline-flex;\n      line-height: var(--group-header-height);\n\n      .group-context-count {\n        display: inline-flex;\n        overflow: hidden;\n      }\n    }\n\n    /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n      group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n      mark up is generated from cosmos which differentiates from normal table cell markup */\n    .group-wrapper .group-context-count dl {\n      grid-template-columns: auto;\n    }\n\n    .fallback,\n    .fallback-footer {\n      height: var(--row-height);\n      background-color: var(--header-bg-color);\n      color: var(--header-fg-color);\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      box-sizing: var(--box-sizing);\n    }\n\n    .fallback {\n      /* stylelint-disable unit-allowed-list */\n      top: -1px;\n      border-bottom: var(--border-style);\n    }\n\n    .fallback-footer {\n      top: 0;\n      border-top: var(--border-style);\n    }\n\n    .sticky-header {\n      display: grid;\n      position: sticky;\n      top: 0;\n      z-index: 6;\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    .cell {\n      /* preventing cell from shrinking during autosize calculations */\n      flex-shrink: 0;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n\n      .icons-ph {\n        /* Maintaining action button aspect ratio of 1:1 with 24*24px width and height */\n        min-width: 1.5rem;\n      }\n\n      &.custom-item {\n        width: 10em;\n      }\n    }\n\n    .cell:focus {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      outline: none;\n    }\n\n    .row {\n      display: inline-flex;\n      height: var(--row-height);\n      outline: none 0;\n      transition: transform 0.5s var(--animation-ease);\n      box-sizing: var(--box-sizing);\n      position: relative;\n\n      > .row-select-handle {\n        display: flex;\n        justify-content: center;\n        &:active {\n          outline: none;\n        }\n\n        > .header-lable-container {\n          min-width: 20px;\n        }\n        /* stylelint-disable selector-max-class */\n        &.cell-fixed > .cell-content {\n          flex-grow: unset;\n        }\n      }\n\n      > .cell,\n      .group-header-aggregation-row > .cell {\n        transition: transform 0.5s var(--animation-ease);\n        border-right: var(--border-style);\n        position: relative;\n        ${!theme.components.table['striped-rows'] &&\n        css`\n          border-bottom: var(--border-style);\n        `}\n        display: flex;\n        align-items: center;\n\n        &::after {\n          opacity: 1;\n          transition: opacity 0.1s var(--animation-ease);\n        }\n\n        .row-action-menu {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        &.cell-action {\n          position: sticky;\n          z-index: 4;\n          right: 0;\n          border-right: 0;\n          justify-content: center;\n          border-left: var(--border-style);\n\n          /* The below styles are needed to avoid ellipses in safari when no text is present\n            and to hide the 'Actions' label */\n\n          /* stylelint-disable max-nesting-depth */\n\n          div.header-label {\n            text-overflow: unset;\n          }\n        }\n        &.aggregateCell {\n          background-color: var(--header-bg-color);\n        }\n      }\n\n      /** Adds bottom border to the last row of a group, when striped-rows are enabled */\n      &:has(+ .group-header-row) > .cell {\n        ${theme.components.table['striped-rows'] &&\n        css`\n          border-bottom: var(--border-style);\n        `}\n      }\n      &.header > .cell {\n        border-bottom: var(--border-style);\n      }\n      .group-header-aggregation-row {\n        > .cell {\n          &.cell-action {\n            overflow: initial;\n\n            /* 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 */\n            &::before {\n              content: '';\n              position: absolute;\n              inline-size: 0;\n              inset-inline-start: calc(var(--border-width) * -1);\n              inset-block-start: calc(var(--group-header-height) * -1);\n              block-size: var(--group-header-height);\n              border-inline-start: var(--border-style);\n            }\n          }\n        }\n      }\n\n      > .cell-action {\n        background-color: var(--primary-background);\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n        border-right: 0 !important;\n        justify-content: center;\n        cursor: move;\n      }\n\n      .aggregateCell.cell {\n        border-right: none;\n      }\n\n      > .cell.cell-fixed,\n      .group-header-aggregation-row > .cell-fixed {\n        position: var(--cell-fixed-position);\n        z-index: 4;\n\n        ${showFreezeLine &&\n        css`\n          &.cell-last-frozen {\n            border-right: solid 1px var(--border-color-freeze);\n            filter: drop-shadow(\n              calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}\n            );\n            transition: 0.5s;\n          }\n        `}\n\n        /* As the row select column and row dragDrop column always have to be frozen */\n        &[data-col-id='RowSelect'],\n        &[data-col-id='RowDragDrop'],\n        &[data-col-id='RowError'] {\n          position: sticky;\n          flex-shrink: 0;\n          z-index: 5;\n        }\n      }\n\n      > .cell.cell-fixed:focus-within,\n      .group-header-aggregation-row > .cell-fixed {\n        z-index: 6;\n      }\n\n      &.click {\n        cursor: pointer;\n      }\n\n      &:last-child {\n        border-end-start-radius: inherit;\n        border-end-end-radius: inherit;\n\n        > .cell {\n          &:first-child {\n            border-end-start-radius: inherit;\n          }\n\n          &:last-child {\n            border-end-end-radius: inherit;\n          }\n\n          ${theme.components.table['striped-rows'] &&\n          css`\n            border-bottom: var(--border-style);\n          `}\n        }\n      }\n    }\n    .row:not(.row-error):not(.group-header-row):not(.header) {\n      .cell-fixed {\n        background: var(--primary-background);\n      }\n      .cell-fixed.aggregateCell {\n        background: var(--header-bg-color);\n      }\n    }\n    ${theme.components.table['striped-rows'] &&\n    css`\n      /* Targets rows with an odd data-index attribute, excluding group header rows */\n      .row[data-index$='1']:not(.group-header-row):not(.header),\n      .row[data-index$='3']:not(.group-header-row):not(.header),\n      .row[data-index$='5']:not(.group-header-row):not(.header),\n      .row[data-index$='7']:not(.group-header-row):not(.header),\n      .row[data-index$='9']:not(.group-header-row):not(.header) {\n        background: ${oddRowBackgroundColor};\n        color: ${useableOddRowForeground};\n        .cell-fixed {\n          background: ${oddRowBackgroundColor};\n          color: ${useableOddRowForeground};\n        }\n        > .cell-action {\n          background: ${oddRowBackgroundColor};\n        }\n      }\n      .row[data-index$='0']:not(.group-header-row):not(.header),\n      .row[data-index$='2']:not(.group-header-row):not(.header),\n      .row[data-index$='4']:not(.group-header-row):not(.header),\n      .row[data-index$='6']:not(.group-header-row):not(.header),\n      .row[data-index$='8']:not(.group-header-row):not(.header) {\n        background: var(--primary-background);\n        .cell-fixed {\n          background: var(--primary-background);\n        }\n        > .cell-action {\n          background: var(--primary-background);\n        }\n      }\n    `}\n\n    .row-error {\n      background: ${mix(\n        0.1,\n        theme.components['form-field'].error['status-color'],\n        theme.base.palette['primary-background']\n      )};\n\n      /* stylelint-disable no-descending-specificity */\n      .cell-fixed,\n      .cell-action {\n        background: inherit;\n      }\n\n      > .cell:not(.cell-fixed):not(.cell-action) {\n        background: none;\n      }\n    }\n\n    .sort-info-container {\n      .sort-sequence {\n        font-size: 0.625rem;\n        color: ${theme.base.colors.gray['extra-dark']};\n      }\n    }\n\n    .filter-info-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        width: 14px;\n        height: 14px;\n      }\n    }\n\n    .cell.row-error-column {\n      padding: 0;\n      border-right: 0;\n      text-align: right;\n      outline: none;\n\n      /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n      svg {\n        color: ${theme.base.colors.red.medium};\n      }\n    }\n\n    .cell-right-align .filter-info-container svg {\n      margin: 0 0.312rem 0 0;\n    }\n\n    &.show-expand-collapse-all {\n      .row > .cell-first {\n        padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n        &.row-reorder-handle,\n        &.row-error-column {\n          padding: 0;\n        }\n        &.row-select-handle {\n          padding-inline-start: var(--expand-collapse-all-width);\n        }\n      }\n\n      .row-container .row > .cell-first {\n        &.row-select-handle {\n          /* Offset padding of 0.5rem added to SelectAllCheckbox in grouped views(getting pushed by margin),\n             ensuring row select checkboxes align vertically in header and data rows */\n          padding-inline-start: calc(\n            var(--expand-collapse-all-width) - var(--cell-padding) + 0.5rem\n          );\n        }\n      }\n\n      /* stylelint-enable selector-max-class */\n      .expand-collapse-all {\n        position: absolute;\n        width: var(--expand-collapse-all-width);\n        z-index: 10;\n        height: var(--row-height);\n        background-color: var(--header-bg-color);\n        color: var(--header-fg-color);\n        border-right: var(--border-style);\n        border-bottom: var(--border-style);\n        border-start-start-radius: ${theme.base['border-radius']};\n        padding-inline-start: 0.125rem;\n        margin-inline-start: 0.25rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: 0;\n          inset-inline-start: -0.25rem;\n          width: 0.25rem;\n          height: 100%;\n          background-color: var(--header-bg-color);\n          z-index: 12;\n        }\n\n        > button {\n          color: var(--forground-color);\n          :focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n      .no-border-right {\n        border-right: 0;\n      }\n    }\n\n    /* stylelint-disable selector-max-class */\n\n    .scroll-end {\n      &.row-container > .row:last-child {\n        & > .cell,\n        & .group-header-aggregation-row > .cell {\n          border-bottom: 0;\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n    .header {\n      font-weight: var(--font-weight-semi-bold);\n      position: relative; /* This is required to position .border-fix element */\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n\n      > .cell.row-error-column {\n        border-right: 0;\n      }\n      > .cell {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        z-index: 2;\n        position: relative;\n        cursor: pointer;\n        background-color: var(--header-bg-color);\n        color: var(--header-fg-color);\n        font-weight: ${theme.base['font-weight'].bold};\n        font-size: ${fontSize.xxs};\n        border-right: var(--border-style);\n        padding: var(--header-cell-padding);\n\n        &:first-child {\n          border-start-start-radius: inherit;\n        }\n\n        &:last-child {\n          border-start-end-radius: inherit;\n        }\n\n        .header-lable-container {\n          display: inline-flex;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          font-size: ${fontSize.xs};\n          font-weight: var(--font-weight-semi-bold);\n          align-items: center;\n          gap: 0.125rem;\n        }\n\n        .header-label {\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          /* To avoid browser tooltip when we get ellipsis in safari */\n          &::after {\n            content: '';\n            display: block;\n          }\n\n          /* To utilize smart tooltip making it as a non-box element */\n          /* stylelint-disable selector-max-class */\n          .cell-content {\n            display: contents;\n          }\n        }\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n      }\n\n      > .row-select-handle {\n        /* Nullifying padding applied from .header > .cell */\n        padding: 0;\n        justify-content: center;\n      }\n      .row {\n        border-bottom: none;\n      }\n    }\n\n    /* 4 selectors required as aggregateCell of only footer need this effect */\n\n    .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n      border-bottom: none;\n    }\n\n    .row .cell.cell-last {\n      border-right: 0;\n    }\n\n    ${!colIdToFillRemainingSpace\n      ? css`\n          .row .cell.cell-last {\n            flex-grow: 1;\n          }\n        `\n      : css`\n          .row .cell[data-col-id='${colIdToFillRemainingSpace}'] {\n            flex-grow: 1;\n          }\n        `}\n\n    /* Disable the flex layout size changes when measuring for content based size to get correct width */\n\n    [data-content-size-measuring] & .row .cell {\n      flex-grow: 0 !important;\n    }\n\n    .row-container {\n      --data-row-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--data-row-height)'};\n      &:not(.wrap-content-height) > .row:not(.group-header-row) {\n        height: var(--data-row-height);\n      }\n\n      & > .row:not(.group-header-row) {\n        min-width: 100%;\n      }\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n\n      & > .row .cell-content {\n        /*\n         * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n         * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n         */\n        box-sizing: content-box;\n        flex-grow: 1;\n\n        /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n        padding: var(--cell-vertical-padding) var(--cell-padding);\n\n        /* setting max-height so that the elements with more height like RTL, align with the row density height */\n        max-height: var(--data-row-height);\n\n        /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n        & * {\n          scrollbar-width: none;\n        }\n\n        /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n        &:has(.combined-cell) {\n          padding: 0;\n\n          .cell-content {\n            flex-grow: unset;\n          }\n        }\n      }\n\n      & > .row .cell:not(.column-type-action) .cell-content {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-break: break-all;\n      }\n    }\n\n    .row .aggregateCell .cell-content {\n      line-height: initial;\n      padding: 0;\n    }\n\n    .short-height,\n    .medium-height {\n      ${StyledStatus} {\n        white-space: nowrap;\n      }\n    }\n\n    .short-height {\n      ${StyledRadioCheck} ${StyledLabel} {\n        min-height: auto;\n      }\n    }\n\n    .medium-height {\n      --row-height-multiplier: 4 / 3;\n    }\n\n    .tall-height {\n      --row-height-multiplier: calc(4 / 3 + 0.5);\n      > .row:not(.group-header-row) {\n        > .cell {\n          display: inline-grid;\n          align-items: start;\n          white-space: normal;\n          word-break: break-all;\n          grid-auto-flow: column;\n\n          :has(> ${CellIcon}) {\n            /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n            justify-content: space-between;\n          }\n\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            display: -webkit-box;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            white-space: inherit;\n            word-break: inherit;\n          }\n\n          ${CellIcon} {\n            margin-block-start: 0.375rem;\n          }\n        }\n      }\n    }\n\n    .wrap-content-height {\n      --row-height-multiplier: 4 / 3;\n      --row-min-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--row-min-height)'};\n\n      > .row:not(.group-header-row) {\n        height: auto;\n        min-height: var(--row-min-height);\n        > .cell {\n          white-space: normal;\n\n          /* -- For BUG-625508 -- */\n          word-break: break-word;\n          display: inline-grid;\n          align-items: start;\n          padding-top: var(--cell-vertical-padding);\n          padding-bottom: var(--cell-vertical-padding);\n          grid-auto-flow: column;\n\n          :has(> ${CellIcon}) {\n            /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n            justify-content: space-between;\n          }\n\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            /* for full-content, the row cells should adjust according to content */\n            max-height: none;\n            white-space: inherit;\n            word-break: inherit;\n          }\n\n          ${CellIcon} {\n            margin-block-start: 0.375rem;\n          }\n        }\n      }\n    }\n\n    .footer {\n      .row {\n        .cell {\n          padding: 0;\n        }\n      }\n    }\n\n    /* stylelint-disable no-duplicate-selectors */\n    .row-container {\n      position: absolute;\n      display: grid;\n      width: 100%;\n      font-size: ${fontSize.s};\n\n      > .group-header-row,\n      .hierarchical-group-footer-row {\n        height: var(--group-header-height);\n        .cell {\n          padding: 0;\n          border-right-width: 0;\n        }\n      }\n\n      > .hierarchical-group-header-row {\n        height: var(--group-header-height);\n      }\n      input.checkbox-on-hover + label {\n        opacity: 0;\n      }\n      input.checkbox-on-hover:checked + label {\n        opacity: 1;\n      }\n      .row.selected-row {\n        background-color: ${selectedRowColor};\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${selectedRowColor};\n        }\n      }\n      .row-on-hover:hover {\n        background-color: ${lightGreyColor};\n        input.checkbox-on-hover + label {\n          opacity: 1;\n        }\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${lightGreyColor};\n        }\n      }\n      .row.hierarchical-group-footer-row {\n        .cell-fixed {\n          background: ${lightGreyColor};\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n\n    .toolbar-button-applied {\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .toolbar-button {\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .column-resizer {\n      cursor: col-resize;\n      position: absolute;\n      top: 0;\n      right: 0;\n      z-index: 3;\n      width: 0.25rem;\n      height: 100%;\n    }\n\n    .column-resizer:hover,\n    .column-resizer:active {\n      background: var(--interactive);\n    }\n\n    .align-right {\n      justify-content: right;\n\n      .cell-content {\n        text-align: right;\n      }\n    }\n\n    .align-left {\n      justify-content: left;\n\n      .cell-content {\n        text-align: left;\n      }\n    }\n\n    .align-center {\n      justify-content: center;\n\n      .cell-content {\n        text-align: center;\n      }\n    }\n\n    .popper {\n      div.row {\n        display: flex;\n        vertical-align: middle;\n        line-height: unset;\n        border-bottom: none;\n        outline: none 0;\n        height: auto;\n      }\n    }\n  `;\n});\n\nexport default StyledTableContainer;\n"]}
+{"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport {\n  getLuminance,\n  meetsContrastGuidelines,\n  mix,\n  readableColor,\n  transparentize\n} from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport {\n  StyledLabel,\n  StyledProgressBackdrop,\n  calculateFontSize,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n  theme,\n  view,\n  isFullscreen\n}) => {\n  let colIdToFillRemainingSpace;\n  let isAggregationApplied = false;\n\n  (view.columns ?? [])\n    .filter(c => !c.hidden)\n    .forEach(c => {\n      if (!colIdToFillRemainingSpace && c.field.fillAvailableSpace) {\n        colIdToFillRemainingSpace = c.field.id;\n      }\n      if (c.aggregated) {\n        isAggregationApplied = true;\n      }\n    });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const showFreezeLine =\n    view.state.responsive?.sm &&\n    !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);\n  const selectedRowColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  const lightGreyColor = theme.base.colors.gray['extra-light'];\n  const freezeLineShadowTransparent = transparentize(\n    getLuminance(theme.components.table.header['foreground-color']) < 0.5 ? 0.9 : 0.75,\n    theme.components.table.header['foreground-color']\n  );\n\n  const evenRowBackgroundColor =\n    getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n      ? theme.components.table.body['secondary-background-color']\n      : mix(\n          0.75,\n          theme.components.table.body['background-color'],\n          theme.components.table.body['secondary-background-color']\n        );\n\n  const headerForegroundContrast = meetsContrastGuidelines(\n    theme.components.table.header['foreground-color'],\n    theme.components.table.header['background-color']\n  ).AA;\n\n  const usableHeaderForeground = headerForegroundContrast\n    ? theme.components.table.header['foreground-color']\n    : readableColor(\n        theme.components.table.header['foreground-color'],\n        theme.components.table.header['background-color']\n      );\n\n  const groupHeaderForegroundContrast = meetsContrastGuidelines(\n    theme.components.table.body['foreground-color'],\n    theme.components.table.body['secondary-background-color']\n  ).AA;\n\n  const usableGroupHeaderForeground = groupHeaderForegroundContrast\n    ? theme.components.table.body['foreground-color']\n    : readableColor(\n        theme.components.table.body['foreground-color'],\n        theme.components.table.body['secondary-background-color']\n      );\n\n  const evenRowContrast = meetsContrastGuidelines(\n    theme.components.table.body['foreground-color'],\n    evenRowBackgroundColor\n  ).AA;\n  const useableEvenRowForeground = evenRowContrast\n    ? theme.components.table.body['foreground-color']\n    : readableColor(theme.components.table.body['foreground-color'], evenRowBackgroundColor);\n\n  return css`\n    --primary-background: ${theme.components.table.header['background-color']};\n    --forground-color: ${theme.base.palette['foreground-color']};\n    --interactive: ${theme.base.palette.interactive};\n    --medium-blue: ${theme.base.colors.blue.medium};\n    --border-color: ${theme.base.palette['border-line']};\n    --border-color-freeze: #a5a5a5;\n    --border-width: 0.062rem;\n    --font-stretch: ${theme.components.table.typography['font-stretch']};\n    --border-style: var(--border-width) solid var(--border-color);\n    --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n    --cell-padding: ${theme.base.spacing};\n    --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n    --header-cell-padding: 0 0.44rem 0 var(--cell-padding);\n    --header-bg-color: ${theme.components.table.header['background-color']};\n    --header-fg-color: ${usableHeaderForeground};\n    --group-header-bg-color: ${theme.components.table.body['secondary-background-color']};\n    --group-header-fg-color: ${usableGroupHeaderForeground};\n    --default-group-header-height: 1.5rem;\n    --group-header-height: var(--default-group-header-height);\n    --box-sizing: content-box;\n    --animation-ease: ${theme.base.animation.timing.ease};\n    --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n    --row-height-multiplier: 1.125;\n    --cell-fixed-position: sticky;\n    --table-header-border-radius: min(\n      var(--border-radius),\n      ${props => props.theme.base['border-radius']},\n      0.5rem\n    );\n    position: relative;\n    ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n    .small-screen-table {\n      --cell-fixed-position: static;\n    }\n\n    .container {\n      ${() => generateRSDataContainerHeightStyles()};\n      border-radius: var(--table-header-border-radius);\n      position: relative;\n      letter-spacing: var(--letter-spacing);\n      font-stretch: var(--font-stretch);\n      ${StyledTabPanel} & ${StyledProgressBackdrop} {\n        border-radius: var(--table-header-border-radius);\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: var(--row-height);\n        border: var(--border-style);\n        z-index: 12;\n        border-radius: var(--table-header-border-radius) var(--table-header-border-radius) 0 0;\n        pointer-events: none;\n      }\n    }\n\n    .hide-rows-till-ready .row[aria-rowindex] {\n      visibility: hidden;\n    }\n\n    .table-drag-proxy {\n      background: rgba(0, 0, 0, 0.21);\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .table-drag-line {\n      background: #999999;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 0.12rem;\n      z-index: 6;\n      pointer-events: none;\n      display: none;\n    }\n\n    .cell-fixed {\n      z-index: 1;\n    }\n\n    .group-wrapper {\n      overflow: hidden;\n      display: inline-flex;\n      line-height: var(--group-header-height);\n\n      .group-context-count {\n        display: inline-flex;\n        overflow: hidden;\n      }\n    }\n\n    /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n      group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n      mark up is generated from cosmos which differentiates from normal table cell markup */\n    .group-wrapper .group-context-count dl {\n      grid-template-columns: auto;\n    }\n\n    .fallback,\n    .fallback-footer {\n      height: var(--row-height);\n      background-color: var(--header-bg-color);\n      color: var(--header-fg-color);\n      position: absolute;\n      width: 100%;\n      z-index: -1;\n      box-sizing: var(--box-sizing);\n    }\n\n    .cell {\n      /* preventing cell from shrinking during autosize calculations */\n      flex-shrink: 0;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n\n      .icons-ph {\n        /* Maintaining action button aspect ratio of 1:1 with 24*24px width and height */\n        min-width: 1.5rem;\n      }\n\n      &.custom-item {\n        width: 10em;\n      }\n    }\n\n    .cell:focus {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      outline: none;\n    }\n\n    .row {\n      display: inline-flex;\n      height: var(--row-height);\n      outline: none 0;\n      transition: transform 0.5s var(--animation-ease);\n      box-sizing: var(--box-sizing);\n      position: relative;\n\n      > .row-select-handle {\n        display: flex;\n        justify-content: center;\n        &:active {\n          outline: none;\n        }\n\n        > .header-lable-container {\n          /* stylelint-disable-next-line unit-allowed-list */\n          min-width: 20px;\n        }\n        /* stylelint-disable selector-max-class */\n        &.cell-fixed > .cell-content {\n          flex-grow: unset;\n        }\n      }\n\n      > .cell,\n      .group-header-aggregation-row > .cell {\n        transition: transform 0.5s var(--animation-ease);\n        position: relative;\n        display: flex;\n        align-items: center;\n\n        &::after {\n          opacity: 1;\n          transition: opacity 0.1s var(--animation-ease);\n        }\n\n        .row-action-menu {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        &.cell-action {\n          position: sticky;\n          z-index: 4;\n          right: 0;\n          border-right: 0;\n          justify-content: center;\n\n          /* The below styles are needed to avoid ellipses in safari when no text is present\n            and to hide the 'Actions' label */\n\n          /* stylelint-disable max-nesting-depth */\n\n          div.header-label {\n            text-overflow: unset;\n          }\n        }\n        &.aggregateCell {\n          background-color: var(--group-header-bg-color);\n        }\n      }\n\n      .group-header-aggregation-row {\n        > .cell {\n          &.cell-action {\n            overflow: initial;\n\n            /* 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 */\n            &::before {\n              content: '';\n              position: absolute;\n              inline-size: 0;\n              inset-inline-start: calc(var(--border-width) * -1);\n              inset-block-start: calc(var(--group-header-height) * -1);\n              block-size: var(--group-header-height);\n            }\n          }\n        }\n      }\n\n      > .cell-action {\n        background-color: var(--primary-background);\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n        border-right: 0 !important;\n        justify-content: center;\n        cursor: move;\n      }\n\n      .aggregateCell.cell {\n        border-right: none;\n      }\n\n      > .cell.cell-fixed,\n      .group-header-aggregation-row > .cell-fixed {\n        position: var(--cell-fixed-position);\n        z-index: 4;\n        ${showFreezeLine &&\n        css`\n          &.cell-last-frozen {\n            filter: drop-shadow(\n              calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}\n            );\n            transition: 0.5s;\n          }\n        `}\n\n        /* As the row select column and row dragDrop column always have to be frozen */\n        &[data-col-id='RowSelect'],\n        &[data-col-id='RowDragDrop'],\n        &[data-col-id='RowError'] {\n          position: sticky;\n          flex-shrink: 0;\n          z-index: 5;\n        }\n      }\n\n      > .cell.cell-fixed:focus-within,\n      .group-header-aggregation-row > .cell-fixed {\n        z-index: 6;\n      }\n\n      &.click {\n        cursor: pointer;\n      }\n    }\n    .row:not(.row-error):not(.group-header-row):not(.header) {\n      .cell-fixed {\n        background: var(--primary-background);\n      }\n      .cell-fixed.aggregateCell {\n        background: var(--group-header-bg-color);\n      }\n    }\n    ${theme.components.table['striped-rows'] &&\n    css`\n      /* Targets rows with an odd data-index attribute, excluding group header rows */\n      .row[data-index$='1']:not(.group-header-row):not(.header),\n      .row[data-index$='3']:not(.group-header-row):not(.header),\n      .row[data-index$='5']:not(.group-header-row):not(.header),\n      .row[data-index$='7']:not(.group-header-row):not(.header),\n      .row[data-index$='9']:not(.group-header-row):not(.header) {\n        background: var(--primary-background);\n        .cell-fixed {\n          background: var(--primary-background);\n        }\n        > .cell-action {\n          background: var(--primary-background);\n        }\n      }\n\n      /* Targets rows with an even data-index attribute, excluding group header rows */\n      .row[data-index$='0']:not(.group-header-row):not(.header),\n      .row[data-index$='2']:not(.group-header-row):not(.header),\n      .row[data-index$='4']:not(.group-header-row):not(.header),\n      .row[data-index$='6']:not(.group-header-row):not(.header),\n      .row[data-index$='8']:not(.group-header-row):not(.header) {\n        background: ${evenRowBackgroundColor};\n        color: ${useableEvenRowForeground};\n        border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n        border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n\n        .cell-fixed {\n          color: ${useableEvenRowForeground};\n        }\n\n        /* Avoid the non-frozen column's background to come behind the first cell's empty area in corner due to border-radius\n        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 */\n        .cell-fixed:not(.cell-first) {\n          background: ${evenRowBackgroundColor};\n        }\n        .cell-fixed.cell-first::before {\n          background: ${evenRowBackgroundColor};\n          content: '';\n          position: absolute;\n          inset: 0;\n          z-index: -1;\n          border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n          pointer-events: none;\n        }\n\n        > .cell-action::before {\n          background: ${evenRowBackgroundColor};\n          content: '';\n          position: absolute;\n          inset: 0;\n          z-index: -1;\n          border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n          pointer-events: none;\n        }\n      }\n    `}\n\n    .row-error {\n      background: ${mix(\n        0.1,\n        theme.components['form-field'].error['status-color'],\n        theme.base.palette['primary-background']\n      )};\n\n      /* stylelint-disable no-descending-specificity */\n      .cell-fixed,\n      .cell-action {\n        background: inherit;\n      }\n\n      > .cell:not(.cell-fixed):not(.cell-action) {\n        background: none;\n      }\n    }\n\n    .sort-info-container {\n      .sort-sequence {\n        font-size: 0.625rem;\n        color: ${theme.base.colors.gray['extra-dark']};\n      }\n    }\n\n    .sticky-header {\n      display: grid;\n      position: sticky;\n      top: 0;\n      z-index: 6;\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n\n      & .row .cell:not(.cell-last-frozen):not(.cell-last) {\n        &::after {\n          content: '';\n          position: absolute;\n          right: 0;\n          top: 0.5rem;\n          bottom: 0.5rem;\n          width: 0.062rem;\n          background-color: ${theme.base.palette['border-line']};\n        }\n      }\n    }\n\n    .filter-info-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        /* stylelint-disable-next-line unit-allowed-list */\n        width: 14px;\n        /* stylelint-disable-next-line unit-allowed-list */\n        height: 14px;\n      }\n    }\n\n    .cell.row-error-column {\n      padding: 0;\n      border-right: 0;\n      text-align: right;\n      outline: none;\n\n      /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n      svg {\n        color: ${theme.base.colors.red.medium};\n      }\n    }\n\n    .cell-right-align .filter-info-container svg {\n      margin: 0 0.312rem 0 0;\n    }\n\n    &.show-expand-collapse-all {\n      .row > .cell-first {\n        padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n        &.row-reorder-handle,\n        &.row-error-column {\n          padding: 0;\n        }\n        &.row-select-handle {\n          padding-inline-start: var(--expand-collapse-all-width);\n        }\n      }\n\n      .row-container .row > .cell-first {\n        &.row-select-handle {\n          /* Offset padding of 0.5rem added to SelectAllCheckbox in grouped views(getting pushed by margin),\n             ensuring row select checkboxes align vertically in header and data rows */\n          padding-inline-start: calc(\n            var(--expand-collapse-all-width) - var(--cell-padding) + 0.5rem\n          );\n        }\n      }\n\n      /* stylelint-enable selector-max-class */\n      .expand-collapse-all {\n        position: absolute;\n        background-color: var(--header-bg-color);\n        width: var(--expand-collapse-all-width);\n        z-index: 10;\n        height: var(--row-height);\n        color: var(--header-fg-color);\n        border-start-start-radius: ${theme.base['border-radius']};\n        padding-inline-start: 0.125rem;\n        margin-inline-start: 0.25rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: 0;\n          inset-inline-start: -0.25rem;\n          width: 0.25rem;\n          height: 100%;\n          z-index: 12;\n          background-color: var(--header-bg-color);\n        }\n\n        > button {\n          color: var(--forground-color);\n          :focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n      .no-border-right {\n        border-right: 0;\n      }\n    }\n\n    /* stylelint-disable selector-max-class */\n\n    .scroll-end {\n      &.row-container > .row:last-child {\n        & > .cell,\n        & .group-header-aggregation-row > .cell {\n          border-bottom: 0;\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n    .header {\n      font-weight: var(--font-weight-semi-bold);\n      position: relative; /* This is required to position .border-fix element */\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n      > .cell.row-error-column {\n        border-right: 0;\n      }\n      > .cell {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        z-index: 2;\n        position: relative;\n        cursor: pointer;\n        background-color: var(--header-bg-color);\n        color: var(--header-fg-color);\n        font-weight: ${theme.base['font-weight'].bold};\n        font-size: ${fontSize.xxs};\n        padding: var(--header-cell-padding);\n\n        &:first-child {\n          border-start-start-radius: inherit;\n        }\n\n        &:last-child {\n          border-start-end-radius: inherit;\n        }\n\n        .header-lable-container {\n          display: inline-flex;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          font-size: ${fontSize.xs};\n          font-weight: var(--font-weight-semi-bold);\n          align-items: center;\n          gap: 0.125rem;\n        }\n\n        .header-label {\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          /* To avoid browser tooltip when we get ellipsis in safari */\n          &::after {\n            content: '';\n            display: block;\n          }\n\n          /* To utilize smart tooltip making it as a non-box element */\n          /* stylelint-disable selector-max-class */\n          .cell-content {\n            display: contents;\n          }\n        }\n      }\n\n      > .row-reorder-handle {\n        padding: 0;\n      }\n\n      > .row-select-handle {\n        /* Nullifying padding applied from .header > .cell */\n        padding: 0;\n        justify-content: center;\n      }\n      .row {\n        border-bottom: none;\n      }\n    }\n\n    /* 4 selectors required as aggregateCell of only footer need this effect */\n\n    .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n      border-bottom: none;\n    }\n\n    .row .cell.cell-last {\n      border-right: 0;\n    }\n\n    ${!colIdToFillRemainingSpace\n      ? css`\n          .row .cell.cell-last {\n            flex-grow: 1;\n          }\n        `\n      : css`\n          .row .cell[data-col-id='${colIdToFillRemainingSpace}'] {\n            flex-grow: 1;\n          }\n        `}\n\n    /* Disable the flex layout size changes when measuring for content based size to get correct width */\n\n    [data-content-size-measuring] & .row .cell {\n      flex-grow: 0 !important;\n    }\n\n    .row-container {\n      --data-row-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--data-row-height)'};\n      &:not(.wrap-content-height) > .row:not(.group-header-row) {\n        height: var(--data-row-height);\n      }\n\n      & > .row:not(.group-header-row) {\n        min-width: 100%;\n      }\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n\n      & > .row .cell-content {\n        /*\n         * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n         * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n         */\n        box-sizing: content-box;\n        flex-grow: 1;\n\n        /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n        padding: var(--cell-vertical-padding) var(--cell-padding);\n\n        /* setting max-height so that the elements with more height like RTL, align with the row density height */\n        max-height: var(--data-row-height);\n\n        /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n        & * {\n          scrollbar-width: none;\n        }\n\n        /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n        &:has(.combined-cell) {\n          padding: 0;\n\n          .cell-content {\n            flex-grow: unset;\n          }\n        }\n      }\n\n      & > .row .cell:not(.column-type-action) .cell-content {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-break: break-all;\n      }\n    }\n\n    .row .aggregateCell .cell-content {\n      line-height: initial;\n      padding: 0;\n    }\n\n    .short-height,\n    .medium-height {\n      ${StyledStatus} {\n        white-space: nowrap;\n      }\n    }\n\n    .short-height {\n      ${StyledRadioCheck} ${StyledLabel} {\n        min-height: auto;\n      }\n    }\n\n    .medium-height {\n      --row-height-multiplier: 4 / 3;\n    }\n\n    .tall-height {\n      --row-height-multiplier: calc(4 / 3 + 0.5);\n      > .row:not(.group-header-row) {\n        > .cell {\n          display: inline-grid;\n          align-items: start;\n          white-space: normal;\n          word-break: break-all;\n          grid-auto-flow: column;\n\n          :has(> ${CellIcon}) {\n            /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n            justify-content: space-between;\n          }\n\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            display: -webkit-box;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            white-space: inherit;\n            word-break: inherit;\n          }\n\n          ${CellIcon} {\n            margin-block-start: 0.375rem;\n          }\n        }\n      }\n    }\n\n    .wrap-content-height {\n      --row-height-multiplier: 4 / 3;\n      --row-min-height: calc(\n        var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n      );\n      --group-header-height: ${isAggregationApplied\n        ? 'var(--default-group-header-height)'\n        : 'var(--row-min-height)'};\n\n      > .row:not(.group-header-row) {\n        height: auto;\n        min-height: var(--row-min-height);\n        > .cell {\n          white-space: normal;\n\n          /* -- For BUG-625508 -- */\n          word-break: break-word;\n          display: inline-grid;\n          align-items: start;\n          padding-top: var(--cell-vertical-padding);\n          padding-bottom: var(--cell-vertical-padding);\n          grid-auto-flow: column;\n\n          :has(> ${CellIcon}) {\n            /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n            justify-content: space-between;\n          }\n\n          /* stylelint-disable-next-line selector-max-compound-selectors */\n          > .cell-content > .combined-cell > .combined-cell-content,\n          > .cell-content {\n            /* for full-content, the row cells should adjust according to content */\n            max-height: none;\n            white-space: inherit;\n            word-break: inherit;\n          }\n\n          ${CellIcon} {\n            margin-block-start: 0.375rem;\n          }\n        }\n      }\n    }\n\n    .footer {\n      .row {\n        .cell {\n          padding: 0;\n        }\n      }\n    }\n\n    /* stylelint-disable no-duplicate-selectors */\n    .row-container {\n      position: absolute;\n      display: grid;\n      width: 100%;\n      font-size: ${fontSize.s};\n\n      > .group-header-row,\n      .hierarchical-group-footer-row {\n        height: var(--group-header-height);\n        .cell {\n          padding: 0;\n          border-right-width: 0;\n        }\n      }\n\n      > .hierarchical-group-header-row {\n        height: var(--group-header-height);\n      }\n      input.checkbox-on-hover + label {\n        opacity: 0;\n      }\n      input.checkbox-on-hover:checked + label {\n        opacity: 1;\n      }\n      .row.selected-row {\n        background-color: ${selectedRowColor};\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${selectedRowColor};\n        }\n      }\n      .row-on-hover:hover {\n        background-color: ${lightGreyColor};\n        input.checkbox-on-hover + label {\n          opacity: 1;\n        }\n\n        > .cell,\n        .cell-fixed,\n        .cell-action {\n          background-color: ${lightGreyColor};\n        }\n      }\n      .row.hierarchical-group-footer-row {\n        .cell-fixed {\n          background: ${lightGreyColor};\n        }\n      }\n    }\n\n    /* stylelint-enable selector-max-class */\n\n    .toolbar-button-applied {\n      /* stylelint-disable-next-line unit-allowed-list */\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .toolbar-button {\n      /* stylelint-disable-next-line unit-allowed-list */\n      padding: 0 8px;\n      margin: 0 calc(${theme.base.spacing} / 4);\n    }\n\n    .column-resizer {\n      cursor: col-resize;\n      position: absolute;\n      top: 0;\n      right: 0;\n      z-index: 3;\n      width: 0.25rem;\n      height: 100%;\n    }\n\n    .column-resizer:hover,\n    .column-resizer:active {\n      background: var(--interactive);\n    }\n\n    .align-right {\n      justify-content: right;\n\n      .cell-content {\n        text-align: right;\n      }\n    }\n\n    .align-left {\n      justify-content: left;\n\n      .cell-content {\n        text-align: left;\n      }\n    }\n\n    .align-center {\n      justify-content: center;\n\n      .cell-content {\n        text-align: center;\n      }\n    }\n\n    .popper {\n      div.row {\n        display: flex;\n        vertical-align: middle;\n        line-height: unset;\n        border-bottom: none;\n        outline: none 0;\n        height: auto;\n      }\n    }\n  `;\n});\n\nexport default StyledTableContainer;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/lists-react",
-  "version": "9.0.0-build.18.2",
+  "version": "9.0.0-build.18.3",
   "description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
@@ -14,9 +14,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "9.0.0-build.18.2",
-    "@pega/cosmos-react-core": "9.0.0-build.18.2",
-    "@pega/cosmos-react-rte": "9.0.0-build.18.2",
+    "@pega/cosmos-react-condition-builder": "9.0.0-build.18.3",
+    "@pega/cosmos-react-core": "9.0.0-build.18.3",
+    "@pega/cosmos-react-rte": "9.0.0-build.18.3",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
@@ -24,8 +24,8 @@
     "dayjs": "^1.11.13",
     "fast-deep-equal": "^3.1.3",
     "lodash-es": "^4.17.23",
-    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.18.2",
-    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.18.2",
+    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.18.3",
+    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.18.3",
     "polished": "^4.1.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
@@ -44,7 +44,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
     "jest-axe": "^8.0.0",
-    "srs-utils": "9.0.0-build.18.2",
+    "srs-utils": "9.0.0-build.18.3",
     "typescript": "~5.9.3"
   }
 }