@inera/ids-react 9.0.2 → 9.0.4

package/components/accordion/accordion.js

@@ -12,6 +12,9 @@ function IDSAccordion({ headline, accordions, level = 1, headlineSize = level ==
             setIsLean(true);
         }
     }, [level]);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
     const toggleExpanded = () => {
         setIsExpanded(prev => !prev);
         if (isExpanded)

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

@@ -3,6 +3,7 @@ export interface IDSCheckboxBaseProps extends InputHTMLAttributes<HTMLInputEleme
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
+    indeterminate?: boolean;
     light?: boolean;
     block?: boolean;
     compact?: boolean;
@@ -15,4 +16,4 @@ export interface IDSCheckboxBaseProps extends InputHTMLAttributes<HTMLInputEleme
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function IDSCheckboxBase({ invalid, disabled, required, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }: IDSCheckboxBaseProps): ReactElement;
+export declare function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }: IDSCheckboxBaseProps): ReactElement;

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

@@ -3,22 +3,23 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSCheckboxBase({ invalid, disabled, required, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }) {
+function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }) {
     const reactId = useId();
     const inputId = !!id ? id : `checkbox-base-${reactId}`;
     const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaHandler = showErrorMsg || !!groupErrorMsgId
+    const ariaErrorHandler = showErrorMsg || !!groupErrorMsgId
         ? {
             "aria-describedby": groupErrorMsgId || baseErrorMsgId
         }
         : {};
+    const ariaCheckedHandler = indeterminate ? { "aria-checked": "mixed" } : {};
     return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "inline-flex", flexDirection: "column", gap: showErrorMsg ? "0.5rem" : "" }, "data-testid": dataTestId, children: [jsxs("div", { className: clsx("ids-checkbox", {
                     "ids-checkbox--light": light,
                     "ids-checkbox--block": block
                 }), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
                             "ids-focus-anchor": focusAnchor
-                        }), "aria-invalid": invalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...ariaHandler, ...props }), !!children && (jsxs("div", { className: clsx("ids-label-wrapper", {
+                        }), "aria-invalid": invalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...ariaErrorHandler, ...ariaCheckedHandler, ...props }), !!children && (jsxs("div", { className: clsx("ids-label-wrapper", {
                             "ids-label-wrapper--block": block
                         }), children: [jsx("label", { htmlFor: inputId, className: clsx("ids-checkbox__label ids-label", {
                                     "ids-label--clickable": !disabled,

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

@@ -7,7 +7,7 @@ function IDSCheckboxGroupBase({ legend = "", errorMsg = "", compact = false, too
     const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-group-base-error-${useId()}`;
     return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", {
             "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, children: errorMsg }))] }));
+        }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 
 export { IDSCheckboxGroupBase };

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

@@ -33,7 +33,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
         }
         return child;
     });
-    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: !isValid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: !isValid && hasInteracted || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
 }
 
 export { IDSCheckboxGroup };

package/components/form/checkbox/checkbox.js

@@ -15,7 +15,7 @@ const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeter
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsx(IDSCheckboxBase, { ...props, inputRef: checkboxRef, invalid: isInvalid, children: children }));
+    return (jsx(IDSCheckboxBase, { ...props, inputRef: checkboxRef, invalid: isInvalid, indeterminate: indeterminate, children: children }));
 });
 IDSCheckbox.displayName = "IDSCheckbox";
 

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

@@ -14,14 +14,14 @@ function useInputValidity(ref, validateOnBlur) {
         if (validateOnBlur) {
             inputEl.addEventListener("blur", updateValidity);
         }
-        inputEl.addEventListener("input", updateValidity);
+        inputEl.addEventListener("change", updateValidity);
         inputEl.addEventListener("invalid", updateValidity);
         return () => {
             form?.removeEventListener("submit", updateValidity);
             if (validateOnBlur) {
                 inputEl.removeEventListener("blur", updateValidity);
             }
-            inputEl.removeEventListener("input", updateValidity);
+            inputEl.removeEventListener("change", updateValidity);
             inputEl.removeEventListener("invalid", updateValidity);
         };
     }, [ref]);

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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 function IDSRadioGroupBase({ legend, errorMsg, errorMsgId, compact = false, required = false, tooltip, className, children, invalid, groupRef, ...props }) {
     const showErrorMsg = invalid && !!errorMsg && !!errorMsgId;
-    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 
 export { IDSRadioGroupBase };

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

@@ -11,6 +11,7 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
     const reactId = useId();
     const groupName = !!name ? name : `radio-group-name-${reactId}`;
     const errorMsgId = `radio-error-${reactId}`;
+    const groupInvalid = required && !isValid && hasInteracted && !noValidation;
     const clonedChildren = React.Children.map(children, child => {
         if (!React.isValidElement(child))
             return child;
@@ -18,20 +19,20 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
             const { id, ...rest } = child.props;
             const cloneProps = {
                 ...rest,
-                key: child.props.id,
+                key: child.key,
                 id: child.props.id,
                 name: groupName,
                 required: required && !noValidation,
                 noValidation,
                 groupErrorMsgId: errorMsg ? errorMsgId : undefined,
-                groupInvalid: !isValid && hasInteracted && !noValidation,
+                groupInvalid: groupInvalid,
                 onChange: onRadioChange
             };
             return React.cloneElement(child, cloneProps);
         }
         return child;
     });
-    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, invalid: !isValid && hasInteracted || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
+    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
 }
 
 export { IDSRadioGroup };

package/components/form/radio/radio.js

@@ -1,13 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSRadioBase } from './radio-base.js';
 
 const IDSRadio = forwardRef(({ groupErrorMsgId, invalid = false, groupInvalid = false, noValidation = false, children, ...props }, ref) => {
     const radioRef = useRef(null);
-    const hasValidValue = useInputValidity(radioRef);
-    const isInvalid = invalid || groupInvalid || (!hasValidValue && !noValidation);
+    const isInvalid = invalid || groupInvalid;
     // Expose ref to user
     useImperativeHandle(ref, () => radioRef.current);
     return (jsx(IDSRadioBase, { ...props, inputRef: radioRef, errorMsgId: groupErrorMsgId, invalid: isInvalid, children: children }));

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

@@ -13,6 +13,9 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
         if (checkboxListInvalid && !noValidation)
             setIsExpanded(true);
     }, [checkboxListInvalid, noValidation]);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (componentRef.current && !componentRef.current.contains(event.target)) {

package/components/side-menu/side-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { IDSSideMenuBase } from './side-menu-base.js';
 
 function IDSSideMenu({ expanded = false, onToggleMenu, srToggleText = "Sektion", className, ...props }) {
@@ -11,6 +11,9 @@ function IDSSideMenu({ expanded = false, onToggleMenu, srToggleText = "Sektion",
         setIsExpanded(newExpanded);
         onToggleMenu?.(newExpanded);
     };
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
     const handleKeyDown = (e) => {
         if (e.code !== "Escape")
             e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.0.2",
+  "version": "9.0.4",
   "type": "module",
   "peerDependencies": {
     "react": "*",