@inera/ids-react 7.2.0 → 8.0.0

package/components/form/textarea/textarea.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, id, tooltip, className, ...props }, ref) => {
+const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", dataTestId = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, id, tooltip, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const hintId = useElementId();
@@ -20,7 +20,7 @@ const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", disabled = fa
             "ids-textarea--block": block,
             "ids-textarea--autosize": autoSize,
             "ids-textarea--no-resize": noResize
-        }, className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+        }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
                             "ids-label--disabled": disabled || readOnly
                         }), htmlFor: fieldId, children: label }), tooltip && tooltip] }), jsx("textarea", { ref: textareaRef, id: fieldId, className: clsx("ids-textarea__textarea", {
                     "ids-input--light": light,

package/components/form/time/time.d.ts

@@ -9,6 +9,7 @@ interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     focusAnchor?: boolean;
     light?: boolean;
     tooltip?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/time/time.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, focusAnchor = false, id, tooltip, className, ...props }, ref) => {
+const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, focusAnchor = false, dataTestId = "", id, tooltip, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const inputRef = useRef(null);
@@ -15,12 +15,12 @@ const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, inval
     const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg);
-    return (jsxs("div", { className: clsx("ids-time-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
                             "ids-label--disabled": disabled
-                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time", children: jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
-                            "ids-input--light": light,
-                            "ids-focus-anchor": focusAnchor
-                        }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }) }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
+                        "ids-input--light": light,
+                        "ids-focus-anchor": focusAnchor
+                    }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
 });
 IDSTime.displayName = "IDSTime";
 

package/components/form/toggle/toggle.d.ts

@@ -4,6 +4,7 @@ interface IDSToggleProps extends InputHTMLAttributes<HTMLInputElement> {
     tooltip?: ReactNode;
     focusAnchor?: boolean;
     children?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSToggle: import("react").ForwardRefExoticComponent<IDSToggleProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/toggle/toggle.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSToggle = forwardRef(({ disabled = false, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
+const IDSToggle = forwardRef(({ disabled = false, focusAnchor = false, tooltip, id, children, dataTestId = "", className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const toggleRef = useRef(null);
     useImperativeHandle(ref, () => toggleRef.current);
-    return (jsx(Fragment, { children: jsxs("div", { className: clsx("ids-toggle", className), children: [jsx("input", { id: fieldId, ref: toggleRef, className: clsx("ids-toggle__input", {
-                        "ids-focus-anchor": focusAnchor
-                    }), type: "checkbox", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-tooltip-wrapper ids-label-tooltip-wrapper--inline", children: [jsx("label", { htmlFor: fieldId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip] })] }) }));
+    return (jsxs("div", { className: clsx("ids-toggle", className), "data-testid": dataTestId, children: [jsx("input", { id: fieldId, ref: toggleRef, className: clsx("ids-toggle__input", {
+                    "ids-focus-anchor": focusAnchor
+                }), type: "checkbox", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-tooltip-wrapper ids-label-tooltip-wrapper--inline", children: [jsx("label", { htmlFor: fieldId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip] })] }));
 });
 IDSToggle.displayName = "IDSToggle";
 

package/components/global-alert/global-alert.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/global-alert/global-alert.css";
+interface IDSGlobalAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    agent?: boolean;
+    srExpandText?: string;
+    srCollapseText?: string;
+    collapsed?: boolean;
+    noRole?: boolean;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    icon?: string;
+    children?: ReactNode;
+    actions?: ReactNode;
+    headline: string;
+}
+export declare const IDSGlobalAlert: React.FC<IDSGlobalAlertProps>;
+export {};

package/components/global-alert/global-alert.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '@inera/ids-design/components/global-alert/global-alert.css';
+import clsx from 'clsx';
+import { useElementId } from '../utils/hooks/useElementId.js';
+
+const IDSGlobalAlert = ({ agent = false, srExpandText = "Visa meddelande", srCollapseText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, icon = "", actions, headline = "", children, className, ...props }) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+    const handleToggleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+        onCollapsedChange?.(!isCollapsed);
+    };
+    const contentId = useElementId();
+    return (jsx("div", { role: noRole ? null : "alert", className: clsx("ids-global-alert", {
+            "ids-global-alert--collapsed": isCollapsed,
+            "ids-global-alert--agent": agent
+        }, className), ...props, children: jsxs("div", { className: "ids-global-alert__inner", children: [jsx("div", { className: "ids-global-alert__header", children: jsx("button", { className: clsx("ids-global-alert__button", {
+                            "ids-global-alert__button--expanded": !isCollapsed
+                        }), "aria-controls": contentId, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [icon && (jsx("div", { className: "ids-global-alert__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
+};
+
+export { IDSGlobalAlert };

package/components/grid/container.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/grid/container/container.css";
 export interface IDSContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    fluid?: boolean;
     width?: string;
     gutterless?: boolean;
     children?: ReactNode;

package/components/grid/container.js

@@ -4,20 +4,20 @@ import { useRef, useEffect } 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 IDSContainer = ({ 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);
+    const classNames = clsx("ids-container", gutterless && `ids-container--gutterless-${gutterless}`, className);
     useEffect(() => {
         const el = containerRef.current;
         if (el) {
-            if (width && !fluid) {
+            if (width) {
                 el.style.maxWidth = `${width}px`;
             }
             else {
                 el.style.maxWidth = "";
             }
         }
-    }, [width, fluid]);
+    }, [width]);
     return (jsx("div", { ref: containerRef, className: classNames, style: { ...style }, ...props, children: children }));
 };
 

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

@@ -2,6 +2,7 @@ import React, { ReactNode, PropsWithChildren, HTMLAttributes } 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;

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

@@ -5,13 +5,14 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/header-1177/header-1177-item.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Item = ({ mobile = false, text = "", href = "", icon, link, onClick, ...props }) => {
+const IDSHeader1177Item = ({ mobile = false, keepTextOnMobile = 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
+    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 = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-1177-item-text", children: text })] }));
     if (link && isValidElement(link)) {
         return cloneElement(link, {
             ...props,

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

@@ -7,8 +7,8 @@ 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] }));
@@ -16,12 +16,12 @@ const IDSHeader1177NavItemMobile = ({ text = "", href = "", icon = "", link, chi
     if (link && isValidElement(link)) {
         return cloneElement(link, {
             ...props,
-            style: { flexGrow: 1, textDecoration: "none" },
+            style: { textDecoration: "none" },
             className: clsx(link.props.className, classNames),
             children: renderContent()
         });
     }
-    return (jsx("a", { className: classNames, href: href, style: { flexGrow: 1, textDecoration: "none" }, ...props, children: renderContent() }));
+    return (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
 };
 
 export { IDSHeader1177NavItemMobile };

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { 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';
 
-const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
+const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const containerRef = useRef(null);
@@ -22,8 +22,8 @@ const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", co
         };
     }, [expanded]);
     const renderLink = (link) => {
-        return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, {
+        return React.isValidElement(link)
+            ? React.cloneElement(link, {
                 activeIcon: true,
                 block: true,
                 colorPreset: 2,
@@ -31,12 +31,11 @@ const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", co
             })
             : link;
     };
-    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 })] }) }));
+    const renderDropdown = () => isExpanded && (jsx("div", { id: "ids-header-1177-nav-dropdown", 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__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__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()] }));
+        }), ...props, children: [label ? (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-nav-dropdown", children: label })) : (children), renderDropdown()] }));
 };
 
 export { IDSHeader1177NavItem };

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

@@ -2,6 +2,8 @@ import React, { 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>;

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

@@ -1,17 +1,16 @@
 "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 IDSHeader1177Nav = ({ hideOnTablet = false, mobileLeft, mobileRight, children, ...props }) => {
     const headerContext = useHeaderContext();
     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--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,21 +1,17 @@
 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>;