@conduction/components 2.2.17 → 2.2.18

package/README.md

@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.18:
+    - Refactored select role attribute.
+    - Fixed Pagination-button border-radius.
+    - Added colors for Focus and Selected options in Select forms.
+    - Add HorizontalOverflowWrapper component and refactor Tabs Component overflow scroll.
   - 2.2.17: Refactor Pagination to include aria labels and make aria label required on texarea, input and select components.
   - 2.2.15/2.2.16: Added more NLDS options to Pagination.
   - 2.2.13/2.2.14:

package/lib/components/Pagination/Pagination.module.css

@@ -150,7 +150,7 @@
   border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
   border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
   border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
-  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
+  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

package/lib/components/formFields/select/select.js

@@ -8,10 +8,23 @@ import clsx from "clsx";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
 const selectStyles = {
     menuPortal: (base) => ({ ...base, zIndex: 100 }),
-    option: (base) => ({
+    option: (base, state) => ({
         ...base,
         fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-        backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+        backgroundColor: [
+            state.isFocused
+                ? `var(--conduction-input-select-list-option-focus-background-color, ${base.backgroundColor})`
+                : state.isSelected
+                    ? `var(--conduction-input-select-list-option-selected-background-color, ${base.backgroundColor})`
+                    : `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor})`,
+        ],
+        color: [
+            state.isFocused
+                ? `var(--conduction-input-select-list-option-focus-color, ${base.color})`
+                : state.isSelected
+                    ? `var(--conduction-input-select-list-option-selected-color, ${base.color})`
+                    : `var(--conduction-input-select-list-option-color, ${base.color})`,
+        ],
         "&:hover": {
             backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
             color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
@@ -24,41 +37,20 @@ const selectStyles = {
         color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
     }),
 };
-const selectMultiStyles = {
-    menuPortal: (base) => ({ ...base, zIndex: 100 }),
-    option: (base) => ({
-        ...base,
-        fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-        backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
-        "&:hover": {
-            backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
-            color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
-            fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
-        },
-    }),
-    placeholder: (base) => ({
-        ...base,
-        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}) )`,
-    }),
+const setAttributes = () => {
+    const setRoleToPresentation = (selector, role) => {
+        document.querySelectorAll(selector).forEach((element) => {
+            if (element.getAttribute("role") !== "presentation")
+                element.setAttribute("role", role);
+        });
+    };
+    setRoleToPresentation('[id*="live-region"]', "presentation");
+    setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
+    setRoleToPresentation('[class*="a11yText"]', "presentation");
 };
 export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
     React.useEffect(() => {
-        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
-            if (element?.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
+        setAttributes();
     }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
             return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
@@ -66,21 +58,7 @@ export const SelectMultiple = ({ id, name, options, errors, control, validation,
 };
 export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
     React.useEffect(() => {
-        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
+        setAttributes();
     }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
             return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
@@ -88,21 +66,7 @@ export const SelectCreate = ({ id, name, options, errors, control, validation, d
 };
 export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
     React.useEffect(() => {
-        document.querySelectorAll('[id*="live-region"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
-        document.querySelectorAll('[class*="a11yText"]').forEach((element) => {
-            if (element.role !== "presentation") {
-                element.setAttribute("role", "presentation");
-            }
-        });
+        setAttributes();
     }, []);
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
             return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));

package/lib/components/formFields/select/select.module.css

@@ -12,6 +12,11 @@
 
   --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
   /* --conduction-input-select-list-option-background-color: unset; */
+  /* --conduction-input-select-list-option-color: unset; */
+  /* --conduction-input-select-list-option-selected--background-color: unset; */
+  /* --conduction-input-select-list-option-selected-color: unset; */
+  /* --conduction-input-select-list-option-focus--background-color: unset; */
+  /* --conduction-input-select-list-option-focus-color: unset; */
 
   /* --conduction-input-select-list-option-hover-background-color: unset; */
   /* --conduction-input-select-list-option-hover-color: unset; */

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface HorizontalOverflowWrapperProps {
+    children: React.ReactNode;
+    ariaLabels: {
+        scrollRightButton: string;
+        scrollLeftButton: string;
+    };
+}
+export declare const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps>;
+export {};

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+export const HorizontalOverflowWrapper = ({ children, ariaLabels }) => {
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+    const wrapperRef = React.useRef(null);
+    const scrollRight = () => {
+        wrapperRef.current?.scrollTo({
+            left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+            behavior: "smooth",
+        });
+    };
+    const scrollLeft = () => {
+        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 = () => {
+        if (!wrapperRef.current)
+            return;
+        setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+        setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+    };
+    return (_jsxs("div", { className: styles.container, children: [canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton, styles.left), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: styles.wrapper, onScroll: checkScrollDirections, children: children })] }));
+};

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,41 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
+  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
+  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
+  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/lib/components/tabs/Tabs.js

@@ -21,11 +21,17 @@ export const TabList = ({ children, ...otherProps }) => {
     };
     const handleScrollRight = () => {
         if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
+            wrapperRef.current.scrollTo({
+                left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+                behavior: "smooth",
+            });
     };
     const handleScrollLeft = () => {
         if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
+            wrapperRef.current.scrollTo({
+                left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+                behavior: "smooth",
+            });
     };
     React.useEffect(() => {
         if (wrapperRef.current) {

package/lib/index.d.ts

@@ -23,5 +23,5 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
-import { TableWrapper } from "./components/tableWrapper/TableWrapper";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, TableWrapper, };
+import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };

package/lib/index.js

@@ -16,5 +16,5 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
-import { TableWrapper } from "./components/tableWrapper/TableWrapper";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, TableWrapper, };
+import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Pagination/Pagination.module.css

@@ -150,7 +150,7 @@
   border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
   border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
   border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
-  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
+  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

package/src/components/formFields/select/select.module.css

@@ -12,6 +12,11 @@
 
   --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
   /* --conduction-input-select-list-option-background-color: unset; */
+  /* --conduction-input-select-list-option-color: unset; */
+  /* --conduction-input-select-list-option-selected--background-color: unset; */
+  /* --conduction-input-select-list-option-selected-color: unset; */
+  /* --conduction-input-select-list-option-focus--background-color: unset; */
+  /* --conduction-input-select-list-option-focus-color: unset; */
 
   /* --conduction-input-select-list-option-hover-background-color: unset; */
   /* --conduction-input-select-list-option-hover-color: unset; */

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

@@ -23,10 +23,24 @@ interface ISelectProps {
 
 const selectStyles: StylesConfig = {
   menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
+  option: (base, state) => ({
     ...base,
     fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+    backgroundColor: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-background-color, ${base.backgroundColor})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-background-color, ${base.backgroundColor})`
+        : `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor})`,
+    ],
+
+    color: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-color, ${base.color})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-color, ${base.color})`
+        : `var(--conduction-input-select-list-option-color, ${base.color})`,
+    ],
 
     "&:hover": {
       backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
@@ -41,24 +55,16 @@ const selectStyles: StylesConfig = {
   }),
 };
 
-const selectMultiStyles: StylesConfig = {
-  menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+const setAttributes = (): void => {
+  const setRoleToPresentation = (selector: string, role: string) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
+    });
+  };
 
-    "&:hover": {
-      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
-      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
-      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
-    },
-  }),
-  placeholder: (base) => ({
-    ...base,
-    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}) )`,
-  }),
+  setRoleToPresentation('[id*="live-region"]', "presentation");
+  setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
+  setRoleToPresentation('[class*="a11yText"]', "presentation");
 };
 
 export const SelectMultiple = ({
@@ -76,21 +82,7 @@ export const SelectMultiple = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element?.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -135,21 +127,7 @@ export const SelectCreate = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -195,21 +173,7 @@ export const SelectSingle = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,41 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
+  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
+  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
+  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -0,0 +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, styles.left)}
+          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/tabs/Tabs.tsx

@@ -41,11 +41,19 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
   };
 
   const handleScrollRight = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   const handleScrollLeft = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   React.useEffect(() => {

package/src/index.ts

@@ -40,7 +40,7 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
-import { TableWrapper } from "./components/tableWrapper/TableWrapper";
+import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
 
 export {
   DownloadCard,
@@ -82,5 +82,5 @@ export {
   TabList,
   Tab,
   TabPanel,
-  TableWrapper,
+  HorizontalOverflowWrapper,
 };

package/tsconfig.json

@@ -3,10 +3,7 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -15,15 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}

package/src/components/tableWrapper/TableWrapper.module.css

@@ -1,67 +0,0 @@
-:root {
-  --conduction-table-wrapper-scroll-button-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-color: #000000;
-  --conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
-  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
-  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
-  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: solid; */
-  /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
-
-  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
-}
-.container {
-  position: relative;
-}
-
-.wrapper,
-.wrapperTouchscreen {
-  overflow-x: scroll;
-}
-
-.scrollRightButton,
-.scrollLeftButton {
-  top: 0%;
-  position: absolute;
-  display: flex;
-  height: 100%;
-  background-color: var(--conduction-table-wrapper-scroll-button-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-color);
-  padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
-  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
-  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
-  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
-  border-width: var(--conduction-table-wrapper-scroll-button-border-width);
-  border-style: var(--conduction-table-wrapper-scroll-button-border-style);
-  border-color: var(--conduction-table-wrapper-scroll-button-border-color);
-}
-
-.scrollLeftButton:hover,
-.scrollRightButton:hover {
-  background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-hover-color);
-  cursor: pointer;
-}
-
-.scrollRightButton {
-  right: 0;
-}
-
-.scrollLeftButton {
-  left: 0;
-}
-
-.scrollButton {
-  align-self: center;
-}
-
-/* Hide scrollbar */
-.wrapper::-webkit-scrollbar {
-  display: none;
-}
-.wrapper {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}

package/src/components/tableWrapper/TableWrapper.tsx

@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from "react";
-import * as styles from "./TableWrapper.module.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-
-export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [canScrollRight, setCanScrollRight] = useState(false);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-
-  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
-
-  const handleScroll = () => {
-    if (wrapperRef.current) {
-      setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-      setCanScrollRight(
-        wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth,
-      );
-    }
-  };
-
-  const handleScrollRight = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
-  };
-
-  const handleScrollLeft = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
-  };
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
-    }
-  }, []);
-
-  return (
-    <div className={styles.container}>
-      <div onScroll={handleScroll} ref={wrapperRef} className={styles.wrapper}>
-        {canScrollLeft && (
-          <div onClick={handleScrollLeft} className={styles.scrollLeftButton}>
-            <div className={styles.scrollButton}>
-              <FontAwesomeIcon icon={faChevronLeft} />
-            </div>
-          </div>
-        )}
-        {children}
-        {canScrollRight && (
-          <div onClick={handleScrollRight} className={styles.scrollRightButton}>
-            <div className={styles.scrollButton}>
-              <FontAwesomeIcon icon={faChevronRight} />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};