@inera/ids-react 9.0.1 → 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

@@ -16,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,19 +15,7 @@ const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeter
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    // aria-checked update for indeterminate
-    useEffect(() => {
-        const el = checkboxRef.current;
-        if (!el)
-            return;
-        const updateAriaChecked = () => {
-            el.setAttribute("aria-checked", el.indeterminate ? "mixed" : `${el.checked}`);
-        };
-        updateAriaChecked();
-        el.addEventListener("change", updateAriaChecked);
-        return () => el.removeEventListener("change", updateAriaChecked);
-    }, []);
-    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/darkmode-toggle/darkmode-toggle.js

@@ -6,7 +6,7 @@ const IDSDarkmodeToggle = forwardRef(({ id, dataTestId, focusAnchor, disabled, c
     const inputId = !!id ? id : useId();
     return (jsxs("div", { className: clsx("ids-darkmode-toggle", className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: ref, className: clsx("ids-darkmode-toggle__input", {
                     "ids-focus-anchor": focusAnchor
-                }), "aria-label": srText, disabled: disabled, type: "checkbox", role: "switch", "aria-checked": props.defaultChecked || props.checked, ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-darkmode-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
+                }), "aria-label": srText, disabled: disabled, type: "checkbox", role: "switch", ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-darkmode-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
 });
 IDSDarkmodeToggle.displayName = "IDSDarkmodeToggle";
 

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

@@ -10,9 +10,12 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
     const inputRef = useRef(null);
     const componentRef = useRef(null);
     useEffect(() => {
-        if (checkboxListInvalid)
+        if (checkboxListInvalid && !noValidation)
             setIsExpanded(true);
-    }, [checkboxListInvalid]);
+    }, [checkboxListInvalid, noValidation]);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (componentRef.current && !componentRef.current.contains(event.target)) {
@@ -35,7 +38,7 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
     return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, componentRef: componentRef, inputRef: inputRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
             setIsExpanded(!isExpanded);
         }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
-                if (!isValid) {
+                if (!isValid && !noValidation) {
                     setIsExpanded(true);
                     setCheckboxListInvalid(!isValid);
                 }

package/components/form/toggle/toggle.js

@@ -7,7 +7,7 @@ const IDSToggle = forwardRef(({ id, dataTestId, disabled, tooltip, focusAnchor,
     const inputId = !!id ? id : useId();
     return (jsxs("div", { className: clsx("ids-toggle", className), "data-testid": dataTestId, children: [jsx("input", { ref: ref, id: inputId, className: clsx("ids-toggle__input", {
                     "ids-focus-anchor": focusAnchor
-                }), type: "checkbox", role: "switch", "aria-checked": props.defaultChecked || props.checked, disabled: disabled, ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
+                }), type: "checkbox", role: "switch", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
 });
 IDSToggle.displayName = "IDSToggle";
 

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,9 +1,10 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "type": "module",
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-day-picker": "^9.11.3"
   },
   "dependencies": {
     "@inera/ids-design": "9.0.x",