@inera/ids-react 7.1.1 → 8.0.0

package/components/footer-inera-admin/footer-inera-admin.js

@@ -1,55 +1,52 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css';
 
-const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size, col2Size, col3Size, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
-    const defaultSizes = {
-        1: { col1Size: "6", col2Size: "6", col3Size: "6" },
-        2: { col1Size: "3", col2Size: "3", col3Size: "3" },
-        3: { col1Size: "2", col2Size: "2", col3Size: "2" }
+const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const ref = useRef(null);
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-admin__headline", children: headline })] }));
+        }
+        return jsx("h2", { className: "ids-footer-inera-admin__headline", children: headline });
     };
-    const resolvedCol1 = col1Size ?? defaultSizes[cols].col1Size;
-    const resolvedCol2 = col2Size ?? defaultSizes[cols].col2Size;
-    const resolvedCol3 = col3Size ?? defaultSizes[cols].col3Size;
-    const getColClass = (size) => `ids-footer-inera-admin__col-size-${size}`;
-    const renderHeadline = () => srHeadline ? (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-inera-admin__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-inera-admin__headline", children: [headline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] })] })) : (jsxs("h1", { className: "ids-footer-inera-admin__headline", children: [headline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] }));
     const renderCol = (column) => {
         return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
+            if (React.isValidElement(link)) {
+                return React.cloneElement(link, {
                     key: `footer-link-${idx}`,
-                    colorPreset: 3,
+                    footer: true,
                     block: true
                 });
             }
             return link;
         });
     };
-    const renderColumns = () => {
+    const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--1", getColClass(resolvedCol1)), children: renderCol(col1) }));
+            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--100"), children: renderCol(col1) }));
         }
-        if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--1", getColClass(resolvedCol1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--2", getColClass(resolvedCol2)), children: renderCol(col2) })] }));
+        else if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: renderCol(col2) })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol3)), children: renderCol(col3) })] }));
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: renderCol(col3) })] }));
     };
-    const renderCookieLinks = (content) => {
+    const renderLinks = (content) => {
         const applyProps = (node, keyPrefix = "") => {
             if (!node)
                 return null;
             if (Array.isArray(node)) {
                 return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
             }
-            if (React__default.isValidElement(node)) {
-                if (node.type === React__default.Fragment) {
-                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+            if (React.isValidElement(node)) {
+                if (node.type === React.Fragment) {
+                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
                 }
-                return React__default.cloneElement(node, {
+                return React.cloneElement(node, {
                     key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 4,
+                    colorPreset: 3,
                     small: true,
                     ...node.props
                 });
@@ -58,7 +55,7 @@ const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", subHeadline = "",
         };
         return applyProps(content, "root");
     };
-    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-row", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsx("div", { className: "ids-footer-inera-admin__text", children: children }), renderColumns()] })] }) }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-row", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: subFooterMobile })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsx("div", { className: "ids-footer-inera-admin__text", children: children }), jsx("div", { className: "ids-footer-inera-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 };
 
 export { IDSFooterIneraAdmin };

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, InputHTMLAttributes, SetStateAction, Dispatch } from "react";
-interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLInputElement> {
+interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     legend?: string;
     errorMsg?: string | ReactNode;
     compact?: boolean;

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } 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 IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, noValidation = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
+const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, noValidation = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount, ...props }) => {
     const groupRef = useRef(null);
     const isValid = useGroupValidity(groupRef, "checkbox", () => {
         onValidityChange?.(false);
@@ -19,9 +19,9 @@ const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block =
     useEffect(() => {
         onValidityChange?.(isValid);
     }, [isValid, onValidityChange]);
-    const clonedChildren = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) && child.type.displayName === "IDSCheckbox") {
-            return React__default.cloneElement(child, {
+    const clonedChildren = React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type.displayName === "IDSCheckbox") {
+            return React.cloneElement(child, {
                 key: child.props.id,
                 groupErrorMsgId: errorMsg && errorMsgId,
                 block: block,
@@ -37,7 +37,7 @@ const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block =
     });
     return (jsxs("fieldset", { ref: groupRef, 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, compact: true, children: errorMsg }))] }));
+        }, className), ...props, children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
 };
 
 export { IDSCheckboxGroup };

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

@@ -14,5 +14,6 @@ export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement>
     groupErrorMsgId?: string;
     tooltip?: ReactNode;
     children?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSCheckbox: React.ForwardRefExoticComponent<IDSCheckboxProps & React.RefAttributes<HTMLInputElement>>;

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, focusAnchor = 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 = "", dataTestId = "", tooltip, id, children, className, ...props }, ref) => {
     const internalRef = useRef(null);
     const checkboxRef = ref ?? internalRef;
     const fieldId = useElementId(id);
@@ -38,7 +38,7 @@ const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required =
             };
         }
     }, [checkboxRef]);
-    return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [jsxs("div", { className: clsx("ids-checkbox", {
+    return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, "data-testid": dataTestId, children: [jsxs("div", { className: clsx("ids-checkbox", {
                     "ids-checkbox--light": light,
                     "ids-checkbox--block": block,
                     "ids-checkbox--compact": compact

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

@@ -9,15 +9,13 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
-    focusAnchor?: boolean;
     noValidation?: boolean;
-    autoSize?: boolean;
-    block?: boolean;
+    focusAnchor?: boolean;
     light?: boolean;
     readOnly?: boolean;
     tooltip?: ReactNode;
     submitButton?: ReactNode;
-    oldIcon?: ReactNode;
+    dataTestId?: string;
 }
 export declare const IDSInput: React.ForwardRefExoticComponent<IDSInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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 {};