@pega/lists-react 9.0.0-build.29.2 → 9.0.0-build.29.21
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/DefaultComponents/CellRenderers/RowActionMenu.d.ts.map +1 -1
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowActionMenu.js +33 -5
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowActionMenu.js.map +1 -1
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowDeleteAction.d.ts +10 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowDeleteAction.d.ts.map +1 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowDeleteAction.js +27 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/RowDeleteAction.js.map +1 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/index.d.ts +2 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/index.d.ts.map +1 -1
- package/lib/Core/Components/DefaultComponents/CellRenderers/index.js +2 -0
- package/lib/Core/Components/DefaultComponents/CellRenderers/index.js.map +1 -1
- package/lib/Core/Components/DefaultComponents/index.d.ts +1 -0
- package/lib/Core/Components/DefaultComponents/index.d.ts.map +1 -1
- package/lib/Core/Components/Toolbar/ColumnSelector.d.ts.map +1 -1
- package/lib/Core/Components/Toolbar/ColumnSelector.js +3 -2
- package/lib/Core/Components/Toolbar/ColumnSelector.js.map +1 -1
- package/lib/Core/Components/Toolbar/hooks/useMore.d.ts.map +1 -1
- package/lib/Core/Components/Toolbar/hooks/useMore.js +26 -9
- package/lib/Core/Components/Toolbar/hooks/useMore.js.map +1 -1
- package/lib/Core/Hooks/useDragDrop.d.ts.map +1 -1
- package/lib/Core/Hooks/useDragDrop.js +7 -7
- package/lib/Core/Hooks/useDragDrop.js.map +1 -1
- package/lib/Core/Hooks/useRepeat.d.ts.map +1 -1
- package/lib/Core/Hooks/useRepeat.js +28 -3
- package/lib/Core/Hooks/useRepeat.js.map +1 -1
- package/lib/Core/Localization/defaultTranslations.d.ts +1 -0
- package/lib/Core/Localization/defaultTranslations.d.ts.map +1 -1
- package/lib/Core/Localization/defaultTranslations.js +2 -1
- package/lib/Core/Localization/defaultTranslations.js.map +1 -1
- package/lib/Core/Utils/index.d.ts +15 -0
- package/lib/Core/Utils/index.d.ts.map +1 -1
- package/lib/Core/Utils/index.js +20 -0
- package/lib/Core/Utils/index.js.map +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCard.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCard.js +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCard.js.map +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js +1 -1
- package/lib/Core/Views/Gallery/Components/GalleryCheckboxCard.js.map +1 -1
- package/lib/Core/Views/Gallery/GalleryA11y.d.ts +7 -5
- package/lib/Core/Views/Gallery/GalleryA11y.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/GalleryA11y.js +9 -52
- package/lib/Core/Views/Gallery/GalleryA11y.js.map +1 -1
- package/lib/Core/Views/Gallery/index.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/index.js +23 -3
- package/lib/Core/Views/Gallery/index.js.map +1 -1
- package/lib/Core/Views/Table/Body.d.ts.map +1 -1
- package/lib/Core/Views/Table/Body.js +5 -2
- package/lib/Core/Views/Table/Body.js.map +1 -1
- package/lib/Core/Views/Table/TableA11y.d.ts.map +1 -1
- package/lib/Core/Views/Table/TableA11y.js +2 -1
- package/lib/Core/Views/Table/TableA11y.js.map +1 -1
- package/lib/Core/a11y/loadingAnnouncementBehavior.d.ts +12 -0
- package/lib/Core/a11y/loadingAnnouncementBehavior.d.ts.map +1 -0
- package/lib/Core/a11y/loadingAnnouncementBehavior.js +37 -0
- package/lib/Core/a11y/loadingAnnouncementBehavior.js.map +1 -0
- package/package.json +8 -8
|
@@ -1,59 +1,16 @@
|
|
|
1
1
|
import { BaseA11y } from 'pega-repeating-structures-core';
|
|
2
|
-
|
|
3
|
-
if (!element)
|
|
4
|
-
return;
|
|
5
|
-
element.tabIndex = 0;
|
|
6
|
-
element.focus();
|
|
7
|
-
}
|
|
2
|
+
import createLoadingAnnouncementBehavior from '../../a11y/loadingAnnouncementBehavior';
|
|
8
3
|
class GalleryA11y extends BaseA11y {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const colItem = element.closest(this.selectors.focusElementSelector);
|
|
14
|
-
if (!colItem)
|
|
15
|
-
return false;
|
|
16
|
-
return element.matches(this.focusableSelectors.join(','));
|
|
4
|
+
#loadingAnnouncement;
|
|
5
|
+
constructor(selectors, focusableSelectors, container, announceAssertive, announcePolite, translate) {
|
|
6
|
+
super(selectors, focusableSelectors, {}, container);
|
|
7
|
+
this.#loadingAnnouncement = createLoadingAnnouncementBehavior(selectors, container, announceAssertive, announcePolite, translate);
|
|
17
8
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
if (this.stopEventHandler(event)) {
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
let nextItem;
|
|
24
|
-
const sortedColumns = this.getSortedColumns(currentCol.closest(this.selectors.parentElementSelector));
|
|
25
|
-
if (keyCode === this.keys.UP || keyCode === this.keys.LEFT) {
|
|
26
|
-
nextItem = sortedColumns[sortedColumns.indexOf(currentCol) - 1];
|
|
27
|
-
}
|
|
28
|
-
else if (keyCode === this.keys.RIGHT || keyCode === this.keys.DOWN) {
|
|
29
|
-
nextItem = sortedColumns[sortedColumns.indexOf(currentCol) + 1];
|
|
30
|
-
}
|
|
31
|
-
else if (keyCode === this.keys.TAB) {
|
|
32
|
-
this.containerTabHandler(event, currentCol, shiftKey);
|
|
33
|
-
}
|
|
34
|
-
if (nextItem && currentCol) {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
const focusableElements = this.getFocusableElementsInCell(nextItem);
|
|
37
|
-
currentCol.tabIndex = -1;
|
|
38
|
-
if (focusableElements.length === 1) {
|
|
39
|
-
gainFocus(focusableElements[0]);
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
gainFocus(nextItem);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
9
|
+
onFocusHandler(event) {
|
|
10
|
+
this.#loadingAnnouncement.onFocus(event);
|
|
45
11
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot))
|
|
49
|
-
return;
|
|
50
|
-
const currentCol = rootNode.activeElement?.closest(this.selectors.focusElementSelector);
|
|
51
|
-
if (rootNode.activeElement instanceof HTMLElement &&
|
|
52
|
-
currentCol instanceof HTMLElement &&
|
|
53
|
-
(currentCol === rootNode.activeElement ||
|
|
54
|
-
this.doesCardContainFocusableElement(rootNode.activeElement))) {
|
|
55
|
-
this.galleryContainerEventHandlers(event, currentCol);
|
|
56
|
-
}
|
|
12
|
+
itemsLoadedCallback() {
|
|
13
|
+
this.#loadingAnnouncement.onItemsLoaded();
|
|
57
14
|
}
|
|
58
15
|
}
|
|
59
16
|
export default GalleryA11y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryA11y.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"GalleryA11y.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG1D,OAAO,iCAAiC,MAAM,wCAAwC,CAAC;AASvF,MAAM,WAAY,SAAQ,QAAQ;IAChC,oBAAoB,CAAuD;IAE3E,YACE,SAAoB,EACpB,kBAA4B,EAC5B,SAAsB,EACtB,iBAAiC,EACjC,cAA8B,EAC9B,SAAkC;QAElC,KAAK,CAAC,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC;QACpD,IAAI,CAAC,oBAAoB,GAAG,iCAAiC,CAC3D,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,SAAS,CACV,CAAC;IACJ,CAAC;IAEQ,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,CAAC,aAAa,EAAE,CAAC;IAC5C,CAAC;CACF;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { BaseA11y } from 'pega-repeating-structures-core';\nimport type { useLiveLog } from '@pega/cosmos-react-core';\n\nimport createLoadingAnnouncementBehavior from '../../a11y/loadingAnnouncementBehavior';\n\nexport type Selectors = {\n focusElementSelector: string;\n belowLoader: string;\n};\n\ntype AnnounceMethod = ReturnType<typeof useLiveLog>['announceAssertive'];\n\nclass GalleryA11y extends BaseA11y {\n #loadingAnnouncement: ReturnType<typeof createLoadingAnnouncementBehavior>;\n\n constructor(\n selectors: Selectors,\n focusableSelectors: string[],\n container: HTMLElement,\n announceAssertive: AnnounceMethod,\n announcePolite: AnnounceMethod,\n translate: (key: string) => string\n ) {\n super(selectors, focusableSelectors, {}, container);\n this.#loadingAnnouncement = createLoadingAnnouncementBehavior(\n selectors,\n container,\n announceAssertive,\n announcePolite,\n translate\n );\n }\n\n override onFocusHandler(event?: Event) {\n this.#loadingAnnouncement.onFocus(event);\n }\n\n itemsLoadedCallback() {\n this.#loadingAnnouncement.onItemsLoaded();\n }\n}\n\nexport default GalleryA11y;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAkB7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CA0GpD;kBA1GQ,OAAO;;;AA8GhB,eAAe,OAAO,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
2
|
+
import { useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import { FieldType } from 'pega-repeating-structures-core';
|
|
4
|
-
import { useFullscreenContext } from '@pega/cosmos-react-core';
|
|
4
|
+
import { useLiveLog, useFullscreenContext } from '@pega/cosmos-react-core';
|
|
5
5
|
import { rowSelectColumnMeta } from 'pega-repeating-structures-core';
|
|
6
|
+
import useTranslate from '../../Hooks/useTranslate';
|
|
6
7
|
import Virtualiser from '../Table/VirtualizeWrapper';
|
|
7
8
|
import Toolbar from '../../Components/Toolbar';
|
|
8
9
|
import RenderView from '../../Components/RenderingEngine/RenderView';
|
|
@@ -13,9 +14,28 @@ import WarningBanner from '../../Components/WarningBanner';
|
|
|
13
14
|
import GalleryCard from './Components/GalleryCard';
|
|
14
15
|
import GalleryCheckboxCard from './Components/GalleryCheckboxCard';
|
|
15
16
|
import GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';
|
|
17
|
+
import GalleryA11y from './GalleryA11y';
|
|
16
18
|
function Gallery({ view }) {
|
|
17
19
|
const layoutType = view.galleryLayout;
|
|
18
20
|
const isFullscreen = !!useFullscreenContext()?.[0];
|
|
21
|
+
const containerRef = useRef(null);
|
|
22
|
+
const { announceAssertive, announcePolite } = useLiveLog();
|
|
23
|
+
const [translate] = useTranslate();
|
|
24
|
+
const a11yRef = useRef(null);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (containerRef.current) {
|
|
27
|
+
a11yRef.current = new GalleryA11y({
|
|
28
|
+
focusElementSelector: '[data-gallery-card]',
|
|
29
|
+
belowLoader: '.below-loader'
|
|
30
|
+
}, [], containerRef.current, announceAssertive, announcePolite, translate);
|
|
31
|
+
}
|
|
32
|
+
return () => {
|
|
33
|
+
a11yRef.current = null;
|
|
34
|
+
};
|
|
35
|
+
}, [announceAssertive, announcePolite, translate]);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
a11yRef.current?.itemsLoadedCallback();
|
|
38
|
+
});
|
|
19
39
|
const isCardList = layoutType === 'cardlist';
|
|
20
40
|
const { columns = [], meta, rows } = view;
|
|
21
41
|
const { galleryConfig: { heroImage, tile: tileConfig, header } = {}, selectionMode } = meta;
|
|
@@ -26,7 +46,7 @@ function Gallery({ view }) {
|
|
|
26
46
|
cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));
|
|
27
47
|
return cols;
|
|
28
48
|
}, [columns]);
|
|
29
|
-
return (_jsx(RsCardWrapper, { children: _jsxs(GalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, image: heroImage, isStackLayout: isCardList, tile: tileConfig, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
|
|
49
|
+
return (_jsx(RsCardWrapper, { children: _jsxs(GalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, image: heroImage, isStackLayout: isCardList, tile: tileConfig, children: [_jsx(WarningBanner, { warningMessages: view.warningMessages }), _jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { ref: containerRef, className: 'container', onFocusCapture: e => a11yRef.current?.onFocusHandler(e.nativeEvent), children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
|
|
30
50
|
? rows.map(row => selectionMode === SELECTION_MODES.multi && selectionColumn ? (_jsx(GalleryCheckboxCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn, selectionColumn: selectionColumn }, row.reactKey)) : (_jsx(GalleryCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn }, row.reactKey)))
|
|
31
51
|
: [] }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
|
|
32
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useLiveLog, useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport WarningBanner from '../../Components/WarningBanner';\n\nimport GalleryCard from './Components/GalleryCard';\nimport GalleryCheckboxCard from './Components/GalleryCheckboxCard';\nimport GalleryContainer, { StyledVirtualizeContainer } from './GalleryContainer';\nimport GalleryA11y from './GalleryA11y';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n const layoutType = view.galleryLayout;\n const isFullscreen = !!useFullscreenContext()?.[0];\n const containerRef = useRef<HTMLDivElement>(null);\n const { announceAssertive, announcePolite } = useLiveLog();\n const [translate] = useTranslate();\n const a11yRef = useRef<GalleryA11y | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n a11yRef.current = new GalleryA11y(\n {\n focusElementSelector: '[data-gallery-card]',\n belowLoader: '.below-loader'\n },\n [],\n containerRef.current,\n announceAssertive,\n announcePolite,\n translate\n );\n }\n return () => {\n a11yRef.current = null;\n };\n }, [announceAssertive, announcePolite, translate]);\n\n useEffect(() => {\n a11yRef.current?.itemsLoadedCallback();\n });\n const isCardList = layoutType === 'cardlist';\n\n const { columns = [], meta, rows } = view;\n const { galleryConfig: { heroImage, tile: tileConfig, header } = {}, selectionMode } = meta;\n\n const headerColumn = useMemo(\n () => (header?.field ? columns.find(col => col.field.id === header.field) : undefined),\n [header, columns]\n );\n\n const selectionColumn = useMemo(\n () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n [columns]\n );\n\n const visibleColumns = useMemo(() => {\n const cols = [...columns].filter(\n col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE\n );\n cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));\n return cols;\n }, [columns]);\n\n return (\n <RsCardWrapper>\n <GalleryContainer\n data-test-id='gallery'\n data-testid='gallery'\n view={view}\n isFullscreen={isFullscreen}\n image={heroImage}\n isStackLayout={isCardList}\n tile={tileConfig}\n >\n <WarningBanner warningMessages={view.warningMessages} />\n <Toolbar view={view} />\n <RenderView view={view} type={EXTERNAL_FILTERS} />\n <StyledVirtualizeContainer\n ref={containerRef}\n className='container'\n onFocusCapture={e => a11yRef.current?.onFocusHandler(e.nativeEvent)}\n >\n <Virtualiser\n id='rootVirtualiser'\n rowContainerClass='grid-container'\n view={view}\n bufferMultiplier={0.8}\n >\n {rows?.length\n ? rows.map(row =>\n selectionMode === SELECTION_MODES.multi && selectionColumn ? (\n <GalleryCheckboxCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n selectionColumn={selectionColumn}\n />\n ) : (\n <GalleryCard\n key={row.reactKey}\n meta={meta}\n row={row}\n visibleColumns={visibleColumns}\n headerColumn={headerColumn}\n />\n )\n )\n : []}\n </Virtualiser>\n <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n </StyledVirtualizeContainer>\n </GalleryContainer>\n </RsCardWrapper>\n );\n}\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Body.jsx"],"names":[],"mappings":";AAYA;;;;
|
|
1
|
+
{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Body.jsx"],"names":[],"mappings":";AAYA;;;;4CA6DC;;;;;;;;;;;;;;;;sBAzEqB,YAAY"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { Fragment, useRef, useEffect } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { supplementalColors, useTheme } from '@pega/cosmos-react-core';
|
|
5
5
|
import GroupHeader from '../../Components/GroupRenderer';
|
|
6
6
|
import { HierarchicalGroupHeader, resetCounter } from '../../Components/HierarchicalGroupRenderer';
|
|
7
7
|
import HierarchicalGroupFooters from '../../Components/HierarchicalGroupFooters';
|
|
8
8
|
import { keyFrom } from '../../Utils';
|
|
9
9
|
import Row from './Row';
|
|
10
10
|
function Body({ groupHeaders, columns, hierarchicalGroupEnabled }) {
|
|
11
|
+
const theme = useTheme();
|
|
12
|
+
const supplementalColorsList = supplementalColors(theme);
|
|
11
13
|
const hierarchicalInfo = useRef({
|
|
12
14
|
prevLevel: 0,
|
|
13
15
|
parentGroupFooters: {}
|
|
@@ -32,7 +34,8 @@ function Body({ groupHeaders, columns, hierarchicalGroupEnabled }) {
|
|
|
32
34
|
if (header.level === 0) {
|
|
33
35
|
numParentGroups += 1;
|
|
34
36
|
}
|
|
35
|
-
header.colorIndicator =
|
|
37
|
+
header.colorIndicator =
|
|
38
|
+
supplementalColorsList[numParentGroups % supplementalColorsList.length];
|
|
36
39
|
return (_jsxs(Fragment, { children: [header.isHierarchical ? (_jsx(HierarchicalGroupHeader, { groupHeader: header, columns: columns })) : (_jsx(GroupHeader, { groupHeader: header, columns: columns })), dataMap, header.isHierarchical ? (_jsx(HierarchicalGroupFooters, { groupHeaders: groupHeaders, columns: columns, headerIndex: idx, hierarchicalGroupInfoRef: hierarchicalInfo })) : null] }, groupHeaderKey));
|
|
37
40
|
}) }));
|
|
38
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Body.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Body.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { Fragment, useRef, useEffect } from 'react';\n\nimport { supplementalColors, useTheme } from '@pega/cosmos-react-core';\n\nimport GroupHeader from '../../Components/GroupRenderer';\nimport { HierarchicalGroupHeader, resetCounter } from '../../Components/HierarchicalGroupRenderer';\nimport HierarchicalGroupFooters from '../../Components/HierarchicalGroupFooters';\nimport { keyFrom } from '../../Utils';\n\nimport Row from './Row';\n\nfunction Body({ groupHeaders, columns, hierarchicalGroupEnabled }) {\n const theme = useTheme();\n const supplementalColorsList = supplementalColors(theme);\n\n const hierarchicalInfo = useRef({\n prevLevel: 0,\n parentGroupFooters: {}\n });\n\n useEffect(() => {\n // Reset counter which was used to calculate hierarchical group header z-index\n if (hierarchicalGroupEnabled) {\n resetCounter();\n }\n });\n\n let numParentGroups = -1;\n\n return (\n <>\n {groupHeaders &&\n groupHeaders.map((header, idx) => {\n let dataMap = null;\n const groupHeaderKey = keyFrom(...header.hierarchy);\n\n if (header.isLeafNode && header.isExpanded) {\n const rows = header.getRows();\n dataMap =\n rows &&\n rows.map(row => (\n <Row key={row.reactKey} row={row} columns={columns} level={header.level + 1} />\n ));\n }\n\n if (header.level === 0) {\n numParentGroups += 1;\n }\n header.colorIndicator =\n supplementalColorsList[numParentGroups % supplementalColorsList.length];\n\n return (\n <Fragment key={groupHeaderKey}>\n {header.isHierarchical ? (\n <HierarchicalGroupHeader groupHeader={header} columns={columns} />\n ) : (\n <GroupHeader groupHeader={header} columns={columns} />\n )}\n {dataMap}\n {header.isHierarchical ? (\n <HierarchicalGroupFooters\n groupHeaders={groupHeaders}\n columns={columns}\n headerIndex={idx}\n hierarchicalGroupInfoRef={hierarchicalInfo}\n />\n ) : null}\n </Fragment>\n );\n })}\n </>\n );\n}\n\nBody.propTypes = {\n groupHeaders: PropTypes.arrayOf(PropTypes.any),\n columns: PropTypes.arrayOf(PropTypes.any),\n hierarchicalGroupEnabled: PropTypes.bool\n};\n\nBody.defaultProps = {\n groupHeaders: [],\n columns: [],\n hierarchicalGroupEnabled: false\n};\n\nexport default Body;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/TableA11y.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TableA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/TableA11y.js"],"names":[],"mappings":";AAgCA;IAkzBE;;;;;;OAMG;IACH,4BAJW,WAAW,GACT,OAAO,CAKnB;IA1zBD,gLAqBC;IATC,4BAAwB;IACxB,qBAA2B;IAC3B,oBAAqB;IACrB,4BAA+B;IAC/B,oBAAoC;IACpC,eAA0B;IAC1B,+BAAkC;IAClC,uBAA0B;IAC1B,uBAAkC;IAGpC,cAGC;IAED,sFAkBC;IAED,8CAEC;IAED,kCAIC;IAED,6EAkBC;IAGD,wEA8BC;IAGD,gFA+BC;IAGD,iFA4BC;IAED,gFAYC;IAGD,wDAkBC;IAED,qGAmCC;IAED,yFASC;IAED,8CAKC;IAED,6CAsCC;IAED,+CAWC;IAED,kCAQC;IAED,6EAcC;IAGD,2CAKC;IAED,4GAeC;IAED,2JAkCC;IAGD,sIAmCC;IAED,0CAIC;IAED,qCAwCC;IAED,wFAsBC;IAED,+BAWC;IAED,kCAkBC;IAED,sCAeC;IAED,6CAoBC;IAED,qCAkBC;IAGD,8BAwFC;IAmBD,qDAWC;IAED,+CAIC;IAwJD,4BA0DC;IAED,+BAEC;IAED,qCAcC;IAED,sEAqCC;IA2BD,gCA0BC;;CACF;yBAhkC4C,gCAAgC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
var _a;
|
|
2
|
+
import { isInstance } from '@pega/cosmos-react-core';
|
|
2
3
|
import { BaseA11y, rowErrorColumnMeta } from 'pega-repeating-structures-core';
|
|
3
4
|
const sortOrder = {
|
|
4
5
|
row: 'aria-rowindex',
|
|
@@ -850,7 +851,7 @@ class TableA11y extends BaseA11y {
|
|
|
850
851
|
// Update focus snapshot on every on focus event.
|
|
851
852
|
super.onFocusHandler();
|
|
852
853
|
const rootNode = this.container.getRootNode();
|
|
853
|
-
if (rootNode
|
|
854
|
+
if (isInstance(rootNode, Document, ShadowRoot)) {
|
|
854
855
|
const activeElement = rootNode.activeElement;
|
|
855
856
|
const currentCol = activeElement?.closest(this.selectors.focusElementSelector);
|
|
856
857
|
const currentRow = activeElement?.closest(this.selectors.parentElementSelector);
|