@pega/lists-react 8.1.0 → 8.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"AAwCA,gNAkBG;;;AAEH;;;4CAuDC;;;;;;;;;sBAnHqB,YAAY"}
+{"version":3,"file":"CellWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"AAwCA,gNAkBG;;;AAEH;;;4CAwDC;;;;;;;;;sBApHqB,YAAY"}

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

@@ -62,7 +62,8 @@ function CellWrapper({ column, level = 0 }) {
     return (_jsxs("div", { ...restProps, className: cx('cell', ...classList, {
             'cell-fixed': column.frozen,
             'cell-last': isLastColumn,
-            'cell-first': isFirstVisualColumn
+            'cell-first': isFirstVisualColumn,
+            'cell-last-frozen': column.lastFrozen
         }, !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]), style: cellStyles, ref: ref, tabIndex: -1, "data-style-format": styleFormatId, children: [_jsx(RenderingEngine, { style: renderingEngineStyles, highlighter: true, ...column.getRenderingEngineProps(), context: context }), cellIconProps && _jsx(CellIcon, { ...cellIconProps, cellAlign: cellAlign, set: 'budicon' }), styleFormatId && (_jsx(VisuallyHiddenText, { id: styleFormatId, children: `,${translate('state')}: ${styleFormatLabel},` }))] }));
 }
 CellWrapper.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uCAAuC,EAAE,MAAM,4CAA4C,CAAC;AACrG,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;IACrD,MAAM,EACJ,iBAAiB,EACjB,MAAM,EACN,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC7B,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,iBAAiB,CAAC;IAEpF,MAAM,UAAU,GAAG;QACjB,IAAI,EAAE,kBAAkB,MAAM,GAAG;QACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,GAAG,CAAC,eAAe,IAAI,EAAE,eAAe,EAAE,CAAC;QAC3C,GAAG,CAAC,iBAAiB,IAAI,MAAM,EAAE,wBAAwB,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC;KACjF,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,GAAG,CAAC,iBAAiB;YACnB,MAAM,EAAE,wBAAwB,IAAI;YAClC,WAAW,EAAE,uCAAuC,CAAC,KAAK,CAAC;SAC5D,CAAC;QACJ,GAAG,CAAC,aAAa,IAAI,EAAE,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,GAAG,CAAC,eAAe,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC;KACnD,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACrD,iBAAiB;IACjB,OAAO,GAAG,CAAA;;;;;;;;;;2BAUe,SAAS,KAAK,OAAO,IAAI,QAAQ;6BAC/B,SAAS,KAAK,OAAO,IAAI,QAAQ;eAC/C,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;GAGzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE;IACxC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,KAAK,EAAE,EAAE,SAAS,EAAE,EACpB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EACnB,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IAC1E,MAAM,EACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAC9B,KAAK,EAAE,gBAAgB,EACvB,EAAE,EAAE,aAAa,EAClB,GAAG,kBAAkB,EAAE,IAAI,EAAE,CAAC;IAC/B,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;IACnE,MAAM,OAAO,GAAG;QACd,UAAU,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO;QAC7B,SAAS,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;KACvE,CAAC;IACF,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC;IAC1F,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,EAAE,CACX,MAAM,EACN,GAAG,SAAS,EACZ;YACE,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,WAAW,EAAE,YAAY;YACzB,YAAY,EAAE,mBAAmB;SAClC,EACD,CAAC,cAAc,IAAI,SAAS,IAAI,kBAAkB,CAAC,SAAS,CAAC,CAC9D,EACD,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,uBACO,aAAa,aAEhC,KAAC,eAAe,IACd,KAAK,EAAE,qBAAqB,EAC5B,WAAW,WACP,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE,OAAO,GAChB,EACD,aAAa,IAAI,KAAC,QAAQ,OAAK,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAC,SAAS,GAAG,EACpF,aAAa,IAAI,CAChB,KAAC,kBAAkB,IACjB,EAAE,EAAE,aAAa,YACjB,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,gBAAgB,GAAG,GAAsB,CACvE,IACG,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,KAAK,EAAE,SAAS,CAAC,MAAM;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Icon, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport RenderingEngine from '../../Components/RenderingEngine/RenderCell';\nimport { CELL_ALIGN_CLASSES } from '../../constants';\nimport { hierarchicalgroupheaderleftdisplacement } from '../../Components/HierarchicalGroupRenderer';\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst getStyles = (column, level, styleFormatConfig) => {\n  const {\n    isFirstDataColumn,\n    parent,\n    field: { idHash, cellAlign }\n  } = column;\n  const { backgroundColor, icon: cellIconProps, foregroundColor } = styleFormatConfig;\n\n  const cellStyles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    ...(backgroundColor && { backgroundColor }),\n    ...(isFirstDataColumn && parent?.hierarchicalGroupEnabled && { paddingLeft: 0 })\n  };\n\n  const renderingEngineStyles = {\n    ...(isFirstDataColumn &&\n      parent?.hierarchicalGroupEnabled && {\n        paddingLeft: hierarchicalgroupheaderleftdisplacement(level)\n      }),\n    ...(cellIconProps && { order: cellAlign === 'right' ? 2 : 1 }),\n    ...(foregroundColor && { color: foregroundColor })\n  };\n\n  return { cellStyles, renderingEngineStyles };\n};\n\nexport const CellIcon = styled(Icon)(({ cellAlign }) => {\n  // icon size 12px\n  return css`\n    /*\n     * Icon styles sometimes fail to override correctly. Increasing specificity ensures consistent override behavior.\n     * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n     */\n    &&& {\n      height: 0.75rem;\n      width: 0.75rem;\n      min-width: 0.75rem;\n      min-height: 0.75rem;\n      margin-inline-end: ${cellAlign !== 'right' && '0.5rem'};\n      margin-inline-start: ${cellAlign === 'right' && '0.5rem'};\n      order: ${cellAlign === 'right' ? 1 : 2};\n      flex-shrink: 0;\n    }\n  `;\n});\n\nfunction CellWrapper({ column, level = 0 }) {\n  const ref = useRef();\n  const {\n    field: { cellAlign },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    getCellStyleFormat\n  } = column;\n  const { classList, style: cellStyle, ...restProps } = column.getUIProps();\n  const {\n    config: styleFormatConfig = {},\n    label: styleFormatLabel,\n    id: styleFormatId\n  } = getCellStyleFormat() ?? {};\n  const { foregroundColor, icon: cellIconProps } = styleFormatConfig;\n  const context = {\n    getElement: () => ref.current,\n    getStyles: useCallback(() => ({ foregroundColor }), [foregroundColor])\n  };\n  const { cellStyles, renderingEngineStyles } = getStyles(column, level, styleFormatConfig);\n  const [translate] = useTranslate();\n\n  return (\n    <div\n      {...restProps}\n      className={cx(\n        'cell',\n        ...classList,\n        {\n          'cell-fixed': column.frozen,\n          'cell-last': isLastColumn,\n          'cell-first': isFirstVisualColumn\n        },\n        !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]\n      )}\n      style={cellStyles}\n      ref={ref}\n      tabIndex={-1}\n      data-style-format={styleFormatId}\n    >\n      <RenderingEngine\n        style={renderingEngineStyles}\n        highlighter\n        {...column.getRenderingEngineProps()}\n        context={context}\n      />\n      {cellIconProps && <CellIcon {...cellIconProps} cellAlign={cellAlign} set='budicon' />}\n      {styleFormatId && (\n        <VisuallyHiddenText\n          id={styleFormatId}\n        >{`,${translate('state')}: ${styleFormatLabel},`}</VisuallyHiddenText>\n      )}\n    </div>\n  );\n}\n\nCellWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number\n};\n\nexport default memo(CellWrapper);\n"]}
+{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Icon, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport RenderingEngine from '../../Components/RenderingEngine/RenderCell';\nimport { CELL_ALIGN_CLASSES } from '../../constants';\nimport { hierarchicalgroupheaderleftdisplacement } from '../../Components/HierarchicalGroupRenderer';\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst getStyles = (column, level, styleFormatConfig) => {\n  const {\n    isFirstDataColumn,\n    parent,\n    field: { idHash, cellAlign }\n  } = column;\n  const { backgroundColor, icon: cellIconProps, foregroundColor } = styleFormatConfig;\n\n  const cellStyles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    ...(backgroundColor && { backgroundColor }),\n    ...(isFirstDataColumn && parent?.hierarchicalGroupEnabled && { paddingLeft: 0 })\n  };\n\n  const renderingEngineStyles = {\n    ...(isFirstDataColumn &&\n      parent?.hierarchicalGroupEnabled && {\n        paddingLeft: hierarchicalgroupheaderleftdisplacement(level)\n      }),\n    ...(cellIconProps && { order: cellAlign === 'right' ? 2 : 1 }),\n    ...(foregroundColor && { color: foregroundColor })\n  };\n\n  return { cellStyles, renderingEngineStyles };\n};\n\nexport const CellIcon = styled(Icon)(({ cellAlign }) => {\n  // icon size 12px\n  return css`\n    /*\n     * Icon styles sometimes fail to override correctly. Increasing specificity ensures consistent override behavior.\n     * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n     */\n    &&& {\n      height: 0.75rem;\n      width: 0.75rem;\n      min-width: 0.75rem;\n      min-height: 0.75rem;\n      margin-inline-end: ${cellAlign !== 'right' && '0.5rem'};\n      margin-inline-start: ${cellAlign === 'right' && '0.5rem'};\n      order: ${cellAlign === 'right' ? 1 : 2};\n      flex-shrink: 0;\n    }\n  `;\n});\n\nfunction CellWrapper({ column, level = 0 }) {\n  const ref = useRef();\n  const {\n    field: { cellAlign },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    getCellStyleFormat\n  } = column;\n  const { classList, style: cellStyle, ...restProps } = column.getUIProps();\n  const {\n    config: styleFormatConfig = {},\n    label: styleFormatLabel,\n    id: styleFormatId\n  } = getCellStyleFormat() ?? {};\n  const { foregroundColor, icon: cellIconProps } = styleFormatConfig;\n  const context = {\n    getElement: () => ref.current,\n    getStyles: useCallback(() => ({ foregroundColor }), [foregroundColor])\n  };\n  const { cellStyles, renderingEngineStyles } = getStyles(column, level, styleFormatConfig);\n  const [translate] = useTranslate();\n\n  return (\n    <div\n      {...restProps}\n      className={cx(\n        'cell',\n        ...classList,\n        {\n          'cell-fixed': column.frozen,\n          'cell-last': isLastColumn,\n          'cell-first': isFirstVisualColumn,\n          'cell-last-frozen': column.lastFrozen\n        },\n        !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]\n      )}\n      style={cellStyles}\n      ref={ref}\n      tabIndex={-1}\n      data-style-format={styleFormatId}\n    >\n      <RenderingEngine\n        style={renderingEngineStyles}\n        highlighter\n        {...column.getRenderingEngineProps()}\n        context={context}\n      />\n      {cellIconProps && <CellIcon {...cellIconProps} cellAlign={cellAlign} set='budicon' />}\n      {styleFormatId && (\n        <VisuallyHiddenText\n          id={styleFormatId}\n        >{`,${translate('state')}: ${styleFormatLabel},`}</VisuallyHiddenText>\n      )}\n    </div>\n  );\n}\n\nCellWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number\n};\n\nexport default memo(CellWrapper);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/HeaderWrapper.jsx"],"names":[],"mappings":";AASA;;4CAyCC;;;;;;;;sBAjDqB,YAAY"}
+{"version":3,"file":"HeaderWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/HeaderWrapper.jsx"],"names":[],"mappings":";AASA;;4CA0CC;;;;;;;;sBAlDqB,YAAY"}

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

@@ -23,7 +23,8 @@ function HeaderWrapper({ column }) {
             // For now going with align right handling only as we don't have requirement of align center for header.
             'cell-right-align': !isCustomColumn && cellAlign === 'right',
             'cell-last': isLastColumn,
-            'cell-first': isFirstVisualColumn
+            'cell-first': isFirstVisualColumn,
+            'cell-last-frozen': column.lastFrozen
         }), role: 'columnheader', style: styles, ref: header, "aria-label": translate(label), "aria-colindex": column.order + 1, tabIndex: -1, "data-col-id": id, ...column.getHeaderUIProps(), children: _jsx(TableHeaderCell, { column: column, popoverButtonRef: popoverButtonRef }) }));
 }
 HeaderWrapper.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/HeaderWrapper.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE;IAC/B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,EACJ,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAChC,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,KAAK,EACN,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IAC1C,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,gBAAgB,GAAG,MAAM,EAAE,CAAC;IAClC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG;QACb,IAAI,EAAE,kBAAkB,MAAM,GAAG;QACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE;KACpD,CAAC;IACF,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE;YAClC,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,wGAAwG;YACxG,kBAAkB,EAAE,CAAC,cAAc,IAAI,SAAS,KAAK,OAAO;YAC5D,WAAW,EAAE,YAAY;YACzB,YAAY,EAAE,mBAAmB;SAClC,CAAC,EACF,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,gBACC,SAAS,CAAC,KAAK,CAAC,mBACb,MAAM,CAAC,KAAK,GAAG,CAAC,EAC/B,QAAQ,EAAE,CAAC,CAAC,iBACC,EAAE,KACX,MAAM,CAAC,gBAAgB,EAAE,YAE7B,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,GACnE,CACP,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACrD,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { createClassName as cx } from '../../Utils';\nimport TableHeaderCell from '../../Components/HeaderCell';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useSort from './UseSort';\n\nfunction HeaderWrapper({ column }) {\n  const [translate] = useTranslate();\n  const {\n    field: { id, idHash, cellAlign },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    label\n  } = column;\n  const { classList } = column.getUIProps();\n  const header = useRef();\n  const popoverButtonRef = useRef();\n  useSort(header, column);\n\n  const styles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    cursor: `${column.field.sort ? 'pointer' : 'auto'}`\n  };\n  return (\n    <div\n      className={cx('cell', ...classList, {\n        'cell-fixed': column.frozen,\n        // For now going with align right handling only as we don't have requirement of align center for header.\n        'cell-right-align': !isCustomColumn && cellAlign === 'right',\n        'cell-last': isLastColumn,\n        'cell-first': isFirstVisualColumn\n      })}\n      role='columnheader'\n      style={styles}\n      ref={header}\n      aria-label={translate(label)}\n      aria-colindex={column.order + 1}\n      tabIndex={-1}\n      data-col-id={id}\n      {...column.getHeaderUIProps()}\n    >\n      <TableHeaderCell column={column} popoverButtonRef={popoverButtonRef} />\n    </div>\n  );\n}\n\nHeaderWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default HeaderWrapper;\n"]}
+{"version":3,"file":"HeaderWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/HeaderWrapper.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,SAAS,aAAa,CAAC,EAAE,MAAM,EAAE;IAC/B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,EACJ,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAChC,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,KAAK,EACN,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IAC1C,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,gBAAgB,GAAG,MAAM,EAAE,CAAC;IAClC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG;QACb,IAAI,EAAE,kBAAkB,MAAM,GAAG;QACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE;KACpD,CAAC;IACF,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE;YAClC,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,wGAAwG;YACxG,kBAAkB,EAAE,CAAC,cAAc,IAAI,SAAS,KAAK,OAAO;YAC5D,WAAW,EAAE,YAAY;YACzB,YAAY,EAAE,mBAAmB;YACjC,kBAAkB,EAAE,MAAM,CAAC,UAAU;SACtC,CAAC,EACF,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,gBACC,SAAS,CAAC,KAAK,CAAC,mBACb,MAAM,CAAC,KAAK,GAAG,CAAC,EAC/B,QAAQ,EAAE,CAAC,CAAC,iBACC,EAAE,KACX,MAAM,CAAC,gBAAgB,EAAE,YAE7B,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,GACnE,CACP,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACrD,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { createClassName as cx } from '../../Utils';\nimport TableHeaderCell from '../../Components/HeaderCell';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport useSort from './UseSort';\n\nfunction HeaderWrapper({ column }) {\n  const [translate] = useTranslate();\n  const {\n    field: { id, idHash, cellAlign },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    label\n  } = column;\n  const { classList } = column.getUIProps();\n  const header = useRef();\n  const popoverButtonRef = useRef();\n  useSort(header, column);\n\n  const styles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    cursor: `${column.field.sort ? 'pointer' : 'auto'}`\n  };\n  return (\n    <div\n      className={cx('cell', ...classList, {\n        'cell-fixed': column.frozen,\n        // For now going with align right handling only as we don't have requirement of align center for header.\n        'cell-right-align': !isCustomColumn && cellAlign === 'right',\n        'cell-last': isLastColumn,\n        'cell-first': isFirstVisualColumn,\n        'cell-last-frozen': column.lastFrozen\n      })}\n      role='columnheader'\n      style={styles}\n      ref={header}\n      aria-label={translate(label)}\n      aria-colindex={column.order + 1}\n      tabIndex={-1}\n      data-col-id={id}\n      {...column.getHeaderUIProps()}\n    >\n      <TableHeaderCell column={column} popoverButtonRef={popoverButtonRef} />\n    </div>\n  );\n}\n\nHeaderWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default HeaderWrapper;\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":";AAYA,oNAy6BG"}
+{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAkBA,oNA25BG"}

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

@@ -1,18 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { getLuminance, meetsContrastGuidelines, mix, readableColor } from 'polished';
+import { getLuminance, meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
 import { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';
 import { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';
 import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
 import { CellIcon } from './CellWrapper';
-const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme, style, view, isFullscreen }) => {
+const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme, view, isFullscreen }) => {
     const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);
-    const freezeMarginTop = `-${style['--row-height']}`;
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const showFreezeLine = view.state.responsive?.sm &&
+        !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);
     const selectedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
     const lightGreyColor = theme.base.colors.gray['extra-light'];
+    const freezeLineShadowTransparent = transparentize(0.9, theme.components.table.header['foreground-color']);
     const oddRowBackgroundColor = getLuminance(theme.components.table.body['secondary-background-color']) > 0.5
         ? theme.components.table.body['secondary-background-color']
         : mix(0.75, theme.components.table.body['background-color'], theme.components.table.body['secondary-background-color']);
@@ -89,31 +91,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       display: none;
     }
 
-    .freeze-line {
-      /* stylelint-disable unit-allowed-list */
-      border-right: solid 1px var(--border-color-freeze);
-      position: sticky;
-      top: 0;
-      bottom: 0;
-      width: 1px;
-      z-index: 7; /* Footer has 6 z-index so this needs to be more than that */
-      pointer-events: none;
-      height: 100%;
-      float: left;
-      margin-top: ${freezeMarginTop};
-    }
-
-    .freeze-line.freeze-line-hide {
-      display: none;
-    }
-
-    .horizontally-scrolled {
-      .freeze-line {
-        box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);
-        transition: 0.5s;
-      }
-    }
-
     .cell-fixed {
       z-index: 1;
     }
@@ -148,6 +125,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     }
 
     .fallback {
+      /* stylelint-disable unit-allowed-list */
       top: -1px;
       border-bottom: var(--border-style);
     }
@@ -322,6 +300,15 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         position: var(--cell-fixed-position);
         z-index: 4;
 
+        ${showFreezeLine &&
+        css `
+          &.cell-last-frozen {
+            border-right: solid 1px var(--border-color-freeze);
+            box-shadow: calc(${theme.base.spacing} * 0.25) 0 0 0 ${freezeLineShadowTransparent};
+            transition: 0.5s;
+          }
+        `}
+
         /* As the row select column and row dragDrop column always have to be frozen */
         &[data-col-id='RowSelect'],
         &[data-col-id='RowDragDrop'],
@@ -594,10 +581,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         padding: 0;
       }
 
-      > .cell-fixed:last-child {
-        border-right: var(--border-style);
-      }
-
       > .row-select-handle {
         padding-inline-start: calc(var(--cell-padding) / 4);
         justify-content: center;

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 { getLuminance, meetsContrastGuidelines, mix, readableColor } 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 { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';\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  style,\n  view,\n  isFullscreen\n}) => {\n  const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);\n  const freezeMarginTop = `-${style['--row-height']}`;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\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 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.5rem 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    }\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    .freeze-line {\n      /* stylelint-disable unit-allowed-list */\n      border-right: solid 1px var(--border-color-freeze);\n      position: sticky;\n      top: 0;\n      bottom: 0;\n      width: 1px;\n      z-index: 7; /* Footer has 6 z-index so this needs to be more than that */\n      pointer-events: none;\n      height: 100%;\n      float: left;\n      margin-top: ${freezeMarginTop};\n    }\n\n    .freeze-line.freeze-line-hide {\n      display: none;\n    }\n\n    .horizontally-scrolled {\n      .freeze-line {\n        box-shadow: 2px 0 0 1px rgba(165, 165, 165, 0.2);\n        transition: 0.5s;\n      }\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      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      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n\n      .icons-ph {\n        min-width: 1rem;\n      }\n\n      &.custom-item {\n        width: 10em;\n      }\n    }\n\n    .cell:focus {\n      outline: 0.125rem auto var(--medium-blue);\n    }\n\n    .cell.selection-border:focus,\n    .cell.editable-cell:focus {\n      outline: none 0;\n    }\n\n    .editable-cell > span {\n      height: 100%;\n      display: flex;\n      padding: 0 6px;\n      align-items: center;\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        ${!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          min-width: 32px;\n          justify-content: center;\n          border-left: var(--border-style);\n\n          .cell-content {\n            padding: 0;\n            overflow: visible;\n          }\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            span {\n              visibility: hidden;\n            }\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        /* 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    `}\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      margin-left: 0.312rem;\n\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      margin: 0 0 0 0.312rem;\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    .editable-cell {\n      padding: 0;\n      border: 2px solid ${theme.base.palette.interactive} !important;\n      box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;\n    }\n\n    .editable-cell input {\n      border: none;\n      outline: none;\n      min-width: calc(100%);\n      min-height: 0;\n      max-height: 100%;\n      box-shadow: none !important;\n      border-radius: 0;\n    }\n\n    .editable-cell.align-right input {\n      justify-content: right;\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-left: calc(var(--expand-collapse-all-width) + 0.5rem);\n        }\n      }\n\n      .row-container .row > .cell-first {\n        &.row-select-handle {\n          padding-inline-start: calc(\n            var(--expand-collapse-all-width) - var(--cell-padding) + 0.25rem\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        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        }\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      > .cell-fixed:last-child {\n        border-right: var(--border-style);\n      }\n\n      > .row-select-handle {\n        padding-inline-start: calc(var(--cell-padding) / 4);\n        justify-content: center;\n      }\n\n      > .cell-right-align {\n        padding: var(--header-cell-padding);\n        justify-content: end;\n\n        .header-lable-container {\n          flex-direction: row-reverse;\n        }\n\n        .sort-info-container {\n          margin-left: 0;\n          margin-right: 0.312rem;\n        }\n      }\n\n      > .cell-first {\n        padding: 0 var(--cell-padding);\n      }\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    /* stylelint-enable selector-max-class */\n    .row .cell.cell-last {\n      border-right: 0;\n      flex-grow: 1;\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      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        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-break: break-all;\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          /* stylelint-disable-next-line selector-max-class */\n          .cell-content {\n            flex-grow: unset;\n          }\n        }\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 selector-max-class */\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    .selection-border {\n      border: 0.125rem solid var(--medium-blue) !important;\n    }\n\n    .disable-select {\n      user-select: none; /* supported by Chrome and Firefox */\n      -webkit-user-select: none; /* Safari */\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 { StyledLabel, calculateFontSize, tryCatch } from '@pega/cosmos-react-core';\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  const isAggregationApplied = view.columns?.filter(c => !c.hidden).some(c => c.aggregated);\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.5rem 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    }\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      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n\n      .icons-ph {\n        min-width: 1rem;\n      }\n\n      &.custom-item {\n        width: 10em;\n      }\n    }\n\n    .cell:focus {\n      outline: 0.125rem auto var(--medium-blue);\n    }\n\n    .cell.selection-border:focus,\n    .cell.editable-cell:focus {\n      outline: none 0;\n    }\n\n    .editable-cell > span {\n      height: 100%;\n      display: flex;\n      padding: 0 6px;\n      align-items: center;\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        ${!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          min-width: 32px;\n          justify-content: center;\n          border-left: var(--border-style);\n\n          .cell-content {\n            padding: 0;\n            overflow: visible;\n          }\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            span {\n              visibility: hidden;\n            }\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            box-shadow: calc(${theme.base.spacing} * 0.25) 0 0 0 ${freezeLineShadowTransparent};\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    `}\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      margin-left: 0.312rem;\n\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      margin: 0 0 0 0.312rem;\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    .editable-cell {\n      padding: 0;\n      border: 2px solid ${theme.base.palette.interactive} !important;\n      box-shadow: 0 0 1px 1px rgba(0, 118, 209) !important;\n    }\n\n    .editable-cell input {\n      border: none;\n      outline: none;\n      min-width: calc(100%);\n      min-height: 0;\n      max-height: 100%;\n      box-shadow: none !important;\n      border-radius: 0;\n    }\n\n    .editable-cell.align-right input {\n      justify-content: right;\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-left: calc(var(--expand-collapse-all-width) + 0.5rem);\n        }\n      }\n\n      .row-container .row > .cell-first {\n        &.row-select-handle {\n          padding-inline-start: calc(\n            var(--expand-collapse-all-width) - var(--cell-padding) + 0.25rem\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        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        }\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        padding-inline-start: calc(var(--cell-padding) / 4);\n        justify-content: center;\n      }\n\n      > .cell-right-align {\n        padding: var(--header-cell-padding);\n        justify-content: end;\n\n        .header-lable-container {\n          flex-direction: row-reverse;\n        }\n\n        .sort-info-container {\n          margin-left: 0;\n          margin-right: 0.312rem;\n        }\n      }\n\n      > .cell-first {\n        padding: 0 var(--cell-padding);\n      }\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    /* stylelint-enable selector-max-class */\n    .row .cell.cell-last {\n      border-right: 0;\n      flex-grow: 1;\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      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        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-break: break-all;\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          /* stylelint-disable-next-line selector-max-class */\n          .cell-content {\n            flex-grow: unset;\n          }\n        }\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 selector-max-class */\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    .selection-border {\n      border: 0.125rem solid var(--medium-blue) !important;\n    }\n\n    .disable-select {\n      user-select: none; /* supported by Chrome and Firefox */\n      -webkit-user-select: none; /* Safari */\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/lib/Core/Views/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/index.jsx"],"names":[],"mappings":";AA6BA;;4CAmIC;;;;;;;;sBAhKqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/index.jsx"],"names":[],"mappings":";AA4BA;;4CA8HC;;;;;;;;sBA1JqB,YAAY"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { useCallback, useRef, useEffect } from 'react';
 import { useLiveLog } from '@pega/cosmos-react-core/lib/hooks';
@@ -10,7 +10,6 @@ import Toolbar from '../../Components/Toolbar';
 import ContextMenuContainer from '../../Components/ContextMenu/ContextMenuContainer';
 import LoadingIndicator from '../../Components/LoadingIndicator';
 import TableFooter from '../../Components/Footer';
-import FreezeLine from '../../Components/FreezeLine';
 import RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';
 import RenderView from '../../Components/RenderingEngine/RenderView';
 import { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from '../../constants';
@@ -37,7 +36,7 @@ function StyledTable({ view }) {
         '--footer-height': `${footerHeight}px`,
         '--expand-collapse-all-width': `${expandCollapseAllWidth}px`
     };
-    const renderHeader = useCallback(() => (_jsxs(_Fragment, { children: [_jsx(Headers, { ref: view.setItemElement, columns: columns, isVisible: !!rows }), isSmallOrAbove && _jsx(FreezeLine, { view: view })] })), [columns, rows, view]);
+    const renderHeader = useCallback(() => _jsx(Headers, { ref: view.setItemElement, columns: columns, isVisible: !!rows }), [columns, rows, view]);
     const renderFooter = useCallback(() => _jsx(TableFooter, { view: view }), [view]);
     const theme = useTheme();
     const containerRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Table/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef, useEffect } from 'react';\n\nimport { useLiveLog } from '@pega/cosmos-react-core/lib/hooks';\nimport { useFullscreenContext, useTheme } from '@pega/cosmos-react-core';\nimport { expandCollapseAllMeta } from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport NotificationManager from '../../Components/NotificationManager';\nimport Toolbar from '../../Components/Toolbar';\nimport ContextMenuContainer from '../../Components/ContextMenu/ContextMenuContainer';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport TableFooter from '../../Components/Footer';\nimport FreezeLine from '../../Components/FreezeLine';\nimport RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from '../../constants';\nimport useTranslate from '../../Hooks/useTranslate';\nimport RsCardWrapper from '../RsCardWrapper';\n\nimport GroupingHeaderCell from './GroupingHeaderCell';\nimport StyledTableContainer from './StyledTableContainer';\nimport TableA11y from './TableA11y';\nimport Body from './Body';\nimport Virtualiser from './VirtualizeWrapper';\nimport Headers from './Headers';\n\nconst contextMenuSelector = { query: '.cell:not([role=\"columnheader\"])' };\n\nfunction StyledTable({ view }) {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const { columns, rows, groupHeaders } = view;\n  const rowHeight = 40;\n  const footerHeight = 57;\n  const isSmallOrAbove = view?.state?.responsive?.sm;\n  const expandCollapseAllWidth = view.showGroupingExpandCollapseAll\n    ? expandCollapseAllMeta.width\n    : 0;\n\n  const containerStyles = {\n    '--row-height': `${rowHeight}px`,\n    '--footer-height': `${footerHeight}px`,\n    '--expand-collapse-all-width': `${expandCollapseAllWidth}px`\n  };\n  const renderHeader = useCallback(\n    () => (\n      <>\n        <Headers ref={view.setItemElement} columns={columns} isVisible={!!rows} />\n        {isSmallOrAbove && <FreezeLine view={view} />}\n      </>\n    ),\n    [columns, rows, view]\n  );\n  const renderFooter = useCallback(() => <TableFooter view={view} />, [view]);\n\n  const theme = useTheme();\n  const containerRef = useRef(null);\n  const { announcePolite } = useLiveLog();\n  const [translate] = useTranslate();\n  const a11yRef = useRef(\n    new TableA11y(\n      {\n        topFocusRef: '.top',\n        bottomFocusRef: '.bottom',\n        focusElementSelector: '.cell',\n        parentElementSelector: '.row',\n        aboveLoader: '.above-loader',\n        belowLoader: '.below-loader',\n        expandCollpaseAll: '.expand-collapse-all',\n        stickyGroupHeaderSelector: '.stickyGroupHeader',\n        tableLoader: '.table-loader',\n        footer: '.footer'\n      },\n      FOCUSABLE_SELECTORS,\n      {\n        TAB: 9,\n        LEFT: 37,\n        UP: 38,\n        RIGHT: 39,\n        DOWN: 40\n      },\n      null,\n      announcePolite,\n      translate,\n      ACTIONABLE_SELECTORS,\n      translate('Interactive content')\n    )\n  );\n\n  useEffect(() => {\n    a11yRef.current.setContainer(containerRef.current);\n\n    return () => {\n      containerRef.current = null;\n      a11yRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    a11yRef.current.itemsLoadedCallback();\n  });\n\n  const keyDownHandler = useCallback(e => {\n    a11yRef.current.a11yHandler(e);\n  }, []);\n\n  const onClickHandler = useCallback(e => {\n    const pointerType = e.nativeEvent.pointerType;\n    if (pointerType) {\n      a11yRef.current.clickHandler(e);\n    }\n  }, []);\n\n  return (\n    <RsCardWrapper>\n      <StyledTableContainer\n        style={containerStyles}\n        data-test-id='table'\n        className={cx('t-container', {\n          'show-expand-collapse-all': view.showGroupingExpandCollapseAll\n        })}\n        theme={theme}\n        view={view}\n        isFullscreen={isFullscreen}\n      >\n        <Toolbar view={view} />\n        <RenderView type={EXTERNAL_FILTERS} view={view} />\n        <NotificationManager view={view} />\n        <RepeatingStructureA11y view={view} a11yRef={a11yRef}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div\n            className={cx('container', view.className, {\n              'small-screen-table': !isSmallOrAbove\n            })}\n            ref={containerRef}\n            {...view.getUIProps()}\n            onClick={onClickHandler}\n            onKeyDown={keyDownHandler}\n          >\n            <GroupingHeaderCell {...view.groupingHeaderCellProps} />\n            <Virtualiser\n              id='rootVirtualiser'\n              view={view}\n              renderHeader={renderHeader}\n              renderFooter={renderFooter}\n              isFullscreen={isFullscreen}\n            >\n              <Body\n                groupHeaders={groupHeaders}\n                columns={columns}\n                hierarchicalGroupEnabled={view.hierarchicalGroupEnabled}\n              />\n            </Virtualiser>\n            <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n            <ContextMenuContainer view={view} selector={contextMenuSelector} />\n          </div>\n        </RepeatingStructureA11y>\n      </StyledTableContainer>\n    </RsCardWrapper>\n  );\n}\n\nStyledTable.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default StyledTable;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Table/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef, useEffect } from 'react';\n\nimport { useLiveLog } from '@pega/cosmos-react-core/lib/hooks';\nimport { useFullscreenContext, useTheme } from '@pega/cosmos-react-core';\nimport { expandCollapseAllMeta } from 'pega-repeating-structures-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport NotificationManager from '../../Components/NotificationManager';\nimport Toolbar from '../../Components/Toolbar';\nimport ContextMenuContainer from '../../Components/ContextMenu/ContextMenuContainer';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport TableFooter from '../../Components/Footer';\nimport RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from '../../constants';\nimport useTranslate from '../../Hooks/useTranslate';\nimport RsCardWrapper from '../RsCardWrapper';\n\nimport GroupingHeaderCell from './GroupingHeaderCell';\nimport StyledTableContainer from './StyledTableContainer';\nimport TableA11y from './TableA11y';\nimport Body from './Body';\nimport Virtualiser from './VirtualizeWrapper';\nimport Headers from './Headers';\n\nconst contextMenuSelector = { query: '.cell:not([role=\"columnheader\"])' };\n\nfunction StyledTable({ view }) {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const { columns, rows, groupHeaders } = view;\n  const rowHeight = 40;\n  const footerHeight = 57;\n  const isSmallOrAbove = view?.state?.responsive?.sm;\n  const expandCollapseAllWidth = view.showGroupingExpandCollapseAll\n    ? expandCollapseAllMeta.width\n    : 0;\n\n  const containerStyles = {\n    '--row-height': `${rowHeight}px`,\n    '--footer-height': `${footerHeight}px`,\n    '--expand-collapse-all-width': `${expandCollapseAllWidth}px`\n  };\n  const renderHeader = useCallback(\n    () => <Headers ref={view.setItemElement} columns={columns} isVisible={!!rows} />,\n    [columns, rows, view]\n  );\n  const renderFooter = useCallback(() => <TableFooter view={view} />, [view]);\n\n  const theme = useTheme();\n  const containerRef = useRef(null);\n  const { announcePolite } = useLiveLog();\n  const [translate] = useTranslate();\n  const a11yRef = useRef(\n    new TableA11y(\n      {\n        topFocusRef: '.top',\n        bottomFocusRef: '.bottom',\n        focusElementSelector: '.cell',\n        parentElementSelector: '.row',\n        aboveLoader: '.above-loader',\n        belowLoader: '.below-loader',\n        expandCollpaseAll: '.expand-collapse-all',\n        stickyGroupHeaderSelector: '.stickyGroupHeader',\n        tableLoader: '.table-loader',\n        footer: '.footer'\n      },\n      FOCUSABLE_SELECTORS,\n      {\n        TAB: 9,\n        LEFT: 37,\n        UP: 38,\n        RIGHT: 39,\n        DOWN: 40\n      },\n      null,\n      announcePolite,\n      translate,\n      ACTIONABLE_SELECTORS,\n      translate('Interactive content')\n    )\n  );\n\n  useEffect(() => {\n    a11yRef.current.setContainer(containerRef.current);\n\n    return () => {\n      containerRef.current = null;\n      a11yRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    a11yRef.current.itemsLoadedCallback();\n  });\n\n  const keyDownHandler = useCallback(e => {\n    a11yRef.current.a11yHandler(e);\n  }, []);\n\n  const onClickHandler = useCallback(e => {\n    const pointerType = e.nativeEvent.pointerType;\n    if (pointerType) {\n      a11yRef.current.clickHandler(e);\n    }\n  }, []);\n\n  return (\n    <RsCardWrapper>\n      <StyledTableContainer\n        style={containerStyles}\n        data-test-id='table'\n        className={cx('t-container', {\n          'show-expand-collapse-all': view.showGroupingExpandCollapseAll\n        })}\n        theme={theme}\n        view={view}\n        isFullscreen={isFullscreen}\n      >\n        <Toolbar view={view} />\n        <RenderView type={EXTERNAL_FILTERS} view={view} />\n        <NotificationManager view={view} />\n        <RepeatingStructureA11y view={view} a11yRef={a11yRef}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div\n            className={cx('container', view.className, {\n              'small-screen-table': !isSmallOrAbove\n            })}\n            ref={containerRef}\n            {...view.getUIProps()}\n            onClick={onClickHandler}\n            onKeyDown={keyDownHandler}\n          >\n            <GroupingHeaderCell {...view.groupingHeaderCellProps} />\n            <Virtualiser\n              id='rootVirtualiser'\n              view={view}\n              renderHeader={renderHeader}\n              renderFooter={renderFooter}\n              isFullscreen={isFullscreen}\n            >\n              <Body\n                groupHeaders={groupHeaders}\n                columns={columns}\n                hierarchicalGroupEnabled={view.hierarchicalGroupEnabled}\n              />\n            </Virtualiser>\n            <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n            <ContextMenuContainer view={view} selector={contextMenuSelector} />\n          </div>\n        </RepeatingStructureA11y>\n      </StyledTableContainer>\n    </RsCardWrapper>\n  );\n}\n\nStyledTable.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default StyledTable;\n"]}

package/package.json

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

package/lib/Core/Components/FreezeLine.d.ts

@@ -1,13 +0,0 @@
-declare function FreezeLine({ view }: {
-    view: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace FreezeLine {
-    namespace propTypes {
-        let view: PropTypes.Validator<{
-            [x: string]: any;
-        }>;
-    }
-}
-export default FreezeLine;
-import PropTypes from 'prop-types';
-//# sourceMappingURL=FreezeLine.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FreezeLine.d.ts","sourceRoot":"","sources":["../../../Core/Components/FreezeLine.jsx"],"names":[],"mappings":"AAIA;;4CAUC;;;;;;;;;sBAdqB,YAAY"}

package/lib/Core/Components/FreezeLine.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
-import { createClassName as cx } from '../Utils';
-export default function FreezeLine({ view }) {
-    const { freezeLine, hasNoRecords, hasNoFrozenColumns, bHideFreezeLine } = view;
-    return (_jsx("div", { className: cx('freeze-line', {
-            'freeze-line-hide': hasNoRecords || hasNoFrozenColumns || bHideFreezeLine
-        }), style: { ...freezeLine?.styles } }));
-}
-FreezeLine.propTypes = {
-    view: PropTypes.objectOf(PropTypes.any).isRequired
-};
-//# sourceMappingURL=FreezeLine.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FreezeLine.js","sourceRoot":"","sources":["../../../Core/Components/FreezeLine.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE;IACzC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAC/E,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,kBAAkB,EAAE,YAAY,IAAI,kBAAkB,IAAI,eAAe;SAC1E,CAAC,EACF,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,GAChC,CACH,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { createClassName as cx } from '../Utils';\n\nexport default function FreezeLine({ view }) {\n  const { freezeLine, hasNoRecords, hasNoFrozenColumns, bHideFreezeLine } = view;\n  return (\n    <div\n      className={cx('freeze-line', {\n        'freeze-line-hide': hasNoRecords || hasNoFrozenColumns || bHideFreezeLine\n      })}\n      style={{ ...freezeLine?.styles }}\n    />\n  );\n}\n\nFreezeLine.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}