@inera/ids-react 9.0.2 → 9.0.3

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/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.3",
   "type": "module",
   "peerDependencies": {
     "react": "*",