@dnanpm/styleguide 3.9.9 → 3.9.11

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { OvalChevronUp, OvalChevronDown, Check, ChevronUp, ChevronDown } from '@dnanpm/icons';
-import React__default, { useRef, useState, Children, useReducer, isValidElement, useEffect } from 'react';
+import React__default, { useRef, useId, useState, Children, useReducer, isValidElement, useEffect, useLayoutEffect, useCallback, cloneElement } from 'react';
 import useDebounce from '../../hooks/useDebounce.js';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
 import useResizeObserver from '../../hooks/useResizeObserver.js';
@@ -16,13 +16,15 @@ import PriorityNavigationItem from '../PriorityNavigationItem/PriorityNavigation
 const Container = styled.div `
     width: 100%;
 
-    ${media.md `
-        border-bottom: 1px solid ${theme.color.line.L03};
-    `}
+    ${media.md ` border-bottom: 1px solid ${theme.color.line.L03}; `}
 `;
-const Category = styled.h4 `
+const Category = styled.span `
     margin: 0;
     color: ${theme.color.text.black};
+    font-size: ${theme.fontSize.h4};
+    font-weight: ${theme.fontWeight.bold};
+    line-height: ${theme.lineHeight.h4};
+    display: block;
 
     ${media.md `
         padding: 1.25rem 0.25rem 0;
@@ -127,6 +129,18 @@ const DropdownList = styled(CoreULStyles) `
 
     ${getElevationShadow({ elevation: 'low' })}
 `;
+const VisuallyHidden = styled.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+`;
 const reducer = (state, action) => {
     var _a, _b;
     switch (action.type) {
@@ -185,10 +199,11 @@ const getReactNodeText = (reactNode) => {
  * @visibleName Priority Navigation
  */
 const PriorityNavigation = (_a) => {
-    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId, mobileDropdownAriaLabel, currentPageAriaLabel, openMoreSubpagesAriaLabel } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid', "mobileDropdownAriaLabel", "currentPageAriaLabel", "openMoreSubpagesAriaLabel"]);
     const listsContainerRef = useRef(null);
     const navigationListRef = useRef(null);
     const dropdownButtonRef = useRef(null);
+    const categoryId = useId();
     const { isMobile } = useWindowSize(theme.breakpoints.md);
     const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
@@ -250,42 +265,66 @@ const PriorityNavigation = (_a) => {
     });
     useEffect(() => {
         if (!isMobile) {
-            checkHorizontalOverflow();
+            dispatch({
+                type: 'resetNavigationState',
+                payload: {
+                    navigationItems: props.children,
+                },
+            });
+        }
+        setIsMobileNavigationOpen(false);
+    }, [isMobile, props.children]);
+    useLayoutEffect(() => {
+        if (!isMobile) {
+            requestAnimationFrame(() => {
+                checkHorizontalOverflow();
+            });
         }
     }, [
-        state.navigationItems,
-        state.dropdownItems,
+        isMobile,
         wrapperContainerWidth,
+        state.navigationItems.length,
+        state.dropdownItems.length,
         checkHorizontalOverflow,
-        isMobile,
     ]);
-    useEffect(() => {
-        dispatch({
-            type: 'resetNavigationState',
-            payload: {
-                navigationItems: props.children,
-            },
-        });
-        setIsMobileNavigationOpen(false);
-    }, [props.children]);
+    const handleNavigationListKeyDown = useCallback((e) => {
+        var _a;
+        if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
+            const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
+            const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
+            if (document.activeElement === lastElement) {
+                e.preventDefault();
+                setIsMobileNavigationOpen(false);
+            }
+        }
+    }, [isMobile, isMobileNavigationOpen]);
     return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        !isMobile && props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
-        React__default.createElement("nav", { "aria-label": props.navigationLabel },
+        !isMobile && props.categoryLabel && (React__default.createElement(Category, { id: categoryId }, props.categoryLabel)),
+        React__default.createElement("nav", { "aria-labelledby": categoryId },
             React__default.createElement(ListsContainer, { ref: listsContainerRef },
-                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": (props.categoryLabel && selectedItem) ||
-                        (props.dropdownButtonAriaLabel &&
-                            `${props.dropdownButtonAriaLabel}: ${selectedItem}`), "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
+                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
                     React__default.createElement(MobileDropdownContent, null,
                         props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.createElement(Icon, { icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown, size: "2.5rem" }))),
-                React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => isValidElement(navigationItem) &&
-                    navigationItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
-                    navigationItem.props.children,
-                    navigationItem.props.isActive && isMobile && (React__default.createElement(Icon, { icon: Check, color: theme.color.default.pink })))))),
+                React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                    if (isValidElement(navigationItem) &&
+                        navigationItem.type === PriorityNavigationItem) {
+                        return (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+                            navigationItem.props.isActive
+                                ? cloneElement(navigationItem.props.children, {
+                                    'aria-current': 'page',
+                                })
+                                : navigationItem.props.children,
+                            navigationItem.props.isActive && isMobile && (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement(Icon, { icon: Check, "aria-hidden": true, color: theme.color.default.pink }),
+                                React__default.createElement(VisuallyHidden, null, currentPageAriaLabel)))));
+                    }
+                    return null;
+                })),
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", { ref: dropdownButtonRef },
-                        React__default.createElement(ButtonIcon, { onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                        React__default.createElement(ButtonIcon, { ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
                     React__default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
                         dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children))))))))));
 };

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.d.ts

@@ -37,6 +37,6 @@ export interface Props {
 /**
  * @visibleName Priority NavigationItem
  */
-declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const PriorityNavigationItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 /** @component */
 export default PriorityNavigationItem;

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -13,10 +13,7 @@ const Element = styled.li `
     padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
-    ${({ onClick }) => onClick &&
-    `
-        cursor: pointer;
-    `};
+    ${({ onClick }) => onClick && `cursor: pointer;`}
 
     &:focus-within {
         & > *:not(a, span.dnasg-icon) {
@@ -37,6 +34,7 @@ const Element = styled.li `
 
     & > a {
         text-decoration: none;
+
         &:focus-visible {
             border-radius: ${theme.radius.s};
             border: 2px solid ${theme.color.focus.light};
@@ -48,7 +46,7 @@ const Element = styled.li `
     & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
-        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold}`};
+        ${({ isActive }) => isActive && `font-weight: ${theme.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -60,9 +58,10 @@ const Element = styled.li `
 /**
  * @visibleName Priority NavigationItem
  */
-const PriorityNavigationItem = (_a) => {
+const PriorityNavigationItem = React__default.forwardRef((_a, ref) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
-};
+    return (React__default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+});
+PriorityNavigationItem.displayName = 'PriorityNavigationItem';
 
 export { PriorityNavigationItem as default };

package/build/es/components/Toaster/Toaster.d.ts

@@ -40,6 +40,6 @@ interface Props {
      */
     onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
 }
-declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+declare const Toaster: ({ type, "data-testid": dataTestId, closeLabel, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Toaster;

package/build/es/components/Toaster/Toaster.js

@@ -45,17 +45,16 @@ const ButtonCloseStyled = styled__default(ButtonClose) `
     top: auto;
 `;
 const Toaster = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    if (props.dismissed) {
+    var { type = 'info', 'data-testid': dataTestId, closeLabel } = _a, props = __rest(_a, ["type", 'data-testid', "closeLabel"]);
+    if (props.dismissed)
         return null;
-    }
-    return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+    return (React__default.createElement(ToasterWrapper, { className: props.className, "data-testid": dataTestId, role: "alert", "aria-live": "assertive", "aria-atomic": "true" },
         React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
             React__default.createElement(IconWrapper, null,
-                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
+                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type], "aria-hidden": true, "data-testid": "toaster-icon" })),
             React__default.createElement(ContentWrapper, null, props.children),
-            React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
+            React__default.createElement(ButtonCloseStyled, { "aria-label": closeLabel, onClick: props.onClickCloseButton },
+                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black, "aria-hidden": true })))));
 };
 
 export { Toaster as default };

package/build/es/components/Tooltip/Tooltip.d.ts

@@ -46,10 +46,14 @@ interface Props {
     closeWithEsc?: boolean;
     /**
      * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     *
+     * @default false
      */
     isClickable?: boolean;
     /**
      * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     *
+     * @default false
      */
     isHoverable?: boolean;
     /**
@@ -66,6 +70,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, isClickable, isHoverable, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/es/components/Tooltip/Tooltip.js

@@ -8,9 +8,28 @@ import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 
-const Helper = styled.div `
-    display: inline;
+const Helper = styled.button `
+    display: inline-block;
     vertical-align: middle;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    outline: inherit;
+    pointer-events: auto;
+    height: 1rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
+        border-radius: 100%;
+    }
+
     ${({ isClickable }) => isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
@@ -57,11 +76,32 @@ const StyledReactTooltip = styled(Tooltip$1) `
     ${getArrowOverrides()}
 `;
 const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    var { 'data-testid': dataTestId, closeWithEsc = true, isClickable = false, isHoverable = false } = _a, props = __rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
+    const handleReactTooltipOpenEvents = {
+        mouseover: !isClickable,
+        focus: !isClickable,
+        mouseenter: !isClickable,
+        mousedown: !isClickable && !isHoverable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipCloseEvents = {
+        mouseout: !isClickable && !isHoverable,
+        blur: !isClickable && !isHoverable,
+        mouseleave: !isClickable,
+        mouseup: !isClickable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipGlobalCloseEvents = {
+        escape: closeWithEsc,
+        clickOutsideAnchor: true,
+        scroll: true,
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 export { Tooltip as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.9",
+    "version": "v3.9.11",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -31,7 +31,7 @@
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
         "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
-        "test": "cross-env jest --coverage",
+        "test": "cross-env jest --maxWorkers=2 --coverage",
         "test:coverage": "rm -rf coverage && cross-env jest --coverage --runInBand --no-cache"
     },
     "browserslist": [
@@ -44,13 +44,13 @@
         "@babel/core": "^7.26.10",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
+        "@babel/preset-typescript": "^7.27.1",
         "@dnanpm/icons": "2.0.7",
         "@rollup/plugin-commonjs": "^28.0.3",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^14.3.1",
+        "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.14",
         "@types/node": "^14.18.63",
@@ -79,7 +79,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
-        "mini-css-extract-plugin": "^2.9.1",
+        "mini-css-extract-plugin": "^2.9.2",
         "prettier": "^2.8.8",
         "react": "^18.3.1",
         "react-docgen": "^5.4.3",
@@ -90,11 +90,11 @@
         "rollup-plugin-import-css": "^3.5.8",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
-        "ts-jest": "^29.2.6",
+        "ts-jest": "^29.3.2",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.99.6"
+        "webpack": "^5.99.8"
     },
     "dependencies": {
         "ramda": "^0.27.1",
@@ -102,7 +102,7 @@
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
-        "react-tooltip": "^5.28.0"
+        "react-tooltip": "^5.28.1"
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",