@inera/ids-react 9.1.1 → 9.2.0

package/components/form/select-multiple/select-multiple-base.d.ts

@@ -1,27 +1,20 @@
-import { CSSProperties, ReactNode } from "react";
-export interface IDSSelectMultipleBaseProps {
-    id?: string;
-    labelId?: string;
-    label?: string;
+import { CSSProperties } from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectMultipleBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     expanded?: boolean;
     placeholder?: string;
     numbCheckedBoxes?: number;
     selectedLabel?: string;
     selectedLabelPlural?: string;
     maxHeight?: string;
-    errorMsg?: string;
-    invalid?: boolean;
-    disabled?: boolean;
     ariaDisabled?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: ReactNode;
     buttonRef?: React.Ref<HTMLButtonElement>;
     componentRef?: React.Ref<HTMLDivElement>;
-    children?: ReactNode;
-    className?: string;
     onClick?: () => void;
     client?: boolean;
     style?: CSSProperties;
 }
-export declare function IDSSelectMultipleBase({ id, labelId, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, buttonRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSelectMultipleBase {
+    var displayName: string;
+}

package/components/form/select-multiple/select-multiple-base.js

@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSSelectMultipleBase({ id, labelId, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, componentRef, buttonRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
-    const defaultLabelId = !!labelId ? labelId : `select-multiple-base-label-${useId()}`;
-    const dropdownId = `select-multiple-dropdown-${useId()}`;
+function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
+    const reactId = useId();
+    const labelId = `select-multiple-base-label-${reactId}`;
+    const dropdownId = `select-multiple-base-dropdown-${reactId}`;
     const displayedValue = numbCheckedBoxes === 0 || !numbCheckedBoxes
         ? placeholder
         : numbCheckedBoxes === 1
@@ -15,12 +16,13 @@ function IDSSelectMultipleBase({ id, labelId, label, placeholder, numbCheckedBox
             onClick
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: defaultLabelId, className: clsx("ids-label", { "ids-label--disabled": disabled || ariaDisabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": defaultLabelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: labelId, className: clsx("ids-label", { "ids-label--disabled": disabled || readOnly }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": labelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), disabled: disabled, "aria-disabled": ariaDisabled, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
+                    }), disabled: disabled, "aria-disabled": ariaDisabled || readOnly || undefined, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
                         "ids-select-multiple__dropdown--expanded": expanded
                     }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight }, children: children }) }) })] }));
 }
+IDSSelectMultipleBase.displayName = "IDSSelectMultipleBase";
 
 export { IDSSelectMultipleBase };

package/components/form/select-multiple/select-multiple.d.ts

@@ -1,25 +1,14 @@
-import React, { HTMLAttributes } from "react";
-export interface IDSSelectMultipleProps extends HTMLAttributes<HTMLDivElement> {
-    label?: string;
+import React from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     selectedLabel?: string;
     selectedLabelPlural?: string;
     placeholder?: string;
     numbCheckedBoxes?: number;
     maxHeight?: string;
     expanded?: boolean;
-    errorMsg?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    ariaDisabled?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    noValidation?: boolean;
-    tooltip?: React.ReactNode;
-    children?: React.ReactNode;
-    dataTestId?: string;
-    id?: string;
 }
-export declare function IDSSelectMultiple({ label, id, invalid, noValidation, expanded, errorMsg, ariaDisabled, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultiple({ label, invalid, noValidation, expanded, errorMsg, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSSelectMultiple {
     var displayName: string;
 }

package/components/form/select-multiple/select-multiple.js

@@ -6,15 +6,13 @@ import { IDSCheckboxGroup } from '../checkbox/checkbox-group.js';
 import { useClickOutside } from '../../utils/hooks/useClickOutside.js';
 import { useEsc } from '../../utils/hooks/useEsc.js';
 
-function IDSSelectMultiple({ label, id, invalid = false, noValidation = false, expanded = false, errorMsg, ariaDisabled = false, style, children, ...props }) {
+function IDSSelectMultiple({ label, invalid = false, noValidation = false, expanded = false, errorMsg, style, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
     const buttonRef = useRef(null);
     const componentRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded);
+    useClickOutside(() => setIsExpanded(false), componentRef, buttonRef, isExpanded);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded);
     useEffect(() => {
         if (checkboxListInvalid && !noValidation)
             setIsExpanded(true);
@@ -22,7 +20,7 @@ function IDSSelectMultiple({ label, id, invalid = false, noValidation = false, e
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, label: label, id: id, componentRef: componentRef, buttonRef: buttonRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
+    return (jsx(IDSSelectMultipleBase, { ...props, client: true, componentRef: componentRef, buttonRef: buttonRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, label: label, onClick: () => {
             setIsExpanded(!isExpanded);
         }, children: jsx(IDSCheckboxGroup, { block: true, legend: label, hideLegend: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
                 if (!isValid && !noValidation) {

package/components/form/spinner/spinner.d.ts

@@ -5,4 +5,7 @@ interface IDSSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
     srText?: string;
 }
 export declare function IDSSpinner({ variant, live, srText, className, ...rest }: IDSSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSpinner {
+    var displayName: string;
+}
 export {};

package/components/form/spinner/spinner.js

@@ -4,5 +4,6 @@ import clsx from 'clsx';
 function IDSSpinner({ variant = "1", live = "polite", srText = "", className, ...rest }) {
     return (jsxs("div", { role: "alert", "aria-live": live, className: clsx("ids-spinner", `ids-spinner--${variant}`, className), ...rest, children: [srText && jsx("p", { className: "ids-spinner-sr", children: srText }), jsx("div", { className: "ids-bounce-1" }), jsx("div", { className: "ids-bounce-2" }), jsx("div", { className: "ids-bounce-3" })] }));
 }
+IDSSpinner.displayName = "IDSSpinner";
 
 export { IDSSpinner };

package/components/form/textarea/textarea-base.d.ts

@@ -1,24 +1,16 @@
 import { CSSProperties } from "react";
-export interface IDSTextareaBaseProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    id?: string;
-    label?: string;
-    hint?: React.ReactNode;
-    errorMsg?: string;
-    invalid?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    light?: boolean;
-    block?: boolean;
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+interface IDSTextareaBaseProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "ref">, CommonFormPropsWithReadOnly {
     autoSize?: boolean;
     noResize?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: React.ReactNode;
+    block?: boolean;
     textareaRef?: React.Ref<HTMLTextAreaElement>;
     hintId?: string;
     errorMsgId?: string;
-    dataTestId?: string;
-    className?: string;
     style?: CSSProperties;
 }
 export declare function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSTextareaBase {
+    var displayName: string;
+}
+export {};

package/components/form/textarea/textarea-base.js

@@ -9,15 +9,11 @@ function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invali
     const baseHintId = !!hintId ? hintId : `textarea-base-hint-${reactId}`;
     const baseErrorMsgId = !!errorMsgId ? errorMsgId : `textarea-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaHandler = showErrorMsg
-        ? {
-            "aria-describedby": baseErrorMsgId
-        }
-        : !!hint
-            ? {
-                "aria-describedby": baseHintId
-            }
-            : {};
+    const ariaHandler = {};
+    const describedByIds = [showErrorMsg && baseErrorMsgId, hint && baseHintId].filter(Boolean);
+    if (describedByIds.length) {
+        ariaHandler["aria-describedby"] = describedByIds.join(" ");
+    }
     return (jsxs("div", { className: clsx("ids-textarea", {
             "ids-textarea--block": block,
             "ids-textarea--autosize": autoSize,
@@ -28,7 +24,8 @@ function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invali
                     "ids-input--light": light,
                     "ids-input--invalid": invalid,
                     "ids-focus-anchor": focusAnchor
-                }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                }), style: { minWidth: (!!hint || !!errorMsg && showErrorMsg) ? "100%" : "inherit" }, required: required, disabled: disabled, "aria-required": required, "aria-disabled": disabled, "aria-invalid": invalid, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
+IDSTextareaBase.displayName = "IDSTextareaBase";
 
 export { IDSTextareaBase };

package/components/form/textarea/textarea.d.ts

@@ -1,19 +1,9 @@
-export interface IDSTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    hint?: React.ReactNode;
-    errorMsg?: string;
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-    noValidation?: boolean;
-    validationOnBlur?: boolean;
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+interface IDSTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, CommonFormPropsWithReadOnly {
     autoSize?: boolean;
     noResize?: boolean;
+    compact?: boolean;
     block?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    readOnly?: boolean;
-    tooltip?: React.ReactNode;
-    dataTestId?: string;
 }
 export declare const IDSTextarea: import("react").ForwardRefExoticComponent<IDSTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/form/textarea/textarea.js

@@ -1,15 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTextareaBase } from './textarea-base.js';
 
-const IDSTextarea = forwardRef(({ id, label, hint, errorMsg, disabled = false, invalid = false, required = false, noValidation = false, validationOnBlur = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, dataTestId = "", tooltip, className, children, style, ...props }, ref) => {
+const IDSTextarea = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
     const textareaRef = useRef(null);
-    useImperativeHandle(ref, () => textareaRef.current);
-    const isValid = useInputValidity(textareaRef, validationOnBlur);
-    const isInvalid = (invalid || !isValid) && !noValidation;
-    return (jsx(IDSTextareaBase, { id: id, label: label, hint: hint, errorMsg: errorMsg, invalid: isInvalid, required: required, disabled: disabled, readOnly: readOnly, light: light, autoSize: autoSize, noResize: noResize, block: block, focusAnchor: focusAnchor, tooltip: tooltip, className: className, textareaRef: textareaRef, dataTestId: dataTestId, style: style, ...props }));
+    const hasValidValue = useInputValidity(textareaRef, validationOnBlur);
+    const computedInvalid = (invalid || !hasValidValue) && !noValidation;
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return jsx(IDSTextareaBase, { ...props, invalid: computedInvalid, textareaRef: mergedRef });
 });
 IDSTextarea.displayName = "IDSTextarea";
 

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

@@ -1,17 +1,11 @@
 import { CSSProperties } from "react";
-export interface IDSTimeBaseProps {
-    id?: string;
-    label?: string;
-    errorMsg?: string;
-    invalid?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: React.ReactNode;
-    errorMsgId?: string;
-    dataTestId?: string;
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSTimeBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     inputRef?: React.Ref<HTMLInputElement>;
+    errorMsgId?: string;
     style?: CSSProperties;
 }
 export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSTimeBase {
+    var displayName: string;
+}

package/components/form/time/time-base.js

@@ -5,14 +5,13 @@ import { useId } from 'react';
 
 function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, ...props }) {
     const reactId = useId();
-    const inputId = !!id ? id : `time-base-${reactId}`;
-    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `time-base-error-${reactId}`;
+    const inputId = id ?? `time-base-${reactId}`;
+    const baseErrorMsgId = errorMsgId ?? `time-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaHandler = showErrorMsg
-        ? {
-            "aria-describedby": baseErrorMsgId
-        }
-        : {};
+    const ariaHandler = {};
+    if (showErrorMsg) {
+        ariaHandler["aria-describedby"] = baseErrorMsgId;
+    }
     return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
                             "ids-label--disabled": disabled
                         }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
@@ -20,5 +19,6 @@ function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = fals
                         "ids-focus-anchor": focusAnchor
                     }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, ...ariaHandler, ...props }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
+IDSTimeBase.displayName = "IDSTimeBase";
 
 export { IDSTimeBase };

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

@@ -1,16 +1,4 @@
-export interface IDSTimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    id?: string;
-    label?: string;
-    errorMsg?: string;
-    invalid?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: React.ReactNode;
-    errorMsgId?: string;
-    dataTestId?: string;
-    noValidation?: boolean;
-    validationOnBlur?: boolean;
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSTimeProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
 }
 export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/time/time.js

@@ -1,15 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTimeBase } from './time-base.js';
 
-const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, style, ...props }, ref) => {
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
+const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
+    const timeRef = useRef(null);
+    const hasValidValue = useInputValidity(timeRef, validationOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: inputRef, ...props, style: style });
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        timeRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: mergedRef, ...props });
 });
 IDSTime.displayName = "IDSTime";
 

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

@@ -13,3 +13,6 @@ export interface IDSGlobalAlertBaseProps extends React.HTMLAttributes<HTMLDivEle
     client?: boolean;
 }
 export declare function IDSGlobalAlertBase({ agent, srExpandText, srCollapseText, collapsed, noRole, headline, actions, children, className, onToggle, client, ...props }: IDSGlobalAlertBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSGlobalAlertBase {
+    var displayName: string;
+}

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

@@ -13,9 +13,10 @@ function IDSGlobalAlertBase({ agent = false, srExpandText = "Visa meddelande", s
     return (jsx("div", { role: noRole ? undefined : "alert", className: clsx("ids-global-alert", {
             "ids-global-alert--collapsed": collapsed,
             "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", {
+        }, className), ...props, children: jsxs("div", { className: "ids-global-alert__inner", children: [jsx("div", { className: "ids-global-alert__header", children: jsx("button", { type: "button", className: clsx("ids-global-alert__button", {
                             "ids-global-alert__button--expanded": !collapsed
-                        }), "aria-controls": contentId, "aria-expanded": !collapsed, ...toggleHandler, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
+                        }), "aria-controls": contentId, "aria-expanded": !collapsed, ...toggleHandler, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) }) }), jsx("div", { id: contentId, className: "ids-global-alert__content", children: children }), actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] }) }));
 }
+IDSGlobalAlertBase.displayName = "IDSGlobalAlertBase";
 
 export { IDSGlobalAlertBase };

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

@@ -1,7 +1,12 @@
 import React from "react";
 import { IDSGlobalAlertBase } from "./global-alert-base";
 interface IDSGlobalAlertProps extends Omit<React.ComponentProps<typeof IDSGlobalAlertBase>, "onToggle" | "contentId"> {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSGlobalAlert({ collapsed, onCollapsedChange, className, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSGlobalAlert({ collapsed, defaultCollapsed, onCollapsedChange, className, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSGlobalAlert {
+    var displayName: string;
+}
 export {};

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

@@ -1,19 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { IDSGlobalAlertBase } from './global-alert-base.js';
 
-function IDSGlobalAlert({ collapsed = false, onCollapsedChange, className, ...props }) {
-    const [isCollapsed, setIsCollapsed] = useState(collapsed);
-    useEffect(() => {
-        setIsCollapsed(collapsed);
-    }, [collapsed]);
+// FIXME 10.0 byt till expanded och defaultExpanded?
+function IDSGlobalAlert({ collapsed, defaultCollapsed = false, onCollapsedChange, className, ...props }) {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
     const handleToggleCollapse = () => {
-        const newState = !isCollapsed;
-        setIsCollapsed(newState);
-        onCollapsedChange?.(newState);
+        const next = !isCollapsed;
+        if (!isControlled) {
+            setInternalCollapsed(next);
+        }
+        onCollapsedChange?.(next);
     };
     return (jsx(IDSGlobalAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggle: handleToggleCollapse, className: className }));
 }
+IDSGlobalAlert.displayName = "IDSGlobalAlert";
 
 export { IDSGlobalAlert };

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

@@ -14,4 +14,7 @@ interface IDSHeader1177AvatarBaseProps extends HTMLAttributes<HTMLDivElement> {
     buttonRef?: React.RefObject<HTMLButtonElement>;
 }
 export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AvatarBase {
+    var displayName: string;
+}
 export {};

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

@@ -20,5 +20,6 @@ function IDSHeader1177AvatarBase({ username, agent, children, unresponsive = fal
                             "ids-header-1177-avatar__menu--no-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 })] })] }) })) }));
 }
+IDSHeader1177AvatarBase.displayName = "IDSHeader1177AvatarBase";
 
 export { IDSHeader1177AvatarBase };

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

@@ -7,4 +7,7 @@ interface IDSHeader1177AvatarProps extends HTMLAttributes<HTMLDivElement> {
     noMobileMenu?: boolean;
 }
 export declare function IDSHeader1177Avatar({ expanded, persistent, children, ...props }: IDSHeader1177AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Avatar {
+    var displayName: string;
+}
 export {};

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

@@ -1,11 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177AvatarBase } from './header-1177-avatar-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177Avatar({ expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
@@ -16,22 +17,13 @@ function IDSHeader1177Avatar({ expanded = false, persistent = false, children, .
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(componentRef.current, isExpanded && !persistent);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
-    // Clicking a link inside dropdown closes it
-    useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = menuRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", closeOnClick));
-            return () => links.forEach(link => link.removeEventListener("click", closeOnClick));
-        }
-    }, [isExpanded, persistent]);
-    const closeOnClick = () => setIsExpanded(false);
     return (jsx(IDSHeader1177AvatarBase, { ...props, client: true, expanded: isExpanded, onToggle: toggleAvatar, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
+IDSHeader1177Avatar.displayName = "IDSHeader1177Avatar";
 
 export { IDSHeader1177Avatar };

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

@@ -15,4 +15,7 @@ interface IDSHeader1177BaseProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSHeader1177Base({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }: IDSHeader1177BaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Base {
+    var displayName: string;
+}
 export {};

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

@@ -10,5 +10,6 @@ function IDSHeader1177Base({ srLogoText = "Logotyp", hideRegionPicker = false, u
             "ids-header-1177--unresponsive": unresponsive
         }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar, " ", mobileMenu] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }));
 }
+IDSHeader1177Base.displayName = "IDSHeader1177Base";
 
 export { IDSHeader1177Base };

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

@@ -6,4 +6,7 @@ interface IDSHeader1177ItemBaseProps extends HTMLAttributes<HTMLElement> {
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177ItemBase({ mobile, keepTextOnMobile, icon, children, unresponsive, ...props }: IDSHeader1177ItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ItemBase {
+    var displayName: string;
+}
 export {};

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

@@ -9,5 +9,6 @@ function IDSHeader1177ItemBase({ mobile = false, keepTextOnMobile = false, icon,
             "ids-header-1177-item--keep-text": keepTextOnMobile
         }), ...props, children: [renderContent(), children] }));
 }
+IDSHeader1177ItemBase.displayName = "IDSHeader1177ItemBase";
 
 export { IDSHeader1177ItemBase };

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

@@ -5,4 +5,7 @@ interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     icon?: string;
 }
 export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, icon, children, ...props }: IDSHeader1177ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Item {
+    var displayName: string;
+}
 export {};

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

@@ -7,5 +7,6 @@ function IDSHeader1177Item({ mobile, keepTextOnMobile, icon, children, ...props
     const headerContext = useHeaderContext();
     return (jsx(IDSHeader1177ItemBase, { ...props, mobile: mobile, keepTextOnMobile: keepTextOnMobile, icon: icon, unresponsive: headerContext?.unresponsive, children: children }));
 }
+IDSHeader1177Item.displayName = "IDSHeader1177Item";
 
 export { IDSHeader1177Item };

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

@@ -10,4 +10,7 @@ interface IDSHeader1177MenuMobileBaseProps extends HTMLAttributes<HTMLDivElement
     client?: boolean;
 }
 export declare function IDSHeader1177MenuMobileBase({ srLabel, expanded, unresponsive, children, onToggleMenu, client, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177MenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177MenuMobileBase {
+    var displayName: string;
+}
 export {};

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

@@ -14,5 +14,6 @@ function IDSHeader1177MenuMobileBase({ srLabel = "Meny", expanded = false, unres
             "ids-header-1177-menu-mobile--unresponsive": unresponsive
         }), ref: componentRef, children: [jsx("button", { ...toggleHandler, ref: buttonRef, "aria-expanded": expanded, "aria-label": srLabel, "aria-controls": menuId, className: "ids-header-1177-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), expanded && (jsx("div", { id: menuId, className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
 }
+IDSHeader1177MenuMobileBase.displayName = "IDSHeader1177MenuMobileBase";
 
 export { IDSHeader1177MenuMobileBase };

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

@@ -7,4 +7,7 @@ interface IDSHeader1177MenuMobileProps extends HTMLAttributes<HTMLDivElement> {
     onClosed?: () => void;
 }
 export declare function IDSHeader1177MenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177MenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177MenuMobile {
+    var displayName: string;
+}
 export {};