@inera/ids-react 7.2.0 → 8.1.0

package/components/form/input/input.js

@@ -1,17 +1,16 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { forwardRef, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef } 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 = 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 IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", dataTestId = "", disabled = false, invalid = false, required = false, noValidation = false, focusAnchor = false, light = false, readOnly = false, id, tooltip, submitButton, 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;
@@ -23,39 +22,19 @@ const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "",
     const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg && !noValidation, !!hint, hintId);
-    useEffect(() => {
-        if (oldIconRef.current) {
-            oldIconRef.current.setAttribute("size", "s");
-            setOldIconColor(oldIconRef.current);
-        }
-    }, [oldIconRef, isInvalid, disabled]);
-    const setOldIconColor = (iconComponent) => {
-        let color = "var(--IDS-ICON__COLOR)";
-        let color2 = "var(--IDS-ICON__COLOR-2)";
-        if (isInvalid) {
-            color = "var(--IDS-INPUT--INVALID__ICON-FILL)";
-            color2 = "var(--IDS-INPUT--INVALID__ICON-FILL)";
-        }
-        if (disabled) {
-            color = "var(--IDS-INPUT--DISABLED__ICON-FILL)";
-            color2 = "var(--IDS-INPUT--DISABLED__ICON-FILL)";
-        }
-        iconComponent.setAttribute("color", color);
-        iconComponent.setAttribute("color2", color2);
-    };
-    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: combinedRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input", {
-                                    "ids-input--light": light,
-                                    "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 }))] }));
+    const inputElement = (jsxs("div", { className: clsx("ids-input__wrapper", {
+            "ids-input--icon": icon
+        }), "data-testid": dataTestId, children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: combinedRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
+                    "ids-input--light": light,
+                    "ids-input--invalid": invalid,
+                    "ids-focus-anchor": focusAnchor
+                }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }));
+    const labelElement = (jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+                    "ids-label--disabled": disabled || readOnly,
+                    "ids-hidden": type === "search" && !showSearchLabel
+                }), htmlFor: fieldId, children: label }), tooltip] }));
+    return (jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), 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
+IDSInput.displayName = "IDSInput";
 
 export { IDSInput };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, ChangeEvent } from "react";
 interface IDSRadioGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
     name: string;
     legend?: string;
@@ -7,7 +7,7 @@ interface IDSRadioGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetEl
     required?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
-    onRadioChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const IDSRadioGroup: React.FC<IDSRadioGroupProps>;
 export {};

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

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
+import React, { useRef } from 'react';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 import clsx from 'clsx';
 
-const IDSRadioGroup = ({ name = "options", legend = "", errorMsg = "", compact = false, required = false, onRadioChange, tooltip, className, children }) => {
+const IDSRadioGroup = ({ name = "options", legend = "", errorMsg = "", compact = false, required = false, onRadioChange, tooltip, className, children, ...props }) => {
     const groupRef = useRef(null);
     const isValid = useGroupValidity(groupRef, "radio");
     const errorMsgId = useElementId();
-    const clonedChildren = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) && child.type.displayName === "IDSRadio") {
-            return React__default.cloneElement(child, {
+    const clonedChildren = React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type.displayName === "IDSRadio") {
+            return React.cloneElement(child, {
                 key: child.props.id,
                 name,
                 required,
@@ -25,7 +25,7 @@ const IDSRadioGroup = ({ name = "options", legend = "", errorMsg = "", compact =
     });
     return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", {
             "ids-form-group__fieldset--compact": compact
-        }, className), children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+        }, className), ...props, children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
 };
 
 export { IDSRadioGroup };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
+import { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
 export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     name?: string;
     id?: string;
@@ -6,7 +6,6 @@ export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     groupInvalid?: boolean;
     disabled?: boolean;
-    noLabel?: boolean;
     noValidation?: boolean;
     light?: boolean;
     compact?: boolean;
@@ -14,5 +13,6 @@ export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     tooltip?: ReactNode;
     children?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    dataTestId?: string;
 }
-export declare const IDSRadio: React.ForwardRefExoticComponent<IDSRadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const IDSRadio: import("react").ForwardRefExoticComponent<IDSRadioProps & import("react").RefAttributes<HTMLInputElement>>;

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, focusAnchor = 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, dataTestId = "", tooltip, id, children, className, onChange, ...props }, ref) => {
     const fieldId = useElementId(id);
     const radioRef = useRef(null);
     useImperativeHandle(ref, () => radioRef.current);
@@ -15,7 +15,7 @@ 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-radio__input", {
+        }, className), "data-testid": dataTestId, 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", {

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

@@ -1,9 +1,9 @@
 import React, { ReactNode, InputHTMLAttributes } from "react";
-interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLInputElement> {
+interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     name: string;
     legend?: string;
     children?: ReactNode;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onRadioChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const IDSRadioButtonGroup: React.FC<IDSRadioButtonGroupProps>;
 export {};

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

@@ -1,22 +1,22 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 
-const IDSRadioButtonGroup = ({ name = "options", legend = "", onChange, className, children }) => {
+const IDSRadioButtonGroup = ({ name = "options", legend = "", onRadioChange, className, children, ...props }) => {
     const groupRef = useRef(null);
-    const clonedChildren = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) && child.type.displayName === "IDSRadioButton") {
-            return React__default.cloneElement(child, {
+    const clonedChildren = React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type.displayName === "IDSRadioButton") {
+            return React.cloneElement(child, {
                 key: child.props.id,
                 icon: child.props.icon,
                 name,
-                onChange
+                onChange: onRadioChange
             });
         }
         return child;
     });
-    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", className), children: [jsx("legend", { children: legend && legend }), clonedChildren] }));
+    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", className), ...props, children: [jsx("legend", { children: legend && legend }), clonedChildren] }));
 };
 
 export { IDSRadioButtonGroup };

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

@@ -1,10 +1,11 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ChangeEvent, 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;
+    dataTestId?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadioButton: React.ForwardRefExoticComponent<IDSRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export declare const IDSRadioButton: import("react").ForwardRefExoticComponent<IDSRadioButtonProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -4,11 +4,11 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSRadioButton = forwardRef(({ name = "", icon = "user", focusAnchor = false, id, children, onChange, className, ...props }, ref) => {
+const IDSRadioButton = forwardRef(({ name = "", icon = "user", focusAnchor = false, id, children, onChange, dataTestId = "", 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: clsx("ids-radio-button__input", {
+    return (jsxs("div", { className: clsx("ids-radio-button", className), "data-testid": dataTestId, 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 })] }));
 });

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

@@ -10,6 +10,7 @@ interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     step?: number;
     disabled?: boolean;
     focusAnchor?: boolean;
+    dataTestId?: string;
     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, focusAnchor = 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, dataTestId = "", tooltip, id, onChange, className, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(value);
     const [ticks, setTicks] = useState([]);
     const fieldId = useElementId(id);
@@ -27,7 +27,7 @@ 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: clsx("ids-range__input", {
+    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, 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))) }))] }));
 });

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

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     label?: string;
-    srOf?: string;
     errorMsg?: string;
     disabled?: boolean;
     required?: boolean;
@@ -11,6 +10,7 @@ interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     noValidation?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSSelect: React.ForwardRefExoticComponent<IDSSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export {};

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, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
+const IDSSelect = forwardRef(({ label = "", errorMsg = "", disabled = false, required = false, invalid = false, light = false, dataTestId = "", noValidation = false, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const selectRef = useRef(null);
@@ -15,10 +15,12 @@ const IDSSelect = forwardRef(({ label = "", srOf = "av", errorMsg = "", disabled
     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", {
+    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, 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("div", { className: "ids-select__wrapper", children: jsx("select", { id: fieldId, ref: selectRef, className: clsx("ids-select__select", {
                         "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 }))] }));
+                    }), "aria-invalid": isInvalid, "aria-disabled": disabled, 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

@@ -9,11 +9,14 @@ interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElem
     expanded?: boolean;
     errorMsg?: string;
     invalid?: boolean;
+    disabled?: boolean;
+    ariaDisabled?: boolean;
     light?: boolean;
     focusAnchor?: boolean;
     noValidation?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSSelectMultiple: React.FC<IDSSelectMultipleProps>;
 export {};

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, focusAnchor = false, tooltip, id, children, className, ...props }) => {
+const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPlural = "valda", placeholder = "", maxHeight = "", dataTestId = "", expanded = false, errorMsg = "", invalid = false, disabled = false, ariaDisabled = 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);
@@ -27,11 +27,16 @@ const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPl
         }
         setValue(inputValue);
     }, [checkedBoxesCount]);
+    useEffect(() => {
+        if (checkboxListInvalid) {
+            setIsExpanded(true);
+        }
+    }, [checkboxListInvalid]);
     useEffect(() => {
         const handleInteractionOutside = (event) => {
             const target = event.target;
             if (selectMultipleRef.current) {
-                const root = selectMultipleRef.current.closest(".ids-select-multiple-component");
+                const root = selectMultipleRef.current.closest(".ids-select-multiple");
                 if (root && !root.contains(target)) {
                     setIsExpanded(false);
                 }
@@ -51,12 +56,14 @@ const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPl
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [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", {
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { id: labelId, htmlFor: inputId, className: clsx("ids-label", {
+                            "ids-label--disabled": disabled || ariaDisabled
+                        }), children: label }), tooltip] }), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("input", { id: inputId, "aria-labelledby": labelId, ref: selectMultipleRef, type: "button", className: clsx("ids-select-multiple__select", {
                         "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, noValidation: noValidation, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
+                    }), "aria-expanded": isExpanded, disabled: disabled, "aria-disabled": ariaDisabled, "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--expanded": isExpanded
+                    }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
                                 if (!isValid) {
                                     setIsExpanded(true);
                                 }

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

@@ -14,6 +14,7 @@ interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     focusAnchor?: boolean;
     readOnly?: boolean;
     tooltip?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSTextarea: import("react").ForwardRefExoticComponent<IDSTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/components/form/textarea/textarea.js

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

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

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

package/components/form/time/time.js

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

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

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

package/components/form/toggle/toggle.js

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

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

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

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

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

package/components/grid/column.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/grid/column/column.css";
+export type ColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
+export type OffsetSize = Exclude<ColSize, "auto">;
 export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
     cols?: ColSize;
     s?: ColSize;
@@ -10,7 +12,4 @@ export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
     alignSelf?: "start" | "center" | "end" | "auto" | "baseline" | "stretch";
     children?: ReactNode;
 }
-type ColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
-type OffsetSize = Exclude<ColSize, "auto">;
-export declare const IDSColumn: React.FC<IDSColumnProps>;
-export {};
+export declare function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }: IDSColumnProps): import("react/jsx-runtime").JSX.Element;

package/components/grid/column.js

@@ -1,13 +1,12 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import '@inera/ids-design/components/grid/column/column.css';
 import clsx from 'clsx';
 
-const IDSColumn = ({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) => {
+function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) {
     const colRef = useRef(null);
     const classNames = clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className);
     return (jsx("div", { ref: colRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+}
 
 export { IDSColumn };

package/components/grid/container.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/container/container.css";
-export interface IDSContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    fluid?: boolean;
+export interface IDSContainerProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
+    maxWidth?: string;
     gutterless?: boolean;
     children?: ReactNode;
 }
-export declare const IDSContainer: React.FC<IDSContainerProps>;
+export declare const IDSContainer: import("react").ForwardRefExoticComponent<IDSContainerProps & import("react").RefAttributes<HTMLDivElement>>;