@pega/lists-react 9.0.0-build.29.15 → 9.0.0-build.29.17
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/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/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 +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAA,MAAM,WAAW,oFAAsD,gBAAgB,
|
|
1
|
+
{"version":3,"file":"GalleryCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAA,MAAM,WAAW,oFAAsD,gBAAgB,6CA2CrF,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -14,7 +14,7 @@ const GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }) => {
|
|
|
14
14
|
const fetchActionsCb = useRowActions({ row, meta });
|
|
15
15
|
const { onCardClick } = meta.galleryConfig ?? {};
|
|
16
16
|
const rowData = onCardClick ? row.getContext().getValue() : undefined;
|
|
17
|
-
return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, actions: fetchActionsCb, ...uiProps, footer: footer, ...(onCardClick &&
|
|
17
|
+
return (_jsx(SelectionCardDisplay, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, actions: fetchActionsCb, ...uiProps, footer: footer, ...(onCardClick &&
|
|
18
18
|
rowData && {
|
|
19
19
|
onClick: () => onCardClick(rowData),
|
|
20
20
|
onKeyDown: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAEnD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAoB,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;IAEjD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,OAAO,CACL,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"GalleryCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAEnD,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAAoB,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;IAEjD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,OAAO,CACL,KAAC,oBAAoB,kBACP,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,OAAO,EAAE,cAAc,KACnB,OAAO,EACX,MAAM,EAAE,MAAM,KACV,CAAC,WAAW;YACd,OAAO,IAAI;YACT,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;YACnC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,WAAW,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;SACF,CAAC,GACJ,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { memo } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { SelectionCardDisplay } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../utils';\nimport useRowActions from '../hooks/useRowActions';\n\nconst GalleryCard = memo(({ headerColumn, row, meta, visibleColumns }: GalleryCardProps) => {\n const {\n label,\n image,\n footer,\n fields,\n 'aria-label': ariaLabel\n } = getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n });\n\n const uiProps = getCardUIProps({ row });\n const fetchActionsCb = useRowActions({ row, meta });\n const { onCardClick } = meta.galleryConfig ?? {};\n\n const rowData = onCardClick ? row.getContext().getValue() : undefined;\n\n return (\n <SelectionCardDisplay\n aria-label={ariaLabel}\n label={label}\n headingTag='h3'\n image={image}\n fields={fields}\n data-gallery-card\n actions={fetchActionsCb}\n {...uiProps}\n footer={footer}\n {...(onCardClick &&\n rowData && {\n onClick: () => onCardClick(rowData),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onCardClick(rowData);\n }\n }\n })}\n />\n );\n});\n\nexport default GalleryCard;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryCheckboxCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC;CACrC;AAED,QAAA,MAAM,mBAAmB,qGACwC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"GalleryCheckboxCard.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,wBAAyB,SAAQ,gBAAgB;IACzD,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC;CACrC;AAED,QAAA,MAAM,mBAAmB,qGACwC,wBAAwB,6CA6CxF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -19,7 +19,7 @@ const GalleryCheckboxCard = memo(({ headerColumn, selectionColumn, row, meta, vi
|
|
|
19
19
|
const disableSelection = selectionColumn.disableSelection ?? disableSelectionOnLoad;
|
|
20
20
|
const handleChange = useCallback((event) => selectRow(event.target.checked), [row, selectRow]);
|
|
21
21
|
const fetchActionsCb = useRowActions({ row, meta });
|
|
22
|
-
return (_jsx(CheckboxCard, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, onChange: handleChange, checked: getContext()?.$selected, readOnly: disableSelection, ...uiProps, actions: fetchActionsCb }));
|
|
22
|
+
return (_jsx(CheckboxCard, { "aria-label": ariaLabel, label: label, headingTag: 'h3', image: image, fields: fields, "data-gallery-card": true, onChange: handleChange, checked: getContext()?.$selected, readOnly: disableSelection, ...uiProps, actions: fetchActionsCb }));
|
|
23
23
|
});
|
|
24
24
|
export default GalleryCheckboxCard;
|
|
25
25
|
//# sourceMappingURL=GalleryCheckboxCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryCheckboxCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAMnD,MAAM,mBAAmB,GAAG,IAAI,CAC9B,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAA4B,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAExC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;IACtC,MAAM,sBAAsB,GAAG,eAAe;SAC3C,UAAU,EAAE;QACb,EAAE,SAAS,EAAE,EAAE,sBAAsB,CAAC;IACxC,4IAA4I;IAC5I,MAAM,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,IAAI,sBAAsB,CAAC;IAEpF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACzE,CAAC,GAAG,EAAE,SAAS,CAAC,CACjB,CAAC;IAEF,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpD,OAAO,CACL,KAAC,YAAY,kBACC,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"GalleryCheckboxCard.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/Components/GalleryCheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAMnD,MAAM,mBAAmB,GAAG,IAAI,CAC9B,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,EAA4B,EAAE,EAAE;IACzF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,EACxB,GAAG,WAAW,CAAC;QACd,GAAG;QACH,cAAc;QACd,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAExC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC;IACtC,MAAM,sBAAsB,GAAG,eAAe;SAC3C,UAAU,EAAE;QACb,EAAE,SAAS,EAAE,EAAE,sBAAsB,CAAC;IACxC,4IAA4I;IAC5I,MAAM,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,IAAI,sBAAsB,CAAC;IAEpF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EACzE,CAAC,GAAG,EAAE,SAAS,CAAC,CACjB,CAAC;IAEF,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpD,OAAO,CACL,KAAC,YAAY,kBACC,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,6BAEd,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,UAAU,EAAE,EAAE,SAAS,EAChC,QAAQ,EAAE,gBAAgB,KACtB,OAAO,EACX,OAAO,EAAE,cAAc,GACvB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { memo, useCallback, type ChangeEvent } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport { CheckboxCard } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from '../Gallery.types';\nimport { getCardData, getCardUIProps } from '../utils';\nimport useRowActions from '../hooks/useRowActions';\n\ninterface GalleryCheckboxCardProps extends GalleryCardProps {\n selectionColumn: RsCoreTypes.Column;\n}\n\nconst GalleryCheckboxCard = memo(\n ({ headerColumn, selectionColumn, row, meta, visibleColumns }: GalleryCheckboxCardProps) => {\n const {\n label,\n image,\n fields,\n 'aria-label': ariaLabel\n } = getCardData({\n row,\n visibleColumns,\n meta,\n headerColumn\n });\n\n const uiProps = getCardUIProps({ row });\n\n const { selectRow, getContext } = row;\n const disableSelectionOnLoad = selectionColumn\n .getContext()\n ?.getRsMeta()?.disableSelectionOnLoad;\n // TODO: identify the usecase for column.disableSelection. Keeping it for now to keep the behavior in sync with RowSelectionColumn in table.\n const disableSelection = selectionColumn.disableSelection ?? disableSelectionOnLoad;\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => selectRow(event.target.checked),\n [row, selectRow]\n );\n\n const fetchActionsCb = useRowActions({ row, meta });\n\n return (\n <CheckboxCard\n aria-label={ariaLabel}\n label={label}\n headingTag='h3'\n image={image}\n fields={fields}\n data-gallery-card\n onChange={handleChange}\n checked={getContext()?.$selected}\n readOnly={disableSelection}\n {...uiProps}\n actions={fetchActionsCb}\n />\n );\n }\n);\n\nexport default GalleryCheckboxCard;\n"]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { BaseA11y } from 'pega-repeating-structures-core';
|
|
2
|
+
import type { useLiveLog } from '@pega/cosmos-react-core';
|
|
2
3
|
export type Selectors = {
|
|
3
4
|
focusElementSelector: string;
|
|
4
|
-
|
|
5
|
+
belowLoader: string;
|
|
5
6
|
};
|
|
7
|
+
type AnnounceMethod = ReturnType<typeof useLiveLog>['announceAssertive'];
|
|
6
8
|
declare class GalleryA11y extends BaseA11y {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
#private;
|
|
10
|
+
constructor(selectors: Selectors, focusableSelectors: string[], container: HTMLElement, announceAssertive: AnnounceMethod, announcePolite: AnnounceMethod, translate: (key: string) => string);
|
|
11
|
+
onFocusHandler(event?: Event): void;
|
|
12
|
+
itemsLoadedCallback(): void;
|
|
11
13
|
}
|
|
12
14
|
export default GalleryA11y;
|
|
13
15
|
//# sourceMappingURL=GalleryA11y.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"GalleryA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,MAAM,MAAM,SAAS,GAAG;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,mBAAmB,CAAC,CAAC;AAEzE,cAAM,WAAY,SAAQ,QAAQ;;gBAI9B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,MAAM,EAAE,EAC5B,SAAS,EAAE,WAAW,EACtB,iBAAiB,EAAE,cAAc,EACjC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM;IAY3B,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK;IAIrC,mBAAmB;CAGpB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -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"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { useLiveLog } from '@pega/cosmos-react-core';
|
|
2
|
+
type AnnounceMethod = ReturnType<typeof useLiveLog>['announceAssertive'];
|
|
3
|
+
interface LoadingSelectors {
|
|
4
|
+
focusElementSelector: string;
|
|
5
|
+
belowLoader: string;
|
|
6
|
+
}
|
|
7
|
+
declare function createLoadingAnnouncementBehavior(selectors: LoadingSelectors, container: HTMLElement, announceAssertive: AnnounceMethod, announcePolite: AnnounceMethod, translate: (key: string) => string): {
|
|
8
|
+
onFocus(event: Event | undefined): void;
|
|
9
|
+
onItemsLoaded(): void;
|
|
10
|
+
};
|
|
11
|
+
export default createLoadingAnnouncementBehavior;
|
|
12
|
+
//# sourceMappingURL=loadingAnnouncementBehavior.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadingAnnouncementBehavior.d.ts","sourceRoot":"","sources":["../../../Core/a11y/loadingAnnouncementBehavior.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,mBAAmB,CAAC,CAAC;AAEzE,UAAU,gBAAgB;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,iCAAiC,CACxC,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,WAAW,EACtB,iBAAiB,EAAE,cAAc,EACjC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM;mBAOjB,KAAK,GAAG,SAAS;;EA4BnC;AAED,eAAe,iCAAiC,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { isInstance } from '@pega/cosmos-react-core';
|
|
2
|
+
function createLoadingAnnouncementBehavior(selectors, container, announceAssertive, announcePolite, translate) {
|
|
3
|
+
const { focusElementSelector, belowLoader } = selectors;
|
|
4
|
+
let hasAnnouncedLoading = false;
|
|
5
|
+
let wasLoadingMore = false;
|
|
6
|
+
return {
|
|
7
|
+
onFocus(event) {
|
|
8
|
+
if (hasAnnouncedLoading)
|
|
9
|
+
return;
|
|
10
|
+
if (!container.querySelector(belowLoader))
|
|
11
|
+
return;
|
|
12
|
+
const target = event?.target;
|
|
13
|
+
if (!isInstance(target, Element))
|
|
14
|
+
return;
|
|
15
|
+
const item = target.closest(focusElementSelector);
|
|
16
|
+
if (!item)
|
|
17
|
+
return;
|
|
18
|
+
const allItems = container.querySelectorAll(focusElementSelector);
|
|
19
|
+
if (item === allItems[allItems.length - 1]) {
|
|
20
|
+
hasAnnouncedLoading = true;
|
|
21
|
+
announceAssertive({ message: translate('Loading more results'), type: 'info' });
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
onItemsLoaded() {
|
|
25
|
+
const isLoadingMore = !!container.querySelector(belowLoader);
|
|
26
|
+
if (wasLoadingMore && !isLoadingMore) {
|
|
27
|
+
if (hasAnnouncedLoading) {
|
|
28
|
+
announcePolite({ message: translate('Loading completed'), type: 'info' });
|
|
29
|
+
}
|
|
30
|
+
hasAnnouncedLoading = false;
|
|
31
|
+
}
|
|
32
|
+
wasLoadingMore = isLoadingMore;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
export default createLoadingAnnouncementBehavior;
|
|
37
|
+
//# sourceMappingURL=loadingAnnouncementBehavior.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadingAnnouncementBehavior.js","sourceRoot":"","sources":["../../../Core/a11y/loadingAnnouncementBehavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAUrD,SAAS,iCAAiC,CACxC,SAA2B,EAC3B,SAAsB,EACtB,iBAAiC,EACjC,cAA8B,EAC9B,SAAkC;IAElC,MAAM,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IACxD,IAAI,mBAAmB,GAAG,KAAK,CAAC;IAChC,IAAI,cAAc,GAAG,KAAK,CAAC;IAE3B,OAAO;QACL,OAAO,CAAC,KAAwB;YAC9B,IAAI,mBAAmB;gBAAE,OAAO;YAChC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;gBAAE,OAAO;YAElD,MAAM,MAAM,GAAG,KAAK,EAAE,MAAM,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC;gBAAE,OAAO;YAEzC,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;YAClD,IAAI,CAAC,IAAI;gBAAE,OAAO;YAElB,MAAM,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;YAClE,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC3C,mBAAmB,GAAG,IAAI,CAAC;gBAC3B,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YAClF,CAAC;QACH,CAAC;QAED,aAAa;YACX,MAAM,aAAa,GAAG,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YAC7D,IAAI,cAAc,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrC,IAAI,mBAAmB,EAAE,CAAC;oBACxB,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;gBAC5E,CAAC;gBACD,mBAAmB,GAAG,KAAK,CAAC;YAC9B,CAAC;YACD,cAAc,GAAG,aAAa,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC;AAED,eAAe,iCAAiC,CAAC","sourcesContent":["import { isInstance } from '@pega/cosmos-react-core';\nimport type { useLiveLog } from '@pega/cosmos-react-core';\n\ntype AnnounceMethod = ReturnType<typeof useLiveLog>['announceAssertive'];\n\ninterface LoadingSelectors {\n focusElementSelector: string;\n belowLoader: string;\n}\n\nfunction createLoadingAnnouncementBehavior(\n selectors: LoadingSelectors,\n container: HTMLElement,\n announceAssertive: AnnounceMethod,\n announcePolite: AnnounceMethod,\n translate: (key: string) => string\n) {\n const { focusElementSelector, belowLoader } = selectors;\n let hasAnnouncedLoading = false;\n let wasLoadingMore = false;\n\n return {\n onFocus(event: Event | undefined) {\n if (hasAnnouncedLoading) return;\n if (!container.querySelector(belowLoader)) return;\n\n const target = event?.target;\n if (!isInstance(target, Element)) return;\n\n const item = target.closest(focusElementSelector);\n if (!item) return;\n\n const allItems = container.querySelectorAll(focusElementSelector);\n if (item === allItems[allItems.length - 1]) {\n hasAnnouncedLoading = true;\n announceAssertive({ message: translate('Loading more results'), type: 'info' });\n }\n },\n\n onItemsLoaded() {\n const isLoadingMore = !!container.querySelector(belowLoader);\n if (wasLoadingMore && !isLoadingMore) {\n if (hasAnnouncedLoading) {\n announcePolite({ message: translate('Loading completed'), type: 'info' });\n }\n hasAnnouncedLoading = false;\n }\n wasLoadingMore = isLoadingMore;\n }\n };\n}\n\nexport default createLoadingAnnouncementBehavior;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/lists-react",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.17",
|
|
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,17 +14,17 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-condition-builder": "9.0.0-build.29.
|
|
18
|
-
"@pega/cosmos-react-core": "9.0.0-build.29.
|
|
19
|
-
"@pega/cosmos-react-rte": "9.0.0-build.29.
|
|
17
|
+
"@pega/cosmos-react-condition-builder": "9.0.0-build.29.17",
|
|
18
|
+
"@pega/cosmos-react-core": "9.0.0-build.29.17",
|
|
19
|
+
"@pega/cosmos-react-rte": "9.0.0-build.29.17",
|
|
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",
|
|
23
23
|
"dayjs": "^1.11.13",
|
|
24
24
|
"fast-deep-equal": "^3.1.3",
|
|
25
25
|
"lodash-es": "^4.18.1",
|
|
26
|
-
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.29.
|
|
27
|
-
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.29.
|
|
26
|
+
"pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.29.17",
|
|
27
|
+
"pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.29.17",
|
|
28
28
|
"polished": "^4.1.0",
|
|
29
29
|
"prop-types": "^15.8.1",
|
|
30
30
|
"react": "^17.0.0 || ^18.0.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@testing-library/react": "^16.0.0",
|
|
43
43
|
"@testing-library/user-event": "^14.6.1",
|
|
44
44
|
"jest-axe": "^8.0.0",
|
|
45
|
-
"srs-utils": "9.0.0-build.29.
|
|
45
|
+
"srs-utils": "9.0.0-build.29.17",
|
|
46
46
|
"typescript": "~5.9.3"
|
|
47
47
|
}
|
|
48
48
|
}
|