@inera/ids-react 7.0.1 → 7.1.1

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/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/form/check-button/check-button.d.ts

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

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

@@ -4,11 +4,13 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSCheckButton = forwardRef(({ disabled = false, id, children, className, ...props }, ref) => {
+const IDSCheckButton = forwardRef(({ disabled = false, focusAnchor = false, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     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: "ids-check-button__input", type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
+    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";
 

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

@@ -5,6 +5,7 @@ interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLInputElement> {
     compact?: boolean;
     tooltip?: ReactNode;
     block?: boolean;
+    noValidation?: boolean;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
     setCheckedBoxesCount?: Dispatch<SetStateAction<number>>;

package/components/form/checkbox/checkbox-group.js

@@ -6,42 +6,31 @@ import { useElementId } from '../../utils/hooks/useElementId.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 import clsx from 'clsx';
 
-const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
+const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, noValidation = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
     const groupRef = useRef(null);
-    const isValid = useGroupValidity(groupRef, "checkbox");
+    const isValid = useGroupValidity(groupRef, "checkbox", () => {
+        onValidityChange?.(false);
+    });
     const errorMsgId = useElementId();
     useEffect(() => {
-        if (onValidityChange) {
-            onValidityChange(isValid);
-        }
-    }, [isValid, onValidityChange]);
-    useEffect(() => {
-        const checkboxes = groupRef.current?.querySelectorAll(`input[type="checkbox"]`);
-        if (!checkboxes.length)
-            return;
-        const count = () => {
-            const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
-            if (setCheckedBoxesCount) {
-                setCheckedBoxesCount(checkedCount);
-            }
-        };
-        count();
-        checkboxes.forEach(cb => {
-            cb.addEventListener("change", count);
-        });
-        return () => {
-            checkboxes.forEach(cb => {
-                cb.removeEventListener("change", count);
-            });
-        };
+        const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
+        setCheckedBoxesCount?.(checkedCount);
     }, [groupRef]);
+    useEffect(() => {
+        onValidityChange?.(isValid);
+    }, [isValid, onValidityChange]);
     const clonedChildren = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) &&
-            child.type.displayName === "IDSCheckbox") {
+        if (React__default.isValidElement(child) && child.type.displayName === "IDSCheckbox") {
             return React__default.cloneElement(child, {
                 key: child.props.id,
                 groupErrorMsgId: errorMsg && errorMsgId,
-                block: block
+                block: block,
+                noValidation: noValidation,
+                onChange: (e) => {
+                    child.props.onChange?.(e);
+                    const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
+                    setCheckedBoxesCount?.(checkedCount);
+                }
             });
         }
         return child;

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

@@ -9,6 +9,7 @@ export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement>
     light?: boolean;
     block?: boolean;
     compact?: boolean;
+    focusAnchor?: boolean;
     errorMsg?: string | ReactNode;
     groupErrorMsgId?: string;
     tooltip?: ReactNode;

package/components/form/checkbox/checkbox.js

@@ -7,7 +7,7 @@ import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import clsx from 'clsx';
 
-const IDSCheckbox = forwardRef(({ 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 }, ref) => {
+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);
@@ -42,7 +42,9 @@ const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required =
                     "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: !noValidation && required, "aria-required": !noValidation && 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", {

package/components/form/form-hooks/useGroupValidity.d.ts

@@ -1 +1 @@
-export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio"): boolean;
+export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio", onInvalid?: () => void): boolean;

package/components/form/form-hooks/useGroupValidity.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 
-function useGroupValidity(ref, type) {
+function useGroupValidity(ref, type, onInvalid) {
     const [isValid, setIsValid] = useState(true);
     const [hasInteracted, setHasInteracted] = useState(false);
     const initialized = useRef(false);
@@ -29,6 +29,7 @@ function useGroupValidity(ref, type) {
             initialized.current = true;
         }
         const handleInteraction = () => {
+            onInvalid?.();
             setHasInteracted(true);
             validate();
         };
@@ -38,7 +39,7 @@ function useGroupValidity(ref, type) {
         };
         inputs.forEach(cb => {
             cb.addEventListener("invalid", handleInteraction);
-            cb.addEventListener("change", handleChange);
+            cb.addEventListener("input", handleChange);
         });
         const form = fieldset.closest("form");
         const handleSubmit = () => {
@@ -49,11 +50,11 @@ function useGroupValidity(ref, type) {
         return () => {
             inputs.forEach(cb => {
                 cb.removeEventListener("invalid", handleInteraction);
-                cb.removeEventListener("change", handleChange);
+                cb.removeEventListener("input", handleChange);
             });
             form?.removeEventListener("submit", handleSubmit);
         };
-    }, [ref]);
+    }, [ref, onInvalid]);
     return isValid || !hasInteracted;
 }
 

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;

package/components/form/input/input.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-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, id, tooltip, submitButton, oldIcon, className, ...props }, ref) => {
+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();
@@ -43,9 +43,7 @@ const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "",
         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
@@ -54,7 +52,8 @@ const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "",
                             "ids-input__inner-wrapper--search": type === "search"
                         }), 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

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

@@ -10,6 +10,7 @@ export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     noValidation?: boolean;
     light?: boolean;
     compact?: boolean;
+    focusAnchor?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;

package/components/form/radio/radio.js

@@ -6,7 +6,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, tooltip, id, children, className, onChange, ...props }, ref) => {
+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);
@@ -15,8 +15,9 @@ const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false,
     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", {

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

@@ -2,6 +2,7 @@ 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>) => void;

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

@@ -4,11 +4,13 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSRadioButton = forwardRef(({ name = "", icon = "user", id, children, onChange, className, ...props }, ref) => {
+const IDSRadioButton = forwardRef(({ name = "", icon = "user", focusAnchor = false, id, children, onChange, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     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: "ids-radio-button__input", name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
+    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";
 

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

@@ -9,6 +9,7 @@ interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     max?: number;
     step?: number;
     disabled?: boolean;
+    focusAnchor?: boolean;
     tooltip?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }

package/components/form/range/range.js

@@ -5,7 +5,7 @@ import { useElementId } from '../../utils/hooks/useElementId.js';
 import '@inera/ids-design/components/form/range/range.css';
 import clsx from 'clsx';
 
-const IDSRange = forwardRef(({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, tooltip, id, onChange, className, ...props }, ref) => {
+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);
@@ -27,7 +27,9 @@ const IDSRange = forwardRef(({ label = "", value = 0, showTicks = false, interva
             onChange(ev);
         }
     };
-    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: "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: clsx("ids-range-ticks", { "ids-range-ticks--disabled": 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";
 

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

@@ -7,6 +7,7 @@ interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     required?: boolean;
     invalid?: boolean;
     light?: boolean;
+    focusAnchor?: boolean;
     noValidation?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;

package/components/form/select/select.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSSelect = forwardRef(({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }, ref) => {
+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);
@@ -16,7 +16,8 @@ const IDSSelect = forwardRef(({ label = "", srOf = "av", errorMsg = "", disabled
     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";

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,10 +52,14 @@ 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) => {
+                    }), children: jsx("div", { className: "ids-select-multiple__dropdown__inner", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
+                                if (!isValid) {
+                                    setIsExpanded(true);
+                                }
                                 setCheckboxListInvalid(!isValid);
                             }, children: children }) }) }) })] }));
 };

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

@@ -11,6 +11,7 @@ interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     noResize?: boolean;
     block?: boolean;
     light?: boolean;
+    focusAnchor?: boolean;
     readOnly?: boolean;
     tooltip?: ReactNode;
 }

package/components/form/textarea/textarea.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, id, tooltip, className, ...props }, ref) => {
+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();
@@ -23,7 +23,8 @@ const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", disabled = fa
         }, 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";

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

@@ -6,6 +6,7 @@ interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     required?: boolean;
     noValidation?: boolean;
+    focusAnchor?: boolean;
     light?: boolean;
     tooltip?: ReactNode;
 }

package/components/form/time/time.js

@@ -7,7 +7,7 @@ import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, id, tooltip, className, ...props }, ref) => {
+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 inputRef = useRef(null);
@@ -18,7 +18,8 @@ const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, inval
     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: inputRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
-                            "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, ...props }) }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
 });
 IDSTime.displayName = "IDSTime";

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

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

package/components/form/toggle/toggle.js

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

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;

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, noMargin = 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) {
@@ -31,14 +31,16 @@ const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, y
         "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(noMargin), 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(noMargin), children: headline });
+        return React__default.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
     };
     const renderBody = () => {
         const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));

package/package.json

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