@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/es/components/Pill/Pill.js

@@ -4,18 +4,18 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
-    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const colorValue = isChecked
-        ? theme.color.background.plum.default
-        : theme.color.background.orange.E02;
-    // Only Pill component specific colors to be used on user interaction styles
-    const hoverValue = isChecked ? '#441632' : '#FFB557';
-    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
-    return backgroundColor + hoverBackgroundColor;
-};
+const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
+const getBackgroundColor = ({ isChecked, isDisabled }) => {
+    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+    const colorValue = isChecked
+        ? theme.color.background.plum.default
+        : theme.color.background.orange.E02;
+    // Only Pill component specific colors to be used on user interaction styles
+    const hoverValue = isChecked ? '#441632' : '#FFB557';
+    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
+    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
+    return backgroundColor + hoverBackgroundColor;
+};
 const Label = styled__default.label `
     display: inline-block;
     border-radius: ${theme.radius.pill};
@@ -35,17 +35,17 @@ const Label = styled__default.label `
         border: 2px solid ${theme.color.focus.light};
     }
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ position }) => (position === 'right' || position === 'middle') &&
     `
             margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ position }) => (position === 'left' || position === 'middle') &&
     `
             margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
         `}
     
-    ${({ position }) => position === 'auto' &&
+    ${({ position }) => position === 'auto' &&
     `
         margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
 
@@ -57,7 +57,7 @@ const Label = styled__default.label `
             margin-right: 0;
         }
     `}
-`;
+`;
 const Input = styled__default.input `
     appearance: none;
     display: block;
@@ -69,12 +69,12 @@ const Input = styled__default.input `
     &:focus-visible {
         outline: 0 none;
     }
-`;
-const Pill = (_a) => {
-    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
-        props.children,
-        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+`;
+const Pill = (_a) => {
+    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    return (React__default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+        props.children,
+        type !== 'none' && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
 };
 
 export { Pill as default };

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

@@ -1,21 +1,21 @@
-import React from 'react';
-interface Props {
-    /**
-     * Allows to pass custom color
-     *
-     * @default 'theme.color.default.pink'
-     */
-    color?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Pixel Loader */
-declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default PixelLoader;
+import React from 'react';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.default.pink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Pixel Loader */
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PixelLoader;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -13,13 +13,13 @@ const loading = keyframes `
     40% {
         transform: scale(1);
     }
-`;
+`;
 const PixelLoaderWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
-`;
+`;
 const Pixel = styled.div `
     background-color: ${({ color }) => color || theme.color.default.pink};
     display: inline-block;
@@ -28,15 +28,15 @@ const Pixel = styled.div `
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
     animation-delay: ${({ delay }) => delay}s;
-`;
-/** @visibleName Pixel Loader */
-const PixelLoader = (_a) => {
-    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
-    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
-        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
+`;
+/** @visibleName Pixel Loader */
+const PixelLoader = (_a) => {
+    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
+    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
 };
 
 export { PixelLoader as default };

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

@@ -1,44 +1,44 @@
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Content of the component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass common mouse click callback to all children
-     */
-    onClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to pass common keyboard key down callback to all children
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Allows to define aria-label attribute for nav HTML element
-     */
-    navigationLabel?: string;
-    /**
-     * Allows to change label of ButtonIcon
-     *
-     * @default 'Lisää'
-     */
-    dropdownButtonLabel?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/**
- * @visibleName Priority Navigation
- */
-declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default PriorityNavigation;
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass common keyboard key down callback to all children
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to define aria-label attribute for nav HTML element
+     */
+    navigationLabel?: string;
+    /**
+     * Allows to change label of ButtonIcon
+     *
+     * @default 'Lisää'
+     */
+    dropdownButtonLabel?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority Navigation
+ */
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigation;

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

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import { ChevronUp, ChevronDown, Check } from '@dnanpm/icons';
+import { OvalChevronUp, OvalChevronDown, Check, ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default, { useRef, useState, Children, useReducer, isValidElement, useEffect } from 'react';
 import useDebounce from '../../hooks/useDebounce.js';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
@@ -19,7 +19,7 @@ const Container = styled.nav `
     ${media.md `
         border-bottom: 1px solid ${theme.color.line.L03};
     `}
-`;
+`;
 const ListsContainer = styled.div `
     display: flex;
     flex-direction: column;
@@ -34,7 +34,7 @@ const ListsContainer = styled.div `
         padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
         margin: 0 auto;
     `}
-`;
+`;
 const MobileDropdown = styled.button `
     display: flex;
     align-items: center;
@@ -48,13 +48,13 @@ const MobileDropdown = styled.button `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
     border-bottom: 3px solid ${theme.color.default.pink};
-`;
+`;
 const CoreULStyles = styled.ul `
     list-style: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
-`;
+`;
 const NavigationList = styled(CoreULStyles) `
     display: flex;
     flex-direction: column;
@@ -78,7 +78,7 @@ const NavigationList = styled(CoreULStyles) `
         width: auto;
         height: 100%;
     `}
-`;
+`;
 const DropdownList = styled(CoreULStyles) `
     position: absolute;
     top: ${getMultipliedSize(theme.base.baseHeight, 6)};
@@ -99,154 +99,154 @@ const DropdownList = styled(CoreULStyles) `
     `}
 
     ${getElevationShadow({ elevation: 'low' })}
-`;
-const reducer = (state, action) => {
-    var _a, _b;
-    switch (action.type) {
-        case 'resetNavigationState': {
-            const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
-            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
-        }
-        case 'moveItemToDropdown': {
-            const lastChild = state.navigationItems[state.navigationItems.length - 1];
-            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
-                lastItemWidth: [
-                    ...state.lastItemWidth,
-                    action.payload.lastItem.offsetWidth + 40,
-                ],
-            }));
-        }
-        case 'moveItemToNavigation': {
-            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
-            const [, ...lastItemWidth] = state.lastItemWidth;
-            return {
-                navigationItems: [...state.navigationItems, firstItemFromList],
-                dropdownItems,
-                lastItemWidth,
-            };
-        }
-        default:
-            return state;
-    }
-};
-const getReactNodeText = (reactNode) => {
-    if (reactNode === null) {
-        return '';
-    }
-    switch (typeof reactNode) {
-        case 'string':
-        case 'number':
-            return reactNode.toString();
-        case 'boolean':
-            return '';
-        case 'object': {
-            if (reactNode instanceof Array) {
-                return reactNode.map(getReactNodeText).join('');
-            }
-            if ('props' in reactNode) {
-                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
-                // eslint-disable-next-line
-                return getReactNodeText(reactNode.props.children);
-            }
-            return '';
-        }
-        default:
-            return '';
-    }
-};
-/**
- * @visibleName Priority Navigation
- */
-const PriorityNavigation = (_a) => {
-    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
-    const listsContainerRef = useRef(null);
-    const navigationListRef = useRef(null);
-    const dropdownButtonRef = useRef(null);
-    const { isMobile } = useWindowSize(theme.breakpoints.md);
-    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
-    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
-    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
-    const navigationItems = useRef(new Map()).current;
-    const initialState = {
-        navigationItems: Children.toArray(props.children),
-        dropdownItems: [],
-        lastItemWidth: [],
-    };
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const checkHorizontalOverflow = useDebounce(() => {
-        var _a, _b;
-        if (navigationListRef.current && listsContainerRef.current) {
-            const navigationListWidth = navigationListRef.current.scrollWidth;
-            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
-            if (state.navigationItems.length > 0 &&
-                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
-                dispatch({
-                    type: 'moveItemToDropdown',
-                    payload: {
-                        lastItem: navigationItems.get(state.navigationItems.length - 1),
-                    },
-                });
-            }
-            else if (state.dropdownItems.length > 0 &&
-                wrapperContainerWidth >
-                    navigationListWidth +
-                        state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        dropdownButtonWidth +
-                        20) {
-                dispatch({
-                    type: 'moveItemToNavigation',
-                });
-            }
-        }
-    }, 100);
-    const selectedItem = isMobile &&
-        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
-            child.type === PriorityNavigationItem &&
-            child.props.isActive));
-    useOutsideClick(listsContainerRef, () => {
-        if (isMobileNavigationOpen) {
-            setIsMobileNavigationOpen(false);
-        }
-        if (isDropdownOpen) {
-            setIsDropdownOpen(false);
-        }
-    });
-    useEffect(() => {
-        if (!isMobile) {
-            checkHorizontalOverflow();
-        }
-    }, [
-        state.navigationItems,
-        state.dropdownItems,
-        wrapperContainerWidth,
-        checkHorizontalOverflow,
-        isMobile,
-    ]);
-    useEffect(() => {
-        dispatch({
-            type: 'resetNavigationState',
-            payload: {
-                navigationItems: props.children,
-            },
-        });
-        setIsMobileNavigationOpen(false);
-    }, [props.children]);
-    return (React__default.createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(ListsContainer, { ref: listsContainerRef },
-            isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
-                selectedItem,
-                React__default.createElement(Icon, { icon: isMobileNavigationOpen ? ChevronUp : ChevronDown }))),
-            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 })))))),
-            !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: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel)),
-                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, 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)))))))));
+`;
+const reducer = (state, action) => {
+    var _a, _b;
+    switch (action.type) {
+        case 'resetNavigationState': {
+            const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
+            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
+        }
+        case 'moveItemToDropdown': {
+            const lastChild = state.navigationItems[state.navigationItems.length - 1];
+            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
+                lastItemWidth: [
+                    ...state.lastItemWidth,
+                    action.payload.lastItem.offsetWidth + 40,
+                ],
+            }));
+        }
+        case 'moveItemToNavigation': {
+            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
+            const [, ...lastItemWidth] = state.lastItemWidth;
+            return {
+                navigationItems: [...state.navigationItems, firstItemFromList],
+                dropdownItems,
+                lastItemWidth,
+            };
+        }
+        default:
+            return state;
+    }
+};
+const getReactNodeText = (reactNode) => {
+    if (reactNode === null) {
+        return '';
+    }
+    switch (typeof reactNode) {
+        case 'string':
+        case 'number':
+            return reactNode.toString();
+        case 'boolean':
+            return '';
+        case 'object': {
+            if (reactNode instanceof Array) {
+                return reactNode.map(getReactNodeText).join('');
+            }
+            if ('props' in reactNode) {
+                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
+                // eslint-disable-next-line
+                return getReactNodeText(reactNode.props.children);
+            }
+            return '';
+        }
+        default:
+            return '';
+    }
+};
+/**
+ * @visibleName Priority Navigation
+ */
+const PriorityNavigation = (_a) => {
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    const listsContainerRef = useRef(null);
+    const navigationListRef = useRef(null);
+    const dropdownButtonRef = useRef(null);
+    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
+    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const navigationItems = useRef(new Map()).current;
+    const initialState = {
+        navigationItems: Children.toArray(props.children),
+        dropdownItems: [],
+        lastItemWidth: [],
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const checkHorizontalOverflow = useDebounce(() => {
+        var _a, _b;
+        if (navigationListRef.current && listsContainerRef.current) {
+            const navigationListWidth = navigationListRef.current.scrollWidth;
+            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
+            if (state.navigationItems.length > 0 &&
+                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
+                dispatch({
+                    type: 'moveItemToDropdown',
+                    payload: {
+                        lastItem: navigationItems.get(state.navigationItems.length - 1),
+                    },
+                });
+            }
+            else if (state.dropdownItems.length > 0 &&
+                wrapperContainerWidth >
+                    navigationListWidth +
+                        state.lastItemWidth[state.lastItemWidth.length - 1] +
+                        dropdownButtonWidth +
+                        20) {
+                dispatch({
+                    type: 'moveItemToNavigation',
+                });
+            }
+        }
+    }, 100);
+    const selectedItem = isMobile &&
+        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
+            child.type === PriorityNavigationItem &&
+            child.props.isActive));
+    useOutsideClick(listsContainerRef, () => {
+        if (isMobileNavigationOpen) {
+            setIsMobileNavigationOpen(false);
+        }
+        if (isDropdownOpen) {
+            setIsDropdownOpen(false);
+        }
+    });
+    useEffect(() => {
+        if (!isMobile) {
+            checkHorizontalOverflow();
+        }
+    }, [
+        state.navigationItems,
+        state.dropdownItems,
+        wrapperContainerWidth,
+        checkHorizontalOverflow,
+        isMobile,
+    ]);
+    useEffect(() => {
+        dispatch({
+            type: 'resetNavigationState',
+            payload: {
+                navigationItems: props.children,
+            },
+        });
+        setIsMobileNavigationOpen(false);
+    }, [props.children]);
+    return (React__default.createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(ListsContainer, { ref: listsContainerRef },
+            isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
+                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 })))))),
+            !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: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, 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)))))))));
 };
 
 export { PriorityNavigation as default };