@dnanpm/styleguide 3.6.0 → 3.7.1

package/build/cjs/components/Drawer/Drawer.d.ts

@@ -2,15 +2,33 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 type Size = 'small' | 'medium' | 'large';
+type Variant = 'light' | 'dark';
 interface Props {
     /**
      * Allows to control the state of component
      */
     isOpen: boolean;
+    /**
+     * Allows to define title shown in the header
+     */
+    title: string;
     /**
      * Unique ID for the component
      */
     id?: string;
+    /**
+     * Allows to change the color scheme of the component
+     *
+     * @param {Variant} light Sets header background color to `theme.color.background.white.default`
+     * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
+     *
+     * @default 'light'
+     */
+    variant?: Variant;
+    /**
+     * Allows to define subtitle shown in the header
+     */
+    subtitle?: string;
     /**
      * Content of the component
      */
@@ -36,6 +54,7 @@ interface Props {
      * Allows to pass a custom margin
      *
      * @default '0'
+     * @deprecated Will be removed in the next major version
      */
     margin?: string;
     /**
@@ -69,6 +88,10 @@ interface Props {
      * @default true
      */
     isClosable?: boolean;
+    /**
+     * Allows to display the footer content
+     */
+    footer?: ReactNode;
     /**
      * Allows to pass a custom className
      */
@@ -78,5 +101,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Drawer: ({ appElement, size, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Drawer;

package/build/cjs/components/Drawer/Drawer.js

@@ -12,6 +12,8 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
+var common = require('../../utils/common.js');
+var Floater = require('../Floater/Floater.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -63,7 +65,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         width: ${sizeMap[size]};
     `};
 `;
-const StyledOverlay = styled["default"].div `
+const StyledReactModalOverlay = styled["default"].div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -101,30 +103,89 @@ const StyledOverlay = styled["default"].div `
         }
     }
 `;
+const StyledReactModalContent = styled["default"].div `
+    &:focus {
+        outline: none;
+    }
+`;
 const StyledBox = styled["default"](Box["default"]) `
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     border-radius: 0;
     height: 100%;
     overflow-y: auto;
+    position: relative;
+    padding: 0;
+    border: 0 none;
 `;
-const StyledContent = styled["default"].div `
-    &:focus {
-        outline: none;
+const Header = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    padding: 1.25rem;
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.white.default
+    : theme["default"].color.background.plum.E02};
+    width: 100%;
+
+    h2,
+    p {
+        margin: 0;
     }
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const Title = styled["default"].h2 `
+    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.h2S : theme["default"].fontSize.h2M)};
+    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+`;
+const Subtitle = styled["default"].p `
+    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.l : theme["default"].fontSize.xl)};
+    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+`;
+const CloseButton = styled["default"](ButtonClose["default"]) `
+    margin: 0;
+    padding: 0.625rem;
+    border-radius: 0 0 0 ${theme["default"].radius.default};
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.sand.E01
+    : theme["default"].color.background.plum.default};
+`;
+const Content = styled["default"].div `
+    padding: ${({ padding }) => padding};
+    margin: 0;
+`;
+const Footer = styled["default"].div `
+    padding: 1.25rem;
+    margin: 0;
+    width: 100%;
+    border-top: 1px solid ${theme["default"].color.line.L04};
+    background-color: ${theme["default"].color.background.white.default};
+
+    ${common["default"]({ elevation: 'high', shadow: '1 0 0 0' })};
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
-    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default["default"].createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default["default"].createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Drawer = (_a) => {
-    var { appElement = '#__next', size = 'medium', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "closeButton", "isClosable", 'data-testid']);
+    var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal__default["default"].setAppElement(appElement);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
-            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
-                props.children,
-                closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))))),
+            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(Floater["default"], null, closeButton && isClosable && (React__default["default"].createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: variant === 'light'
+                                ? theme["default"].color.default.plum
+                                : theme["default"].color.default.white })))),
+                    React__default["default"].createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React__default["default"].createElement(Title, { size: size, variant: variant }, props.title),
+                        props.subtitle && (React__default["default"].createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React__default["default"].createElement(Floater["default"], { position: "bottom" },
+                    React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
         React__default["default"].createElement(GlobalStyle, null)));
 };
 

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -89,7 +89,7 @@ const NavigationList = styled["default"](CoreULStyles) `
 `;
 const DropdownList = styled["default"](CoreULStyles) `
     position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5.6)};
+    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 6)};
     right: 0;
     z-index: 1;
     padding-bottom: 0.5rem;
@@ -100,6 +100,12 @@ const DropdownList = styled["default"](CoreULStyles) `
     clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
     transition: all 0.2s ease-in-out;
 
+    ${styledUtils.media.md `
+        & > li {
+            margin: auto 1.25rem;
+        }
+    `}
+
     ${common["default"]({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
@@ -112,7 +118,10 @@ const reducer = (state, action) => {
         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.clientWidth],
+                lastItemWidth: [
+                    ...state.lastItemWidth,
+                    action.payload.lastItem.offsetWidth + 40,
+                ],
             }));
         }
         case 'moveItemToNavigation': {
@@ -160,8 +169,9 @@ const PriorityNavigation = (_a) => {
     var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["dropdownButtonLabel", 'data-testid']);
     const listsContainerRef = React.useRef(null);
     const navigationListRef = React.useRef(null);
+    const dropdownButtonRef = React.useRef(null);
     const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
-    const { width: listsContainerWidth } = useResizeObserver["default"](listsContainerRef);
+    const { width: wrapperContainerWidth } = useResizeObserver["default"](listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = React.useState(false);
     const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -174,10 +184,12 @@ const PriorityNavigation = (_a) => {
     };
     const [state, dispatch] = React.useReducer(reducer, initialState);
     const checkHorizontalOverflow = useDebounce["default"](() => {
+        var _a, _b;
         if (navigationListRef.current && listsContainerRef.current) {
-            const listsContainerRefWidth = navigationListRef.current.scrollWidth;
+            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 &&
-                listsContainerRefWidth + 80 > listsContainerWidth) {
+                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
                 dispatch({
                     type: 'moveItemToDropdown',
                     payload: {
@@ -186,10 +198,11 @@ const PriorityNavigation = (_a) => {
                 });
             }
             else if (state.dropdownItems.length > 0 &&
-                listsContainerWidth >
-                    listsContainerRefWidth +
+                wrapperContainerWidth >
+                    navigationListWidth +
                         state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        100) {
+                        dropdownButtonWidth +
+                        20) {
                 dispatch({
                     type: 'moveItemToNavigation',
                 });
@@ -215,7 +228,7 @@ const PriorityNavigation = (_a) => {
     }, [
         state.navigationItems,
         state.dropdownItems,
-        listsContainerWidth,
+        wrapperContainerWidth,
         checkHorizontalOverflow,
         isMobile,
     ]);
@@ -238,8 +251,10 @@ const PriorityNavigation = (_a) => {
                 navigationItem.props.children,
                 navigationItem.props.isActive && isMobile && (React__default["default"].createElement(Icon["default"], { icon: icons.Check, color: theme["default"].color.default.pink })))))),
             !isMobile && Boolean(state.dropdownItems.length) && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel),
-                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));
+                React__default["default"].createElement("div", { ref: dropdownButtonRef },
+                    React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
+                    dropdownItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { 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)))))))));
 };
 
 exports["default"] = PriorityNavigation;

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -18,7 +18,7 @@ const Element = styled["default"].li `
     justify-content: space-between;
     list-style: none;
     position: relative;
-    padding: 1rem 1.25rem;
+    padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
     ${({ onClick }) => onClick &&
@@ -36,9 +36,9 @@ const Element = styled["default"].li `
     }
 
     ${({ isActive }) => styledUtils.media.md `
-        justify-content: center;
+        justify-content: left;
         padding: 1rem 0;
-        margin: auto 1.25rem;
+        margin: auto 1rem;
         border-top: 3px solid transparent;
         border-bottom: 3px solid ${isActive ? theme["default"].color.text.pink : 'transparent'};
     `}
@@ -53,10 +53,6 @@ const Element = styled["default"].li `
             color: ${theme["default"].color.hover.pink};
             text-decoration: none;
         }
-
-        ${styledUtils.media.md `
-            margin: auto;
-        `}
     }
 `;
 /**

package/build/cjs/hooks/useResizeObserver.js

@@ -12,8 +12,8 @@ const useResizeObserver = (ref) => {
     const [size, setSize] = React.useState({ width: 0, height: 0 });
     const resizeObserver = React.useRef(null);
     const onResize = React.useCallback(entries => {
-        const { width, height } = entries[0].contentRect;
-        setSize({ width, height });
+        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
+        setSize({ width: inlineSize, height: blockSize });
     }, []);
     React.useEffect(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {

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

@@ -2,15 +2,33 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 type Size = 'small' | 'medium' | 'large';
+type Variant = 'light' | 'dark';
 interface Props {
     /**
      * Allows to control the state of component
      */
     isOpen: boolean;
+    /**
+     * Allows to define title shown in the header
+     */
+    title: string;
     /**
      * Unique ID for the component
      */
     id?: string;
+    /**
+     * Allows to change the color scheme of the component
+     *
+     * @param {Variant} light Sets header background color to `theme.color.background.white.default`
+     * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
+     *
+     * @default 'light'
+     */
+    variant?: Variant;
+    /**
+     * Allows to define subtitle shown in the header
+     */
+    subtitle?: string;
     /**
      * Content of the component
      */
@@ -36,6 +54,7 @@ interface Props {
      * Allows to pass a custom margin
      *
      * @default '0'
+     * @deprecated Will be removed in the next major version
      */
     margin?: string;
     /**
@@ -69,6 +88,10 @@ interface Props {
      * @default true
      */
     isClosable?: boolean;
+    /**
+     * Allows to display the footer content
+     */
+    footer?: ReactNode;
     /**
      * Allows to pass a custom className
      */
@@ -78,5 +101,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Drawer: ({ appElement, size, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Drawer;

package/build/es/components/Drawer/Drawer.js

@@ -8,6 +8,8 @@ import { media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
+import getElevationShadow from '../../utils/common.js';
+import Floater from '../Floater/Floater.js';
 
 const sizeMap = {
     small: '375px',
@@ -54,7 +56,7 @@ const StyledReactModal = styled(ReactModal) `
         width: ${sizeMap[size]};
     `};
 `;
-const StyledOverlay = styled.div `
+const StyledReactModalOverlay = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -92,30 +94,89 @@ const StyledOverlay = styled.div `
         }
     }
 `;
+const StyledReactModalContent = styled.div `
+    &:focus {
+        outline: none;
+    }
+`;
 const StyledBox = styled(Box) `
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     border-radius: 0;
     height: 100%;
     overflow-y: auto;
+    position: relative;
+    padding: 0;
+    border: 0 none;
 `;
-const StyledContent = styled.div `
-    &:focus {
-        outline: none;
+const Header = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    border-bottom: 1px solid ${theme.color.line.L03};
+    padding: 1.25rem;
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme.color.background.white.default
+    : theme.color.background.plum.E02};
+    width: 100%;
+
+    h2,
+    p {
+        margin: 0;
     }
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const Title = styled.h2 `
+    font-size: ${({ size }) => (size === 'small' ? theme.fontSize.h2S : theme.fontSize.h2M)};
+    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+`;
+const Subtitle = styled.p `
+    font-size: ${({ size }) => (size === 'small' ? theme.fontSize.l : theme.fontSize.xl)};
+    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+`;
+const CloseButton = styled(ButtonClose) `
+    margin: 0;
+    padding: 0.625rem;
+    border-radius: 0 0 0 ${theme.radius.default};
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme.color.background.sand.E01
+    : theme.color.background.plum.default};
+`;
+const Content = styled.div `
+    padding: ${({ padding }) => padding};
+    margin: 0;
+`;
+const Footer = styled.div `
+    padding: 1.25rem;
+    margin: 0;
+    width: 100%;
+    border-top: 1px solid ${theme.color.line.L04};
+    background-color: ${theme.color.background.white.default};
+
+    ${getElevationShadow({ elevation: 'high', shadow: '1 0 0 0' })};
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
-    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = __rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = __rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default.createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Drawer = (_a) => {
-    var { appElement = '#__next', size = 'medium', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "closeButton", "isClosable", 'data-testid']);
+    var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
-            React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
-                props.children,
-                closeButton && isClosable && (React__default.createElement(ButtonClose, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default.createElement(Icon, { icon: Close }))))),
+            React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React__default.createElement("div", null,
+                    React__default.createElement(Floater, null, closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default.createElement(Icon, { icon: Close, color: variant === 'light'
+                                ? theme.color.default.plum
+                                : theme.color.default.white })))),
+                    React__default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React__default.createElement(Title, { size: size, variant: variant }, props.title),
+                        props.subtitle && (React__default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React__default.createElement(Floater, { position: "bottom" },
+                    React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
         React__default.createElement(GlobalStyle, null)));
 };
 

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

@@ -81,7 +81,7 @@ const NavigationList = styled(CoreULStyles) `
 `;
 const DropdownList = styled(CoreULStyles) `
     position: absolute;
-    top: ${getMultipliedSize(theme.base.baseHeight, 5.6)};
+    top: ${getMultipliedSize(theme.base.baseHeight, 6)};
     right: 0;
     z-index: 1;
     padding-bottom: 0.5rem;
@@ -92,6 +92,12 @@ const DropdownList = styled(CoreULStyles) `
     clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
     transition: all 0.2s ease-in-out;
 
+    ${media.md `
+        & > li {
+            margin: auto 1.25rem;
+        }
+    `}
+
     ${getElevationShadow({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
@@ -104,7 +110,10 @@ const reducer = (state, action) => {
         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.clientWidth],
+                lastItemWidth: [
+                    ...state.lastItemWidth,
+                    action.payload.lastItem.offsetWidth + 40,
+                ],
             }));
         }
         case 'moveItemToNavigation': {
@@ -152,8 +161,9 @@ 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: listsContainerWidth } = useResizeObserver(listsContainerRef);
+    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
     const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -166,10 +176,12 @@ const PriorityNavigation = (_a) => {
     };
     const [state, dispatch] = useReducer(reducer, initialState);
     const checkHorizontalOverflow = useDebounce(() => {
+        var _a, _b;
         if (navigationListRef.current && listsContainerRef.current) {
-            const listsContainerRefWidth = navigationListRef.current.scrollWidth;
+            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 &&
-                listsContainerRefWidth + 80 > listsContainerWidth) {
+                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
                 dispatch({
                     type: 'moveItemToDropdown',
                     payload: {
@@ -178,10 +190,11 @@ const PriorityNavigation = (_a) => {
                 });
             }
             else if (state.dropdownItems.length > 0 &&
-                listsContainerWidth >
-                    listsContainerRefWidth +
+                wrapperContainerWidth >
+                    navigationListWidth +
                         state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        100) {
+                        dropdownButtonWidth +
+                        20) {
                 dispatch({
                     type: 'moveItemToNavigation',
                 });
@@ -207,7 +220,7 @@ const PriorityNavigation = (_a) => {
     }, [
         state.navigationItems,
         state.dropdownItems,
-        listsContainerWidth,
+        wrapperContainerWidth,
         checkHorizontalOverflow,
         isMobile,
     ]);
@@ -230,8 +243,10 @@ const PriorityNavigation = (_a) => {
                 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(ButtonIcon, { onClick: toggleDropdown, icon: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel),
-                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));
+                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 };

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

@@ -10,7 +10,7 @@ const Element = styled.li `
     justify-content: space-between;
     list-style: none;
     position: relative;
-    padding: 1rem 1.25rem;
+    padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
     ${({ onClick }) => onClick &&
@@ -28,9 +28,9 @@ const Element = styled.li `
     }
 
     ${({ isActive }) => media.md `
-        justify-content: center;
+        justify-content: left;
         padding: 1rem 0;
-        margin: auto 1.25rem;
+        margin: auto 1rem;
         border-top: 3px solid transparent;
         border-bottom: 3px solid ${isActive ? theme.color.text.pink : 'transparent'};
     `}
@@ -45,10 +45,6 @@ const Element = styled.li `
             color: ${theme.color.hover.pink};
             text-decoration: none;
         }
-
-        ${media.md `
-            margin: auto;
-        `}
     }
 `;
 /**

package/build/es/hooks/useResizeObserver.js

@@ -8,8 +8,8 @@ const useResizeObserver = (ref) => {
     const [size, setSize] = useState({ width: 0, height: 0 });
     const resizeObserver = useRef(null);
     const onResize = useCallback(entries => {
-        const { width, height } = entries[0].contentRect;
-        setSize({ width, height });
+        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
+        setSize({ width: inlineSize, height: blockSize });
     }, []);
     useEffect(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.6.0",
+    "version": "3.7.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -93,6 +93,7 @@
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
         "ts-jest": "^29.1.2",
+        "ts-node": "^10.9.2",
         "tslib": "^2.1.0",
         "typescript": "^4.1.3",
         "webpack": "^5.88.2"

package/build/cjs/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/cjs/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/cjs/components/Selectbox/__tests__/Selectbox.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/build/cjs/components/Tab/__tests__/Tab.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/cjs/components/Tabs/__tests__/Tabs.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/build/es/components/Selectbox/__tests__/Selectbox.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/build/es/components/Tab/__tests__/Tab.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/es/components/Tabs/__tests__/Tabs.spec.d.ts

@@ -1 +0,0 @@
-export {};