@inera/ids-react 7.2.0 → 8.1.0

package/components/grid/container.js

@@ -1,24 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/container/container.css';
 import clsx from 'clsx';
 
-const IDSContainer = ({ fluid = false, width = "", gutterless = false, children, className, style, ...props }) => {
-    const containerRef = useRef(null);
-    const classNames = clsx("ids-container", fluid && `ids-container--align-${fluid}`, gutterless && `ids-container--gutterless-${gutterless}`, className);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (el) {
-            if (width && !fluid) {
-                el.style.maxWidth = `${width}px`;
-            }
-            else {
-                el.style.maxWidth = "";
-            }
-        }
-    }, [width, fluid]);
-    return (jsx("div", { ref: containerRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, children, className, style, ...props }, ref) => {
+    const mergedStyle = { ...style, width: width ?? style?.width, maxWidth: maxWidth ?? style?.maxWidth };
+    const classNames = clsx("ids-container", gutterless && `ids-container--gutterless-${gutterless}`, className);
+    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+});
+IDSContainer.displayName = "IDSContainer";
 
 export { IDSContainer };

package/components/grid/row.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/row/row.css";
-export interface IDSRowProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSRowProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: string;
     align?: "start" | "center" | "end" | "baseline" | "stretch";
     justify?: "start" | "center" | "end" | "space-between" | "space-around";
-    gap?: string;
     children?: ReactNode;
 }
-export declare const IDSRow: React.FC<IDSRowProps>;
+export declare const IDSRow: import("react").ForwardRefExoticComponent<IDSRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/row.js

@@ -1,18 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/row/row.css';
 import clsx from 'clsx';
 
-const IDSRow = ({ align, justify, gap, className, children, style, ...props }) => {
-    const rowRef = useRef(null);
+const IDSRow = forwardRef(({ gap, align, justify, children, className, style, ...props }, ref) => {
     const classNames = clsx("ids-row", align && `ids-row--align-${align}`, justify && `ids-row--justify-${justify}`, className);
-    useEffect(() => {
-        if (rowRef.current) {
-            rowRef.current.style.gap = gap ?? "";
-        }
-    }, [gap]);
-    return (jsx("div", { ref: rowRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+    const mergedStyle = { ...style, gap: gap ?? style?.gap };
+    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+});
+IDSRow.displayName = "IDSRow";
 
 export { IDSRow };

package/components/header-1177/header-1177-avatar.d.ts

@@ -1,10 +1,13 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-avatar.css";
 interface IDSHeader1177AvatarProps {
-    username: string;
+    username?: string;
+    expanded?: boolean;
     agent?: ReactNode;
-    links?: ReactNode;
+    children?: ReactNode;
     persistent?: boolean;
+    noMobileMenu?: boolean;
+    mobileMenu?: ReactNode;
 }
 export declare const IDSHeader1177Avatar: React.FC<IDSHeader1177AvatarProps>;
 export {};

package/components/header-1177/header-1177-avatar.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-avatar.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Avatar = ({ username, agent, links, persistent = false }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+const IDSHeader1177Avatar = ({ username, expanded = false, agent, children, persistent = false, noMobileMenu = false, mobileMenu, ...props }) => {
+    const dropdownId = useId();
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const containerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -22,6 +23,15 @@ const IDSHeader1177Avatar = ({ username, agent, links, persistent = false }) =>
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [persistent]);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const links = dropdownRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+            };
+        }
+    }, [isExpanded, persistent]);
     const handleLinkClick = () => {
         setIsExpanded(false);
     };
@@ -34,13 +44,14 @@ const IDSHeader1177Avatar = ({ username, agent, links, persistent = false }) =>
             };
         }
     }, [isExpanded, persistent]);
-    return (jsx("div", { ref: containerRef, className: clsx("ids-header-1177-avatar", {
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-avatar", {
             "ids-header-1177-avatar--unresponsive": headerContext?.unresponsive
-        }), children: jsxs("div", { className: "ids-header-1177-avatar__dropdown-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
-                        "ids-header-1177-avatar__button--expanded": isExpanded
-                    }), onClick: toggleExpanded, "aria-controls": "ids-header-1177-avatar__dropdown", "aria-expanded": isExpanded, children: jsx("div", { className: "ids-header-1177-avatar-content__name", title: username, children: username }) }), jsxs("div", { ref: dropdownRef, id: "ids-header-1177-avatar__dropdown", className: clsx("ids-header-1177-avatar__dropdown", {
-                        "ids-header-1177-avatar__dropdown--expanded": isExpanded
-                    }), children: [agent && jsx("div", { className: "ids-header-1177-avatar__agent", children: agent }), agent && links && jsx("div", { className: "ids-header-1177-avatar__menu-separator" }), links && jsx("div", { className: "ids-header-1177-avatar__menu-links", children: links })] })] }) }));
+        }), style: { flexGrow: username ? "1" : "0" }, ...props, children: [username && (jsx("div", { className: "ids-header-1177-avatar__avatar", children: jsxs("div", { className: "ids-header-1177-avatar__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
+                                "ids-header-1177-avatar__button--expanded": isExpanded
+                            }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, children: jsx("div", { className: "ids-header-1177-avatar__name", title: username, children: username }) }), jsxs("div", { ref: dropdownRef, id: dropdownId, className: clsx("ids-header-1177-avatar__menu", {
+                                "ids-header-1177-avatar__menu--expanded": isExpanded,
+                                "ids-header-1177-avatar__menu--mobile-menu": !noMobileMenu
+                            }), children: [agent && jsx("div", { className: "ids-header-1177-avatar__agent", children: agent }), agent && children && jsx("hr", {}), children && jsx("div", { className: "ids-header-1177-avatar__menu-links", children: children })] })] }) })), mobileMenu] }));
 };
 
 export { IDSHeader1177Avatar };

package/components/header-1177/header-1177-item.d.ts

@@ -1,12 +1,13 @@
-import React, { ReactNode, PropsWithChildren, HTMLAttributes } from "react";
+import { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-item.css";
 interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     mobile?: boolean;
+    keepTextOnMobile?: boolean;
     icon?: string;
     href?: string;
     text?: string;
     link?: ReactNode;
     onClick?: () => void;
 }
-export declare const IDSHeader1177Item: React.FC<PropsWithChildren<IDSHeader1177ItemProps>>;
+export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, text, href, icon, link, onClick, ...props }: PropsWithChildren<IDSHeader1177ItemProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-item.js

@@ -1,28 +1,34 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
-import '@inera/ids-design/components/header-1177/header-1177-item.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177/header-1177-item.css';
 
-const IDSHeader1177Item = ({ mobile = false, text = "", href = "", icon, link, onClick, ...props }) => {
-    const headerContext = useHeaderContext();
-    const classNames = clsx("ids-header-1177__items__item", {
-        "ids-header-1177__items__item--unresponsive": headerContext?.unresponsive,
-        "ids-header-1177__items__item--mobile": mobile
+function IDSHeader1177Item({ mobile = false, keepTextOnMobile = false, text = "", href = "", icon, link, onClick, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
+    const classNames = clsx("ids-header-1177-item", {
+        "ids-header-1177-item--unresponsive": headerContext.unresponsive,
+        "ids-header-1177-item--mobile": mobile,
+        "ids-header-1177-item--keep-text": keepTextOnMobile
     });
-    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-1177__items__item-icon", "aria-label": text, children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-1177__items__item-text", children: text })] }));
+    const renderContent = () => (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     if (link && isValidElement(link)) {
-        return cloneElement(link, {
+        const linkProps = link.props;
+        const hasChildren = !!linkProps.children &&
+            (typeof linkProps.children === "string"
+                ? linkProps.children.trim().length > 0
+                : React.Children.count(linkProps.children) > 0);
+        const newLink = cloneElement(link, {
             ...props,
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
+            className: clsx(linkProps.className),
+            children: hasChildren ? linkProps.children : text
         });
+        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
     }
     if (onClick) {
-        return (jsx("button", { className: classNames, onClick: onClick, style: { cursor: "pointer" }, ...props, children: renderContent() }));
+        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
     }
-    return (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
-};
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+}
 
 export { IDSHeader1177Item };

package/components/header-1177/header-1177-menu-mobile.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-menu-mobile.css";
 interface IDSHeader1177MenuMobileProps {
-    label?: string;
+    srLabel?: string;
     persistent?: boolean;
     children?: ReactNode;
     onExpanded?: () => void;

package/components/header-1177/header-1177-menu-mobile.js

@@ -5,38 +5,49 @@ import '@inera/ids-design/components/header-1177/header-1177-menu-mobile.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
 
-const IDSHeader1177MenuMobile = ({ label = "", persistent = false, children, onExpanded, onClosed }) => {
-    const [expanded, setExpanded] = useState(false);
+const IDSHeader1177MenuMobile = ({ srLabel = "Meny", persistent = false, children, onExpanded, onClosed, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
     const headerContext = useHeaderContext();
+    const containerRef = useRef(null);
     const menuRef = useRef(null);
     const handleLinkClick = () => {
-        setExpanded(false);
+        setIsExpanded(false);
         onClosed?.();
     };
+    const handleClickOutside = (event) => {
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+            onClosed?.();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
     useEffect(() => {
-        if (!persistent && expanded) {
+        if (!persistent && isExpanded) {
             const links = menuRef.current?.querySelectorAll("a") || [];
             links.forEach(link => link.addEventListener("click", handleLinkClick));
             return () => {
                 links.forEach(link => link.removeEventListener("click", handleLinkClick));
             };
         }
-    }, [expanded, persistent]);
-    const toggleExpansion = () => {
-        setExpanded(prev => {
-            const next = !prev;
-            if (next) {
-                onExpanded?.();
-            }
-            else {
-                onClosed?.();
-            }
-            return next;
-        });
+    }, [isExpanded, persistent]);
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        if (newExpanded) {
+            onExpanded?.();
+        }
+        else {
+            onClosed?.();
+        }
     };
-    return (jsxs("div", { className: "ids-header-1177-menu-mobile-component", children: [jsxs("button", { onClick: toggleExpansion, "aria-expanded": expanded, "aria-label": "Meny", className: clsx("ids-header-1177-menu-mobile", {
+    return (jsxs("div", { className: "ids-header-1177-menu-mobile-component", ref: containerRef, ...props, children: [jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-label": srLabel, className: clsx("ids-header-1177-menu-mobile", {
                     "ids-header-1177-menu-mobile--unresponsive": headerContext?.unresponsive
-                }), children: [label, jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }), jsx("slot", {})] }), expanded && (jsx("div", { className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
+                }), children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), isExpanded && (jsx("div", { className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
 };
 
 export { IDSHeader1177MenuMobile };

package/components/header-1177/header-1177-nav-item-mobile.js

@@ -1,27 +1,22 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-nav-item-mobile.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
 
 const IDSHeader1177NavItemMobile = ({ text = "", href = "", icon = "", link, children, ...props }) => {
     const headerContext = useHeaderContext();
-    const classNames = clsx("ids-header-1177__nav-mobile__item", {
-        "ids-header-1177__nav-mobile__item--unresponsive": headerContext?.unresponsive
+    const classNames = clsx("ids-header-1177-nav-item-mobile", {
+        "ids-header-1177-nav-item-mobile--unresponsive": headerContext?.unresponsive
     });
     const renderContent = () => {
-        return (jsxs(Fragment, { children: [icon && (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), text] }));
+        return (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     };
     if (link && isValidElement(link)) {
-        return cloneElement(link, {
-            ...props,
-            style: { flexGrow: 1, textDecoration: "none" },
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
-        });
+        return (jsxs("div", { className: classNames, children: [renderContent(), link] }));
     }
-    return (jsx("a", { className: classNames, href: href, style: { flexGrow: 1, textDecoration: "none" }, ...props, children: renderContent() }));
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
 };
 
 export { IDSHeader1177NavItemMobile };

package/components/header-1177/header-1177-nav-item.d.ts

@@ -1,15 +1,15 @@
 import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-nav-item.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSHeader1177NavItemProps {
+export interface IDSHeader1177NavItemProps {
+    label?: string;
     active?: boolean;
     expanded?: boolean;
-    label?: string;
+    notification?: ReactNode;
+    children?: ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
     col4?: ReactNode;
-    children?: ReactNode;
 }
 export declare const IDSHeader1177NavItem: React.FC<IDSHeader1177NavItemProps>;
-export {};

package/components/header-1177/header-1177-nav-item.js

@@ -1,14 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded);
+const IDSHeader1177NavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
+    const contentId = useElementId();
+    //FIXME click on link should also close menu
     const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
             setIsExpanded(false);
@@ -21,22 +24,24 @@ const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", co
             document.removeEventListener("click", handleClickOutside);
         };
     }, [expanded]);
-    const renderLink = (link) => {
-        return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, {
-                activeIcon: true,
-                block: true,
-                colorPreset: 2,
-                onClick: () => setIsExpanded(false)
-            })
-            : link;
+    const renderNavItem = () => {
+        if (label) {
+            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-1177-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
+        }
+        else {
+            return (jsxs("span", { className: "ids-header-1177-nav-item__link", children: [children, " ", notification] }));
+        }
+    };
+    const renderContent = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: contentId, className: "ids-header-1177-nav-item__menu ids-header-1177-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-4", children: col4 })] }) }));
     };
-    const renderDropdown = () => isExpanded && (jsx("div", { id: "ids-header-1177-nav-dropdown", className: "ids-header-1177__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-4", children: col4 })] }) }));
-    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177__nav-item", {
-            "ids-header-1177__nav-item--unresponsive": headerContext?.unresponsive,
-            "ids-header-1177__nav-item--fluid": headerContext?.fluid,
-            "ids-header-1177__nav-item--active": active || isExpanded
-        }), children: [label ? (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-nav-item", {
+            "ids-header-1177-nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-nav-item--expanded": isExpanded,
+            "ids-header-1177-nav-item--active": active
+        }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 
 export { IDSHeader1177NavItem };

package/components/header-1177/header-1177-nav.d.ts

@@ -1,8 +1,10 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-nav.css";
 interface IDSHeader1177NavProps {
     hideOnTablet?: boolean;
+    mobileLeft?: ReactNode;
+    mobileRight?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeader1177Nav: React.FC<IDSHeader1177NavProps>;
+export declare function IDSHeader1177Nav({ hideOnTablet, mobileLeft, mobileRight, children, ...props }: IDSHeader1177NavProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-nav.js

@@ -1,17 +1,15 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/header-1177/header-1177-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Nav = ({ hideOnTablet = false, children }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177Nav({ hideOnTablet = false, mobileLeft, mobileRight, children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const navClass = clsx("ids-header-1177__nav", {
-        "ids-header-1177__nav--unresponsive": headerContext?.unresponsive,
-        "ids-header-1177__nav--fluid": headerContext?.fluid,
+        "ids-header-1177__nav--unresponsive": headerContext.unresponsive,
         "ids-header-1177__nav--hide-on-tablet": hideOnTablet
     });
-    return (jsx("nav", { className: navClass, slot: "nav", children: jsx("div", { className: "ids-header-1177__nav-inner", children: children }) }));
-};
+    return (jsxs("nav", { className: navClass, ...props, children: [jsx("div", { className: "ids-header-1177__nav-inner", children: jsx("div", { className: "ids-header-1177__nav-content", children: children }) }), jsxs("div", { className: "ids-header-1177__nav-inner-mobile", children: [jsx("div", { className: "ids-header-1177__nav-inner-mobile-left", children: mobileLeft }), jsx("div", { className: "ids-header-1177__nav-inner-mobile-right", children: mobileRight })] })] }));
+}
 
 export { IDSHeader1177Nav };

package/components/header-1177/header-1177-region-picker-mobile.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-region-picker-mobile.css";
+export interface IDSHeader1177RegionPickerMobileProps {
+    text?: string;
+    expanded?: boolean;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177RegionPickerMobile: React.FC<IDSHeader1177RegionPickerMobileProps>;

package/components/header-1177/header-1177-region-picker-mobile.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-region-picker-mobile.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+
+const IDSHeader1177RegionPickerMobile = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(propExpanded);
+    const regionIconRef = useRef(null);
+    const headerContext = useHeaderContext();
+    const toggleRegion = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        onToggleRegion?.(newExpanded);
+    };
+    const hasChildren = React.Children.count(children) > 0;
+    const renderChild = (child) => {
+        if (isValidElement(child)) {
+            const existingClass = child.props.className;
+            return cloneElement(child, {
+                ref: regionIconRef,
+                size: "m",
+                colorPreset: 4,
+                className: clsx(existingClass)
+            });
+        }
+        return null;
+    };
+    return headerContext?.hideRegionPicker ? null : (jsx("div", { className: clsx("ids-header-1177-region-picker-mobile", {
+            "ids-header-1177-region-picker-mobile--selected-region": hasChildren
+        }), ...props, children: jsxs("button", { onClick: toggleRegion, className: clsx("ids-header-1177-region-picker-mobile__button", {
+                "ids-header-1177-region-picker-mobile__button--expanded": isExpanded
+            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-region-picker-mobile__region-icon", children: renderChild(children) }), jsxs("span", { className: "ids-header-1177-region-picker-mobile__button-text", children: [" ", text] })] }) }));
+};
+
+export { IDSHeader1177RegionPickerMobile };

package/components/header-1177/header-1177-region-picker.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-region-picker.css";
+export interface IDSHeader1177RegionPickerProps {
+    text?: string;
+    expanded?: boolean;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177RegionPicker: React.FC<IDSHeader1177RegionPickerProps>;

package/components/header-1177/header-1177-region-picker.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-region-picker.css';
+import clsx from 'clsx';
+
+const IDSHeader1177RegionPicker = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(propExpanded);
+    const regionIconRef = useRef(null);
+    const toggleRegion = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        onToggleRegion?.(newExpanded);
+    };
+    const hasChildren = React.Children.count(children) > 0;
+    const renderChild = (child) => {
+        if (isValidElement(child)) {
+            const existingClass = child.props.className;
+            return cloneElement(child, {
+                ref: regionIconRef,
+                size: "m",
+                colorPreset: 3,
+                className: clsx(existingClass)
+            });
+        }
+        return null;
+    };
+    return (jsxs("div", { className: clsx("ids-header-1177-region-picker", {
+            "ids-header-1177-region-picker--selected-region": hasChildren
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-region-picker__region-icon", children: renderChild(children) }), jsx("div", { className: "ids-header-1177-region-picker__selector", children: jsx("button", { onClick: toggleRegion, className: clsx("ids-header-1177-region-picker__button", {
+                        "ids-header-1177-region-picker__button--expanded": isExpanded
+                    }), "aria-label": text, children: text }) })] }));
+};
+
+export { IDSHeader1177RegionPicker };

package/components/header-1177/header-1177.d.ts

@@ -1,22 +1,18 @@
 import React, { ReactNode, AnchorHTMLAttributes } from "react";
 import "@inera/ids-design/components/header-1177/header-1177.css";
 interface IDSHeader1177Props extends React.HTMLAttributes<HTMLDivElement> {
-    regionPickerText?: string;
     hideRegionPicker?: boolean;
-    regionPickerExpanded?: boolean;
-    fluid?: boolean;
     unresponsive?: boolean;
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
     logo?: ReactNode;
-    srLogoLabel?: string;
-    regionIcon?: ReactNode;
+    srLogoText?: string;
+    regionPicker?: ReactNode;
     skipToContentLink?: ReactNode;
     onToggleRegion?: (isExpanded: boolean) => void;
     items?: ReactNode;
     avatar?: ReactNode;
-    mobileMenu?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeader1177: React.FC<IDSHeader1177Props>;
+export declare function IDSHeader1177({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }: IDSHeader1177Props): import("react/jsx-runtime").JSX.Element;
 export {};