@conduction/components 2.2.17 → 2.2.19

package/README.md

@@ -4,6 +4,12 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.19: Refactored primary top nav to simplify sub-items.
+  - 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/card/richContentCard/RichContentCard.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./RichContentCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { Divider } from "@gemeente-denhaag/divider";
+import { Link } from "@gemeente-denhaag/link";
 import { navigate } from "gatsby";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
 export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: linkIsExternal ? faExternalLink : faArrowRight }), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
 };
 const LabelWithIcon = ({ label, icon }) => {
     return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
 };
-const ContentLink = ({ title, subTitle }) => {
-    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) })] }));
+const ContentLink = ({ title, subTitle, href }) => {
+    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
 };

package/lib/components/card/richContentCard/RichContentCard.module.css

@@ -1,103 +1,93 @@
-:root {
-  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--conduction-rich-content-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > *:not(.linkContainer):not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.linkContainer {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.linkContainer > :first-child {
-  display: flex;
-}
-
-.link > * {
-  margin-inline-end: 8px;
-}
-
-.labelsWithIcon {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-/* Component: LabelWithIcon */
-.labelWithIcon {
-  display: flex;
-  align-items: center;
-  color: var(--skeleton-color-grey-3);
-}
-
-.labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--skeleton-size-sm);
-  width: var(--skeleton-size-sm);
-  margin-inline-end: var(--skeleton-size-xs);
-}
-
-.labelWithIcon > .labelWithIcon_label {
-  font-size: var(--skeleton-size-sm);
-}
-
-/* Content Link */
-.contentLink {
-  display: flex;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-  text-decoration: none !important;
-}
-
-.contentLink > span {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.contentLink:hover {
-  cursor: pointer;
-}
-
-.contentLink_content {
-  display: flex;
-  flex-direction: column;
-}
-
-.contentLink_title {
-  font-size: var(--conduction-content-link-font-size);
-}
-
-.contentLink_subTitle {
-  font-size: var(--conduction-content-link-font-size);
-  color: var(--denhaag-color-grey-3);
-}
-
-.divider {
-  width: 100%;
-  opacity: 0.5;
-  margin-block: var(--skeleton-size-lg);
-}
+:root {
+  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  border: var(--conduction-rich-content-card-border);
+  border-radius: var(--skeleton-border-radius-md);
+
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > *:not(.link):not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.link {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.link > :first-child {
+  display: flex;
+}
+
+.labelsWithIcon {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.labelsWithIcon > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.contentLinks > *:not(:last-child):not(hr) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+/* Component: LabelWithIcon */
+.labelWithIcon {
+  display: flex;
+  align-items: center;
+  color: var(--skeleton-color-grey-3);
+}
+
+.labelWithIcon > .labelWithIcon_icon > svg {
+  height: var(--skeleton-size-sm);
+  width: var(--skeleton-size-sm);
+  margin-inline-end: var(--skeleton-size-xs);
+}
+
+.labelWithIcon > .labelWithIcon_label {
+  font-size: var(--skeleton-size-sm);
+}
+
+/* Content Link */
+.contentLink {
+  display: flex;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
+  text-decoration: none !important;
+}
+
+.contentLink > span {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.contentLink:hover {
+  cursor: pointer;
+}
+
+.contentLink_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.contentLink_title {
+  font-size: var(--conduction-content-link-font-size);
+}
+
+.contentLink_subTitle {
+  font-size: var(--conduction-content-link-font-size);
+  color: var(--denhaag-color-grey-3);
+}

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/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -1,16 +1,18 @@
 /// <reference types="react" />
-interface ITopNavItem {
+interface ITopNavItemBase {
     label: string;
     icon?: JSX.Element;
     current?: boolean;
+}
+interface ITopNavItemWithSubItems extends ITopNavItemBase {
+    handleClick?: never;
+    subItems: ITopNavItem[];
+}
+interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
     handleClick?: () => any;
-    subItems?: {
-        label: string;
-        icon?: JSX.Element;
-        current?: boolean;
-        handleClick?: () => any;
-    }[];
+    subItems?: never;
 }
+export declare type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 export interface TopNavProps {
     items: ITopNavItem[];
     mobileLogo?: JSX.Element;

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js

@@ -7,28 +7,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
-    const handleItemClick = (handleClick) => {
-        if (handleClick) {
-            handleClick();
-            setIsOpen(false);
-        }
-    };
-    const handleSubItemMenu = (idx, value) => {
-        setSubNavIsOpen({
-            ...subNavIsOpen,
-            [idx]: value,
-        });
-    };
-    const screenWidth = window.innerWidth;
+    const [isMobile, setIsMobile] = React.useState(window.innerWidth < 992);
     React.useEffect(() => {
-        if (screenWidth > 992) {
-            setSubNavIsOpen({});
-        }
-    }, [screenWidth]);
-    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => !subItems
-                            ? handleItemClick(handleClick)
-                            : screenWidth > 992
-                                ? handleItemClick(handleClick)
-                                : handleSubItemMenu(idx, !subNavIsOpen[idx] ?? true), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && screenWidth < 992 && (_jsx(FontAwesomeIcon, { className: clsx(styles.toggleIcon, subNavIsOpen[idx] && styles.isOpen), icon: faChevronRight }))] }), subItems && (_jsx("ul", { className: clsx(styles.dropdown, subNavIsOpen[idx] && styles.isOpen), children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < 992);
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const handleSubItemClick = (handleClick) => {
+        setIsOpen(false);
+        handleClick();
+    };
+    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: handleClick, className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label, subItems && styles.mobileLink, current && styles.currentLink), children: [icon, label, " ", subItems && isMobile && _jsx(FontAwesomeIcon, { className: styles.toggleIcon, icon: faChevronRight })] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleSubItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label, current && styles.currentLink), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
 };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -116,6 +116,11 @@
 }
 .primary .link {
   text-decoration: none;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: wrap;
 }
 
 .primary .link:not(.currentLink) {
@@ -187,6 +192,11 @@
   margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
 }
 
+.li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
 @media only screen and (min-width: 992px) {
   .container {
     width: fit-content;
@@ -215,11 +225,6 @@
     display: none;
   }
 
-  .primary .li:hover .dropdown {
-    display: block;
-    z-index: 1;
-  }
-
   .mobileLink {
     margin-block-end: unset;
   }

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.19",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {