@inera/ids-react 9.0.1 → 9.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/form/checkbox/checkbox-base.d.ts +0 -1
- package/components/form/checkbox/checkbox.js +0 -12
- package/components/form/darkmode-toggle/darkmode-toggle.js +1 -1
- package/components/form/select-multiple/select-multiple.js +3 -3
- package/components/form/toggle/toggle.js +1 -1
- package/package.json +3 -2
|
@@ -15,18 +15,6 @@ const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeter
|
|
|
15
15
|
checkboxRef.current.indeterminate = indeterminate;
|
|
16
16
|
}
|
|
17
17
|
}, [indeterminate]);
|
|
18
|
-
// aria-checked update for indeterminate
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const el = checkboxRef.current;
|
|
21
|
-
if (!el)
|
|
22
|
-
return;
|
|
23
|
-
const updateAriaChecked = () => {
|
|
24
|
-
el.setAttribute("aria-checked", el.indeterminate ? "mixed" : `${el.checked}`);
|
|
25
|
-
};
|
|
26
|
-
updateAriaChecked();
|
|
27
|
-
el.addEventListener("change", updateAriaChecked);
|
|
28
|
-
return () => el.removeEventListener("change", updateAriaChecked);
|
|
29
|
-
}, []);
|
|
30
18
|
return (jsx(IDSCheckboxBase, { ...props, inputRef: checkboxRef, invalid: isInvalid, children: children }));
|
|
31
19
|
});
|
|
32
20
|
IDSCheckbox.displayName = "IDSCheckbox";
|
|
@@ -6,7 +6,7 @@ const IDSDarkmodeToggle = forwardRef(({ id, dataTestId, focusAnchor, disabled, c
|
|
|
6
6
|
const inputId = !!id ? id : useId();
|
|
7
7
|
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", {
|
|
8
8
|
"ids-focus-anchor": focusAnchor
|
|
9
|
-
}), "aria-label": srText, disabled: disabled, type: "checkbox", role: "switch",
|
|
9
|
+
}), "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 })] })] }));
|
|
10
10
|
});
|
|
11
11
|
IDSDarkmodeToggle.displayName = "IDSDarkmodeToggle";
|
|
12
12
|
|
|
@@ -10,9 +10,9 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
|
|
|
10
10
|
const inputRef = useRef(null);
|
|
11
11
|
const componentRef = useRef(null);
|
|
12
12
|
useEffect(() => {
|
|
13
|
-
if (checkboxListInvalid)
|
|
13
|
+
if (checkboxListInvalid && !noValidation)
|
|
14
14
|
setIsExpanded(true);
|
|
15
|
-
}, [checkboxListInvalid]);
|
|
15
|
+
}, [checkboxListInvalid, noValidation]);
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
const handleClickOutside = (event) => {
|
|
18
18
|
if (componentRef.current && !componentRef.current.contains(event.target)) {
|
|
@@ -35,7 +35,7 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
|
|
|
35
35
|
return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, componentRef: componentRef, inputRef: inputRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
|
|
36
36
|
setIsExpanded(!isExpanded);
|
|
37
37
|
}, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
|
|
38
|
-
if (!isValid) {
|
|
38
|
+
if (!isValid && !noValidation) {
|
|
39
39
|
setIsExpanded(true);
|
|
40
40
|
setCheckboxListInvalid(!isValid);
|
|
41
41
|
}
|
|
@@ -7,7 +7,7 @@ const IDSToggle = forwardRef(({ id, dataTestId, disabled, tooltip, focusAnchor,
|
|
|
7
7
|
const inputId = !!id ? id : useId();
|
|
8
8
|
return (jsxs("div", { className: clsx("ids-toggle", className), "data-testid": dataTestId, children: [jsx("input", { ref: ref, id: inputId, className: clsx("ids-toggle__input", {
|
|
9
9
|
"ids-focus-anchor": focusAnchor
|
|
10
|
-
}), type: "checkbox", role: "switch",
|
|
10
|
+
}), 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 })] })] }));
|
|
11
11
|
});
|
|
12
12
|
IDSToggle.displayName = "IDSToggle";
|
|
13
13
|
|
package/package.json
CHANGED