@inera/ids-react 7.0.0 → 7.1.0

package/components/accordion/accordion.d.ts

@@ -6,6 +6,7 @@ interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     level?: 1 | 2;
     expanded?: boolean;
     lean?: boolean;
+    noBorder?: boolean;
     onCollapsed?: () => void;
     onExpanded?: () => void;
     children?: ReactNode;

package/components/accordion/accordion.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/accordion/accordion.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, onCollapsed, onExpanded, children, className, ...props }) => {
+const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, children, className, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [isLean, setIsLean] = useState(lean);
     const [insideIDSCard, setInsideIDSCard] = useState(false);
@@ -63,6 +63,7 @@ const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "
     };
     return (jsxs("div", { ref: accordionRef, className: clsx("ids-accordion", {
             "ids-accordion--expanded": isExpanded,
+            "ids-accordion--no-border": noBorder,
             "ids-accordion--lean": lean || isLean,
             "ids-accordion--has-children": hasChildren,
             "ids-accordion--is-child": level === 2

package/components/button/button.js

@@ -94,5 +94,6 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
         : oldIcon;
     return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), oldIcon && renderOldIcon, children] }));
 });
+IDSButton.displayName = "IDSButton";
 
 export { IDSButton };

package/components/dialog/dialog.js

@@ -51,6 +51,7 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
                 const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
                     bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
                     dialogRef.current?.querySelector("button.ids-dialog__header__button");
+                console.log("focusable", focusable);
                 focusable?.focus();
             });
         }

package/components/dropdown/dropdown.js

@@ -60,12 +60,12 @@ const IDSDropdown = ({ expanded = false, persistent = false, position = "right",
                 key: `dropdown-content-link-${i}`
             });
         });
-        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx("ids-dropdown__content", {
+        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx(`ids-dropdown__content ids-dropdown__content--position-${position}`, {
                 "ids-dropdown__content--mblock": mBlock,
                 "ids-dropdown__content--sblock": sBlock
             }), ...props, children: enhancedChildren }));
     };
-    return (jsxs("span", { className: clsx(`ids-dropdown ids-dropdown--position-${position}`, className, {
+    return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
             "ids-dropdown--mblock": mBlock,
             "ids-dropdown--sblock": sBlock
         }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));

package/components/form/check-button/check-button.d.ts

@@ -1,7 +1,8 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSCheckButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
+    focusAnchor?: boolean;
     children?: ReactNode;
 }
-export declare const IDSCheckButton: React.FC<IDSCheckButtonProps>;
+export declare const IDSCheckButton: import("react").ForwardRefExoticComponent<IDSCheckButtonProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/check-button/check-button.js

@@ -1,11 +1,17 @@
 "use client";
 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 IDSCheckButton = ({ disabled = false, id, children, className, ...props }) => {
+const IDSCheckButton = forwardRef(({ disabled = false, focusAnchor = false, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
-    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), children: [jsx("input", { id: fieldId, className: "ids-check-button__input", type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
-};
+    const checkButtonRef = useRef(null);
+    useImperativeHandle(ref, () => checkButtonRef.current);
+    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), children: [jsx("input", { id: fieldId, ref: checkButtonRef, className: clsx("ids-check-button__input", {
+                    "ids-focus-anchor": focusAnchor
+                }), type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
+});
+IDSCheckButton.displayName = "IDSCheckButton";
 
 export { IDSCheckButton };

package/components/form/checkbox/checkbox.d.ts

@@ -9,9 +9,10 @@ export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement>
     light?: boolean;
     block?: boolean;
     compact?: boolean;
+    focusAnchor?: boolean;
     errorMsg?: string | ReactNode;
     groupErrorMsgId?: string;
     tooltip?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSCheckbox: React.FC<IDSCheckboxProps>;
+export declare const IDSCheckbox: React.ForwardRefExoticComponent<IDSCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/checkbox/checkbox.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import clsx from 'clsx';
 
-const IDSCheckbox = ({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, errorMsg = "", groupErrorMsgId = "", tooltip, id, children, className, ...props }) => {
+const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, focusAnchor = false, errorMsg = "", groupErrorMsgId = "", tooltip, id, children, className, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const checkboxRef = ref ?? internalRef;
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
-    const checkboxRef = useRef(null);
     const hasValidValue = useInputValidity(checkboxRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     if (groupErrorMsgId) {
@@ -20,13 +21,13 @@ const IDSCheckbox = ({ invalid = false, disabled = false, required = false, inde
         useAriaDescribedBy(checkboxRef, errorMsgId, isInvalid, !!errorMsg);
     }
     useEffect(() => {
-        if (indeterminate) {
+        if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [checkboxRef, indeterminate]);
     useEffect(() => {
-        if (checkboxRef.current) {
-            const checkboxEl = checkboxRef.current;
+        const checkboxEl = checkboxRef.current;
+        if (checkboxEl) {
             const updateAriaChecked = () => {
                 checkboxEl.setAttribute("aria-checked", checkboxEl.indeterminate ? "mixed" : `${checkboxEl.checked}`);
             };
@@ -41,13 +42,16 @@ const IDSCheckbox = ({ invalid = false, disabled = false, required = false, inde
                     "ids-checkbox--light": light,
                     "ids-checkbox--block": block,
                     "ids-checkbox--compact": compact
-                }), children: [jsx("input", { id: fieldId, ref: checkboxRef, type: "checkbox", className: "ids-checkbox__input", "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
+                }), children: [jsx("input", { id: fieldId, ref: checkboxRef, type: "checkbox", className: clsx("ids-checkbox__input", {
+                            "ids-focus-anchor": focusAnchor
+                        }), "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                             "ids-label-tooltip-wrapper--block": block,
                             "ids-label-tooltip-wrapper--inline": tooltip
                         }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ds-checkbox__label", {
                                     "ids-label--clickable": disabled,
                                     "ids-label--no-label": noLabel
                                 }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
-};
+});
+IDSCheckbox.displayName = "IDSCheckbox";
 
 export { IDSCheckbox };

package/components/form/input/input.d.ts

@@ -9,6 +9,7 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
+    focusAnchor?: boolean;
     noValidation?: boolean;
     autoSize?: boolean;
     block?: boolean;
@@ -18,5 +19,5 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     submitButton?: ReactNode;
     oldIcon?: ReactNode;
 }
-export declare const IDSInput: React.FC<IDSInputProps>;
+export declare const IDSInput: React.ForwardRefExoticComponent<IDSInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/input/input.js

@@ -1,18 +1,25 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSInput = ({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, block = false, light = false, readOnly = false, id, tooltip, submitButton, oldIcon, className, ...props }) => {
+const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, block = false, light = false, readOnly = false, focusAnchor = false, id, tooltip, submitButton, oldIcon, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const hintId = useElementId();
     const oldIconRef = useRef(null);
     const inputRef = useRef(null);
+    const combinedRef = (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
     const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg && !noValidation, !!hint, hintId);
@@ -36,19 +43,19 @@ const IDSInput = ({ label = "", type = "text", icon = "", hint = "", showSearchL
         iconComponent.setAttribute("color", color);
         iconComponent.setAttribute("color2", color2);
     };
-    const renderOldIcon = oldIcon && React__default.isValidElement(oldIcon)
-        ? React__default.cloneElement(oldIcon, { ref: oldIconRef })
-        : oldIcon;
+    const renderOldIcon = oldIcon && React__default.isValidElement(oldIcon) ? React__default.cloneElement(oldIcon, { ref: oldIconRef }) : oldIcon;
     return (jsxs("div", { className: clsx("ids-input-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
                             "ids-label--disabled": disabled || readOnly,
                             "ids-hidden": type === "search" && !showSearchLabel
                         }), "aria-hidden": "false", htmlFor: fieldId, children: label }), tooltip] }), jsxs("div", { className: "ids-input__wrapper", children: [jsxs("div", { className: clsx("ids-input__inner-wrapper", {
                             "ids-input--icon": icon,
                             "ids-input__inner-wrapper--search": type === "search"
-                        }), children: [jsx("input", { ref: inputRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input", {
+                        }), children: [jsx("input", { ref: combinedRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input", {
                                     "ids-input--light": light,
-                                    "ids-input--invalid": invalid
+                                    "ids-input--invalid": invalid,
+                                    "ids-focus-anchor": focusAnchor
                                 }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }), type === "search" && jsx("span", { className: "ids-input__search-icon" }), icon && jsx("span", { className: `ids-input__icon ids-icon-${icon}` }), oldIcon && jsx("span", { className: "ids-input__icon", children: renderOldIcon })] }), submitButton] }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSInput.displayName = "IDSInput"; // Needed when using forwardRef
 
 export { IDSInput };

package/components/form/radio/radio.d.ts

@@ -10,8 +10,9 @@ export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     noValidation?: boolean;
     light?: boolean;
     compact?: boolean;
+    focusAnchor?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadio: React.FC<IDSRadioProps>;
+export declare const IDSRadio: React.ForwardRefExoticComponent<IDSRadioProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/radio/radio.js

@@ -1,26 +1,29 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSRadio = ({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, tooltip, id, children, className, onChange, ...props }) => {
+const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, focusAnchor = false, tooltip, id, children, className, onChange, ...props }, ref) => {
     const fieldId = useElementId(id);
     const radioRef = useRef(null);
+    useImperativeHandle(ref, () => radioRef.current);
     const hasValidValue = useInputValidity(radioRef);
     const isInvalid = (invalid || groupInvalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(radioRef, groupErrorMsgId, isInvalid, !!groupErrorMsgId);
     return (jsxs("div", { className: clsx("ids-radio", {
             "ids-radio--compact": compact
-        }, className), children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: clsx({
-                    "ids-input--light": light
+        }, className), children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: clsx("ids-radio__input", {
+                    "ids-input--light": light,
+                    "ids-focus-anchor": focusAnchor
                 }), disabled: disabled, "aria-disabled": disabled, "aria-invalid": isInvalid, name: name, onChange: onChange, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                     "ids-label-tooltip-wrapper--inline": tooltip
                 }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-radio__label ids-label", {
                             "ids-input--clickable": !disabled
                         }), children: children }), tooltip] })] }));
-};
+});
+IDSRadio.displayName = "IDSRadio";
 
 export { IDSRadio };

package/components/form/radio-button/radio-button.d.ts

@@ -2,8 +2,9 @@ import React, { ReactNode, InputHTMLAttributes } from "react";
 export interface IDSRadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     name?: string;
     id?: string;
+    focusAnchor?: boolean;
     icon: string;
     children?: ReactNode;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => {};
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadioButton: React.FC<IDSRadioButtonProps>;
+export declare const IDSRadioButton: React.ForwardRefExoticComponent<IDSRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/radio-button/radio-button.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSRadioButton = ({ name = "", icon = "user", id, children, onChange, className, ...props }) => {
+const IDSRadioButton = forwardRef(({ name = "", icon = "user", focusAnchor = false, id, children, onChange, className, ...props }, ref) => {
     const fieldId = useElementId(id);
-    const radioRef = useRef(null);
-    return (jsxs("div", { className: clsx("ids-radio-button", className), children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: "ids-radio-button__input", name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
-};
+    const radioButtonRef = useRef(null);
+    useImperativeHandle(ref, () => radioButtonRef.current);
+    return (jsxs("div", { className: clsx("ids-radio-button", className), children: [jsx("input", { id: fieldId, ref: radioButtonRef, type: "radio", className: clsx("ids-radio-button__input", {
+                    "ids-focus-anchor": focusAnchor
+                }), name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
+});
+IDSRadioButton.displayName = "IDSRadioButton";
 
 export { IDSRadioButton };

package/components/form/range/range.d.ts

@@ -9,8 +9,9 @@ interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     max?: number;
     step?: number;
     disabled?: boolean;
+    focusAnchor?: boolean;
     tooltip?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRange: React.FC<IDSRangeProps>;
+export declare const IDSRange: React.ForwardRefExoticComponent<IDSRangeProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/range/range.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import '@inera/ids-design/components/form/range/range.css';
 import clsx from 'clsx';
 
-const IDSRange = ({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, tooltip, id, onChange, className, ...props }) => {
+const IDSRange = forwardRef(({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, focusAnchor = false, tooltip, id, onChange, className, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(value);
     const [ticks, setTicks] = useState([]);
     const fieldId = useElementId(id);
     const rangeRef = useRef(null);
+    useImperativeHandle(ref, () => rangeRef.current);
     useEffect(() => {
         if (step > 0) {
             const steps = [];
@@ -26,7 +27,10 @@ const IDSRange = ({ label = "", value = 0, showTicks = false, interval = 0, min
             onChange(ev);
         }
     };
-    return (jsxs("div", { className: clsx("ids-range", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: `ids-label ${disabled ? "ids-label--disabled" : ""}`, children: label }), tooltip] }), jsx("input", { id: fieldId, ref: rangeRef, type: "range", className: "ids-range__input", min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, step: step, value: internalValue, "aria-valuenow": internalValue, disabled: disabled, style: { backgroundSize: ((internalValue - min) * 100) / (max - min) + "% 100%" }, onChange: handleOnChange, ...props }), showTicks && (jsx("div", { className: `ids-range-ticks ${disabled ? "ids-range-ticks--disabled" : ""}`, children: ticks.map(tick => (jsx("div", { className: "ids-range-tick", children: tick }, tick))) }))] }));
-};
+    return (jsxs("div", { className: clsx("ids-range", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip] }), jsx("input", { id: fieldId, ref: rangeRef, type: "range", className: clsx("ids-range__input", {
+                    "ids-focus-anchor": focusAnchor
+                }), min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, step: step, value: internalValue, "aria-valuenow": internalValue, disabled: disabled, style: { backgroundSize: ((internalValue - min) * 100) / (max - min) + "% 100%" }, onChange: handleOnChange, ...props }), showTicks && (jsx("div", { className: clsx("ids-range-ticks", { "ids-range-ticks--disabled": disabled }), children: ticks.map(tick => (jsx("div", { className: "ids-range-tick", children: tick }, tick))) }))] }));
+});
+IDSRange.displayName = "IDSRange";
 
 export { IDSRange };

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

@@ -7,9 +7,10 @@ interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     required?: boolean;
     invalid?: boolean;
     light?: boolean;
+    focusAnchor?: boolean;
     noValidation?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSSelect: React.FC<IDSSelectProps>;
+export declare const IDSSelect: React.ForwardRefExoticComponent<IDSSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export {};

package/components/form/select/select.js

@@ -1,22 +1,25 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSSelect = ({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }) => {
+const IDSSelect = forwardRef(({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const selectRef = useRef(null);
+    useImperativeHandle(ref, () => selectRef.current);
     const hasValidValue = useInputValidity(selectRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(selectRef, errorMsgId, isInvalid, !!errorMsg);
     return (jsxs("div", { className: clsx("ids-select-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: "ids-label", children: label }), tooltip] }), jsx("div", { className: "ids-select-wrapper", children: jsx("select", { id: fieldId, ref: selectRef, className: clsx("ids-select", {
-                        "ids-input--light": light
+                        "ids-input--light": light,
+                        "ids-focus-anchor": focusAnchor
                     }), "aria-invalid": isInvalid, required: required, disabled: disabled, ...props, children: children }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSSelect.displayName = "IDSSelect";
 
 export { IDSSelect };

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

@@ -10,6 +10,7 @@ interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElem
     errorMsg?: string;
     invalid?: boolean;
     light?: boolean;
+    focusAnchor?: boolean;
     noValidation?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;

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

@@ -7,7 +7,7 @@ import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import '@inera/ids-design/components/form/select-multiple/select-multiple.css';
 import clsx from 'clsx';
 
-const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPlural = "valda", placeholder = "", maxHeight = "", expanded = false, errorMsg = "", invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }) => {
+const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPlural = "valda", placeholder = "", maxHeight = "", expanded = false, errorMsg = "", invalid = false, light = false, noValidation = false, focusAnchor = false, tooltip, id, children, className, ...props }) => {
     const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
     const [checkedBoxesCount, setCheckedBoxesCount] = useState(0);
     const [value, setValue] = useState(placeholder);
@@ -52,7 +52,8 @@ const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPl
         };
     }, [isExpanded]);
     return (jsxs("div", { className: clsx("ids-select-multiple-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { id: labelId, htmlFor: inputId, className: "ids-label", children: label }), tooltip] }), jsx("div", { className: "ids-select-multiple-wrapper", children: jsx("input", { id: inputId, "aria-labelledby": labelId, ref: selectMultipleRef, type: "button", className: clsx("ids-select-multiple__select", {
-                        "ids-input--light": light
+                        "ids-input--light": light,
+                        "ids-focus-anchor": focusAnchor
                     }), "aria-expanded": isExpanded, "aria-invalid": invalid || checkboxListInvalid, placeholder: placeholder, value: value, onClick: () => setIsExpanded(!isExpanded), ...props }) }), jsx("div", { className: "ids-select-multiple__dropdown__wrapper", children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
                         "ids-select-multiple__dropdown--show": isExpanded
                     }), children: jsx("div", { className: "ids-select-multiple__dropdown__inner", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, TextareaHTMLAttributes } from "react";
+import { ReactNode, TextareaHTMLAttributes } from "react";
 interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     hint?: string | ReactNode;
@@ -11,8 +11,9 @@ interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     noResize?: boolean;
     block?: boolean;
     light?: boolean;
+    focusAnchor?: boolean;
     readOnly?: boolean;
     tooltip?: ReactNode;
 }
-export declare const IDSTextarea: React.FC<IDSTextareaProps>;
+export declare const IDSTextarea: import("react").ForwardRefExoticComponent<IDSTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/components/form/textarea/textarea.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTextarea = ({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, id, tooltip, className, ...props }) => {
+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 fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const hintId = useElementId();
     const textareaRef = useRef(null);
+    useImperativeHandle(ref, () => textareaRef.current);
     const hasValidValue = useInputValidity(textareaRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(textareaRef, errorMsgId, isInvalid, !!errorMsg, !!hint, hintId);
@@ -22,8 +23,10 @@ const IDSTextarea = ({ label = "", hint, errorMsg = "", disabled = false, invali
         }, className), 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
+                    "ids-input--light": light,
+                    "ids-focus-anchor": focusAnchor
                 }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, readOnly: readOnly, ...props }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSTextarea.displayName = "IDSTextarea";
 
 export { IDSTextarea };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     errorMsg?: string;
@@ -6,8 +6,9 @@ interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     required?: boolean;
     noValidation?: boolean;
+    focusAnchor?: boolean;
     light?: boolean;
     tooltip?: ReactNode;
 }
-export declare const IDSTime: React.FC<IDSTimeProps>;
+export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/time/time.js

@@ -1,24 +1,27 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTime = ({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, id, tooltip, className, ...props }) => {
+const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, focusAnchor = false, id, tooltip, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
-    const timeRef = useRef(null);
-    const hasValidValue = useInputValidity(timeRef); // can this happen? i cannot enter an invalid value when i try
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(timeRef, errorMsgId, isInvalid, !!errorMsg);
+    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", {
                             "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: timeRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
-                            "ids-input--light": light
+                        }), 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 }))] }));
-};
+});
+IDSTime.displayName = "IDSTime";
 
 export { IDSTime };

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

@@ -1,8 +1,9 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSToggleProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     tooltip?: ReactNode;
+    focusAnchor?: boolean;
     children?: ReactNode;
 }
-export declare const IDSToggle: React.FC<IDSToggleProps>;
+export declare const IDSToggle: import("react").ForwardRefExoticComponent<IDSToggleProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/toggle/toggle.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSToggle = ({ disabled = false, tooltip, id, children, className, ...props }) => {
+const IDSToggle = forwardRef(({ disabled = false, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const toggleRef = useRef(null);
-    return (jsx(Fragment, { children: jsxs("div", { className: clsx("ids-toggle", className), children: [jsx("input", { id: fieldId, ref: toggleRef, className: "ids-toggle__input", 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] })] }) }));
-};
+    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] })] }) }));
+});
+IDSToggle.displayName = "IDSToggle";
 
 export { IDSToggle };

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

@@ -6,27 +6,40 @@ import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
 const IDSHeader1177Avatar = ({ username, agent, links, persistent = false }) => {
-    const [expanded, setExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const headerContext = useHeaderContext();
-    const avatarRef = useRef(null);
-    const toggleExpanded = () => setExpanded(prev => !prev);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const toggleExpanded = () => setIsExpanded(prev => !prev);
     const handleClickOutside = (event) => {
-        if (!persistent && avatarRef.current && !avatarRef.current.contains(event.target)) {
-            setExpanded(false);
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
         }
     };
     useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
         return () => {
-            document.removeEventListener("click", handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [persistent]);
-    return (jsx("div", { ref: avatarRef, className: clsx("ids-header-1177-avatar", {
+    const handleLinkClick = () => {
+        setIsExpanded(false);
+    };
+    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]);
+    return (jsx("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": expanded
-                    }), onClick: toggleExpanded, "aria-controls": "ids-header-1177-avatar__dropdown", "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-avatar-content__name", title: username, children: username }) }), jsxs("div", { id: "ids-header-1177-avatar__dropdown", className: clsx("ids-header-1177-avatar__dropdown", {
-                        "ids-header-1177-avatar__dropdown--expanded": expanded
+                        "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 })] })] }) }));
 };
 

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React__default, { 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';
@@ -8,18 +8,35 @@ import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
-    const toggleExpanded = () => setIsExpanded(prev => !prev);
+    const containerRef = useRef(null);
+    const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    };
+    useEffect(() => {
+        setIsExpanded(expanded);
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [expanded]);
     const renderLink = (link) => {
         return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            ? React__default.cloneElement(link, {
+                activeIcon: true,
+                block: true,
+                colorPreset: 2,
+                onClick: () => setIsExpanded(false)
+            })
             : 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 })] }) }));
-    return (jsxs("div", { className: clsx("ids-header-1177__nav-item", {
+    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: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+        }), 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-admin/header-1177-admin-nav-item.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177-admin/header-1177-admin-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
@@ -8,20 +8,35 @@ import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 const IDSHeader1177AdminNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const toggleExpanded = () => {
-        setIsExpanded(prev => !prev);
+    const containerRef = useRef(null);
+    const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
     };
+    useEffect(() => {
+        setIsExpanded(expanded);
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [expanded]);
     const renderLink = (link) => {
         return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 1 })
+            ? React__default.cloneElement(link, {
+                activeIcon: true,
+                block: true,
+                colorPreset: 1,
+                onClick: () => setIsExpanded(false)
+            })
             : link;
     };
     const renderDropdown = () => isExpanded && (jsx("div", { style: { marginTop: "0.125rem" }, id: "ids-header-1177-admin-nav-dropdown", className: "ids-header-1177-admin__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177-admin__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin__items__item-dropdown__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin__items-wrapper", children: renderLink(link) }, idx))) })] }) }));
-    return (jsxs("div", { className: clsx("ids-header-1177-admin__nav-item", {
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-admin__nav-item", {
             "ids-header-1177-admin__nav-item--fluid": headerContext?.fluid,
             "ids-header-1177-admin__nav-item--unresponsive": headerContext?.unresponsive,
             "ids-header-1177-admin__nav-item--active": active || isExpanded
-        }), children: [label ? (jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-admin-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+        }), children: [label ? (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-admin-nav-dropdown", children: label })) : (children), renderDropdown()] }));
 };
 
 export { IDSHeader1177AdminNavItem };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
@@ -8,18 +8,33 @@ import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const toggleExpanded = () => {
-        setIsExpanded(prev => !prev);
+    const containerRef = useRef(null);
+    const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
     };
+    useEffect(() => {
+        setIsExpanded(expanded);
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [expanded]);
     const renderItem = () => {
         if (label) {
-            return (jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-dropdown", children: label }));
+            return (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-dropdown", children: label }));
         }
         return children;
     };
     const renderLink = (link) => {
         return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 1 })
+            ? React__default.cloneElement(link, {
+                activeIcon: true,
+                block: true,
+                colorPreset: 1,
+                onClick: () => setIsExpanded(false)
+            })
             : link;
     };
     const renderDropdown = () => {
@@ -27,7 +42,7 @@ const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "",
             return null;
         return (jsx("div", { id: "ids-dropdown", className: "ids-header-1177-pro__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177-pro__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) })] }) }));
     };
-    return (jsxs("div", { className: clsx("ids-header-1177-pro__nav-item", {
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-pro__nav-item", {
             "ids-header-1177-pro__nav-item--unresponsive": headerContext?.unresponsive,
             "ids-header-1177-pro__nav-item--active": active || isExpanded
         }), children: [renderItem(), renderDropdown()] }));

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

@@ -38,7 +38,12 @@ const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, n
     };
     const renderLink = (link) => {
         return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            ? React__default.cloneElement(link, {
+                activeIcon: true,
+                block: true,
+                colorPreset: 2,
+                onClick: () => setIsExpanded(false)
+            })
             : link;
     };
     const renderContent = () => {

package/components/header-inera-admin/header-inera-admin-nav-item.js

@@ -38,7 +38,12 @@ const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = fal
     };
     const renderLink = (link) => {
         return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            ? React__default.cloneElement(link, {
+                activeIcon: true,
+                block: true,
+                colorPreset: 2,
+                onClick: () => setIsExpanded(false)
+            })
             : link;
     };
     const renderContent = () => {

package/components/link/link.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode, HTMLAttributes, ReactElement } from "react";
+import React, { ReactNode, ReactElement, AnchorHTMLAttributes } from "react";
 export type ColorPreset = 0 | 1 | 2 | 3 | 4;
-export interface IDSLinkProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
     colorPreset?: ColorPreset;
     light?: boolean;
     active?: boolean;
@@ -12,6 +12,6 @@ export interface IDSLinkProps extends Omit<HTMLAttributes<HTMLElement>, "childre
     large?: boolean;
     focusAnchor?: boolean;
     endItem?: ReactNode;
-    children: ReactElement;
+    children?: ReactElement;
 }
 export declare const IDSLink: React.FC<IDSLinkProps>;

package/components/puff-list/puff-list-item/puff-list-item.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: ReactNode;
+    headlineLevel?: 2 | 3 | 4 | 5;
     headlineLink?: React.ReactElement;
     itemLink?: React.ReactElement;
     date?: Date | null;
@@ -11,6 +12,7 @@ interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     day?: number;
     time?: string;
     noContent?: boolean;
+    noMargin?: boolean;
     dateLabel?: ReactNode;
     children?: ReactNode;
 }

package/components/puff-list/puff-list-item/puff-list-item.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, isValidElement, cloneElement } from 'react';
+import React__default, { useState, useEffect, isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 import { getMonthAsSweText, getDayAsText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, dateLabel, className, children }) => {
+const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, noMargin = false, dateLabel, className, children }) => {
     const [presentedDate, setPresentedDate] = useState(date);
     useEffect(() => {
         if (date) {
@@ -27,23 +27,23 @@ const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, y
         }
         return "";
     };
-    const getHeaderClass = (noContent) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item--no-margin": noContent
+    const getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
+        "ids-puff-list-item--no-margin": noMargin
     });
     const renderHeadline = () => {
+        const level = [2, 3, 4, 5].includes(headlineLevel) ? headlineLevel : 2;
+        const Tag = `h${level}`;
         const headlineContent = jsx(Fragment, { children: headline });
         if (headlineLink && isValidElement(headlineLink)) {
-            return (jsx("h2", { className: getHeaderClass(noContent), children: cloneElement(headlineLink, {
-                    ...headlineLink.props,
-                    children: headlineContent
-                }) }));
+            return React__default.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
+                ...headlineLink.props,
+                children: headlineContent
+            }));
         }
-        return jsx("h2", { className: getHeaderClass(noContent), children: headline });
+        return React__default.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
     };
     const renderBody = () => {
-        if (noContent)
-            return null;
-        const content = (jsxs(Fragment, { children: [renderHeadline(), jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
+        const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
         if (itemLink && isValidElement(itemLink)) {
             return cloneElement(itemLink, {
                 ...itemLink.props,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-core": "7.0.x",
+    "@inera/ids-core": "7.1.x",
     "@lit-labs/react": "^1.1.0",
     "clsx": "*"
   },