@conduction/components 2.2.54 → 2.2.55

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@conduction/components",
-  "version": "2.2.54",
-  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
-  "main": "lib/index.js",
-  "scripts": {
-    "clean": "rimraf lib/",
-    "build": "npm-run-all build:**",
-    "build:tsc": "tsc",
-    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ConductionNL/conduction-components.git"
-  },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
-  "author": "Conduction B.V.",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ConductionNL/conduction-components/issues"
-  },
-  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@utrecht/component-library-react": "3.0.0",
-    "clsx": "^2.1.0",
-    "gatsby": "^5.13.3",
-    "react": "^18.2.0",
-    "react-datepicker": "^6.3.0",
-    "react-hook-form": "7.51.0",
-    "react-paginate": "^8.2.0",
-    "react-select": "5.8.0",
-    "react-tabs": "^6.0.2",
-    "react-tooltip": "^5.26.3"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.27",
-    "@types/react": "^18.2.66",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.22",
-    "copyfiles": "^2.4.1",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "tsc-hooks": "^1.1.2",
-    "typescript": "^5.4.2"
-  }
-}
+{
+  "name": "@conduction/components",
+  "version": "2.2.55",
+  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
+  "main": "lib/index.js",
+  "scripts": {
+    "clean": "rimraf lib/",
+    "build": "npm-run-all build:**",
+    "build:tsc": "tsc",
+    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConductionNL/conduction-components.git"
+  },
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "author": "Conduction B.V.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-components/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@utrecht/component-library-react": "3.0.0",
+    "clsx": "^2.1.0",
+    "gatsby": "^5.13.3",
+    "react": "^18.2.0",
+    "react-datepicker": "^6.3.0",
+    "react-hook-form": "7.51.0",
+    "react-paginate": "^8.2.0",
+    "react-select": "5.8.0",
+    "react-tabs": "^6.0.2",
+    "react-tooltip": "^5.26.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.27",
+    "@types/react": "^18.2.66",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.2.22",
+    "copyfiles": "^2.4.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.5",
+    "tsc-hooks": "^1.1.2",
+    "typescript": "^5.4.2"
+  }
+}

package/src/components/card/cardHeader/CardHeader.module.css

@@ -1,54 +1,54 @@
-:root {
-  /* --conduction-card-header-border-bottom-width: unset;
-  --conduction-card-header-border-bottom-style: unset;
-  --conduction-card-header-border-bottom-color: unset; */
-  /* --conduction-card-header-hover-border-bottom-width: unset; */
-  /* --conduction-card-header-hover-border-bottom-style: unset; */
-  /* --conduction-card-header-hover-border-bottom-color: unset; */
-  --conduction-card-header-title-color: #000000;
-  /* --conduction-card-header-title-text-decoration: none; */
-  /* --conduction-card-header-title-text-underline-offset: 2px; */
-  /* --conduction-card-header-title-hover-color: #000000; */
-  /* --conduction-card-header-title-hover-text-decoration: none; */
-  /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
-  /* --conduction-card-header-title-padding-block-end: 0px; */
-
-  --conduction-card-header-date-color: #000000;
-  --conduction-card-header-date-font-size: 16px;
-  --conduction-card-header-date-font-weight: 100;
-  /* --conduction-card-header-date-font-style: normal; */
-  --conduction-card-header-date-margin-block-end: 8px;
-}
-
-.container {
-  border-bottom-width: var(--conduction-card-header-border-bottom-width);
-  border-bottom-color: var(--conduction-card-header-border-bottom-color);
-  border-bottom-style: var(--conduction-card-header-border-bottom-style);
-}
-
-.container:hover {
-  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
-}
-
-.title > * {
-  color: var(--conduction-card-header-title-color) !important;
-  text-decoration: var(--conduction-card-header-title-text-decoration) !important;
-  text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
-  padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
-}
-
-.title:hover > * {
-  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
-  text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
-  text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
-}
-
-.date {
-  color: var(--conduction-card-header-date-color);
-  font-size: var(--conduction-card-header-date-font-size);
-  font-weight: var(--conduction-card-header-date-font-weight);
-  font-style: var(--conduction-card-header-date-font-style);
-  margin-block-end: var(--conduction-card-header-date-margin-block-end);
-}
+:root {
+  /* --conduction-card-header-border-bottom-width: unset;
+  --conduction-card-header-border-bottom-style: unset;
+  --conduction-card-header-border-bottom-color: unset; */
+  /* --conduction-card-header-hover-border-bottom-width: unset; */
+  /* --conduction-card-header-hover-border-bottom-style: unset; */
+  /* --conduction-card-header-hover-border-bottom-color: unset; */
+  --conduction-card-header-title-color: #000000;
+  /* --conduction-card-header-title-text-decoration: none; */
+  /* --conduction-card-header-title-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-hover-color: #000000; */
+  /* --conduction-card-header-title-hover-text-decoration: none; */
+  /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-padding-block-end: 0px; */
+
+  --conduction-card-header-date-color: #000000;
+  --conduction-card-header-date-font-size: 16px;
+  --conduction-card-header-date-font-weight: 100;
+  /* --conduction-card-header-date-font-style: normal; */
+  --conduction-card-header-date-margin-block-end: 8px;
+}
+
+.container {
+  border-bottom-width: var(--conduction-card-header-border-bottom-width);
+  border-bottom-color: var(--conduction-card-header-border-bottom-color);
+  border-bottom-style: var(--conduction-card-header-border-bottom-style);
+}
+
+.container:hover {
+  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
+  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
+  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
+}
+
+.title > * {
+  color: var(--conduction-card-header-title-color) !important;
+  text-decoration: var(--conduction-card-header-title-text-decoration) !important;
+  text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
+  padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
+}
+
+.title:hover > * {
+  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
+  text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
+  text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
+}
+
+.date {
+  color: var(--conduction-card-header-date-color);
+  font-size: var(--conduction-card-header-date-font-size);
+  font-weight: var(--conduction-card-header-date-font-weight);
+  font-style: var(--conduction-card-header-date-font-style);
+  margin-block-end: var(--conduction-card-header-date-margin-block-end);
+}

package/src/components/displaySwitch/DisplaySwitch.tsx

@@ -1,49 +1,49 @@
-import * as React from "react";
-import * as styles from "./DisplaySwitch.module.css";
-import _ from "lodash";
-import clsx from "clsx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
-import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
-
-interface DisplaySwitchProps {
-  buttons: DisplaySwitchButtonProps[];
-  layoutClassName?: string;
-}
-
-interface DisplaySwitchButtonProps {
-  label: string;
-  pressed: boolean;
-  handleClick: () => any;
-  icon?: {
-    name: IconName;
-    prefix: IconPrefix;
-  };
-}
-
-export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
-
-const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
-  return (
-    <ButtonGroup className={clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName)}>
-      {buttons.map((button, idx: number) => {
-        // TODO: Once the Rotterdam design system supports the "pressed" state,
-        // remove the `appereance` switch, and use the same appearance for each button.
-        return (
-          <Button
-            key={idx}
-            pressed={button.pressed}
-            appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
-            onClick={button.handleClick}
-            className={styles.button}
-          >
-            {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
-            <span>{button.label}</span>
-          </Button>
-        );
-      })}
-    </ButtonGroup>
-  );
-};
-
-export default DisplaySwitch;
+import * as React from "react";
+import * as styles from "./DisplaySwitch.module.css";
+import _ from "lodash";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
+import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
+
+interface DisplaySwitchProps {
+  buttons: DisplaySwitchButtonProps[];
+  layoutClassName?: string;
+}
+
+interface DisplaySwitchButtonProps {
+  label: string;
+  pressed: boolean;
+  handleClick: () => any;
+  icon?: {
+    name: IconName;
+    prefix: IconPrefix;
+  };
+}
+
+export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
+
+const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
+  return (
+    <ButtonGroup className={clsx(styles.displaySwitchButtons, layoutClassName && layoutClassName)}>
+      {buttons.map((button, idx: number) => {
+        // TODO: Once the Rotterdam design system supports the "pressed" state,
+        // remove the `appereance` switch, and use the same appearance for each button.
+        return (
+          <Button
+            key={idx}
+            pressed={button.pressed}
+            appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
+            onClick={button.handleClick}
+            className={styles.button}
+          >
+            {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
+            <span>{button.label}</span>
+          </Button>
+        );
+      })}
+    </ButtonGroup>
+  );
+};
+
+export default DisplaySwitch;

package/src/components/formFields/select/select.tsx

@@ -56,6 +56,13 @@ const selectStyles: StylesConfig = {
     fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
     color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
   }),
+  dropdownIndicator: (base) => ({
+    ...base,
+    color: "#949494",
+    "&:hover": {
+      color: "#949494",
+    },
+  }),
 };
 
 const setAttributes = (): void => {
@@ -68,9 +75,51 @@ const setAttributes = (): void => {
     });
   };
 
+  const updateIndicatorAttributes = (indicator: HTMLElement, isInteractive: boolean) => {
+    if (isInteractive) {
+      indicator.setAttribute("role", "button");
+      indicator.setAttribute("tabindex", "0");
+      indicator.setAttribute("aria-label", "Clear selection");
+    } else {
+      indicator.setAttribute("role", "presentation");
+      indicator.removeAttribute("tabindex");
+      indicator.removeAttribute("aria-label");
+    }
+  };
+
+  const setAriaLabelsForIndicators = () => {
+    document.querySelectorAll('[class*="control"]').forEach((control) => {
+      const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
+      if (!indicatorsParent) return;
+
+      const indicators = indicatorsParent.querySelectorAll('[class*="indicatorContainer"]');
+      const hasSelection = indicators.length === 2;
+
+      indicators.forEach((indicator, index) => {
+        const isClearButton = hasSelection && index === 0;
+        updateIndicatorAttributes(indicator as HTMLElement, isClearButton);
+      });
+    });
+  };
+
+  // Initial static setup
   setRoleToPresentation('[id*="live-region"]', "presentation");
   setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
   setRoleToPresentation('[class*="a11yText"]', "presentation");
+
+  // Dynamic setup after render
+  setTimeout(() => {
+    setAriaLabelsForIndicators();
+
+    const observer = new MutationObserver(setAriaLabelsForIndicators);
+
+    document.querySelectorAll('[class*="control"]').forEach((control) => {
+      const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
+      if (indicatorsParent) {
+        observer.observe(indicatorsParent, { childList: true, subtree: false });
+      }
+    });
+  }, 100);
 };
 
 export const SelectMultiple = ({

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -1,80 +1,80 @@
-import * as React from "react";
-import * as styles from "./HorizontalOverflowWrapper.module.css";
-import clsx from "clsx";
-import { Button } from "@utrecht/component-library-react/dist/css-module";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-
-interface HorizontalOverflowWrapperProps {
-  children: React.ReactNode;
-  ariaLabels: {
-    scrollRightButton: string;
-    scrollLeftButton: string;
-  };
-}
-
-export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
-  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
-  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
-
-  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
-
-  const scrollRight = (): void => {
-    wrapperRef.current?.scrollTo({
-      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
-      behavior: "smooth",
-    });
-  };
-
-  const scrollLeft = (): void => {
-    wrapperRef.current?.scrollTo({
-      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
-      behavior: "smooth",
-    });
-  };
-
-  React.useEffect(() => {
-    checkScrollDirections(); // initiate available scroll directions
-
-    window.addEventListener("resize", checkScrollDirections);
-
-    return () => window.removeEventListener("resize", checkScrollDirections);
-  }, []);
-
-  const checkScrollDirections = (): void => {
-    if (!wrapperRef.current) return;
-
-    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
-    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-  };
-
-  return (
-    <div className={styles.container}>
-      {canScrollLeft && (
-        <Button
-          className={clsx(styles.scrollButton)}
-          onClick={scrollLeft}
-          appearance="secondary-action-button"
-          aria-label={ariaLabels.scrollLeftButton}
-        >
-          <FontAwesomeIcon icon={faChevronLeft} />
-        </Button>
-      )}
-
-      {canScrollRight && (
-        <Button
-          className={clsx(styles.scrollButton, styles.right)}
-          onClick={scrollRight}
-          appearance="secondary-action-button"
-          aria-label={ariaLabels.scrollRightButton}
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </Button>
-      )}
-
-      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
-        {children}
-      </div>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/logo/Logo.tsx

@@ -1,21 +1,24 @@
-import * as React from "react";
-import * as styles from "./Logo.module.css";
-import clsx from "clsx";
-
-interface LogoProps {
-  variant?: "header" | "footer" | "navbar";
-  onClick?: () => any;
-  layoutClassName?: string;
-}
-
-export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header" }) => {
-  return (
-    <div
-      className={clsx(styles.container, styles[variant], [
-        onClick && styles.clickable,
-        layoutClassName && layoutClassName,
-      ])}
-      {...{ onClick }}
-    />
-  );
-};
+import * as React from "react";
+import * as styles from "./Logo.module.css";
+import clsx from "clsx";
+
+interface LogoProps {
+  variant?: "header" | "footer" | "navbar";
+  onClick?: () => any;
+  layoutClassName?: string;
+  ariaLabel?: string;
+}
+
+export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
+  return (
+    <div
+      className={clsx(styles.container, styles[variant], [
+        onClick && styles.clickable,
+        layoutClassName && layoutClassName,
+      ])}
+      role="img"
+      aria-label={ariaLabel}
+      {...{ onClick }}
+    />
+  );
+};