@pega/lists-react 9.0.0-build.18.3 → 9.0.0-build.18.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Core/Components/AggregateMenu.d.ts.map +1 -1
- package/lib/Core/Components/AggregateMenu.js +2 -6
- package/lib/Core/Components/AggregateMenu.js.map +1 -1
- package/lib/Core/Components/FooterAggregators.d.ts.map +1 -1
- package/lib/Core/Components/FooterAggregators.js +4 -2
- package/lib/Core/Components/FooterAggregators.js.map +1 -1
- package/lib/Core/Components/GroupRenderer/index.d.ts.map +1 -1
- package/lib/Core/Components/GroupRenderer/index.js +50 -65
- package/lib/Core/Components/GroupRenderer/index.js.map +1 -1
- package/lib/Core/Components/HierarchicalGroupRenderer.d.ts.map +1 -1
- package/lib/Core/Components/HierarchicalGroupRenderer.js +1 -0
- package/lib/Core/Components/HierarchicalGroupRenderer.js.map +1 -1
- package/lib/Core/Views/Table/StyledTableContainer.d.ts.map +1 -1
- package/lib/Core/Views/Table/StyledTableContainer.js +88 -97
- package/lib/Core/Views/Table/StyledTableContainer.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AggregateMenu.d.ts","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"AAkEA;;;mDAwDC;;;;;;;;;;;;;;;;;;AA3EM,kEALI,MAAM,GAAC,MAAM,mBACb,MAAM,UACN,OAAO,gCAAgC,EAAE,WAAW,CAAC,MAAM,GACzD,MAAM,GAAC,MAAM,CAmBzB;sBA/DqB,YAAY"}
|
|
@@ -12,9 +12,6 @@ const StyledMenuButton = styled(MenuButton) `
|
|
|
12
12
|
}
|
|
13
13
|
`;
|
|
14
14
|
const StyledCell = styled.div `
|
|
15
|
-
&:not(:has(${StyledMenuButton})) {
|
|
16
|
-
gap: 0.25rem;
|
|
17
|
-
}
|
|
18
15
|
display: flex;
|
|
19
16
|
text-align: right;
|
|
20
17
|
justify-content: flex-end;
|
|
@@ -57,7 +54,6 @@ export default function AggregateMenu({ column, context }) {
|
|
|
57
54
|
const { aggregationType } = column;
|
|
58
55
|
const uid = createUID();
|
|
59
56
|
const [translate] = useTranslate();
|
|
60
|
-
const isFooterAggregate = context.getExecutionContext?.()?.name === 'footer';
|
|
61
57
|
const actions = aggregateOptions[column.field.type]?.map(label => ({
|
|
62
58
|
primary: translate(label),
|
|
63
59
|
id: label,
|
|
@@ -69,12 +65,12 @@ export default function AggregateMenu({ column, context }) {
|
|
|
69
65
|
const rawAggregationValue = context.getValue();
|
|
70
66
|
const aggregationValue = getFormattedAggregationValue(rawAggregationValue, aggregationType, column);
|
|
71
67
|
const buttonText = translate('Aggregate options');
|
|
72
|
-
return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }),
|
|
68
|
+
return (_jsxs(StyledCell, { children: [_jsx("span", { children: translate(aggregationType) }), _jsx(StyledMenuButton, { className: 'aggregate-button', menu: {
|
|
73
69
|
items: actions,
|
|
74
70
|
mode: 'single-select'
|
|
75
71
|
}, popover: {
|
|
76
72
|
portal: true
|
|
77
|
-
}, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` })
|
|
73
|
+
}, icon: 'arrow-micro-down', iconOnly: true, variant: 'simple', compact: true, text: buttonText, "aria-labelledby": `${uid}_label` }), _jsx(Flex, { container: true, as: StyledAggregationValue, item: { shrink: 0 }, "data-testid": TestIdConstants.aggregateDisplayValue, children: aggregationValue }), _jsx(VisuallyHiddenText, { id: `${uid}_label`, "aria-hidden": true, children: `${translate(aggregationType)} ${context.getValue()} ${buttonText}` })] }));
|
|
78
74
|
}
|
|
79
75
|
AggregateMenu.propTypes = {
|
|
80
76
|
column: PropTypes.objectOf(PropTypes.any),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;WAChC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;CAK/D,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"AggregateMenu.js","sourceRoot":"","sources":["../../../Core/Components/AggregateMenu.jsx"],"names":[],"mappings":"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","sourcesContent":["import styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport {\n Flex,\n MenuButton,\n VisuallyHiddenText,\n createUID,\n formatNumber\n} from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\n\nimport TestIdConstants from './TestIdConstants';\n\nconst StyledMenuButton = styled(MenuButton)`\n color: ${props => props.theme.base.palette['foreground-color']};\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nconst StyledCell = styled.div`\n display: flex;\n text-align: right;\n justify-content: flex-end;\n align-items: center;\n margin-inline-end: var(--cell-padding);\n\n &:hover {\n background-clip: padding-box;\n }\n`;\n\nconst StyledAggregationValue = styled.div`\n font-weight: ${props => props.theme.base['font-weight']['semi-bold']};\n`;\n\n/**\n * Formats the aggregation value based on the aggregation type and column context.\n *\n * @param {number|string} rawAggregationValue - The raw aggregation value to format.\n * @param {string} aggregationType - The type of aggregation (e.g., 'Avg').\n * @param {import('pega-repeating-structures-core').RsCoreTypes.Column} column - The column object.\n * @returns {string|number} The formatted aggregation value or the raw value if no formatter is available.\n */\nexport const getFormattedAggregationValue = (rawAggregationValue, aggregationType, column) => {\n const formatter = column.getContext().getFormatter();\n const fieldDef = column.getContext().getField();\n const { fieldType } = fieldDef;\n const { locale, timezone } = column.parent.meta;\n\n if (!formatter) return rawAggregationValue;\n\n if (aggregationType === 'Avg' && fieldType === 'Integer') {\n return formatNumber(Number(rawAggregationValue), {\n locale,\n useGrouping: true,\n maximumFractionDigits: 2\n });\n }\n\n return formatter(rawAggregationValue, { locale, timezone, fieldDef });\n};\n\nexport default function AggregateMenu({ column, context }) {\n const { aggregateOptions } = column.parent.meta;\n const { aggregationType } = column;\n const uid = createUID();\n const [translate] = useTranslate();\n\n const actions = aggregateOptions[column.field.type]?.map(label => ({\n primary: translate(label),\n id: label,\n onClick: () => column.applyAggregation(label),\n selected: aggregationType === label\n }));\n if (!actions) return null;\n\n const rawAggregationValue = context.getValue();\n\n const aggregationValue = getFormattedAggregationValue(\n rawAggregationValue,\n aggregationType,\n column\n );\n\n const buttonText = translate('Aggregate options');\n\n return (\n <StyledCell>\n <span>{translate(aggregationType)}</span>\n <StyledMenuButton\n className='aggregate-button'\n menu={{\n items: actions,\n mode: 'single-select'\n }}\n popover={{\n portal: true\n }}\n icon='arrow-micro-down'\n iconOnly\n variant='simple'\n compact\n text={buttonText} // Text property to display tooltip on hover\n aria-labelledby={`${uid}_label`}\n />\n <Flex\n container\n as={StyledAggregationValue}\n item={{ shrink: 0 }}\n data-testid={TestIdConstants.aggregateDisplayValue}\n >\n {aggregationValue}\n </Flex>\n <VisuallyHiddenText id={`${uid}_label`} aria-hidden>\n {`${translate(aggregationType)} ${context.getValue()} ${buttonText}`}\n </VisuallyHiddenText>\n </StyledCell>\n );\n}\n\nAggregateMenu.propTypes = {\n column: PropTypes.objectOf(PropTypes.any),\n context: PropTypes.objectOf(PropTypes.any)\n};\n\nAggregateMenu.defaultProps = {\n column: {},\n context: {}\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterAggregators.d.ts","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"FooterAggregators.d.ts","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";;AAaA;;mDAaC;;;;;;;;;;sBAzBqB,YAAY"}
|
|
@@ -5,14 +5,16 @@ import styled from 'styled-components';
|
|
|
5
5
|
import AggregatorCell from './AggregatorCell';
|
|
6
6
|
const StyledAggregatorWrapper = styled.div `
|
|
7
7
|
border-bottom: 0;
|
|
8
|
+
.aggregateCell {
|
|
9
|
+
border-top: var(--border-style);
|
|
10
|
+
}
|
|
8
11
|
`;
|
|
9
12
|
function FooterAggregators({ columns }) {
|
|
10
13
|
if (columns.filter(c => c.aggregated).length === 0)
|
|
11
14
|
return null;
|
|
12
15
|
return (_jsx(StyledAggregatorWrapper, { className: 'row', children: columns.map(column => {
|
|
13
16
|
const context = {
|
|
14
|
-
getValue: () => column.aggregateValue
|
|
15
|
-
getExecutionContext: () => ({ name: 'footer' })
|
|
17
|
+
getValue: () => column.aggregateValue
|
|
16
18
|
};
|
|
17
19
|
return _jsx(AggregatorCell, { column: column, context: context }, column.field?.id);
|
|
18
20
|
}) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FooterAggregators.js","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"FooterAggregators.js","sourceRoot":"","sources":["../../../Core/Components/FooterAggregators.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKzC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EAAE,OAAO,EAAE;IACpC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEhE,OAAO,CACL,KAAC,uBAAuB,IAAC,SAAS,EAAC,KAAK,YACrC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACpB,MAAM,OAAO,GAAG;gBACd,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc;aACtC,CAAC;YACF,OAAO,KAAC,cAAc,IAAwB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAAlD,MAAM,CAAC,KAAK,EAAE,EAAE,CAAsC,CAAC;QACrF,CAAC,CAAC,GACsB,CAC3B,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,SAAS,GAAG;IAC5B,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;CAC1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG;IAC/B,OAAO,EAAE,EAAE;CACZ,CAAC;AAEF,eAAe,IAAI,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport AggregatorCell from './AggregatorCell';\n\nconst StyledAggregatorWrapper = styled.div`\n border-bottom: 0;\n .aggregateCell {\n border-top: var(--border-style);\n }\n`;\n\nfunction FooterAggregators({ columns }) {\n if (columns.filter(c => c.aggregated).length === 0) return null;\n\n return (\n <StyledAggregatorWrapper className='row'>\n {columns.map(column => {\n const context = {\n getValue: () => column.aggregateValue\n };\n return <AggregatorCell key={column.field?.id} column={column} context={context} />;\n })}\n </StyledAggregatorWrapper>\n );\n}\n\nFooterAggregators.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any)\n};\n\nFooterAggregators.defaultProps = {\n columns: []\n};\n\nexport default memo(FooterAggregators);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"AAoNA;;;;;;QAwCC;AA2GD;;;mDA6IC;;;;;;;;;;sBApfqB,YAAY"}
|
|
@@ -14,24 +14,6 @@ import DateValueDisplay from '../DateValueDisplay';
|
|
|
14
14
|
import TestIdConstants from '../TestIdConstants';
|
|
15
15
|
import GroupAdditionalInfo from './GroupAdditionalInfo';
|
|
16
16
|
const groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;
|
|
17
|
-
const ColorBadge = styled.div `
|
|
18
|
-
position: sticky;
|
|
19
|
-
inset-inline-start: 0;
|
|
20
|
-
z-index: 10;
|
|
21
|
-
|
|
22
|
-
&::before {
|
|
23
|
-
content: '';
|
|
24
|
-
position: absolute;
|
|
25
|
-
inset-block-start: 0;
|
|
26
|
-
inset-inline-start: 0;
|
|
27
|
-
width: 0.25rem;
|
|
28
|
-
height: 100%;
|
|
29
|
-
background-color: ${props => props.colorIndicator};
|
|
30
|
-
border-top-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
31
|
-
border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
32
|
-
z-index: 12;
|
|
33
|
-
}
|
|
34
|
-
`;
|
|
35
17
|
/**
|
|
36
18
|
* TODO: remove currentColor style after cosmos fixes the issue
|
|
37
19
|
* Cosmos yet to handle dark theme on BareButton
|
|
@@ -40,7 +22,9 @@ const StyledGroupHeader = styled.div `
|
|
|
40
22
|
--group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};
|
|
41
23
|
--group-bg-color: ${props => props.theme.base.palette['secondary-background']};
|
|
42
24
|
background-color: var(--group-bg-color);
|
|
43
|
-
|
|
25
|
+
&:has(button[aria-expanded='true']) {
|
|
26
|
+
filter: ${props => props.theme.base.shadow['low-filter']};
|
|
27
|
+
}
|
|
44
28
|
|
|
45
29
|
&.row.sticky-group-header {
|
|
46
30
|
position: sticky;
|
|
@@ -76,6 +60,7 @@ const StyledGroupHeader = styled.div `
|
|
|
76
60
|
|
|
77
61
|
&.row.group-header-row {
|
|
78
62
|
height: auto;
|
|
63
|
+
border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};
|
|
79
64
|
|
|
80
65
|
.group-header-aggregation-row {
|
|
81
66
|
display: flex;
|
|
@@ -85,33 +70,6 @@ const StyledGroupHeader = styled.div `
|
|
|
85
70
|
}
|
|
86
71
|
}
|
|
87
72
|
|
|
88
|
-
/* consider three group-header-rows stacked vertically, the first and second group headers have RULE 2 AND RULE 3 applied, the third group-header has only RULE 3 applied */
|
|
89
|
-
&.group-header-row {
|
|
90
|
-
/* RULE 1- if there are no adjacent group-headers, apply border-radius to all corners */
|
|
91
|
-
border-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
92
|
-
|
|
93
|
-
/* RULE-2- if there is an adjacent group-header below, remove bottom border-radius */
|
|
94
|
-
|
|
95
|
-
&:has(+ .group-header-row) {
|
|
96
|
-
border-radius: 0;
|
|
97
|
-
|
|
98
|
-
& ${ColorBadge}::before {
|
|
99
|
-
border-radius: 0;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/*RULE 3- if there is an adjacent group-header, go to the adjacent group header and remove top border-radius */
|
|
104
|
-
&:has(+ .group-header-row) + .group-header-row {
|
|
105
|
-
border-top-left-radius: 0;
|
|
106
|
-
border-top-right-radius: 0;
|
|
107
|
-
|
|
108
|
-
& ${ColorBadge}::before {
|
|
109
|
-
border-top-left-radius: 0;
|
|
110
|
-
border-top-right-radius: 0;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
73
|
&.group-header-row .stickyGroupHeader {
|
|
116
74
|
position: sticky;
|
|
117
75
|
left: 0;
|
|
@@ -151,6 +109,17 @@ const StyledGroupHeader = styled.div `
|
|
|
151
109
|
button:focus {
|
|
152
110
|
box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};
|
|
153
111
|
}
|
|
112
|
+
|
|
113
|
+
&::before {
|
|
114
|
+
content: '';
|
|
115
|
+
position: absolute;
|
|
116
|
+
inset-block-start: 0;
|
|
117
|
+
inset-inline-start: 0;
|
|
118
|
+
width: 0.25rem;
|
|
119
|
+
height: 100%;
|
|
120
|
+
background-color: ${props => props.groupHeader.colorIndicator};
|
|
121
|
+
z-index: 12;
|
|
122
|
+
}
|
|
154
123
|
}
|
|
155
124
|
.group-header.cell {
|
|
156
125
|
left: 0;
|
|
@@ -171,6 +140,22 @@ const StyledMetaList = styled(MetaList) `
|
|
|
171
140
|
const GroupAdditionalInfoSeparator = styled.span `
|
|
172
141
|
margin-inline-start: 0.3rem;
|
|
173
142
|
`;
|
|
143
|
+
const ColorBadge = styled.div `
|
|
144
|
+
position: sticky;
|
|
145
|
+
inset-inline-start: 0;
|
|
146
|
+
z-index: 10;
|
|
147
|
+
|
|
148
|
+
&::before {
|
|
149
|
+
content: '';
|
|
150
|
+
position: absolute;
|
|
151
|
+
inset-block-start: 0;
|
|
152
|
+
inset-inline-start: 0;
|
|
153
|
+
width: 0.25rem;
|
|
154
|
+
height: 100%;
|
|
155
|
+
background-color: ${props => props.colorIndicator};
|
|
156
|
+
z-index: 12;
|
|
157
|
+
}
|
|
158
|
+
`;
|
|
174
159
|
/**
|
|
175
160
|
* Generates unique ARIA label IDs for accessibility.
|
|
176
161
|
* - groupLabelId: for the group label (e.g., "Status:")
|
|
@@ -309,29 +294,29 @@ export default function GroupHeader({ groupHeader, columns }) {
|
|
|
309
294
|
}, []);
|
|
310
295
|
}
|
|
311
296
|
// FIXME: Import rather than COPY, i would rather
|
|
312
|
-
return (
|
|
297
|
+
return (_jsxs(StyledGroupHeader, { groupHeader: groupHeader, className: cx('row group-header-row sticky-group-header'), "data-test-id": 'groupHeader', "data-testid": `${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`, isAggregationApplied: isAggregationApplied, role: 'row', onFocus: e => {
|
|
313
298
|
if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {
|
|
314
299
|
e.preventDefault();
|
|
315
300
|
buttonRef.current.focus();
|
|
316
301
|
}
|
|
317
|
-
}, children:
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
302
|
+
}, children: [_jsxs("div", { className: 'stickyGroupHeader', children: [_jsxs(BareButton, { ref: buttonRef, "aria-labelledby": [groupLabelId, groupNameId, ...additionalInfoIds].join(' '), "aria-expanded": !!groupHeader.isExpanded, style: {
|
|
303
|
+
paddingRight: 'var(--group-left)'
|
|
304
|
+
}, onClick: () => toggleGroup(), onKeyDown: event => {
|
|
305
|
+
if (event.key === 'Enter') {
|
|
306
|
+
// Prevent capturing of group header toggle click to its child renderers.
|
|
307
|
+
event.preventDefault();
|
|
308
|
+
event.stopPropagation();
|
|
309
|
+
toggleGroup();
|
|
310
|
+
}
|
|
311
|
+
}, tabIndex: -1, icon: true, children: [groupHeader.count > 0 &&
|
|
312
|
+
(groupHeader.isExpanded ? _jsx(Icon, { name: 'caret-down' }) : _jsx(Icon, { name: 'caret-right' })), _jsxs("div", { className: 'group-wrapper', children: [_jsx(GroupHeaderLabel, { column: column, groupHeader: groupHeader }), groupAdditionalInfo && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'secondary', as: GroupAdditionalInfoSeparator, children: "\u2022" }), _jsx(StyledMetaList, { wrapItems: false, items: groupAdditionalInfo })] }))] })] }), buttonRef.current && (_jsx(GroupHeaderToolTip, { target: buttonRef.current, column: column, groupHeader: groupHeader, columns: columns, additionalFields: additionalFields }))] }), _jsxs("div", { className: 'group-header-aggregation-row', children: [_jsx(ColorBadge, { colorIndicator: groupHeader.colorIndicator }), columns.map(c => {
|
|
313
|
+
const cxt = {
|
|
314
|
+
getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
|
|
315
|
+
};
|
|
316
|
+
return (_jsx(AggregatorCell, { column: c, context: cxt, className: cx('cell', {
|
|
317
|
+
'cell-fixed': column.frozen
|
|
318
|
+
}) }, c.field.id));
|
|
319
|
+
})] })] }));
|
|
335
320
|
}
|
|
336
321
|
GroupHeader.propTypes = {
|
|
337
322
|
columns: PropTypes.arrayOf(PropTypes.any).isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon, Text, MetaList, Tooltip, VisuallyHiddenText, Flex } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../../constants';\nimport AggregatorCell from '../AggregatorCell';\nimport RenderingEngine from '../RenderingEngine/RenderCell';\nimport DateValueDisplay from '../DateValueDisplay';\nimport TestIdConstants from '../TestIdConstants';\n\nimport GroupAdditionalInfo from './GroupAdditionalInfo';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n\nconst ColorBadge = styled.div`\n position: sticky;\n inset-inline-start: 0;\n z-index: 10;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 0.25rem;\n height: 100%;\n background-color: ${props => props.colorIndicator};\n border-top-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n z-index: 12;\n }\n`;\n\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n background-color: var(--group-bg-color);\n filter: ${props => props.theme.base.shadow['low-filter']};\n\n &.row.sticky-group-header {\n position: sticky;\n display: block;\n top: calc(\n ${props =>\n props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n ? 'calc(var(--row-height) + var(--group-header-height))'\n : 'var(--row-height)'}\n );\n\n /* z-index starting from 8 because freeze-line has z-index 7 */\n z-index: ${props => `${8 + props.groupHeader.index}`};\n > .cell-action,\n .cell-fixed {\n background-color: var(--group-bg-color);\n }\n }\n\n .group-label {\n width: 0.437rem;\n display: inline-block;\n flex-shrink: 0;\n }\n\n .group-header-groupby {\n font-weight: ${props => props.theme.base['font-weight'].normal};\n }\n\n .group-context-count .group-count {\n font-weight: ${props => props.theme.base['font-weight'].bold};\n white-space: pre;\n }\n\n &.row.group-header-row {\n height: auto;\n\n .group-header-aggregation-row {\n display: flex;\n\n /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */\n height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n }\n }\n\n /* consider three group-header-rows stacked vertically, the first and second group headers have RULE 2 AND RULE 3 applied, the third group-header has only RULE 3 applied */\n &.group-header-row {\n /* RULE 1- if there are no adjacent group-headers, apply border-radius to all corners */\n border-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n\n /* RULE-2- if there is an adjacent group-header below, remove bottom border-radius */\n\n &:has(+ .group-header-row) {\n border-radius: 0;\n\n & ${ColorBadge}::before {\n border-radius: 0;\n }\n }\n\n /*RULE 3- if there is an adjacent group-header, go to the adjacent group header and remove top border-radius */\n &:has(+ .group-header-row) + .group-header-row {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n & ${ColorBadge}::before {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n }\n }\n\n &.group-header-row .stickyGroupHeader {\n position: sticky;\n left: 0;\n width: 0;\n z-index: 10;\n height: var(--group-header-height);\n\n > button {\n color: currentColor;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: max-content;\n max-width: var(--container-width);\n display: flex;\n align-items: center;\n background-color: var(--group-bg-color);\n padding-left: var(--group-left);\n margin-inline-start: 0.25rem;\n z-index: 30;\n cursor: pointer;\n white-space: nowrap;\n text-align: inherit;\n font-stretch: inherit;\n\n > .group-wrapper {\n margin-inline-start: ${({ groupHeader, theme }) =>\n groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n align-items: baseline;\n }\n\n .cell-content {\n max-height: var(--group-header-height);\n padding: 0;\n }\n }\n button:focus {\n box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n }\n }\n .group-header.cell {\n left: 0;\n padding-left: var(--group-left);\n }\n\n div.group-header.cell-fixed {\n background-color: var(--group-bg-color);\n }\n`;\n\nconst StyledMetaList = styled(MetaList)`\n margin-inline-start: 0;\n\n /* Overrides default MetaList padding and margin which was causing text-overflow issues */\n margin: 0;\n padding: 0 0.3rem;\n`;\nconst GroupAdditionalInfoSeparator = styled.span`\n margin-inline-start: 0.3rem;\n`;\n\n/**\n * Generates unique ARIA label IDs for accessibility.\n * - groupLabelId: for the group label (e.g., \"Status:\")\n * - groupNameId: for the group value (e.g., \"Open\")\n * - additionalInfoIds: for any additional fields shown in the group header\n * These IDs are used in aria-labelledby to improve screen reader support.\n */\nconst getAriaLabelIds = (uniqueId, additionalFields) => {\n const groupLabelId = `group-label-${uniqueId}`;\n const groupNameId = `group-name-${uniqueId}`;\n const additionalInfoIds = additionalFields?.map(\n additionalField =>\n `group-additional-info-${uniqueId}-${additionalField.id}` /* used in aria-labelledby */\n );\n return { groupLabelId, groupNameId, additionalInfoIds };\n};\n/**\n * Returns label for interval grouping based on interval and boundaries\n Response data depends on boundary settings.\n Ex: For sample data of profit\n profit --> cases(count)\n {'0': 10, 1': 100, '2':30, '10': 35, '15':45, '20':2}\n For Interval 10\n If the boundary is 'include-lower-only',\n and value is 10 then label -> 10 to 20\n\n If boundary is 'include-upper-only',\n and value is 10 then label -> 0 to 10\n * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n const { interval, boundaries } = customFunction;\n // To restrict the decimals in labels\n const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n value = Number(value);\n // In case of 'include-lower-only'\n let lowerValue = value.toFixed(intervalDecimalLength);\n let upperValue = (value + interval).toFixed(intervalDecimalLength);\n // In case of boundary 'include-upper-only'\n if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n lowerValue = (value - interval).toFixed(intervalDecimalLength);\n upperValue = value.toFixed(intervalDecimalLength);\n }\n return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nexport function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n const [translate] = useTranslate();\n const { locale, timezone } = view.meta;\n const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n if (dateFunction) {\n return (\n <DateValueDisplay\n value={groupHeader.name}\n dateFunction={dateFunction}\n locale={locale}\n timezone={timezone}\n />\n );\n }\n\n if (isRangeGrouping) {\n /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n return groupHeader.name;\n }\n\n if (isIntervalGrouping) {\n /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n }\n\n column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n const columnRendererProps = {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => groupHeader.name,\n getExecutionContext: () => {\n return { getValue: () => groupHeader.data, name: 'groupHeader' };\n }\n }\n };\n\n return <RenderingEngine {...columnRendererProps} />;\n}\n\n/**\n * Tooltip content for the group header.\n * Shows the group label, value, and any additional fields.\n * Used for hover/focus tooltips on the group header button.\n */\nfunction GroupHeaderToolTip({ column, groupHeader, columns, additionalFields, target }) {\n const view = column.parent;\n const { dateFunction, customFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n\n return (\n <Tooltip smart target={target} showDelay='short' hideDelay='none' describeTarget={false}>\n <Text>{!column.field.hideGroupColumnNameLabel && groupHeader.label}: </Text>\n <Text>\n <GroupName\n view={view}\n column={column}\n groupHeader={groupHeader}\n dateFunction={dateFunction}\n customFunction={customFunction}\n />\n <Text>{` (${groupCountFormatted})`}</Text>\n </Text>\n {!!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (\n <>\n {groupHeader.additionalFieldsData?.map(additionalFieldData => {\n return (\n <>\n {' • '}\n <GroupAdditionalInfo\n groupHeader={groupHeader}\n additionalField={additionalFields.find(\n additionalField => additionalField.id === additionalFieldData.id\n )}\n columns={columns}\n additionalFieldData={additionalFieldData}\n rendererContext='GroupHeaderTooltip'\n />\n </>\n );\n })}\n </>\n )}\n </Tooltip>\n );\n}\n\n/**\n * Renders the main group header label and count.\n * - Shows the group label (e.g., \"Status:\") unless hidden by column config.\n * - Shows the group value and item count.\n * - Uses ARIA IDs for accessibility.\n */\nfunction GroupHeaderLabel({ column, groupHeader }) {\n const view = column.parent;\n const { dateFunction, customFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n const { groupLabelId, groupNameId } = getAriaLabelIds(groupHeader.uniqueId);\n return (\n <>\n <div className='group-label' />\n {!column.field.hideGroupColumnNameLabel && (\n <span\n className='group-header-groupby'\n data-test-id={groupHeader.groupBy}\n data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n id={groupLabelId}\n >\n {groupHeader.label}:\n </span>\n )}\n <div className='group-label' />\n <span\n className='group-context-count'\n style={{ display: 'inline-flex' }}\n data-test-id='groupHeader'\n data-testid={TestIdConstants.groupHeaderCount}\n id={groupNameId}\n >\n <GroupName\n view={view}\n column={column}\n groupHeader={groupHeader}\n dateFunction={dateFunction}\n customFunction={customFunction}\n />\n {/* adding whitespace pre to preserve the space at the begining of count text */}\n <span className='group-count'>{` (${groupCountFormatted})`}</span>\n <VisuallyHiddenText> items</VisuallyHiddenText>\n </span>\n </>\n );\n}\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n const buttonRef = useRef();\n const view = columns[0].parent;\n const toggleGroup = useCallback(() => {\n if (groupHeader.count > 0) {\n view.type.toggleGroupExpansion({ groupHeader });\n }\n }, [groupHeader, view]);\n\n // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n // when we will pick up aggregation.\n if (!groupHeader.isVisible) return null;\n\n // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n const { columnId, additionalFields = [] } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n if (!columnId) {\n return null;\n }\n\n const column = columns.find(c => c.field.id === columnId);\n const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n // Generate unique ARIA label IDs for accessibility\n const {\n groupLabelId,\n groupNameId,\n additionalInfoIds = []\n } = getAriaLabelIds(groupHeader.uniqueId, additionalFields);\n let groupAdditionalInfo;\n\n // Prepare additional info components if present\n if (groupHeader.additionalFieldsData?.length && additionalFields.length) {\n groupAdditionalInfo = groupHeader.additionalFieldsData.reduce(\n (acc, additionalFieldData, idx) => {\n const additionalField = additionalFields.find(field => field.id === additionalFieldData.id);\n if (additionalField) {\n acc.push(\n <Flex container={{ gap: 0.5 }} id={additionalInfoIds[idx]}>\n <GroupAdditionalInfo\n additionalFieldData={additionalFieldData}\n additionalField={additionalField}\n columns={columns}\n groupHeader={groupHeader}\n rendererContext='GroupHeader'\n />\n </Flex>\n );\n }\n return acc;\n },\n []\n );\n }\n\n // FIXME: Import rather than COPY, i would rather\n return (\n <StyledGroupHeader\n groupHeader={groupHeader}\n className={cx('row group-header-row sticky-group-header')}\n data-test-id='groupHeader'\n data-testid={`${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`}\n isAggregationApplied={isAggregationApplied}\n role='row'\n onFocus={e => {\n if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n e.preventDefault();\n buttonRef.current.focus();\n }\n }}\n >\n <Flex container>\n <ColorBadge colorIndicator={groupHeader.colorIndicator} />\n <div>\n <div className='stickyGroupHeader'>\n <BareButton\n ref={buttonRef}\n // ARIA labels for accessibility, includes additional info if present\n aria-labelledby={[groupLabelId, groupNameId, ...additionalInfoIds].join(' ')}\n aria-expanded={!!groupHeader.isExpanded}\n style={{\n paddingRight: 'var(--group-left)'\n }}\n onClick={() => toggleGroup()}\n onKeyDown={event => {\n if (event.key === 'Enter') {\n // Prevent capturing of group header toggle click to its child renderers.\n event.preventDefault();\n event.stopPropagation();\n toggleGroup();\n }\n }}\n tabIndex={-1}\n icon\n >\n {groupHeader.count > 0 &&\n (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n <div className='group-wrapper'>\n {/* Main group label and count */}\n <GroupHeaderLabel column={column} groupHeader={groupHeader} />\n {/* Render additional info if present */}\n {groupAdditionalInfo && (\n <>\n <Text variant='secondary' as={GroupAdditionalInfoSeparator}>\n •\n </Text>\n <StyledMetaList wrapItems={false} items={groupAdditionalInfo} />\n </>\n )}\n </div>\n </BareButton>\n {/* Tooltip for group header, shown on hover/focus */}\n {buttonRef.current && (\n <GroupHeaderToolTip\n target={buttonRef.current}\n column={column}\n groupHeader={groupHeader}\n columns={columns}\n additionalFields={additionalFields}\n />\n )}\n </div>\n <div className='group-header-aggregation-row'>\n {columns.map(c => {\n const cxt = {\n getValue: () =>\n groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n };\n return (\n <AggregatorCell\n key={c.field.id}\n column={c}\n context={cxt}\n className={cx('cell', {\n 'cell-fixed': column.frozen\n })}\n />\n );\n })}\n </div>\n </div>\n </Flex>\n </StyledGroupHeader>\n );\n}\n\nGroupHeader.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Components/GroupRenderer/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useRef, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon, Text, MetaList, Tooltip, VisuallyHiddenText, Flex } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\nimport { customFunctions, intervalGroupingBoundaries } from '../../constants';\nimport AggregatorCell from '../AggregatorCell';\nimport RenderingEngine from '../RenderingEngine/RenderCell';\nimport DateValueDisplay from '../DateValueDisplay';\nimport TestIdConstants from '../TestIdConstants';\n\nimport GroupAdditionalInfo from './GroupAdditionalInfo';\n\nconst groupheaderleftdisplacement = headerLevel => `${(headerLevel.level + 1) * 0.5}rem`;\n/**\n * TODO: remove currentColor style after cosmos fixes the issue\n * Cosmos yet to handle dark theme on BareButton\n */\n\nconst StyledGroupHeader = styled.div`\n --group-left: ${props => groupheaderleftdisplacement(props.groupHeader)};\n --group-bg-color: ${props => props.theme.base.palette['secondary-background']};\n background-color: var(--group-bg-color);\n &:has(button[aria-expanded='true']) {\n filter: ${props => props.theme.base.shadow['low-filter']};\n }\n\n &.row.sticky-group-header {\n position: sticky;\n display: block;\n top: calc(\n ${props =>\n props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n ? 'calc(var(--row-height) + var(--group-header-height))'\n : 'var(--row-height)'}\n );\n\n /* z-index starting from 8 because freeze-line has z-index 7 */\n z-index: ${props => `${8 + props.groupHeader.index}`};\n > .cell-action,\n .cell-fixed {\n background-color: var(--group-bg-color);\n }\n }\n\n .group-label {\n width: 0.437rem;\n display: inline-block;\n flex-shrink: 0;\n }\n\n .group-header-groupby {\n font-weight: ${props => props.theme.base['font-weight'].normal};\n }\n\n .group-context-count .group-count {\n font-weight: ${props => props.theme.base['font-weight'].bold};\n white-space: pre;\n }\n\n &.row.group-header-row {\n height: auto;\n border-bottom: ${props => (!props.isAggregationApplied ? 'var(--border-style)' : 'none')};\n\n .group-header-aggregation-row {\n display: flex;\n\n /* Using height 0 so that the aggregations aren't visible when not applied but the cells can take the width and stretch the group header to the full width */\n height: ${props => (props.isAggregationApplied ? 'var(--group-header-height)' : 0)};\n }\n }\n\n &.group-header-row .stickyGroupHeader {\n position: sticky;\n left: 0;\n width: 0;\n z-index: 10;\n height: var(--group-header-height);\n\n > button {\n color: currentColor;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: max-content;\n max-width: var(--container-width);\n display: flex;\n align-items: center;\n background-color: var(--group-bg-color);\n padding-left: var(--group-left);\n margin-inline-start: 0.25rem;\n z-index: 30;\n cursor: pointer;\n white-space: nowrap;\n text-align: inherit;\n font-stretch: inherit;\n\n > .group-wrapper {\n margin-inline-start: ${({ groupHeader, theme }) =>\n groupHeader.count === 0 ? `calc(${theme.base.spacing} * 2.25)` : 'unset'};\n align-items: baseline;\n }\n\n .cell-content {\n max-height: var(--group-header-height);\n padding: 0;\n }\n }\n button:focus {\n box-shadow: ${({ theme }) => theme.base.shadow['focus-inset']};\n }\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 0.25rem;\n height: 100%;\n background-color: ${props => props.groupHeader.colorIndicator};\n z-index: 12;\n }\n }\n .group-header.cell {\n left: 0;\n padding-left: var(--group-left);\n }\n\n div.group-header.cell-fixed {\n background-color: var(--group-bg-color);\n }\n`;\n\nconst StyledMetaList = styled(MetaList)`\n margin-inline-start: 0;\n\n /* Overrides default MetaList padding and margin which was causing text-overflow issues */\n margin: 0;\n padding: 0 0.3rem;\n`;\nconst GroupAdditionalInfoSeparator = styled.span`\n margin-inline-start: 0.3rem;\n`;\n\nconst ColorBadge = styled.div`\n position: sticky;\n inset-inline-start: 0;\n z-index: 10;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 0.25rem;\n height: 100%;\n background-color: ${props => props.colorIndicator};\n z-index: 12;\n }\n`;\n\n/**\n * Generates unique ARIA label IDs for accessibility.\n * - groupLabelId: for the group label (e.g., \"Status:\")\n * - groupNameId: for the group value (e.g., \"Open\")\n * - additionalInfoIds: for any additional fields shown in the group header\n * These IDs are used in aria-labelledby to improve screen reader support.\n */\nconst getAriaLabelIds = (uniqueId, additionalFields) => {\n const groupLabelId = `group-label-${uniqueId}`;\n const groupNameId = `group-name-${uniqueId}`;\n const additionalInfoIds = additionalFields?.map(\n additionalField =>\n `group-additional-info-${uniqueId}-${additionalField.id}` /* used in aria-labelledby */\n );\n return { groupLabelId, groupNameId, additionalInfoIds };\n};\n/**\n * Returns label for interval grouping based on interval and boundaries\n Response data depends on boundary settings.\n Ex: For sample data of profit\n profit --> cases(count)\n {'0': 10, 1': 100, '2':30, '10': 35, '15':45, '20':2}\n For Interval 10\n If the boundary is 'include-lower-only',\n and value is 10 then label -> 10 to 20\n\n If boundary is 'include-upper-only',\n and value is 10 then label -> 0 to 10\n * */\nfunction buildIntervalGroupingLabel(value, customFunction, translate) {\n const { interval, boundaries } = customFunction;\n // To restrict the decimals in labels\n const intervalDecimalLength = (interval.toString().split('.')[1] || '').length;\n value = Number(value);\n // In case of 'include-lower-only'\n let lowerValue = value.toFixed(intervalDecimalLength);\n let upperValue = (value + interval).toFixed(intervalDecimalLength);\n // In case of boundary 'include-upper-only'\n if (boundaries === intervalGroupingBoundaries.includeUpperOnly) {\n lowerValue = (value - interval).toFixed(intervalDecimalLength);\n upperValue = value.toFixed(intervalDecimalLength);\n }\n return `${lowerValue} ${translate('to')} ${upperValue}`;\n}\n\nexport function GroupName({ view, column, groupHeader, dateFunction, customFunction }) {\n const [translate] = useTranslate();\n const { locale, timezone } = view.meta;\n const isRangeGrouping = customFunction?.type === customFunctions.RANGE_GROUPING;\n const isIntervalGrouping = customFunction?.type === customFunctions.INTERVAL_GROUPING;\n\n if (dateFunction) {\n return (\n <DateValueDisplay\n value={groupHeader.name}\n dateFunction={dateFunction}\n locale={locale}\n timezone={timezone}\n />\n );\n }\n\n if (isRangeGrouping) {\n /** If custom range grouping applied on number field , we need to show group name as text instead of number */\n return groupHeader.name;\n }\n\n if (isIntervalGrouping) {\n /** If custom range grouping applied on number , we need to show group name based on value and custom function details like interval and boundaries */\n return buildIntervalGroupingLabel(groupHeader.name, customFunction, translate);\n }\n\n column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n const columnRendererProps = {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => groupHeader.name,\n getExecutionContext: () => {\n return { getValue: () => groupHeader.data, name: 'groupHeader' };\n }\n }\n };\n\n return <RenderingEngine {...columnRendererProps} />;\n}\n\n/**\n * Tooltip content for the group header.\n * Shows the group label, value, and any additional fields.\n * Used for hover/focus tooltips on the group header button.\n */\nfunction GroupHeaderToolTip({ column, groupHeader, columns, additionalFields, target }) {\n const view = column.parent;\n const { dateFunction, customFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n\n return (\n <Tooltip smart target={target} showDelay='short' hideDelay='none' describeTarget={false}>\n <Text>{!column.field.hideGroupColumnNameLabel && groupHeader.label}: </Text>\n <Text>\n <GroupName\n view={view}\n column={column}\n groupHeader={groupHeader}\n dateFunction={dateFunction}\n customFunction={customFunction}\n />\n <Text>{` (${groupCountFormatted})`}</Text>\n </Text>\n {!!(groupHeader.additionalFieldsData?.length && additionalFields.length) && (\n <>\n {groupHeader.additionalFieldsData?.map(additionalFieldData => {\n return (\n <>\n {' • '}\n <GroupAdditionalInfo\n groupHeader={groupHeader}\n additionalField={additionalFields.find(\n additionalField => additionalField.id === additionalFieldData.id\n )}\n columns={columns}\n additionalFieldData={additionalFieldData}\n rendererContext='GroupHeaderTooltip'\n />\n </>\n );\n })}\n </>\n )}\n </Tooltip>\n );\n}\n\n/**\n * Renders the main group header label and count.\n * - Shows the group label (e.g., \"Status:\") unless hidden by column config.\n * - Shows the group value and item count.\n * - Uses ARIA IDs for accessibility.\n */\nfunction GroupHeaderLabel({ column, groupHeader }) {\n const view = column.parent;\n const { dateFunction, customFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n const { groupLabelId, groupNameId } = getAriaLabelIds(groupHeader.uniqueId);\n return (\n <>\n <div className='group-label' />\n {!column.field.hideGroupColumnNameLabel && (\n <span\n className='group-header-groupby'\n data-test-id={groupHeader.groupBy}\n data-testid={`${TestIdConstants.groupHeaderGroupBy}-${groupHeader.groupBy}`}\n id={groupLabelId}\n >\n {groupHeader.label}:\n </span>\n )}\n <div className='group-label' />\n <span\n className='group-context-count'\n style={{ display: 'inline-flex' }}\n data-test-id='groupHeader'\n data-testid={TestIdConstants.groupHeaderCount}\n id={groupNameId}\n >\n <GroupName\n view={view}\n column={column}\n groupHeader={groupHeader}\n dateFunction={dateFunction}\n customFunction={customFunction}\n />\n {/* adding whitespace pre to preserve the space at the begining of count text */}\n <span className='group-count'>{` (${groupCountFormatted})`}</span>\n <VisuallyHiddenText> items</VisuallyHiddenText>\n </span>\n </>\n );\n}\n// NOTE: While making any changes in GroupRenderer.jsx, also make similar changes in HierarchicalGroupRenderer.jsx file if applicable\n\nexport default function GroupHeader({ groupHeader, columns }) {\n const buttonRef = useRef();\n const view = columns[0].parent;\n const toggleGroup = useCallback(() => {\n if (groupHeader.count > 0) {\n view.type.toggleGroupExpansion({ groupHeader });\n }\n }, [groupHeader, view]);\n\n // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n // when we will pick up aggregation.\n if (!groupHeader.isVisible) return null;\n\n // If grouping by a regular column (i.e. without a dateFunction), determine props for the renderer\n const { columnId, additionalFields = [] } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n if (!columnId) {\n return null;\n }\n\n const column = columns.find(c => c.field.id === columnId);\n const isAggregationApplied = columns.filter(c => !c.hidden).some(c => c.aggregated);\n\n // Generate unique ARIA label IDs for accessibility\n const {\n groupLabelId,\n groupNameId,\n additionalInfoIds = []\n } = getAriaLabelIds(groupHeader.uniqueId, additionalFields);\n let groupAdditionalInfo;\n\n // Prepare additional info components if present\n if (groupHeader.additionalFieldsData?.length && additionalFields.length) {\n groupAdditionalInfo = groupHeader.additionalFieldsData.reduce(\n (acc, additionalFieldData, idx) => {\n const additionalField = additionalFields.find(field => field.id === additionalFieldData.id);\n if (additionalField) {\n acc.push(\n <Flex container={{ gap: 0.5 }} id={additionalInfoIds[idx]}>\n <GroupAdditionalInfo\n additionalFieldData={additionalFieldData}\n additionalField={additionalField}\n columns={columns}\n groupHeader={groupHeader}\n rendererContext='GroupHeader'\n />\n </Flex>\n );\n }\n return acc;\n },\n []\n );\n }\n\n // FIXME: Import rather than COPY, i would rather\n return (\n <StyledGroupHeader\n groupHeader={groupHeader}\n className={cx('row group-header-row sticky-group-header')}\n data-test-id='groupHeader'\n data-testid={`${TestIdConstants.groupHeader}-${groupHeader.label}-${groupHeader.name}`}\n isAggregationApplied={isAggregationApplied}\n role='row'\n onFocus={e => {\n if (buttonRef.current && !e.currentTarget.contains(e.relatedTarget)) {\n e.preventDefault();\n buttonRef.current.focus();\n }\n }}\n >\n <div className='stickyGroupHeader'>\n <BareButton\n ref={buttonRef}\n // ARIA labels for accessibility, includes additional info if present\n aria-labelledby={[groupLabelId, groupNameId, ...additionalInfoIds].join(' ')}\n aria-expanded={!!groupHeader.isExpanded}\n style={{\n paddingRight: 'var(--group-left)'\n }}\n onClick={() => toggleGroup()}\n onKeyDown={event => {\n if (event.key === 'Enter') {\n // Prevent capturing of group header toggle click to its child renderers.\n event.preventDefault();\n event.stopPropagation();\n toggleGroup();\n }\n }}\n tabIndex={-1}\n icon\n >\n {groupHeader.count > 0 &&\n (groupHeader.isExpanded ? <Icon name='caret-down' /> : <Icon name='caret-right' />)}\n <div className='group-wrapper'>\n {/* Main group label and count */}\n <GroupHeaderLabel column={column} groupHeader={groupHeader} />\n {/* Render additional info if present */}\n {groupAdditionalInfo && (\n <>\n <Text variant='secondary' as={GroupAdditionalInfoSeparator}>\n •\n </Text>\n <StyledMetaList wrapItems={false} items={groupAdditionalInfo} />\n </>\n )}\n </div>\n </BareButton>\n {/* Tooltip for group header, shown on hover/focus */}\n {buttonRef.current && (\n <GroupHeaderToolTip\n target={buttonRef.current}\n column={column}\n groupHeader={groupHeader}\n columns={columns}\n additionalFields={additionalFields}\n />\n )}\n </div>\n <div className='group-header-aggregation-row'>\n <ColorBadge colorIndicator={groupHeader.colorIndicator} />\n {columns.map(c => {\n const cxt = {\n getValue: () =>\n groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n };\n return (\n <AggregatorCell\n key={c.field.id}\n column={c}\n context={cxt}\n className={cx('cell', {\n 'cell-fixed': column.frozen\n })}\n />\n );\n })}\n </div>\n </StyledGroupHeader>\n );\n}\n\nGroupHeader.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HierarchicalGroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HierarchicalGroupRenderer.d.ts","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"AAoIA;;;mDAyHC;;;;;;;;;AA/OM,kFAC0B;AAI1B,qCAEN;AA+OM;;;mDAqCN;;;;;;;;;;;;sBAzSqB,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HierarchicalGroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport HierarchicalCell from './HierarchicalCell';\n\nexport const hierarchicalgroupheaderleftdisplacement = headerLevel =>\n `${(headerLevel + 1) * 1.5}rem`;\n\nlet counter = 0;\n\nexport const resetCounter = () => {\n counter = 0;\n};\n\nconst StyledHierarchicalGroupHeader = styled.div`\n --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};\n --group-bg-color: ${props => {\n return props.theme.base.palette['primary-background'];\n }};\n background-color: var(--group-bg-color);\n\n &.row.sticky-group-header {\n position: sticky;\n top: calc(\n ${props =>\n props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n ? 'calc(var(--row-height) + var(--group-header-height))'\n : 'var(--row-height)'}\n );\n z-index: ${props => {\n const zIndex = 5 + props.groupHeader.level + counter;\n if (props.groupHeader.isLeafNode) {\n counter += props.groupHeader.level;\n }\n return zIndex;\n }};\n > .cell-action {\n background-color: var(--group-bg-color);\n }\n }\n\n .group-label {\n width: 0.437rem;\n display: inline-block;\n }\n\n .group-context-count {\n font-weight: ${props => props.theme.base['font-weight'].bold};\n }\n\n .group-icon-spacer {\n padding-left: var(--icon-size);\n }\n\n .stickyGroupHeader {\n position: sticky;\n left: 0;\n width: 0;\n z-index: 10;\n\n > button {\n color: currentColor;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n background-color: var(--group-bg-color);\n padding-left: var(--group-left);\n z-index: 30;\n cursor: pointer;\n white-space: nowrap;\n }\n button:focus {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n }\n .group-header.cell {\n width: ${props => props.groupWidth};\n left: 0;\n padding-left: var(--group-left);\n }\n\n div.group-header.cell-fixed {\n background-color: var(--group-bg-color);\n }\n`;\n\nconst StyledHierarchicalGroupFooter = styled.div`\n --group-bg-color: ${props => {\n return props.theme.base.palette['secondary-background'];\n }};\n background-color: var(--group-bg-color);\n\n &.row.hierarchical-group-footer-row {\n position: relative;\n > .cell-action {\n background-color: var(--group-bg-color);\n }\n }\n\n & .footer-label-container {\n position: sticky;\n top: 0;\n left: 0;\n width: 0;\n z-index: 5;\n & .label {\n position: absolute;\n background-color: var(--group-bg-color);\n height: calc(100% - var(--border-width));\n left: ${props => {\n return `${props.labelLeft}px`;\n }};\n width: max-content;\n /* stylelint-disable unit-allowed-list */\n padding: 0 5px;\n }\n }\n`;\n\nexport function HierarchicalGroupHeader({ groupHeader, columns }) {\n // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n // when we will pick up aggregation.\n if (!groupHeader.isVisible) return null;\n let groupWidth = '';\n const view = columns[0].parent;\n let freezeColCount = 0;\n columns\n .filter(c => !c.hidden && c.frozen)\n .forEach(c => {\n groupWidth += `var(--col-width-${c.field.id}) + `;\n freezeColCount += 1;\n });\n if (freezeColCount > 0) groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;\n\n const renderStickyHeader = () => {\n // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere\n const { columnId, dateFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n if (!columnId) {\n return null;\n }\n let columnRendererProps;\n if (!dateFunction) {\n const column = columns.find(c => c.field.id === columnId);\n column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n columnRendererProps = {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => groupHeader.name,\n getExecutionContext: () => {\n return { getValue: () => groupHeader.data, name: 'groupHeader' };\n }\n }\n };\n }\n\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n const expandCollapseIcon = groupHeader.isExpanded ? (\n <Icon name='caret-down' />\n ) : (\n <Icon name='caret-right' />\n );\n\n return (\n <div className='stickyGroupHeader'>\n <BareButton\n aria-label={`${groupHeader.label} ${groupCountFormatted} items`}\n style={{\n paddingRight: '3px',\n maxWidth: freezeColCount > 0 ? groupWidth : 'auto'\n }}\n onClick={() => view.type.toggleGroupExpansion({ groupHeader })}\n >\n {groupHeader.count > 0 ? expandCollapseIcon : <div className='group-icon-spacer' />}\n <div className='group-wrapper'>\n <div className='group-label' />\n <span className='group-context-count' style={{ display: 'inline-flex' }}>\n <RenderingEngine {...columnRendererProps} highlighter />\n </span>\n </div>\n </BareButton>\n </div>\n );\n };\n\n const getRenderingEnginePropsById = id => {\n const column = columns.find(c => c.field.id === id);\n const columnContext = column.getContext();\n const parentContext = columnContext.getParentContext();\n\n return {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => {\n return groupHeader.info[column.field?.name];\n },\n getExecutionContext: () => {\n return { getValue: () => groupHeader.info, name: 'groupHeader' };\n },\n getParentContext: () => {\n return {\n ...parentContext,\n getRenderingEnginePropsById\n };\n }\n }\n };\n };\n\n const renderHierarchicalCells = () => {\n return columns.map(column => {\n const columnRendererProps = getRenderingEnginePropsById(column.field.id);\n\n return (\n <HierarchicalCell\n key={column.field.id}\n column={column}\n columnRendererProps={columnRendererProps}\n />\n );\n });\n };\n\n return (\n <StyledHierarchicalGroupHeader\n groupHeader={groupHeader}\n groupWidth={groupWidth}\n className={cx('row hierarchical-group-header-row sticky-group-header')}\n data-test-id='hierarchicalGroupHeader'\n >\n {renderStickyHeader()}\n {renderHierarchicalCells()}\n </StyledHierarchicalGroupHeader>\n );\n}\n\nHierarchicalGroupHeader.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport const HierarchicalGroupFooter = ({ columns, groupHeader }) => {\n const labelRef = useRef(null);\n const [labelLeft, setLabelLeft] = useState(0);\n const view = columns[0].parent;\n const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();\n const footerWidth = parentContainer?.clientWidth;\n\n useLayoutEffect(() => {\n if (labelRef.current) {\n const { width } = labelRef.current.getBoundingClientRect();\n setLabelLeft(footerWidth - width - 5);\n }\n }, [groupHeader.isVisible, footerWidth]);\n\n if (!groupHeader.isVisible) return null;\n\n return (\n <StyledHierarchicalGroupFooter\n groupHeader={groupHeader}\n className={cx('row hierarchical-group-footer-row')}\n labelLeft={labelLeft}\n data-test-id='hierarchicalGroupFooter'\n >\n <div className='footer-label-container'>\n <div ref={labelRef} className='label'>\n {groupHeader.name}\n </div>\n </div>\n {columns.map(c => {\n const cxt = {\n getValue: () =>\n groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n };\n return <AggregatorCell key={c.field.id} column={c} context={cxt} />;\n })}\n </StyledHierarchicalGroupFooter>\n );\n};\n\nHierarchicalGroupFooter.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
|
|
1
|
+
{"version":3,"file":"HierarchicalGroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport HierarchicalCell from './HierarchicalCell';\n\nexport const hierarchicalgroupheaderleftdisplacement = headerLevel =>\n `${(headerLevel + 1) * 1.5}rem`;\n\nlet counter = 0;\n\nexport const resetCounter = () => {\n counter = 0;\n};\n\nconst StyledHierarchicalGroupHeader = styled.div`\n --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};\n --group-bg-color: ${props => {\n return props.theme.base.palette['primary-background'];\n }};\n background-color: var(--group-bg-color);\n\n &.row.sticky-group-header {\n position: sticky;\n top: calc(\n ${props =>\n props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n ? 'calc(var(--row-height) + var(--group-header-height))'\n : 'var(--row-height)'}\n );\n z-index: ${props => {\n const zIndex = 5 + props.groupHeader.level + counter;\n if (props.groupHeader.isLeafNode) {\n counter += props.groupHeader.level;\n }\n return zIndex;\n }};\n > .cell-action {\n background-color: var(--group-bg-color);\n }\n }\n\n .group-label {\n width: 0.437rem;\n display: inline-block;\n }\n\n .group-context-count {\n font-weight: ${props => props.theme.base['font-weight'].bold};\n }\n\n .group-icon-spacer {\n padding-left: var(--icon-size);\n }\n\n .stickyGroupHeader {\n position: sticky;\n left: 0;\n width: 0;\n z-index: 10;\n border-bottom: var(--border-style);\n\n > button {\n color: currentColor;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n background-color: var(--group-bg-color);\n padding-left: var(--group-left);\n z-index: 30;\n cursor: pointer;\n white-space: nowrap;\n }\n button:focus {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n }\n .group-header.cell {\n width: ${props => props.groupWidth};\n left: 0;\n padding-left: var(--group-left);\n }\n\n div.group-header.cell-fixed {\n background-color: var(--group-bg-color);\n }\n`;\n\nconst StyledHierarchicalGroupFooter = styled.div`\n --group-bg-color: ${props => {\n return props.theme.base.palette['secondary-background'];\n }};\n background-color: var(--group-bg-color);\n\n &.row.hierarchical-group-footer-row {\n position: relative;\n > .cell-action {\n background-color: var(--group-bg-color);\n }\n }\n\n & .footer-label-container {\n position: sticky;\n top: 0;\n left: 0;\n width: 0;\n z-index: 5;\n & .label {\n position: absolute;\n background-color: var(--group-bg-color);\n height: calc(100% - var(--border-width));\n left: ${props => {\n return `${props.labelLeft}px`;\n }};\n width: max-content;\n /* stylelint-disable unit-allowed-list */\n padding: 0 5px;\n }\n }\n`;\n\nexport function HierarchicalGroupHeader({ groupHeader, columns }) {\n // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n // when we will pick up aggregation.\n if (!groupHeader.isVisible) return null;\n let groupWidth = '';\n const view = columns[0].parent;\n let freezeColCount = 0;\n columns\n .filter(c => !c.hidden && c.frozen)\n .forEach(c => {\n groupWidth += `var(--col-width-${c.field.id}) + `;\n freezeColCount += 1;\n });\n if (freezeColCount > 0) groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;\n\n const renderStickyHeader = () => {\n // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere\n const { columnId, dateFunction } =\n getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n if (!columnId) {\n return null;\n }\n let columnRendererProps;\n if (!dateFunction) {\n const column = columns.find(c => c.field.id === columnId);\n column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n columnRendererProps = {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => groupHeader.name,\n getExecutionContext: () => {\n return { getValue: () => groupHeader.data, name: 'groupHeader' };\n }\n }\n };\n }\n\n const formatter = view.getFormatterByKey('Integer');\n const { locale } = view.meta;\n const groupCountFormatted = formatter\n ? formatter(groupHeader.count, { locale })\n : groupHeader.count;\n const expandCollapseIcon = groupHeader.isExpanded ? (\n <Icon name='caret-down' />\n ) : (\n <Icon name='caret-right' />\n );\n\n return (\n <div className='stickyGroupHeader'>\n <BareButton\n aria-label={`${groupHeader.label} ${groupCountFormatted} items`}\n style={{\n paddingRight: '3px',\n maxWidth: freezeColCount > 0 ? groupWidth : 'auto'\n }}\n onClick={() => view.type.toggleGroupExpansion({ groupHeader })}\n >\n {groupHeader.count > 0 ? expandCollapseIcon : <div className='group-icon-spacer' />}\n <div className='group-wrapper'>\n <div className='group-label' />\n <span className='group-context-count' style={{ display: 'inline-flex' }}>\n <RenderingEngine {...columnRendererProps} highlighter />\n </span>\n </div>\n </BareButton>\n </div>\n );\n };\n\n const getRenderingEnginePropsById = id => {\n const column = columns.find(c => c.field.id === id);\n const columnContext = column.getContext();\n const parentContext = columnContext.getParentContext();\n\n return {\n ...column.getRenderingEngineProps(),\n context: {\n getValue: () => {\n return groupHeader.info[column.field?.name];\n },\n getExecutionContext: () => {\n return { getValue: () => groupHeader.info, name: 'groupHeader' };\n },\n getParentContext: () => {\n return {\n ...parentContext,\n getRenderingEnginePropsById\n };\n }\n }\n };\n };\n\n const renderHierarchicalCells = () => {\n return columns.map(column => {\n const columnRendererProps = getRenderingEnginePropsById(column.field.id);\n\n return (\n <HierarchicalCell\n key={column.field.id}\n column={column}\n columnRendererProps={columnRendererProps}\n />\n );\n });\n };\n\n return (\n <StyledHierarchicalGroupHeader\n groupHeader={groupHeader}\n groupWidth={groupWidth}\n className={cx('row hierarchical-group-header-row sticky-group-header')}\n data-test-id='hierarchicalGroupHeader'\n >\n {renderStickyHeader()}\n {renderHierarchicalCells()}\n </StyledHierarchicalGroupHeader>\n );\n}\n\nHierarchicalGroupHeader.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport const HierarchicalGroupFooter = ({ columns, groupHeader }) => {\n const labelRef = useRef(null);\n const [labelLeft, setLabelLeft] = useState(0);\n const view = columns[0].parent;\n const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();\n const footerWidth = parentContainer?.clientWidth;\n\n useLayoutEffect(() => {\n if (labelRef.current) {\n const { width } = labelRef.current.getBoundingClientRect();\n setLabelLeft(footerWidth - width - 5);\n }\n }, [groupHeader.isVisible, footerWidth]);\n\n if (!groupHeader.isVisible) return null;\n\n return (\n <StyledHierarchicalGroupFooter\n groupHeader={groupHeader}\n className={cx('row hierarchical-group-footer-row')}\n labelLeft={labelLeft}\n data-test-id='hierarchicalGroupFooter'\n >\n <div className='footer-label-container'>\n <div ref={labelRef} className='label'>\n {groupHeader.name}\n </div>\n </div>\n {columns.map(c => {\n const cxt = {\n getValue: () =>\n groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n };\n return <AggregatorCell key={c.field.id} column={c} context={cxt} />;\n })}\n </StyledHierarchicalGroupFooter>\n );\n};\n\nHierarchicalGroupFooter.propTypes = {\n columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAwBA,
|
|
1
|
+
{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAwBA,oNAi5BG"}
|
|
@@ -26,40 +26,35 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
26
26
|
!(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);
|
|
27
27
|
const selectedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
|
|
28
28
|
const lightGreyColor = theme.base.colors.gray['extra-light'];
|
|
29
|
-
const freezeLineShadowTransparent = transparentize(
|
|
30
|
-
const
|
|
29
|
+
const freezeLineShadowTransparent = transparentize(0.9, theme.components.table.header['foreground-color']);
|
|
30
|
+
const oddRowBackgroundColor = getLuminance(theme.components.table.body['secondary-background-color']) > 0.5
|
|
31
31
|
? theme.components.table.body['secondary-background-color']
|
|
32
32
|
: mix(0.75, theme.components.table.body['background-color'], theme.components.table.body['secondary-background-color']);
|
|
33
33
|
const headerForegroundContrast = meetsContrastGuidelines(theme.components.table.header['foreground-color'], theme.components.table.header['background-color']).AA;
|
|
34
34
|
const usableHeaderForeground = headerForegroundContrast
|
|
35
35
|
? theme.components.table.header['foreground-color']
|
|
36
36
|
: readableColor(theme.components.table.header['foreground-color'], theme.components.table.header['background-color']);
|
|
37
|
-
const
|
|
38
|
-
const
|
|
37
|
+
const oddRowContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], oddRowBackgroundColor).AA;
|
|
38
|
+
const useableOddRowForeground = oddRowContrast
|
|
39
39
|
? theme.components.table.body['foreground-color']
|
|
40
|
-
: readableColor(theme.components.table.body['foreground-color'],
|
|
41
|
-
const evenRowContrast = meetsContrastGuidelines(theme.components.table.body['foreground-color'], evenRowBackgroundColor).AA;
|
|
42
|
-
const useableEvenRowForeground = evenRowContrast
|
|
43
|
-
? theme.components.table.body['foreground-color']
|
|
44
|
-
: readableColor(theme.components.table.body['foreground-color'], evenRowBackgroundColor);
|
|
40
|
+
: readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);
|
|
45
41
|
return css `
|
|
46
|
-
--primary-background: ${theme.
|
|
42
|
+
--primary-background: ${theme.base.palette['primary-background']};
|
|
43
|
+
--secondary-background: ${theme.components.table.header['background-color']};
|
|
47
44
|
--forground-color: ${theme.base.palette['foreground-color']};
|
|
48
45
|
--interactive: ${theme.base.palette.interactive};
|
|
49
46
|
--medium-blue: ${theme.base.colors.blue.medium};
|
|
50
47
|
--border-color: ${theme.base.palette['border-line']};
|
|
51
48
|
--border-color-freeze: #a5a5a5;
|
|
52
49
|
--border-width: 0.062rem;
|
|
53
|
-
--font-stretch: ${theme.components.table.typography['font-stretch']};
|
|
54
50
|
--border-style: var(--border-width) solid var(--border-color);
|
|
51
|
+
--font-stretch: ${theme.components.table.typography['font-stretch']};
|
|
55
52
|
--letter-spacing: ${theme.components.table.typography['letter-spacing']};
|
|
56
53
|
--cell-padding: ${theme.base.spacing};
|
|
57
54
|
--cell-vertical-padding: calc(${theme.base.spacing} * 0.5);
|
|
58
55
|
--header-cell-padding: 0 0.44rem 0 var(--cell-padding);
|
|
59
|
-
--header-bg-color:
|
|
56
|
+
--header-bg-color: var(--secondary-background);
|
|
60
57
|
--header-fg-color: ${usableHeaderForeground};
|
|
61
|
-
--group-header-bg-color: ${theme.components.table.body['secondary-background-color']};
|
|
62
|
-
--group-header-fg-color: ${usableGroupHeaderForeground};
|
|
63
58
|
--default-group-header-height: 1.5rem;
|
|
64
59
|
--group-header-height: var(--default-group-header-height);
|
|
65
60
|
--box-sizing: content-box;
|
|
@@ -67,11 +62,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
67
62
|
--font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};
|
|
68
63
|
--row-height-multiplier: 1.125;
|
|
69
64
|
--cell-fixed-position: sticky;
|
|
70
|
-
--table-header-border-radius: min(
|
|
71
|
-
var(--border-radius),
|
|
72
|
-
${props => props.theme.base['border-radius']},
|
|
73
|
-
0.5rem
|
|
74
|
-
);
|
|
75
65
|
position: relative;
|
|
76
66
|
${() => generateRSHeightStyles({ view, isFullscreen })}
|
|
77
67
|
|
|
@@ -81,23 +71,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
81
71
|
|
|
82
72
|
.container {
|
|
83
73
|
${() => generateRSDataContainerHeightStyles()};
|
|
84
|
-
border
|
|
74
|
+
border: var(--border-style);
|
|
75
|
+
border-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
85
76
|
position: relative;
|
|
86
77
|
letter-spacing: var(--letter-spacing);
|
|
87
78
|
font-stretch: var(--font-stretch);
|
|
88
79
|
${StyledTabPanel} & ${StyledProgressBackdrop} {
|
|
89
|
-
border-radius: var(--
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&::before {
|
|
93
|
-
content: '';
|
|
94
|
-
position: absolute;
|
|
95
|
-
width: 100%;
|
|
96
|
-
height: var(--row-height);
|
|
97
|
-
border: var(--border-style);
|
|
98
|
-
z-index: 12;
|
|
99
|
-
border-radius: var(--table-header-border-radius) var(--table-header-border-radius) 0 0;
|
|
100
|
-
pointer-events: none;
|
|
80
|
+
border-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
101
81
|
}
|
|
102
82
|
}
|
|
103
83
|
|
|
@@ -159,6 +139,26 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
159
139
|
box-sizing: var(--box-sizing);
|
|
160
140
|
}
|
|
161
141
|
|
|
142
|
+
.fallback {
|
|
143
|
+
/* stylelint-disable unit-allowed-list */
|
|
144
|
+
top: -1px;
|
|
145
|
+
border-bottom: var(--border-style);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.fallback-footer {
|
|
149
|
+
top: 0;
|
|
150
|
+
border-top: var(--border-style);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.sticky-header {
|
|
154
|
+
display: grid;
|
|
155
|
+
position: sticky;
|
|
156
|
+
top: 0;
|
|
157
|
+
z-index: 6;
|
|
158
|
+
border-start-start-radius: inherit;
|
|
159
|
+
border-start-end-radius: inherit;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
162
|
.cell {
|
|
163
163
|
/* preventing cell from shrinking during autosize calculations */
|
|
164
164
|
flex-shrink: 0;
|
|
@@ -197,7 +197,6 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
> .header-lable-container {
|
|
200
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
201
200
|
min-width: 20px;
|
|
202
201
|
}
|
|
203
202
|
/* stylelint-disable selector-max-class */
|
|
@@ -209,7 +208,12 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
209
208
|
> .cell,
|
|
210
209
|
.group-header-aggregation-row > .cell {
|
|
211
210
|
transition: transform 0.5s var(--animation-ease);
|
|
211
|
+
border-right: var(--border-style);
|
|
212
212
|
position: relative;
|
|
213
|
+
${!theme.components.table['striped-rows'] &&
|
|
214
|
+
css `
|
|
215
|
+
border-bottom: var(--border-style);
|
|
216
|
+
`}
|
|
213
217
|
display: flex;
|
|
214
218
|
align-items: center;
|
|
215
219
|
|
|
@@ -230,6 +234,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
230
234
|
right: 0;
|
|
231
235
|
border-right: 0;
|
|
232
236
|
justify-content: center;
|
|
237
|
+
border-left: var(--border-style);
|
|
233
238
|
|
|
234
239
|
/* The below styles are needed to avoid ellipses in safari when no text is present
|
|
235
240
|
and to hide the 'Actions' label */
|
|
@@ -241,10 +246,20 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
241
246
|
}
|
|
242
247
|
}
|
|
243
248
|
&.aggregateCell {
|
|
244
|
-
background-color: var(--
|
|
249
|
+
background-color: var(--header-bg-color);
|
|
245
250
|
}
|
|
246
251
|
}
|
|
247
252
|
|
|
253
|
+
/** Adds bottom border to the last row of a group, when striped-rows are enabled */
|
|
254
|
+
&:has(+ .group-header-row) > .cell {
|
|
255
|
+
${theme.components.table['striped-rows'] &&
|
|
256
|
+
css `
|
|
257
|
+
border-bottom: var(--border-style);
|
|
258
|
+
`}
|
|
259
|
+
}
|
|
260
|
+
&.header > .cell {
|
|
261
|
+
border-bottom: var(--border-style);
|
|
262
|
+
}
|
|
248
263
|
.group-header-aggregation-row {
|
|
249
264
|
> .cell {
|
|
250
265
|
&.cell-action {
|
|
@@ -258,6 +273,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
258
273
|
inset-inline-start: calc(var(--border-width) * -1);
|
|
259
274
|
inset-block-start: calc(var(--group-header-height) * -1);
|
|
260
275
|
block-size: var(--group-header-height);
|
|
276
|
+
border-inline-start: var(--border-style);
|
|
261
277
|
}
|
|
262
278
|
}
|
|
263
279
|
}
|
|
@@ -282,9 +298,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
282
298
|
.group-header-aggregation-row > .cell-fixed {
|
|
283
299
|
position: var(--cell-fixed-position);
|
|
284
300
|
z-index: 4;
|
|
301
|
+
|
|
285
302
|
${showFreezeLine &&
|
|
286
303
|
css `
|
|
287
304
|
&.cell-last-frozen {
|
|
305
|
+
border-right: solid 1px var(--border-color-freeze);
|
|
288
306
|
filter: drop-shadow(
|
|
289
307
|
calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}
|
|
290
308
|
);
|
|
@@ -310,13 +328,33 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
310
328
|
&.click {
|
|
311
329
|
cursor: pointer;
|
|
312
330
|
}
|
|
331
|
+
|
|
332
|
+
&:last-child {
|
|
333
|
+
border-end-start-radius: inherit;
|
|
334
|
+
border-end-end-radius: inherit;
|
|
335
|
+
|
|
336
|
+
> .cell {
|
|
337
|
+
&:first-child {
|
|
338
|
+
border-end-start-radius: inherit;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
&:last-child {
|
|
342
|
+
border-end-end-radius: inherit;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
${theme.components.table['striped-rows'] &&
|
|
346
|
+
css `
|
|
347
|
+
border-bottom: var(--border-style);
|
|
348
|
+
`}
|
|
349
|
+
}
|
|
350
|
+
}
|
|
313
351
|
}
|
|
314
352
|
.row:not(.row-error):not(.group-header-row):not(.header) {
|
|
315
353
|
.cell-fixed {
|
|
316
354
|
background: var(--primary-background);
|
|
317
355
|
}
|
|
318
356
|
.cell-fixed.aggregateCell {
|
|
319
|
-
background: var(--
|
|
357
|
+
background: var(--header-bg-color);
|
|
320
358
|
}
|
|
321
359
|
}
|
|
322
360
|
${theme.components.table['striped-rows'] &&
|
|
@@ -327,53 +365,27 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
327
365
|
.row[data-index$='5']:not(.group-header-row):not(.header),
|
|
328
366
|
.row[data-index$='7']:not(.group-header-row):not(.header),
|
|
329
367
|
.row[data-index$='9']:not(.group-header-row):not(.header) {
|
|
330
|
-
background:
|
|
368
|
+
background: ${oddRowBackgroundColor};
|
|
369
|
+
color: ${useableOddRowForeground};
|
|
331
370
|
.cell-fixed {
|
|
332
|
-
background:
|
|
371
|
+
background: ${oddRowBackgroundColor};
|
|
372
|
+
color: ${useableOddRowForeground};
|
|
333
373
|
}
|
|
334
374
|
> .cell-action {
|
|
335
|
-
background:
|
|
375
|
+
background: ${oddRowBackgroundColor};
|
|
336
376
|
}
|
|
337
377
|
}
|
|
338
|
-
|
|
339
|
-
/* Targets rows with an even data-index attribute, excluding group header rows */
|
|
340
378
|
.row[data-index$='0']:not(.group-header-row):not(.header),
|
|
341
379
|
.row[data-index$='2']:not(.group-header-row):not(.header),
|
|
342
380
|
.row[data-index$='4']:not(.group-header-row):not(.header),
|
|
343
381
|
.row[data-index$='6']:not(.group-header-row):not(.header),
|
|
344
382
|
.row[data-index$='8']:not(.group-header-row):not(.header) {
|
|
345
|
-
background:
|
|
346
|
-
color: ${useableEvenRowForeground};
|
|
347
|
-
border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
348
|
-
border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
349
|
-
|
|
383
|
+
background: var(--primary-background);
|
|
350
384
|
.cell-fixed {
|
|
351
|
-
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
/* Avoid the non-frozen column's background to come behind the first cell's empty area in corner due to border-radius
|
|
355
|
-
Let the first cell-fixed take full rectangale width, add a pseudo element with the background and border radius of same size as the element */
|
|
356
|
-
.cell-fixed:not(.cell-first) {
|
|
357
|
-
background: ${evenRowBackgroundColor};
|
|
358
|
-
}
|
|
359
|
-
.cell-fixed.cell-first::before {
|
|
360
|
-
background: ${evenRowBackgroundColor};
|
|
361
|
-
content: '';
|
|
362
|
-
position: absolute;
|
|
363
|
-
inset: 0;
|
|
364
|
-
z-index: -1;
|
|
365
|
-
border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
366
|
-
pointer-events: none;
|
|
385
|
+
background: var(--primary-background);
|
|
367
386
|
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
background: ${evenRowBackgroundColor};
|
|
371
|
-
content: '';
|
|
372
|
-
position: absolute;
|
|
373
|
-
inset: 0;
|
|
374
|
-
z-index: -1;
|
|
375
|
-
border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);
|
|
376
|
-
pointer-events: none;
|
|
387
|
+
> .cell-action {
|
|
388
|
+
background: var(--primary-background);
|
|
377
389
|
}
|
|
378
390
|
}
|
|
379
391
|
`}
|
|
@@ -399,36 +411,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
399
411
|
}
|
|
400
412
|
}
|
|
401
413
|
|
|
402
|
-
.sticky-header {
|
|
403
|
-
display: grid;
|
|
404
|
-
position: sticky;
|
|
405
|
-
top: 0;
|
|
406
|
-
z-index: 6;
|
|
407
|
-
border-start-start-radius: inherit;
|
|
408
|
-
border-start-end-radius: inherit;
|
|
409
|
-
|
|
410
|
-
& .row .cell:not(.cell-last-frozen):not(.cell-last) {
|
|
411
|
-
&::after {
|
|
412
|
-
content: '';
|
|
413
|
-
position: absolute;
|
|
414
|
-
right: 0;
|
|
415
|
-
top: 0.5rem;
|
|
416
|
-
bottom: 0.5rem;
|
|
417
|
-
width: 0.062rem;
|
|
418
|
-
background-color: ${theme.base.palette['border-line']};
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
414
|
.filter-info-container {
|
|
424
415
|
display: flex;
|
|
425
416
|
justify-content: center;
|
|
426
417
|
align-items: center;
|
|
427
418
|
|
|
428
419
|
svg {
|
|
429
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
430
420
|
width: 14px;
|
|
431
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
432
421
|
height: 14px;
|
|
433
422
|
}
|
|
434
423
|
}
|
|
@@ -475,11 +464,13 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
475
464
|
/* stylelint-enable selector-max-class */
|
|
476
465
|
.expand-collapse-all {
|
|
477
466
|
position: absolute;
|
|
478
|
-
background-color: var(--header-bg-color);
|
|
479
467
|
width: var(--expand-collapse-all-width);
|
|
480
468
|
z-index: 10;
|
|
481
469
|
height: var(--row-height);
|
|
470
|
+
background-color: var(--header-bg-color);
|
|
482
471
|
color: var(--header-fg-color);
|
|
472
|
+
border-right: var(--border-style);
|
|
473
|
+
border-bottom: var(--border-style);
|
|
483
474
|
border-start-start-radius: ${theme.base['border-radius']};
|
|
484
475
|
padding-inline-start: 0.125rem;
|
|
485
476
|
margin-inline-start: 0.25rem;
|
|
@@ -494,8 +485,8 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
494
485
|
inset-inline-start: -0.25rem;
|
|
495
486
|
width: 0.25rem;
|
|
496
487
|
height: 100%;
|
|
497
|
-
z-index: 12;
|
|
498
488
|
background-color: var(--header-bg-color);
|
|
489
|
+
z-index: 12;
|
|
499
490
|
}
|
|
500
491
|
|
|
501
492
|
> button {
|
|
@@ -527,6 +518,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
527
518
|
position: relative; /* This is required to position .border-fix element */
|
|
528
519
|
border-start-start-radius: inherit;
|
|
529
520
|
border-start-end-radius: inherit;
|
|
521
|
+
|
|
530
522
|
> .cell.row-error-column {
|
|
531
523
|
border-right: 0;
|
|
532
524
|
}
|
|
@@ -541,6 +533,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
541
533
|
color: var(--header-fg-color);
|
|
542
534
|
font-weight: ${theme.base['font-weight'].bold};
|
|
543
535
|
font-size: ${fontSize.xxs};
|
|
536
|
+
border-right: var(--border-style);
|
|
544
537
|
padding: var(--header-cell-padding);
|
|
545
538
|
|
|
546
539
|
&:first-child {
|
|
@@ -837,13 +830,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
|
|
|
837
830
|
/* stylelint-enable selector-max-class */
|
|
838
831
|
|
|
839
832
|
.toolbar-button-applied {
|
|
840
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
841
833
|
padding: 0 8px;
|
|
842
834
|
margin: 0 calc(${theme.base.spacing} / 4);
|
|
843
835
|
}
|
|
844
836
|
|
|
845
837
|
.toolbar-button {
|
|
846
|
-
/* stylelint-disable-next-line unit-allowed-list */
|
|
847
838
|
padding: 0 8px;
|
|
848
839
|
margin: 0 calc(${theme.base.spacing} / 4);
|
|
849
840
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport {\n getLuminance,\n meetsContrastGuidelines,\n mix,\n readableColor,\n transparentize\n} from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport {\n StyledLabel,\n StyledProgressBackdrop,\n calculateFontSize,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n theme,\n view,\n isFullscreen\n}) => {\n let colIdToFillRemainingSpace;\n let isAggregationApplied = false;\n\n (view.columns ?? [])\n .filter(c => !c.hidden)\n .forEach(c => {\n if (!colIdToFillRemainingSpace && c.field.fillAvailableSpace) {\n colIdToFillRemainingSpace = c.field.id;\n }\n if (c.aggregated) {\n isAggregationApplied = true;\n }\n });\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const showFreezeLine =\n view.state.responsive?.sm &&\n !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);\n const selectedRowColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n const lightGreyColor = theme.base.colors.gray['extra-light'];\n const freezeLineShadowTransparent = transparentize(\n getLuminance(theme.components.table.header['foreground-color']) < 0.5 ? 0.9 : 0.75,\n theme.components.table.header['foreground-color']\n );\n\n const evenRowBackgroundColor =\n getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n ? theme.components.table.body['secondary-background-color']\n : mix(\n 0.75,\n theme.components.table.body['background-color'],\n theme.components.table.body['secondary-background-color']\n );\n\n const headerForegroundContrast = meetsContrastGuidelines(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n ).AA;\n\n const usableHeaderForeground = headerForegroundContrast\n ? theme.components.table.header['foreground-color']\n : readableColor(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n );\n\n const groupHeaderForegroundContrast = meetsContrastGuidelines(\n theme.components.table.body['foreground-color'],\n theme.components.table.body['secondary-background-color']\n ).AA;\n\n const usableGroupHeaderForeground = groupHeaderForegroundContrast\n ? theme.components.table.body['foreground-color']\n : readableColor(\n theme.components.table.body['foreground-color'],\n theme.components.table.body['secondary-background-color']\n );\n\n const evenRowContrast = meetsContrastGuidelines(\n theme.components.table.body['foreground-color'],\n evenRowBackgroundColor\n ).AA;\n const useableEvenRowForeground = evenRowContrast\n ? theme.components.table.body['foreground-color']\n : readableColor(theme.components.table.body['foreground-color'], evenRowBackgroundColor);\n\n return css`\n --primary-background: ${theme.components.table.header['background-color']};\n --forground-color: ${theme.base.palette['foreground-color']};\n --interactive: ${theme.base.palette.interactive};\n --medium-blue: ${theme.base.colors.blue.medium};\n --border-color: ${theme.base.palette['border-line']};\n --border-color-freeze: #a5a5a5;\n --border-width: 0.062rem;\n --font-stretch: ${theme.components.table.typography['font-stretch']};\n --border-style: var(--border-width) solid var(--border-color);\n --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n --cell-padding: ${theme.base.spacing};\n --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n --header-cell-padding: 0 0.44rem 0 var(--cell-padding);\n --header-bg-color: ${theme.components.table.header['background-color']};\n --header-fg-color: ${usableHeaderForeground};\n --group-header-bg-color: ${theme.components.table.body['secondary-background-color']};\n --group-header-fg-color: ${usableGroupHeaderForeground};\n --default-group-header-height: 1.5rem;\n --group-header-height: var(--default-group-header-height);\n --box-sizing: content-box;\n --animation-ease: ${theme.base.animation.timing.ease};\n --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n --row-height-multiplier: 1.125;\n --cell-fixed-position: sticky;\n --table-header-border-radius: min(\n var(--border-radius),\n ${props => props.theme.base['border-radius']},\n 0.5rem\n );\n position: relative;\n ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n .small-screen-table {\n --cell-fixed-position: static;\n }\n\n .container {\n ${() => generateRSDataContainerHeightStyles()};\n border-radius: var(--table-header-border-radius);\n position: relative;\n letter-spacing: var(--letter-spacing);\n font-stretch: var(--font-stretch);\n ${StyledTabPanel} & ${StyledProgressBackdrop} {\n border-radius: var(--table-header-border-radius);\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: var(--row-height);\n border: var(--border-style);\n z-index: 12;\n border-radius: var(--table-header-border-radius) var(--table-header-border-radius) 0 0;\n pointer-events: none;\n }\n }\n\n .hide-rows-till-ready .row[aria-rowindex] {\n visibility: hidden;\n }\n\n .table-drag-proxy {\n background: rgba(0, 0, 0, 0.21);\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .table-drag-line {\n background: #999999;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0.12rem;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .cell-fixed {\n z-index: 1;\n }\n\n .group-wrapper {\n overflow: hidden;\n display: inline-flex;\n line-height: var(--group-header-height);\n\n .group-context-count {\n display: inline-flex;\n overflow: hidden;\n }\n }\n\n /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n mark up is generated from cosmos which differentiates from normal table cell markup */\n .group-wrapper .group-context-count dl {\n grid-template-columns: auto;\n }\n\n .fallback,\n .fallback-footer {\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n position: absolute;\n width: 100%;\n z-index: -1;\n box-sizing: var(--box-sizing);\n }\n\n .cell {\n /* preventing cell from shrinking during autosize calculations */\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n .icons-ph {\n /* Maintaining action button aspect ratio of 1:1 with 24*24px width and height */\n min-width: 1.5rem;\n }\n\n &.custom-item {\n width: 10em;\n }\n }\n\n .cell:focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n outline: none;\n }\n\n .row {\n display: inline-flex;\n height: var(--row-height);\n outline: none 0;\n transition: transform 0.5s var(--animation-ease);\n box-sizing: var(--box-sizing);\n position: relative;\n\n > .row-select-handle {\n display: flex;\n justify-content: center;\n &:active {\n outline: none;\n }\n\n > .header-lable-container {\n /* stylelint-disable-next-line unit-allowed-list */\n min-width: 20px;\n }\n /* stylelint-disable selector-max-class */\n &.cell-fixed > .cell-content {\n flex-grow: unset;\n }\n }\n\n > .cell,\n .group-header-aggregation-row > .cell {\n transition: transform 0.5s var(--animation-ease);\n position: relative;\n display: flex;\n align-items: center;\n\n &::after {\n opacity: 1;\n transition: opacity 0.1s var(--animation-ease);\n }\n\n .row-action-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.cell-action {\n position: sticky;\n z-index: 4;\n right: 0;\n border-right: 0;\n justify-content: center;\n\n /* The below styles are needed to avoid ellipses in safari when no text is present\n and to hide the 'Actions' label */\n\n /* stylelint-disable max-nesting-depth */\n\n div.header-label {\n text-overflow: unset;\n }\n }\n &.aggregateCell {\n background-color: var(--group-header-bg-color);\n }\n }\n\n .group-header-aggregation-row {\n > .cell {\n &.cell-action {\n overflow: initial;\n\n /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */\n &::before {\n content: '';\n position: absolute;\n inline-size: 0;\n inset-inline-start: calc(var(--border-width) * -1);\n inset-block-start: calc(var(--group-header-height) * -1);\n block-size: var(--group-header-height);\n }\n }\n }\n }\n\n > .cell-action {\n background-color: var(--primary-background);\n }\n\n > .row-reorder-handle {\n padding: 0;\n border-right: 0 !important;\n justify-content: center;\n cursor: move;\n }\n\n .aggregateCell.cell {\n border-right: none;\n }\n\n > .cell.cell-fixed,\n .group-header-aggregation-row > .cell-fixed {\n position: var(--cell-fixed-position);\n z-index: 4;\n ${showFreezeLine &&\n css`\n &.cell-last-frozen {\n filter: drop-shadow(\n calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}\n );\n transition: 0.5s;\n }\n `}\n\n /* As the row select column and row dragDrop column always have to be frozen */\n &[data-col-id='RowSelect'],\n &[data-col-id='RowDragDrop'],\n &[data-col-id='RowError'] {\n position: sticky;\n flex-shrink: 0;\n z-index: 5;\n }\n }\n\n > .cell.cell-fixed:focus-within,\n .group-header-aggregation-row > .cell-fixed {\n z-index: 6;\n }\n\n &.click {\n cursor: pointer;\n }\n }\n .row:not(.row-error):not(.group-header-row):not(.header) {\n .cell-fixed {\n background: var(--primary-background);\n }\n .cell-fixed.aggregateCell {\n background: var(--group-header-bg-color);\n }\n }\n ${theme.components.table['striped-rows'] &&\n css`\n /* Targets rows with an odd data-index attribute, excluding group header rows */\n .row[data-index$='1']:not(.group-header-row):not(.header),\n .row[data-index$='3']:not(.group-header-row):not(.header),\n .row[data-index$='5']:not(.group-header-row):not(.header),\n .row[data-index$='7']:not(.group-header-row):not(.header),\n .row[data-index$='9']:not(.group-header-row):not(.header) {\n background: var(--primary-background);\n .cell-fixed {\n background: var(--primary-background);\n }\n > .cell-action {\n background: var(--primary-background);\n }\n }\n\n /* Targets rows with an even data-index attribute, excluding group header rows */\n .row[data-index$='0']:not(.group-header-row):not(.header),\n .row[data-index$='2']:not(.group-header-row):not(.header),\n .row[data-index$='4']:not(.group-header-row):not(.header),\n .row[data-index$='6']:not(.group-header-row):not(.header),\n .row[data-index$='8']:not(.group-header-row):not(.header) {\n background: ${evenRowBackgroundColor};\n color: ${useableEvenRowForeground};\n border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n\n .cell-fixed {\n color: ${useableEvenRowForeground};\n }\n\n /* Avoid the non-frozen column's background to come behind the first cell's empty area in corner due to border-radius\n Let the first cell-fixed take full rectangale width, add a pseudo element with the background and border radius of same size as the element */\n .cell-fixed:not(.cell-first) {\n background: ${evenRowBackgroundColor};\n }\n .cell-fixed.cell-first::before {\n background: ${evenRowBackgroundColor};\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-bottom-left-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n pointer-events: none;\n }\n\n > .cell-action::before {\n background: ${evenRowBackgroundColor};\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-bottom-right-radius: min(${props => props.theme.base['border-radius']}, 0.25rem);\n pointer-events: none;\n }\n }\n `}\n\n .row-error {\n background: ${mix(\n 0.1,\n theme.components['form-field'].error['status-color'],\n theme.base.palette['primary-background']\n )};\n\n /* stylelint-disable no-descending-specificity */\n .cell-fixed,\n .cell-action {\n background: inherit;\n }\n\n > .cell:not(.cell-fixed):not(.cell-action) {\n background: none;\n }\n }\n\n .sort-info-container {\n .sort-sequence {\n font-size: 0.625rem;\n color: ${theme.base.colors.gray['extra-dark']};\n }\n }\n\n .sticky-header {\n display: grid;\n position: sticky;\n top: 0;\n z-index: 6;\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n\n & .row .cell:not(.cell-last-frozen):not(.cell-last) {\n &::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0.5rem;\n bottom: 0.5rem;\n width: 0.062rem;\n background-color: ${theme.base.palette['border-line']};\n }\n }\n }\n\n .filter-info-container {\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n /* stylelint-disable-next-line unit-allowed-list */\n width: 14px;\n /* stylelint-disable-next-line unit-allowed-list */\n height: 14px;\n }\n }\n\n .cell.row-error-column {\n padding: 0;\n border-right: 0;\n text-align: right;\n outline: none;\n\n /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n svg {\n color: ${theme.base.colors.red.medium};\n }\n }\n\n .cell-right-align .filter-info-container svg {\n margin: 0 0.312rem 0 0;\n }\n\n &.show-expand-collapse-all {\n .row > .cell-first {\n padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n &.row-reorder-handle,\n &.row-error-column {\n padding: 0;\n }\n &.row-select-handle {\n padding-inline-start: var(--expand-collapse-all-width);\n }\n }\n\n .row-container .row > .cell-first {\n &.row-select-handle {\n /* Offset padding of 0.5rem added to SelectAllCheckbox in grouped views(getting pushed by margin),\n ensuring row select checkboxes align vertically in header and data rows */\n padding-inline-start: calc(\n var(--expand-collapse-all-width) - var(--cell-padding) + 0.5rem\n );\n }\n }\n\n /* stylelint-enable selector-max-class */\n .expand-collapse-all {\n position: absolute;\n background-color: var(--header-bg-color);\n width: var(--expand-collapse-all-width);\n z-index: 10;\n height: var(--row-height);\n color: var(--header-fg-color);\n border-start-start-radius: ${theme.base['border-radius']};\n padding-inline-start: 0.125rem;\n margin-inline-start: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: -0.25rem;\n width: 0.25rem;\n height: 100%;\n z-index: 12;\n background-color: var(--header-bg-color);\n }\n\n > button {\n color: var(--forground-color);\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n .no-border-right {\n border-right: 0;\n }\n }\n\n /* stylelint-disable selector-max-class */\n\n .scroll-end {\n &.row-container > .row:last-child {\n & > .cell,\n & .group-header-aggregation-row > .cell {\n border-bottom: 0;\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n .header {\n font-weight: var(--font-weight-semi-bold);\n position: relative; /* This is required to position .border-fix element */\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n > .cell.row-error-column {\n border-right: 0;\n }\n > .cell {\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 2;\n position: relative;\n cursor: pointer;\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n font-weight: ${theme.base['font-weight'].bold};\n font-size: ${fontSize.xxs};\n padding: var(--header-cell-padding);\n\n &:first-child {\n border-start-start-radius: inherit;\n }\n\n &:last-child {\n border-start-end-radius: inherit;\n }\n\n .header-lable-container {\n display: inline-flex;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${fontSize.xs};\n font-weight: var(--font-weight-semi-bold);\n align-items: center;\n gap: 0.125rem;\n }\n\n .header-label {\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* To avoid browser tooltip when we get ellipsis in safari */\n &::after {\n content: '';\n display: block;\n }\n\n /* To utilize smart tooltip making it as a non-box element */\n /* stylelint-disable selector-max-class */\n .cell-content {\n display: contents;\n }\n }\n }\n\n > .row-reorder-handle {\n padding: 0;\n }\n\n > .row-select-handle {\n /* Nullifying padding applied from .header > .cell */\n padding: 0;\n justify-content: center;\n }\n .row {\n border-bottom: none;\n }\n }\n\n /* 4 selectors required as aggregateCell of only footer need this effect */\n\n .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n border-bottom: none;\n }\n\n .row .cell.cell-last {\n border-right: 0;\n }\n\n ${!colIdToFillRemainingSpace\n ? css`\n .row .cell.cell-last {\n flex-grow: 1;\n }\n `\n : css`\n .row .cell[data-col-id='${colIdToFillRemainingSpace}'] {\n flex-grow: 1;\n }\n `}\n\n /* Disable the flex layout size changes when measuring for content based size to get correct width */\n\n [data-content-size-measuring] & .row .cell {\n flex-grow: 0 !important;\n }\n\n .row-container {\n --data-row-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--data-row-height)'};\n &:not(.wrap-content-height) > .row:not(.group-header-row) {\n height: var(--data-row-height);\n }\n\n & > .row:not(.group-header-row) {\n min-width: 100%;\n }\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n & > .row .cell-content {\n /*\n * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n */\n box-sizing: content-box;\n flex-grow: 1;\n\n /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n padding: var(--cell-vertical-padding) var(--cell-padding);\n\n /* setting max-height so that the elements with more height like RTL, align with the row density height */\n max-height: var(--data-row-height);\n\n /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n & * {\n scrollbar-width: none;\n }\n\n /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n &:has(.combined-cell) {\n padding: 0;\n\n .cell-content {\n flex-grow: unset;\n }\n }\n }\n\n & > .row .cell:not(.column-type-action) .cell-content {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: break-all;\n }\n }\n\n .row .aggregateCell .cell-content {\n line-height: initial;\n padding: 0;\n }\n\n .short-height,\n .medium-height {\n ${StyledStatus} {\n white-space: nowrap;\n }\n }\n\n .short-height {\n ${StyledRadioCheck} ${StyledLabel} {\n min-height: auto;\n }\n }\n\n .medium-height {\n --row-height-multiplier: 4 / 3;\n }\n\n .tall-height {\n --row-height-multiplier: calc(4 / 3 + 0.5);\n > .row:not(.group-header-row) {\n > .cell {\n display: inline-grid;\n align-items: start;\n white-space: normal;\n word-break: break-all;\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .wrap-content-height {\n --row-height-multiplier: 4 / 3;\n --row-min-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--row-min-height)'};\n\n > .row:not(.group-header-row) {\n height: auto;\n min-height: var(--row-min-height);\n > .cell {\n white-space: normal;\n\n /* -- For BUG-625508 -- */\n word-break: break-word;\n display: inline-grid;\n align-items: start;\n padding-top: var(--cell-vertical-padding);\n padding-bottom: var(--cell-vertical-padding);\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n /* for full-content, the row cells should adjust according to content */\n max-height: none;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .footer {\n .row {\n .cell {\n padding: 0;\n }\n }\n }\n\n /* stylelint-disable no-duplicate-selectors */\n .row-container {\n position: absolute;\n display: grid;\n width: 100%;\n font-size: ${fontSize.s};\n\n > .group-header-row,\n .hierarchical-group-footer-row {\n height: var(--group-header-height);\n .cell {\n padding: 0;\n border-right-width: 0;\n }\n }\n\n > .hierarchical-group-header-row {\n height: var(--group-header-height);\n }\n input.checkbox-on-hover + label {\n opacity: 0;\n }\n input.checkbox-on-hover:checked + label {\n opacity: 1;\n }\n .row.selected-row {\n background-color: ${selectedRowColor};\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${selectedRowColor};\n }\n }\n .row-on-hover:hover {\n background-color: ${lightGreyColor};\n input.checkbox-on-hover + label {\n opacity: 1;\n }\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${lightGreyColor};\n }\n }\n .row.hierarchical-group-footer-row {\n .cell-fixed {\n background: ${lightGreyColor};\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n\n .toolbar-button-applied {\n /* stylelint-disable-next-line unit-allowed-list */\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .toolbar-button {\n /* stylelint-disable-next-line unit-allowed-list */\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .column-resizer {\n cursor: col-resize;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n width: 0.25rem;\n height: 100%;\n }\n\n .column-resizer:hover,\n .column-resizer:active {\n background: var(--interactive);\n }\n\n .align-right {\n justify-content: right;\n\n .cell-content {\n text-align: right;\n }\n }\n\n .align-left {\n justify-content: left;\n\n .cell-content {\n text-align: left;\n }\n }\n\n .align-center {\n justify-content: center;\n\n .cell-content {\n text-align: center;\n }\n }\n\n .popper {\n div.row {\n display: flex;\n vertical-align: middle;\n line-height: unset;\n border-bottom: none;\n outline: none 0;\n height: auto;\n }\n }\n `;\n});\n\nexport default StyledTableContainer;\n"]}
|
|
1
|
+
{"version":3,"file":"StyledTableContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport {\n getLuminance,\n meetsContrastGuidelines,\n mix,\n readableColor,\n transparentize\n} from 'polished';\n\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport {\n StyledLabel,\n StyledProgressBackdrop,\n calculateFontSize,\n tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\n\nimport { CellIcon } from './CellWrapper';\n\nconst StyledTableContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n theme,\n view,\n isFullscreen\n}) => {\n let colIdToFillRemainingSpace;\n let isAggregationApplied = false;\n\n (view.columns ?? [])\n .filter(c => !c.hidden)\n .forEach(c => {\n if (!colIdToFillRemainingSpace && c.field.fillAvailableSpace) {\n colIdToFillRemainingSpace = c.field.id;\n }\n if (c.aggregated) {\n isAggregationApplied = true;\n }\n });\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n const showFreezeLine =\n view.state.responsive?.sm &&\n !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);\n const selectedRowColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n );\n const lightGreyColor = theme.base.colors.gray['extra-light'];\n const freezeLineShadowTransparent = transparentize(\n 0.9,\n theme.components.table.header['foreground-color']\n );\n const oddRowBackgroundColor =\n getLuminance(theme.components.table.body['secondary-background-color']) > 0.5\n ? theme.components.table.body['secondary-background-color']\n : mix(\n 0.75,\n theme.components.table.body['background-color'],\n theme.components.table.body['secondary-background-color']\n );\n\n const headerForegroundContrast = meetsContrastGuidelines(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n ).AA;\n const usableHeaderForeground = headerForegroundContrast\n ? theme.components.table.header['foreground-color']\n : readableColor(\n theme.components.table.header['foreground-color'],\n theme.components.table.header['background-color']\n );\n const oddRowContrast = meetsContrastGuidelines(\n theme.components.table.body['foreground-color'],\n oddRowBackgroundColor\n ).AA;\n const useableOddRowForeground = oddRowContrast\n ? theme.components.table.body['foreground-color']\n : readableColor(theme.components.table.body['foreground-color'], oddRowBackgroundColor);\n\n return css`\n --primary-background: ${theme.base.palette['primary-background']};\n --secondary-background: ${theme.components.table.header['background-color']};\n --forground-color: ${theme.base.palette['foreground-color']};\n --interactive: ${theme.base.palette.interactive};\n --medium-blue: ${theme.base.colors.blue.medium};\n --border-color: ${theme.base.palette['border-line']};\n --border-color-freeze: #a5a5a5;\n --border-width: 0.062rem;\n --border-style: var(--border-width) solid var(--border-color);\n --font-stretch: ${theme.components.table.typography['font-stretch']};\n --letter-spacing: ${theme.components.table.typography['letter-spacing']};\n --cell-padding: ${theme.base.spacing};\n --cell-vertical-padding: calc(${theme.base.spacing} * 0.5);\n --header-cell-padding: 0 0.44rem 0 var(--cell-padding);\n --header-bg-color: var(--secondary-background);\n --header-fg-color: ${usableHeaderForeground};\n --default-group-header-height: 1.5rem;\n --group-header-height: var(--default-group-header-height);\n --box-sizing: content-box;\n --animation-ease: ${theme.base.animation.timing.ease};\n --font-weight-semi-bold: ${theme.base['font-weight']['semi-bold']};\n --row-height-multiplier: 1.125;\n --cell-fixed-position: sticky;\n position: relative;\n ${() => generateRSHeightStyles({ view, isFullscreen })}\n\n .small-screen-table {\n --cell-fixed-position: static;\n }\n\n .container {\n ${() => generateRSDataContainerHeightStyles()};\n border: var(--border-style);\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n position: relative;\n letter-spacing: var(--letter-spacing);\n font-stretch: var(--font-stretch);\n ${StyledTabPanel} & ${StyledProgressBackdrop} {\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n }\n\n .hide-rows-till-ready .row[aria-rowindex] {\n visibility: hidden;\n }\n\n .table-drag-proxy {\n background: rgba(0, 0, 0, 0.21);\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .table-drag-line {\n background: #999999;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0.12rem;\n z-index: 6;\n pointer-events: none;\n display: none;\n }\n\n .cell-fixed {\n z-index: 1;\n }\n\n .group-wrapper {\n overflow: hidden;\n display: inline-flex;\n line-height: var(--group-header-height);\n\n .group-context-count {\n display: inline-flex;\n overflow: hidden;\n }\n }\n\n /* In review mode(Ex: Tabs) cosmos components are rendered and mark up is not compatible with\n group-wrapper cell. Overridden css in group-header when dl exists inside that class which indicates\n mark up is generated from cosmos which differentiates from normal table cell markup */\n .group-wrapper .group-context-count dl {\n grid-template-columns: auto;\n }\n\n .fallback,\n .fallback-footer {\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n position: absolute;\n width: 100%;\n z-index: -1;\n box-sizing: var(--box-sizing);\n }\n\n .fallback {\n /* stylelint-disable unit-allowed-list */\n top: -1px;\n border-bottom: var(--border-style);\n }\n\n .fallback-footer {\n top: 0;\n border-top: var(--border-style);\n }\n\n .sticky-header {\n display: grid;\n position: sticky;\n top: 0;\n z-index: 6;\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n .cell {\n /* preventing cell from shrinking during autosize calculations */\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n .icons-ph {\n /* Maintaining action button aspect ratio of 1:1 with 24*24px width and height */\n min-width: 1.5rem;\n }\n\n &.custom-item {\n width: 10em;\n }\n }\n\n .cell:focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n outline: none;\n }\n\n .row {\n display: inline-flex;\n height: var(--row-height);\n outline: none 0;\n transition: transform 0.5s var(--animation-ease);\n box-sizing: var(--box-sizing);\n position: relative;\n\n > .row-select-handle {\n display: flex;\n justify-content: center;\n &:active {\n outline: none;\n }\n\n > .header-lable-container {\n min-width: 20px;\n }\n /* stylelint-disable selector-max-class */\n &.cell-fixed > .cell-content {\n flex-grow: unset;\n }\n }\n\n > .cell,\n .group-header-aggregation-row > .cell {\n transition: transform 0.5s var(--animation-ease);\n border-right: var(--border-style);\n position: relative;\n ${!theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n display: flex;\n align-items: center;\n\n &::after {\n opacity: 1;\n transition: opacity 0.1s var(--animation-ease);\n }\n\n .row-action-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.cell-action {\n position: sticky;\n z-index: 4;\n right: 0;\n border-right: 0;\n justify-content: center;\n border-left: var(--border-style);\n\n /* The below styles are needed to avoid ellipses in safari when no text is present\n and to hide the 'Actions' label */\n\n /* stylelint-disable max-nesting-depth */\n\n div.header-label {\n text-overflow: unset;\n }\n }\n &.aggregateCell {\n background-color: var(--header-bg-color);\n }\n }\n\n /** Adds bottom border to the last row of a group, when striped-rows are enabled */\n &:has(+ .group-header-row) > .cell {\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n &.header > .cell {\n border-bottom: var(--border-style);\n }\n .group-header-aggregation-row {\n > .cell {\n &.cell-action {\n overflow: initial;\n\n /* extending border on the top left of row action cell as we need to show border for at the end group label value when row actions are present */\n &::before {\n content: '';\n position: absolute;\n inline-size: 0;\n inset-inline-start: calc(var(--border-width) * -1);\n inset-block-start: calc(var(--group-header-height) * -1);\n block-size: var(--group-header-height);\n border-inline-start: var(--border-style);\n }\n }\n }\n }\n\n > .cell-action {\n background-color: var(--primary-background);\n }\n\n > .row-reorder-handle {\n padding: 0;\n border-right: 0 !important;\n justify-content: center;\n cursor: move;\n }\n\n .aggregateCell.cell {\n border-right: none;\n }\n\n > .cell.cell-fixed,\n .group-header-aggregation-row > .cell-fixed {\n position: var(--cell-fixed-position);\n z-index: 4;\n\n ${showFreezeLine &&\n css`\n &.cell-last-frozen {\n border-right: solid 1px var(--border-color-freeze);\n filter: drop-shadow(\n calc(${theme.base.spacing} * 0.25) 0 0 ${freezeLineShadowTransparent}\n );\n transition: 0.5s;\n }\n `}\n\n /* As the row select column and row dragDrop column always have to be frozen */\n &[data-col-id='RowSelect'],\n &[data-col-id='RowDragDrop'],\n &[data-col-id='RowError'] {\n position: sticky;\n flex-shrink: 0;\n z-index: 5;\n }\n }\n\n > .cell.cell-fixed:focus-within,\n .group-header-aggregation-row > .cell-fixed {\n z-index: 6;\n }\n\n &.click {\n cursor: pointer;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n > .cell {\n &:first-child {\n border-end-start-radius: inherit;\n }\n\n &:last-child {\n border-end-end-radius: inherit;\n }\n\n ${theme.components.table['striped-rows'] &&\n css`\n border-bottom: var(--border-style);\n `}\n }\n }\n }\n .row:not(.row-error):not(.group-header-row):not(.header) {\n .cell-fixed {\n background: var(--primary-background);\n }\n .cell-fixed.aggregateCell {\n background: var(--header-bg-color);\n }\n }\n ${theme.components.table['striped-rows'] &&\n css`\n /* Targets rows with an odd data-index attribute, excluding group header rows */\n .row[data-index$='1']:not(.group-header-row):not(.header),\n .row[data-index$='3']:not(.group-header-row):not(.header),\n .row[data-index$='5']:not(.group-header-row):not(.header),\n .row[data-index$='7']:not(.group-header-row):not(.header),\n .row[data-index$='9']:not(.group-header-row):not(.header) {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n .cell-fixed {\n background: ${oddRowBackgroundColor};\n color: ${useableOddRowForeground};\n }\n > .cell-action {\n background: ${oddRowBackgroundColor};\n }\n }\n .row[data-index$='0']:not(.group-header-row):not(.header),\n .row[data-index$='2']:not(.group-header-row):not(.header),\n .row[data-index$='4']:not(.group-header-row):not(.header),\n .row[data-index$='6']:not(.group-header-row):not(.header),\n .row[data-index$='8']:not(.group-header-row):not(.header) {\n background: var(--primary-background);\n .cell-fixed {\n background: var(--primary-background);\n }\n > .cell-action {\n background: var(--primary-background);\n }\n }\n `}\n\n .row-error {\n background: ${mix(\n 0.1,\n theme.components['form-field'].error['status-color'],\n theme.base.palette['primary-background']\n )};\n\n /* stylelint-disable no-descending-specificity */\n .cell-fixed,\n .cell-action {\n background: inherit;\n }\n\n > .cell:not(.cell-fixed):not(.cell-action) {\n background: none;\n }\n }\n\n .sort-info-container {\n .sort-sequence {\n font-size: 0.625rem;\n color: ${theme.base.colors.gray['extra-dark']};\n }\n }\n\n .filter-info-container {\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: 14px;\n height: 14px;\n }\n }\n\n .cell.row-error-column {\n padding: 0;\n border-right: 0;\n text-align: right;\n outline: none;\n\n /* Focus handling will be done as part of interation 2: EPIC-88751 */\n\n svg {\n color: ${theme.base.colors.red.medium};\n }\n }\n\n .cell-right-align .filter-info-container svg {\n margin: 0 0.312rem 0 0;\n }\n\n &.show-expand-collapse-all {\n .row > .cell-first {\n padding-left: calc(var(--expand-collapse-all-width) + var(--cell-padding) + 0.25rem);\n &.row-reorder-handle,\n &.row-error-column {\n padding: 0;\n }\n &.row-select-handle {\n padding-inline-start: var(--expand-collapse-all-width);\n }\n }\n\n .row-container .row > .cell-first {\n &.row-select-handle {\n /* Offset padding of 0.5rem added to SelectAllCheckbox in grouped views(getting pushed by margin),\n ensuring row select checkboxes align vertically in header and data rows */\n padding-inline-start: calc(\n var(--expand-collapse-all-width) - var(--cell-padding) + 0.5rem\n );\n }\n }\n\n /* stylelint-enable selector-max-class */\n .expand-collapse-all {\n position: absolute;\n width: var(--expand-collapse-all-width);\n z-index: 10;\n height: var(--row-height);\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n border-right: var(--border-style);\n border-bottom: var(--border-style);\n border-start-start-radius: ${theme.base['border-radius']};\n padding-inline-start: 0.125rem;\n margin-inline-start: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: -0.25rem;\n width: 0.25rem;\n height: 100%;\n background-color: var(--header-bg-color);\n z-index: 12;\n }\n\n > button {\n color: var(--forground-color);\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n .no-border-right {\n border-right: 0;\n }\n }\n\n /* stylelint-disable selector-max-class */\n\n .scroll-end {\n &.row-container > .row:last-child {\n & > .cell,\n & .group-header-aggregation-row > .cell {\n border-bottom: 0;\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n .header {\n font-weight: var(--font-weight-semi-bold);\n position: relative; /* This is required to position .border-fix element */\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n\n > .cell.row-error-column {\n border-right: 0;\n }\n > .cell {\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 2;\n position: relative;\n cursor: pointer;\n background-color: var(--header-bg-color);\n color: var(--header-fg-color);\n font-weight: ${theme.base['font-weight'].bold};\n font-size: ${fontSize.xxs};\n border-right: var(--border-style);\n padding: var(--header-cell-padding);\n\n &:first-child {\n border-start-start-radius: inherit;\n }\n\n &:last-child {\n border-start-end-radius: inherit;\n }\n\n .header-lable-container {\n display: inline-flex;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${fontSize.xs};\n font-weight: var(--font-weight-semi-bold);\n align-items: center;\n gap: 0.125rem;\n }\n\n .header-label {\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* To avoid browser tooltip when we get ellipsis in safari */\n &::after {\n content: '';\n display: block;\n }\n\n /* To utilize smart tooltip making it as a non-box element */\n /* stylelint-disable selector-max-class */\n .cell-content {\n display: contents;\n }\n }\n }\n\n > .row-reorder-handle {\n padding: 0;\n }\n\n > .row-select-handle {\n /* Nullifying padding applied from .header > .cell */\n padding: 0;\n justify-content: center;\n }\n .row {\n border-bottom: none;\n }\n }\n\n /* 4 selectors required as aggregateCell of only footer need this effect */\n\n .pContainer:not(.pContainerScroll) .footer .aggregateCell.cell {\n border-bottom: none;\n }\n\n .row .cell.cell-last {\n border-right: 0;\n }\n\n ${!colIdToFillRemainingSpace\n ? css`\n .row .cell.cell-last {\n flex-grow: 1;\n }\n `\n : css`\n .row .cell[data-col-id='${colIdToFillRemainingSpace}'] {\n flex-grow: 1;\n }\n `}\n\n /* Disable the flex layout size changes when measuring for content based size to get correct width */\n\n [data-content-size-measuring] & .row .cell {\n flex-grow: 0 !important;\n }\n\n .row-container {\n --data-row-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding)\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--data-row-height)'};\n &:not(.wrap-content-height) > .row:not(.group-header-row) {\n height: var(--data-row-height);\n }\n\n & > .row:not(.group-header-row) {\n min-width: 100%;\n }\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n\n & > .row .cell-content {\n /*\n * Using box sizing content-box so that the padding is not considered for the alignment of the cell content.\n * Vertical alignment is done using flex and max-height below even though the .cell-content might overflow due to padding + content size.\n */\n box-sizing: content-box;\n flex-grow: 1;\n\n /* Adding padding on .cell-content so that focus rings can appear properly and doesn't clip due to overflow: hidden */\n padding: var(--cell-vertical-padding) var(--cell-padding);\n\n /* setting max-height so that the elements with more height like RTL, align with the row density height */\n max-height: var(--data-row-height);\n\n /* hiding scroll bar in case the cell render introduces scrollbar based on its implementation */\n & * {\n scrollbar-width: none;\n }\n\n /* in case of combine columns, removing padding from parent cell-content as children already have the padding */\n &:has(.combined-cell) {\n padding: 0;\n\n .cell-content {\n flex-grow: unset;\n }\n }\n }\n\n & > .row .cell:not(.column-type-action) .cell-content {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: break-all;\n }\n }\n\n .row .aggregateCell .cell-content {\n line-height: initial;\n padding: 0;\n }\n\n .short-height,\n .medium-height {\n ${StyledStatus} {\n white-space: nowrap;\n }\n }\n\n .short-height {\n ${StyledRadioCheck} ${StyledLabel} {\n min-height: auto;\n }\n }\n\n .medium-height {\n --row-height-multiplier: 4 / 3;\n }\n\n .tall-height {\n --row-height-multiplier: calc(4 / 3 + 0.5);\n > .row:not(.group-header-row) {\n > .cell {\n display: inline-grid;\n align-items: start;\n white-space: normal;\n word-break: break-all;\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .wrap-content-height {\n --row-height-multiplier: 4 / 3;\n --row-min-height: calc(\n var(--hit-area) * var(--row-height-multiplier) + var(--cell-vertical-padding) * 2\n );\n --group-header-height: ${isAggregationApplied\n ? 'var(--default-group-header-height)'\n : 'var(--row-min-height)'};\n\n > .row:not(.group-header-row) {\n height: auto;\n min-height: var(--row-min-height);\n > .cell {\n white-space: normal;\n\n /* -- For BUG-625508 -- */\n word-break: break-word;\n display: inline-grid;\n align-items: start;\n padding-top: var(--cell-vertical-padding);\n padding-bottom: var(--cell-vertical-padding);\n grid-auto-flow: column;\n\n :has(> ${CellIcon}) {\n /* Adds spacing between children when icons are rendered alongside cell content in the cell container. */\n justify-content: space-between;\n }\n\n /* stylelint-disable-next-line selector-max-compound-selectors */\n > .cell-content > .combined-cell > .combined-cell-content,\n > .cell-content {\n /* for full-content, the row cells should adjust according to content */\n max-height: none;\n white-space: inherit;\n word-break: inherit;\n }\n\n ${CellIcon} {\n margin-block-start: 0.375rem;\n }\n }\n }\n }\n\n .footer {\n .row {\n .cell {\n padding: 0;\n }\n }\n }\n\n /* stylelint-disable no-duplicate-selectors */\n .row-container {\n position: absolute;\n display: grid;\n width: 100%;\n font-size: ${fontSize.s};\n\n > .group-header-row,\n .hierarchical-group-footer-row {\n height: var(--group-header-height);\n .cell {\n padding: 0;\n border-right-width: 0;\n }\n }\n\n > .hierarchical-group-header-row {\n height: var(--group-header-height);\n }\n input.checkbox-on-hover + label {\n opacity: 0;\n }\n input.checkbox-on-hover:checked + label {\n opacity: 1;\n }\n .row.selected-row {\n background-color: ${selectedRowColor};\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${selectedRowColor};\n }\n }\n .row-on-hover:hover {\n background-color: ${lightGreyColor};\n input.checkbox-on-hover + label {\n opacity: 1;\n }\n\n > .cell,\n .cell-fixed,\n .cell-action {\n background-color: ${lightGreyColor};\n }\n }\n .row.hierarchical-group-footer-row {\n .cell-fixed {\n background: ${lightGreyColor};\n }\n }\n }\n\n /* stylelint-enable selector-max-class */\n\n .toolbar-button-applied {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .toolbar-button {\n padding: 0 8px;\n margin: 0 calc(${theme.base.spacing} / 4);\n }\n\n .column-resizer {\n cursor: col-resize;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 3;\n width: 0.25rem;\n height: 100%;\n }\n\n .column-resizer:hover,\n .column-resizer:active {\n background: var(--interactive);\n }\n\n .align-right {\n justify-content: right;\n\n .cell-content {\n text-align: right;\n }\n }\n\n .align-left {\n justify-content: left;\n\n .cell-content {\n text-align: left;\n }\n }\n\n .align-center {\n justify-content: center;\n\n .cell-content {\n text-align: center;\n }\n }\n\n .popper {\n div.row {\n display: flex;\n vertical-align: middle;\n line-height: unset;\n border-bottom: none;\n outline: none 0;\n height: auto;\n }\n }\n `;\n});\n\nexport default StyledTableContainer;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/lists-react",
|
|
3
|
-
"version": "9.0.0-build.18.
|
|
3
|
+
"version": "9.0.0-build.18.4",
|
|
4
4
|
"description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-condition-builder": "9.0.0-build.18.
|
|
18
|
-
"@pega/cosmos-react-core": "9.0.0-build.18.
|
|
19
|
-
"@pega/cosmos-react-rte": "9.0.0-build.18.
|
|
17
|
+
"@pega/cosmos-react-condition-builder": "9.0.0-build.18.4",
|
|
18
|
+
"@pega/cosmos-react-core": "9.0.0-build.18.4",
|
|
19
|
+
"@pega/cosmos-react-rte": "9.0.0-build.18.4",
|
|
20
20
|
"@types/lodash-es": "^4.17.12",
|
|
21
21
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
22
22
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"dayjs": "^1.11.13",
|
|
25
25
|
"fast-deep-equal": "^3.1.3",
|
|
26
26
|
"lodash-es": "^4.17.23",
|
|
27
|
-
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.18.
|
|
28
|
-
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.18.
|
|
27
|
+
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.18.4",
|
|
28
|
+
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.18.4",
|
|
29
29
|
"polished": "^4.1.0",
|
|
30
30
|
"prop-types": "^15.8.1",
|
|
31
31
|
"react": "^17.0.0 || ^18.0.0",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@testing-library/react": "^16.0.0",
|
|
45
45
|
"@testing-library/user-event": "^14.6.1",
|
|
46
46
|
"jest-axe": "^8.0.0",
|
|
47
|
-
"srs-utils": "9.0.0-build.18.
|
|
47
|
+
"srs-utils": "9.0.0-build.18.4",
|
|
48
48
|
"typescript": "~5.9.3"
|
|
49
49
|
}
|
|
50
50
|
}
|