@conduction/components 2.2.54 → 2.2.56

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.
Files changed (18) hide show
  1. package/README.md +219 -213
  2. package/lib/components/Pagination/Pagination.js +1 -1
  3. package/lib/components/card/cardHeader/CardHeader.module.css +54 -54
  4. package/lib/components/displaySwitch/DisplaySwitch.js +1 -1
  5. package/lib/components/formFields/select/select.js +44 -0
  6. package/lib/components/logo/Logo.d.ts +1 -0
  7. package/lib/components/logo/Logo.js +2 -2
  8. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -315
  9. package/package.json +50 -50
  10. package/src/components/Pagination/Pagination.tsx +87 -87
  11. package/src/components/card/cardHeader/CardHeader.module.css +54 -54
  12. package/src/components/displaySwitch/DisplaySwitch.tsx +49 -49
  13. package/src/components/formFields/select/select.tsx +49 -0
  14. package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx +80 -80
  15. package/src/components/logo/Logo.tsx +24 -21
  16. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +315 -315
  17. package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +133 -133
  18. package/tsconfig.json +21 -21
package/package.json CHANGED
@@ -1,50 +1,50 @@
1
- {
2
- "name": "@conduction/components",
3
- "version": "2.2.54",
4
- "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
- "main": "lib/index.js",
6
- "scripts": {
7
- "clean": "rimraf lib/",
8
- "build": "npm-run-all build:**",
9
- "build:tsc": "tsc",
10
- "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
11
- "test": "echo \"Error: no test specified\" && exit 1"
12
- },
13
- "repository": {
14
- "type": "git",
15
- "url": "git+https://github.com/ConductionNL/conduction-components.git"
16
- },
17
- "keywords": ["React", "Gatsby", "Conduction", "Components"],
18
- "author": "Conduction B.V.",
19
- "license": "ISC",
20
- "bugs": {
21
- "url": "https://github.com/ConductionNL/conduction-components/issues"
22
- },
23
- "homepage": "https://github.com/ConductionNL/conduction-components#readme",
24
- "dependencies": {
25
- "@fortawesome/fontawesome-svg-core": "^6.5.1",
26
- "@fortawesome/free-solid-svg-icons": "^6.5.1",
27
- "@fortawesome/react-fontawesome": "^0.2.0",
28
- "@utrecht/component-library-react": "3.0.0",
29
- "clsx": "^2.1.0",
30
- "gatsby": "^5.13.3",
31
- "react": "^18.2.0",
32
- "react-datepicker": "^6.3.0",
33
- "react-hook-form": "7.51.0",
34
- "react-paginate": "^8.2.0",
35
- "react-select": "5.8.0",
36
- "react-tabs": "^6.0.2",
37
- "react-tooltip": "^5.26.3"
38
- },
39
- "devDependencies": {
40
- "@types/node": "^20.11.27",
41
- "@types/react": "^18.2.66",
42
- "@types/react-datepicker": "^6.2.0",
43
- "@types/react-dom": "^18.2.22",
44
- "copyfiles": "^2.4.1",
45
- "npm-run-all": "^4.1.5",
46
- "rimraf": "^5.0.5",
47
- "tsc-hooks": "^1.1.2",
48
- "typescript": "^5.4.2"
49
- }
50
- }
1
+ {
2
+ "name": "@conduction/components",
3
+ "version": "2.2.56",
4
+ "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
+ "main": "lib/index.js",
6
+ "scripts": {
7
+ "clean": "rimraf lib/",
8
+ "build": "npm-run-all build:**",
9
+ "build:tsc": "tsc",
10
+ "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
11
+ "test": "echo \"Error: no test specified\" && exit 1"
12
+ },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "git+https://github.com/ConductionNL/conduction-components.git"
16
+ },
17
+ "keywords": ["React", "Gatsby", "Conduction", "Components"],
18
+ "author": "Conduction B.V.",
19
+ "license": "ISC",
20
+ "bugs": {
21
+ "url": "https://github.com/ConductionNL/conduction-components/issues"
22
+ },
23
+ "homepage": "https://github.com/ConductionNL/conduction-components#readme",
24
+ "dependencies": {
25
+ "@fortawesome/fontawesome-svg-core": "^6.5.1",
26
+ "@fortawesome/free-solid-svg-icons": "^6.5.1",
27
+ "@fortawesome/react-fontawesome": "^0.2.0",
28
+ "@utrecht/component-library-react": "3.0.0",
29
+ "clsx": "^2.1.0",
30
+ "gatsby": "^5.13.3",
31
+ "react": "^18.2.0",
32
+ "react-datepicker": "^6.3.0",
33
+ "react-hook-form": "7.51.0",
34
+ "react-paginate": "^8.2.0",
35
+ "react-select": "5.8.0",
36
+ "react-tabs": "^6.0.2",
37
+ "react-tooltip": "^5.26.3"
38
+ },
39
+ "devDependencies": {
40
+ "@types/node": "^20.11.27",
41
+ "@types/react": "^18.2.66",
42
+ "@types/react-datepicker": "^6.2.0",
43
+ "@types/react-dom": "^18.2.22",
44
+ "copyfiles": "^2.4.1",
45
+ "npm-run-all": "^4.1.5",
46
+ "rimraf": "^5.0.5",
47
+ "tsc-hooks": "^1.1.2",
48
+ "typescript": "^5.4.2"
49
+ }
50
+ }
package/src/components/Pagination/Pagination.tsx CHANGED
@@ -1,87 +1,87 @@
1
- import * as React from "react";
2
- import * as styles from "./Pagination.module.css";
3
- import clsx from "clsx";
4
-
5
- import ReactPaginate from "react-paginate";
6
- import { Button } from "@utrecht/component-library-react";
7
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
- import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
9
-
10
- interface PaginationProps {
11
- totalPages: number;
12
- currentPage: number;
13
- setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
14
- ariaLabels: {
15
- pagination: string;
16
- nextPage: string;
17
- previousPage: string;
18
- page: string;
19
- };
20
- layoutClassName?: string;
21
- }
22
-
23
- export const Pagination: React.FC<PaginationProps> = ({
24
- totalPages,
25
- currentPage,
26
- setCurrentPage,
27
- ariaLabels,
28
- layoutClassName,
29
- }) => {
30
- if (totalPages < 1) return <></>; // no pages available
31
-
32
- const setAttributes = (): void => {
33
- const setRoleToPresentation = (selector: string) => {
34
- document.querySelectorAll(selector).forEach((element) => {
35
- if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
36
- });
37
- };
38
-
39
- setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
40
- };
41
-
42
- React.useEffect(() => {
43
- setAttributes();
44
- }, []);
45
-
46
- React.useEffect(() => {
47
- const setRoleToPresentation = (selector: string) => {
48
- document.querySelectorAll(selector).forEach((element) => {
49
- if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
50
- element.setAttribute("aria-label", ariaLabels.pagination);
51
- }
52
- });
53
- };
54
-
55
- setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
56
- }, [ariaLabels.pagination]);
57
-
58
- return (
59
- <ReactPaginate
60
- className={clsx(styles.container, layoutClassName && layoutClassName)}
61
- disabledClassName={styles.disabled}
62
- activeClassName={styles.currentPage}
63
- onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
64
- forcePage={currentPage - 1}
65
- pageRangeDisplayed={3}
66
- pageCount={totalPages}
67
- disableInitialCallback
68
- marginPagesDisplayed={2}
69
- breakLabel="..."
70
- nextClassName={styles.next}
71
- previousClassName={styles.previous}
72
- nextAriaLabel={ariaLabels.nextPage}
73
- previousAriaLabel={ariaLabels.previousPage}
74
- ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
75
- nextLabel={
76
- <Button tabIndex={-1} className={styles.button}>
77
- <FontAwesomeIcon icon={faChevronRight} />
78
- </Button>
79
- }
80
- previousLabel={
81
- <Button tabIndex={-1} className={styles.button}>
82
- <FontAwesomeIcon icon={faChevronLeft} />
83
- </Button>
84
- }
85
- />
86
- );
87
- };
1
+ import * as React from "react";
2
+ import * as styles from "./Pagination.module.css";
3
+ import clsx from "clsx";
4
+
5
+ import ReactPaginate from "react-paginate";
6
+ import { Button } from "@utrecht/component-library-react";
7
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8
+ import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
9
+
10
+ interface PaginationProps {
11
+ totalPages: number;
12
+ currentPage: number;
13
+ setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
14
+ ariaLabels: {
15
+ pagination: string;
16
+ nextPage: string;
17
+ previousPage: string;
18
+ page: string;
19
+ };
20
+ layoutClassName?: string;
21
+ }
22
+
23
+ export const Pagination: React.FC<PaginationProps> = ({
24
+ totalPages,
25
+ currentPage,
26
+ setCurrentPage,
27
+ ariaLabels,
28
+ layoutClassName,
29
+ }) => {
30
+ if (totalPages < 1) return <></>; // no pages available
31
+
32
+ const setAttributes = (): void => {
33
+ const setRoleToPresentation = (selector: string) => {
34
+ document.querySelectorAll(selector).forEach((element) => {
35
+ if (element.getAttribute("role") !== "list") element.setAttribute("role", "list");
36
+ });
37
+ };
38
+
39
+ setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
40
+ };
41
+
42
+ React.useEffect(() => {
43
+ setAttributes();
44
+ }, []);
45
+
46
+ React.useEffect(() => {
47
+ const setRoleToPresentation = (selector: string) => {
48
+ document.querySelectorAll(selector).forEach((element) => {
49
+ if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
50
+ element.setAttribute("aria-label", ariaLabels.pagination);
51
+ }
52
+ });
53
+ };
54
+
55
+ setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
56
+ }, [ariaLabels.pagination]);
57
+
58
+ return (
59
+ <ReactPaginate
60
+ className={clsx(styles.container, layoutClassName && layoutClassName)}
61
+ disabledClassName={styles.disabled}
62
+ activeClassName={styles.currentPage}
63
+ onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
64
+ forcePage={currentPage - 1}
65
+ pageRangeDisplayed={3}
66
+ pageCount={totalPages}
67
+ disableInitialCallback
68
+ marginPagesDisplayed={2}
69
+ breakLabel="..."
70
+ nextClassName={styles.next}
71
+ previousClassName={styles.previous}
72
+ nextAriaLabel={ariaLabels.nextPage}
73
+ previousAriaLabel={ariaLabels.previousPage}
74
+ ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
75
+ nextLabel={
76
+ <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.nextPage}>
77
+ <FontAwesomeIcon icon={faChevronRight} />
78
+ </Button>
79
+ }
80
+ previousLabel={
81
+ <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.previousPage}>
82
+ <FontAwesomeIcon icon={faChevronLeft} />
83
+ </Button>
84
+ }
85
+ />
86
+ );
87
+ };
package/src/components/card/cardHeader/CardHeader.module.css CHANGED
@@ -1,54 +1,54 @@
1
- :root {
2
- /* --conduction-card-header-border-bottom-width: unset;
3
- --conduction-card-header-border-bottom-style: unset;
4
- --conduction-card-header-border-bottom-color: unset; */
5
- /* --conduction-card-header-hover-border-bottom-width: unset; */
6
- /* --conduction-card-header-hover-border-bottom-style: unset; */
7
- /* --conduction-card-header-hover-border-bottom-color: unset; */
8
- --conduction-card-header-title-color: #000000;
9
- /* --conduction-card-header-title-text-decoration: none; */
10
- /* --conduction-card-header-title-text-underline-offset: 2px; */
11
- /* --conduction-card-header-title-hover-color: #000000; */
12
- /* --conduction-card-header-title-hover-text-decoration: none; */
13
- /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
14
- /* --conduction-card-header-title-padding-block-end: 0px; */
15
-
16
- --conduction-card-header-date-color: #000000;
17
- --conduction-card-header-date-font-size: 16px;
18
- --conduction-card-header-date-font-weight: 100;
19
- /* --conduction-card-header-date-font-style: normal; */
20
- --conduction-card-header-date-margin-block-end: 8px;
21
- }
22
-
23
- .container {
24
- border-bottom-width: var(--conduction-card-header-border-bottom-width);
25
- border-bottom-color: var(--conduction-card-header-border-bottom-color);
26
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
27
- }
28
-
29
- .container:hover {
30
- border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
31
- border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
32
- border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
33
- }
34
-
35
- .title > * {
36
- color: var(--conduction-card-header-title-color) !important;
37
- text-decoration: var(--conduction-card-header-title-text-decoration) !important;
38
- text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
39
- padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
40
- }
41
-
42
- .title:hover > * {
43
- color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
44
- text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
45
- text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
46
- }
47
-
48
- .date {
49
- color: var(--conduction-card-header-date-color);
50
- font-size: var(--conduction-card-header-date-font-size);
51
- font-weight: var(--conduction-card-header-date-font-weight);
52
- font-style: var(--conduction-card-header-date-font-style);
53
- margin-block-end: var(--conduction-card-header-date-margin-block-end);
54
- }
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ /* --conduction-card-header-title-text-decoration: none; */
10
+ /* --conduction-card-header-title-text-underline-offset: 2px; */
11
+ /* --conduction-card-header-title-hover-color: #000000; */
12
+ /* --conduction-card-header-title-hover-text-decoration: none; */
13
+ /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
14
+ /* --conduction-card-header-title-padding-block-end: 0px; */
15
+
16
+ --conduction-card-header-date-color: #000000;
17
+ --conduction-card-header-date-font-size: 16px;
18
+ --conduction-card-header-date-font-weight: 100;
19
+ /* --conduction-card-header-date-font-style: normal; */
20
+ --conduction-card-header-date-margin-block-end: 8px;
21
+ }
22
+
23
+ .container {
24
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
25
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
26
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
27
+ }
28
+
29
+ .container:hover {
30
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
31
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
32
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
33
+ }
34
+
35
+ .title > * {
36
+ color: var(--conduction-card-header-title-color) !important;
37
+ text-decoration: var(--conduction-card-header-title-text-decoration) !important;
38
+ text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
39
+ padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
40
+ }
41
+
42
+ .title:hover > * {
43
+ color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
44
+ text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
45
+ text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
46
+ }
47
+
48
+ .date {
49
+ color: var(--conduction-card-header-date-color);
50
+ font-size: var(--conduction-card-header-date-font-size);
51
+ font-weight: var(--conduction-card-header-date-font-weight);
52
+ font-style: var(--conduction-card-header-date-font-style);
53
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
54
+ }
package/src/components/displaySwitch/DisplaySwitch.tsx CHANGED
@@ -1,49 +1,49 @@
1
- import * as React from "react";
2
- import * as styles from "./DisplaySwitch.module.css";
3
- import _ from "lodash";
4
- import clsx from "clsx";
5
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
- import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
7
- import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
8
-
9
- interface DisplaySwitchProps {
10
- buttons: DisplaySwitchButtonProps[];
11
- layoutClassName?: string;
12
- }
13
-
14
- interface DisplaySwitchButtonProps {
15
- label: string;
16
- pressed: boolean;
17
- handleClick: () => any;
18
- icon?: {
19
- name: IconName;
20
- prefix: IconPrefix;
21
- };
22
- }
23
-
24
- export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
25
-
26
- const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
27
- return (
28
- <ButtonGroup className={clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName)}>
29
- {buttons.map((button, idx: number) => {
30
- // TODO: Once the Rotterdam design system supports the "pressed" state,
31
- // remove the `appereance` switch, and use the same appearance for each button.
32
- return (
33
- <Button
34
- key={idx}
35
- pressed={button.pressed}
36
- appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
37
- onClick={button.handleClick}
38
- className={styles.button}
39
- >
40
- {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
41
- <span>{button.label}</span>
42
- </Button>
43
- );
44
- })}
45
- </ButtonGroup>
46
- );
47
- };
48
-
49
- export default DisplaySwitch;
1
+ import * as React from "react";
2
+ import * as styles from "./DisplaySwitch.module.css";
3
+ import _ from "lodash";
4
+ import clsx from "clsx";
5
+ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
+ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
7
+ import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
8
+
9
+ interface DisplaySwitchProps {
10
+ buttons: DisplaySwitchButtonProps[];
11
+ layoutClassName?: string;
12
+ }
13
+
14
+ interface DisplaySwitchButtonProps {
15
+ label: string;
16
+ pressed: boolean;
17
+ handleClick: () => any;
18
+ icon?: {
19
+ name: IconName;
20
+ prefix: IconPrefix;
21
+ };
22
+ }
23
+
24
+ export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
25
+
26
+ const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
27
+ return (
28
+ <ButtonGroup className={clsx(styles.displaySwitchButtons, layoutClassName && layoutClassName)}>
29
+ {buttons.map((button, idx: number) => {
30
+ // TODO: Once the Rotterdam design system supports the "pressed" state,
31
+ // remove the `appereance` switch, and use the same appearance for each button.
32
+ return (
33
+ <Button
34
+ key={idx}
35
+ pressed={button.pressed}
36
+ appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
37
+ onClick={button.handleClick}
38
+ className={styles.button}
39
+ >
40
+ {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
41
+ <span>{button.label}</span>
42
+ </Button>
43
+ );
44
+ })}
45
+ </ButtonGroup>
46
+ );
47
+ };
48
+
49
+ export default DisplaySwitch;
package/src/components/formFields/select/select.tsx CHANGED
@@ -56,6 +56,13 @@ const selectStyles: StylesConfig = {
56
56
  fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
57
57
  color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
58
58
  }),
59
+ dropdownIndicator: (base) => ({
60
+ ...base,
61
+ color: "#949494",
62
+ "&:hover": {
63
+ color: "#949494",
64
+ },
65
+ }),
59
66
  };
60
67
 
61
68
  const setAttributes = (): void => {
@@ -68,9 +75,51 @@ const setAttributes = (): void => {
68
75
  });
69
76
  };
70
77
 
78
+ const updateIndicatorAttributes = (indicator: HTMLElement, isInteractive: boolean) => {
79
+ if (isInteractive) {
80
+ indicator.setAttribute("role", "button");
81
+ indicator.setAttribute("tabindex", "0");
82
+ indicator.setAttribute("aria-label", "Clear selection");
83
+ } else {
84
+ indicator.setAttribute("role", "presentation");
85
+ indicator.removeAttribute("tabindex");
86
+ indicator.removeAttribute("aria-label");
87
+ }
88
+ };
89
+
90
+ const setAriaLabelsForIndicators = () => {
91
+ document.querySelectorAll('[class*="control"]').forEach((control) => {
92
+ const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
93
+ if (!indicatorsParent) return;
94
+
95
+ const indicators = indicatorsParent.querySelectorAll('[class*="indicatorContainer"]');
96
+ const hasSelection = indicators.length === 2;
97
+
98
+ indicators.forEach((indicator, index) => {
99
+ const isClearButton = hasSelection && index === 0;
100
+ updateIndicatorAttributes(indicator as HTMLElement, isClearButton);
101
+ });
102
+ });
103
+ };
104
+
105
+ // Initial static setup
71
106
  setRoleToPresentation('[id*="live-region"]', "presentation");
72
107
  setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
73
108
  setRoleToPresentation('[class*="a11yText"]', "presentation");
109
+
110
+ // Dynamic setup after render
111
+ setTimeout(() => {
112
+ setAriaLabelsForIndicators();
113
+
114
+ const observer = new MutationObserver(setAriaLabelsForIndicators);
115
+
116
+ document.querySelectorAll('[class*="control"]').forEach((control) => {
117
+ const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
118
+ if (indicatorsParent) {
119
+ observer.observe(indicatorsParent, { childList: true, subtree: false });
120
+ }
121
+ });
122
+ }, 100);
74
123
  };
75
124
 
76
125
  export const SelectMultiple = ({