@inera/ids-react 9.2.2 → 9.4.0

package/components/form/datepicker/datepicker.js

@@ -1,15 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useRef, useState, useEffect } from 'react';
-import { isValid, getWeek, format, subMonths, addMonths } from 'date-fns';
+import { getWeek, isValid, format, subMonths, addMonths } from 'date-fns';
 import { sv } from 'react-day-picker/locale';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
-import { DayPicker, WeekNumberHeader, MonthsDropdown, YearsDropdown, useDayPicker, DropdownNav } from 'react-day-picker';
+import { DayPicker, YearsDropdown, MonthsDropdown, WeekNumberHeader, useDayPicker, DropdownNav } from 'react-day-picker';
 import { useFocusTrap } from '../../utils/hooks/useFocusTrap.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import { useClickOutside } from '../../utils/hooks/useClickOutside.js';
 
 const locale = { locale: sv };
+const datePattern = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+const datePatternString = "\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])";
 const createNewDate = (dateString) => {
     return new Date(dateString + "T00:00:00Z");
 };
@@ -25,7 +27,17 @@ const getPrevMonthYear = (date) => {
 const getNextMonthYear = (date) => {
     return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
 };
-function IDSDatePicker({ label, id, value, light = false, placeholder = "åååå-mm-dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", validationOnBlur = false, defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required = false, invalid = false, tooltip, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
+const parseDateValue = (value) => {
+    if (!datePattern.test(value))
+        return undefined;
+    const parsedDate = createNewDate(value);
+    if (!isValid(parsedDate))
+        return undefined;
+    const [year, month, day] = value.split("-").map(Number);
+    const isSameDate = parsedDate.getUTCFullYear() === year && parsedDate.getUTCMonth() === month - 1 && parsedDate.getUTCDate() === day;
+    return isSameDate ? parsedDate : undefined;
+};
+function IDSDatePicker({ label, id, value, light = false, placeholder = "åååå-mm-dd", subtitle, dataTestId, errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", validationOnBlur = false, defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required, invalid = false, readOnly = false, tooltip, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
     const reactId = useId();
     const dialogId = `datepicker-dialog-${reactId}`;
     const headerId = `datepicker-header-${reactId}`;
@@ -38,24 +50,82 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
     const headerRef = useRef(null);
     const prevMonthButtonRef = useRef(null);
     const nextMonthButtonRef = useRef(null);
+    const wasValidationEnabledRef = useRef(false);
+    const shouldRunRequiredValidation = required === true && !noValidation && !disabled;
+    const shouldShowCustomError = invalid === true && !!errorMsg && !noValidation && !disabled;
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(value);
-    const initialSelectedDate = !!value ? createNewDate(value) : undefined;
+    const [inputValue, setInputValue] = useState(value ?? "");
+    const initialSelectedDate = value ? parseDateValue(value) : undefined;
     const [selectedDate, setSelectedDate] = useState(initialSelectedDate || defaultMonth);
     const [month, setMonth] = useState(initialSelectedDate || defaultMonth || new Date());
-    const [hasDateError, setHasDateError] = useState(false);
-    const [hasMissingError, setHasMissingError] = useState(false);
-    const [hasOtherError, setHasOtherError] = useState(false);
-    const hasError = hasMissingError || hasDateError || hasOtherError || invalid;
-    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg && !noValidation;
-    const showMissingError = !!hasMissingError && !!missingDateErrorMsg && !noValidation;
-    const showError = !!invalid && !!errorMsg && !isDialogOpen && !noValidation;
-    useAriaDescribedBy(inputRef, errorMsgId, invalid, (showError || showMissingError || showInvalidError) && !noValidation);
+    const [showValidationErrors, setShowValidationErrors] = useState(false);
+    const [validationError, setValidationError] = useState(null);
+    const hasValidationError = showValidationErrors && validationError !== null;
+    const hasCustomError = shouldShowCustomError;
+    const hasError = hasValidationError || hasCustomError;
+    const getValidationError = (nextValue) => {
+        if (noValidation || disabled)
+            return null;
+        const trimmedValue = nextValue.trim();
+        if (shouldRunRequiredValidation) {
+            if (!trimmedValue)
+                return "missing";
+            if (!parseDateValue(trimmedValue))
+                return "invalid";
+        }
+        if (shouldShowCustomError)
+            return "custom";
+        return null;
+    };
+    const getErrorMessage = (error) => {
+        if (error === "missing")
+            return missingDateErrorMsg;
+        if (error === "invalid")
+            return invalidDateErrorMsg;
+        if (error === "custom")
+            return errorMsg;
+        return "";
+    };
+    const syncNativeValidity = (nextValue) => {
+        if (!shouldRunRequiredValidation || !inputRef.current)
+            return;
+        const nextError = getValidationError(nextValue);
+        inputRef.current.setCustomValidity(getErrorMessage(nextError));
+    };
+    const updateVisibleValidation = (nextValue, shouldShow) => {
+        if (!shouldRunRequiredValidation) {
+            setValidationError(null);
+            setShowValidationErrors(false);
+            return;
+        }
+        const nextError = getValidationError(nextValue);
+        setValidationError(nextError);
+        setShowValidationErrors(shouldShow);
+    };
+    const resetVisibleValidation = () => {
+        setValidationError(null);
+        setShowValidationErrors(false);
+    };
+    useAriaDescribedBy(inputRef, errorMsgId, hasError, hasError);
     useFocusTrap(dialogRef.current, isDialogOpen);
     useClickOutside(() => {
         setIsDialogOpen(false);
         onClose?.();
     }, [dialogRef, triggerRef], triggerRef, isDialogOpen);
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        if (!shouldRunRequiredValidation) {
+            if (wasValidationEnabledRef.current) {
+                inputRef.current.setCustomValidity("");
+            }
+            wasValidationEnabledRef.current = false;
+            resetVisibleValidation();
+            return;
+        }
+        wasValidationEnabledRef.current = true;
+        syncNativeValidity(inputValue);
+    }, [shouldRunRequiredValidation, inputValue, invalid, errorMsg, missingDateErrorMsg, invalidDateErrorMsg]);
     const handleOpenDialog = (e) => {
         e.preventDefault();
         setIsDialogOpen(true);
@@ -63,7 +133,7 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
     };
     const closeDialog = () => {
         setIsDialogOpen(false);
-        triggerRef.current.focus();
+        triggerRef.current?.focus();
         onClose?.();
     };
     useEffect(() => {
@@ -79,113 +149,78 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isDialogOpen]);
+    const emitValue = (nextValue, parsedDate) => {
+        const trimmedValue = nextValue.trim();
+        const isMissing = shouldRunRequiredValidation && !trimmedValue;
+        const isInvalidDate = shouldRunRequiredValidation && !!trimmedValue && !parsedDate;
+        onChange?.({
+            value: nextValue,
+            valueAsDate: parsedDate,
+            invalidDate: isInvalidDate,
+            missingDate: isMissing
+        });
+    };
     const handleDayPickerSelect = (date) => {
-        const dateString = format(date, "yyyy-MM-dd");
-        resetErrors();
-        if (!date) {
-            setInputValue("");
-            setSelectedDate(undefined);
-        }
-        else {
-            setSelectedDate(date);
-            setInputValue(dateString);
+        const nextValue = date ? format(date, "yyyy-MM-dd") : "";
+        resetVisibleValidation();
+        setInputValue(nextValue);
+        setSelectedDate(date);
+        if (date) {
+            setMonth(date);
         }
+        emitValue(nextValue, date);
         requestAnimationFrame(() => {
-            if (inputRef.current) {
-                inputRef.current.checkValidity();
-                inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
-                inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+            if (!inputRef.current)
+                return;
+            if (shouldRunRequiredValidation) {
+                syncNativeValidity(nextValue);
             }
+            inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+            inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
         });
-        emitValue(dateString, date);
         closeDialog();
     };
-    const updateErrors = (validity, isNotADate) => {
-        if (!noValidation) {
-            setHasMissingError(validity.valueMissing);
-            setHasOtherError(!validity.valid);
-            if (validity.valueMissing) {
-                setHasDateError(false);
-            }
-            else {
-                setHasDateError(!!isNotADate || validity.patternMismatch);
-            }
-        }
-    };
-    const resetErrors = () => {
-        setHasMissingError(false);
-        setHasDateError(false);
-        setHasOtherError(false);
-    };
     const handleInputChange = (e) => {
-        resetErrors();
-        setInputValue(e.currentTarget.value);
-        const parsedDate = createNewDate(e.currentTarget.value);
-        setHasDateError(false);
-        if (isValid(parsedDate)) {
-            setSelectedDate(parsedDate);
+        const nextValue = e.currentTarget.value;
+        const parsedDate = parseDateValue(nextValue.trim());
+        resetVisibleValidation();
+        setInputValue(nextValue);
+        setSelectedDate(parsedDate);
+        if (parsedDate) {
             setMonth(parsedDate);
         }
-        else {
-            setHasDateError(true);
-            setSelectedDate(undefined);
+        if (shouldRunRequiredValidation) {
+            syncNativeValidity(nextValue);
         }
-        emitValue(e.currentTarget.value, parsedDate);
+        emitValue(nextValue, parsedDate);
     };
-    // if the input value is changed programmatically
     useEffect(() => {
-        if (value !== inputValue && inputRef.current) {
-            resetErrors();
-            setInputValue(value);
-            setHasDateError(false);
-            if (value) {
-                const parsedDate = createNewDate(value);
-                if (isValid(parsedDate)) {
-                    setSelectedDate(parsedDate);
-                    setMonth(parsedDate);
-                }
-                else {
-                    setSelectedDate(undefined);
-                    setHasDateError(true);
-                }
-            }
+        if (value === inputValue)
+            return;
+        const nextValue = value ?? "";
+        const parsedDate = nextValue ? parseDateValue(nextValue.trim()) : undefined;
+        resetVisibleValidation();
+        setInputValue(nextValue);
+        setSelectedDate(parsedDate);
+        if (parsedDate) {
+            setMonth(parsedDate);
         }
-    }, [value, inputRef]);
-    const emitValue = (val, parsedDate) => {
-        const isMissing = required && !val;
-        const isValidDate = parsedDate && parsedDate instanceof Date && isValid(parsedDate);
-        onChange?.({
-            value: val,
-            valueAsDate: isValidDate ? createNewDate(val) : undefined,
-            invalidDate: !isValid(parsedDate),
-            missingDate: isMissing
-        });
-    };
+    }, [value]);
     const handleInvalid = (e) => {
-        updateErrors(e.currentTarget.validity);
+        if (!shouldRunRequiredValidation)
+            return;
+        e.preventDefault();
+        syncNativeValidity(e.currentTarget.value);
+        updateVisibleValidation(e.currentTarget.value, true);
     };
     const handleBlur = (e) => {
-        if (validationOnBlur) {
-            updateErrors(e.currentTarget.validity, !!e.currentTarget.value.trim().length && !isValid(selectedDate));
+        if (shouldRunRequiredValidation && validationOnBlur) {
+            syncNativeValidity(e.currentTarget.value);
+            updateVisibleValidation(e.currentTarget.value, true);
         }
         onBlur?.(e);
     };
-    useEffect(() => {
-        const form = inputRef.current?.form;
-        if (!form)
-            return;
-        const handleSubmit = (_e) => {
-            if (!noValidation) {
-                requestAnimationFrame(() => {
-                    updateErrors(inputRef.current.validity, !isValid(createNewDate(inputRef.current.value)));
-                });
-            }
-        };
-        form.addEventListener("submit", handleSubmit);
-        return () => form.removeEventListener("submit", handleSubmit);
-    }, []);
     function CustomNav(props) {
-        // Add the nav buttons after the dropdowns for correct tab order
         const { children } = props;
         const { goToMonth, previousMonth, nextMonth } = useDayPicker();
         const currentMonth = "aktuell månad";
@@ -193,28 +228,25 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         const goToPrevMonth = () => {
             previousMonth && goToMonth(previousMonth);
             requestAnimationFrame(() => {
-                if (prevMonthButtonRef.current) {
-                    prevMonthButtonRef.current.focus();
-                }
+                prevMonthButtonRef.current?.focus();
             });
         };
         const goToNextMonth = () => {
             nextMonth && goToMonth(nextMonth);
             requestAnimationFrame(() => {
-                if (nextMonthButtonRef.current) {
-                    nextMonthButtonRef.current.focus();
-                }
+                nextMonthButtonRef.current?.focus();
             });
         };
         return (jsxs(DropdownNav, { className: "ids-datepicker__nav", ...props, children: [jsx("div", { className: "ids-datepicker__nav-dropdowns", children: children }), jsxs("div", { className: "ids-datepicker__nav-buttons", children: [jsx("button", { type: "button", ref: prevMonthButtonRef, className: "ids-datepicker__nav-prev", onClick: goToPrevMonth, disabled: !previousMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getPrevMonthYear(month)}` }), jsx("button", { type: "button", ref: nextMonthButtonRef, className: "ids-datepicker__nav-next", onClick: goToNextMonth, disabled: !nextMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getNextMonthYear(month)}` })] })] }));
     }
     useEffect(() => {
-        const header = headerRef.current;
-        if (!header)
+        if (!isDialogOpen)
             return;
-        header?.focus();
+        headerRef.current?.focus();
     }, [isDialogOpen]);
-    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && hasError }, className), ...props, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: required, disabled: disabled, "aria-invalid": !noValidation && hasError, placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur, pattern: "^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$" }), jsx("button", { ref: triggerRef, type: "button", className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled, onClick: handleOpenDialog, "aria-controls": "dialog", "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", type: "button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+    const visibleErrorType = hasValidationError ? validationError : hasCustomError ? "custom" : null;
+    const visibleErrorMessage = visibleErrorType ? getErrorMessage(visibleErrorType) : "";
+    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": hasError }, className), "data-testid": dataTestId, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: clsx("ids-subtitle", { "ids-subtitle--disabled": disabled }), children: subtitle }), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: shouldRunRequiredValidation || undefined, pattern: shouldRunRequiredValidation ? datePatternString : undefined, "aria-invalid": hasError || undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, onChange: handleInputChange, onFocus: onFocus, onInvalid: handleInvalid, onBlur: handleBlur, ...props }), jsx("button", { ref: triggerRef, type: "button", className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled || readOnly, onClick: handleOpenDialog, "aria-controls": dialogId, "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", type: "button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
                                     labelWeekNumberHeader: () => "Veckonumer",
                                     labelWeekNumber: (_weekNumber) => `vecka`,
                                     labelDayButton(date, _modifiers, _options, dateLib) {
@@ -235,7 +267,7 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
                                     WeekNumberHeader: props => (jsx(WeekNumberHeader, { ...props, className: "ids-datepicker__week-number-header", children: shortWeek })),
                                     MonthsDropdown: props => (jsx(MonthsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__month-select" })),
                                     YearsDropdown: props => (jsx(YearsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__year-select" }))
-                                }, startMonth: startMonth, endMonth: endMonth, month: month, onMonthChange: setMonth, defaultMonth: defaultMonth, selected: selectedDate, onSelect: handleDayPickerSelect, onDayClick: onDayClick })] })] }), (showError || showInvalidError || showMissingError) && (jsxs(IDSErrorMessage, { id: errorMsgId, show: true, children: [showInvalidError && !showMissingError && !showError && invalidDateErrorMsg, showMissingError && !showInvalidError && !showError && missingDateErrorMsg, showError && errorMsg] }))] }));
+                                }, startMonth: startMonth, endMonth: endMonth, month: month, onMonthChange: setMonth, defaultMonth: defaultMonth, selected: selectedDate, onSelect: handleDayPickerSelect, onDayClick: onDayClick })] })] }), visibleErrorMessage && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: visibleErrorMessage }))] }));
 }
 IDSDatePicker.displayName = "IDSDatePicker";
 

package/components/form/error-message/error-message.d.ts

@@ -5,7 +5,7 @@ interface IDSErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
     compact?: boolean;
     children?: ReactNode;
 }
-export declare function IDSErrorMessage({ show, compact, id, children, className, ...props }: IDSErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSErrorMessage({ show, compact, id, children, className, ...props }: IDSErrorMessageProps): React.JSX.Element;
 export declare namespace IDSErrorMessage {
     var displayName: string;
 }

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

@@ -12,10 +12,7 @@ function useAriaDescribedBy(ref, errorMsgId, invalid, hasErrorMsg, hasHint, hint
                 }
             }
             else {
-                if (hasHint) {
-                    inputEl.setAttribute("aria-describedby", hintId);
-                }
-                else {
+                {
                     inputEl.removeAttribute("aria-describedby");
                 }
             }

package/components/form/form-hooks/useInputValidity.d.ts

@@ -1 +1 @@
-export declare function useInputValidity(ref: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, validateOnBlur?: boolean): boolean;
+export declare function useInputValidity(ref: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, validateOnBlur?: boolean, skipValidation?: boolean): boolean;

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

@@ -1,30 +1,46 @@
-import { useState, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
-function useInputValidity(ref, validateOnBlur) {
+function useInputValidity(ref, validateOnBlur, skipValidation) {
     const [isValid, setIsValid] = useState(true);
+    const validationStartedRef = useRef(false);
     useEffect(() => {
+        if (skipValidation) {
+            validationStartedRef.current = false;
+            setIsValid(true);
+            return;
+        }
         const inputEl = ref.current;
         if (!inputEl)
             return;
         const updateValidity = () => {
-            setIsValid(inputEl.validity.valid);
+            const isOptionalEmpty = !inputEl.required && inputEl.value === "";
+            setIsValid(isOptionalEmpty || inputEl.validity.valid);
+        };
+        const startValidation = () => {
+            validationStartedRef.current = true;
+            updateValidity();
+        };
+        const updateValidityAfterValidationStarted = () => {
+            if (validationStartedRef.current) {
+                updateValidity();
+            }
         };
         const form = inputEl.closest("form");
-        form?.addEventListener("submit", updateValidity);
+        form?.addEventListener("submit", startValidation);
+        inputEl.addEventListener("invalid", startValidation);
+        inputEl.addEventListener("change", updateValidityAfterValidationStarted);
         if (validateOnBlur) {
-            inputEl.addEventListener("blur", updateValidity);
+            inputEl.addEventListener("blur", startValidation);
         }
-        inputEl.addEventListener("change", updateValidity);
-        inputEl.addEventListener("invalid", updateValidity);
         return () => {
-            form?.removeEventListener("submit", updateValidity);
+            form?.removeEventListener("submit", startValidation);
+            inputEl.removeEventListener("invalid", startValidation);
+            inputEl.removeEventListener("change", updateValidityAfterValidationStarted);
             if (validateOnBlur) {
-                inputEl.removeEventListener("blur", updateValidity);
+                inputEl.removeEventListener("blur", startValidation);
             }
-            inputEl.removeEventListener("change", updateValidity);
-            inputEl.removeEventListener("invalid", updateValidity);
         };
-    }, [ref]);
+    }, [ref, validateOnBlur, skipValidation]);
     return isValid;
 }
 

package/components/form/form-props/form-props.d.ts

@@ -8,6 +8,7 @@ export interface CommonFormProps {
     label?: string;
     errorMsg?: string;
     hint?: string | ReactNode;
+    subtitle?: string | ReactNode;
     tooltip?: ReactNode;
     focusAnchor?: boolean;
     dataTestId?: string;

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

@@ -1,16 +1,18 @@
 import React, { ReactNode, CSSProperties } from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
 export interface IDSInputBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
-    icon?: string;
     unit?: string;
+    subtitle?: string;
     showSearchLabel?: boolean;
     submitButton?: ReactNode;
     hintId?: string;
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     style?: CSSProperties;
+    icon?: string;
+    clearButton?: ReactNode;
 }
-export declare function IDSInputBase({ label, type, icon, hint, unit, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSInputBase({ label, type, icon, clearButton, hint, unit, subtitle, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }: IDSInputBaseProps): React.JSX.Element;
 export declare namespace IDSInputBase {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }) {
+function IDSInputBase({ label, type = "text", icon, clearButton, hint, unit, subtitle, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }) {
     const reactId = useId();
     const inputId = id ?? `input-base-${reactId}`;
     const baseHintId = hintId ?? `input-base-hint-${reactId}`;
@@ -17,15 +17,20 @@ function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel
     if (type === "search" && !showSearchLabel && label) {
         ariaHandler["aria-label"] = label;
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-input--icon": !!icon }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
-                                    "ids-hidden": type === "search" && !showSearchLabel
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", {
+                    "ids-input--search": type === "search",
+                    "ids-input--icon": !!icon && !clearButton,
+                    "ids-input--clear-button": !!clearButton,
+                    "ids-input--unit": !!unit
+                }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
+                                    "ids-label-wrapper--sr-only": type === "search" && !showSearchLabel
                                 }), children: [jsx("label", { className: clsx("ids-label", {
-                                            "ids-label--disabled": disabled || readOnly
-                                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-input__unit-wrapper", children: [jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
-                                                    "ids-input--light": light,
-                                                    "ids-input--invalid": invalid,
-                                                    "ids-focus-anchor": focusAnchor
-                                                }), "aria-invalid": invalid, required: required, disabled: disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), unit && (jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit }))] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                                            "ids-label--sr-only": type === "search" && !showSearchLabel
+                                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon", "aria-hidden": "true" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
+                                            "ids-input--light": light,
+                                            "ids-input--invalid": invalid,
+                                            "ids-focus-anchor": focusAnchor
+                                        }), "aria-invalid": invalid, required: required, disabled: disabled, ...ariaHandler, ...props }), icon && !clearButton && jsx("span", { className: `ids-input__icon ids-icon-${icon}` }), clearButton && jsx("span", { className: "ids-input__clear-button", children: clearButton }), unit && (jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit }))] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSInputBase.displayName = "IDSInputBase";
 

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

@@ -2,7 +2,10 @@ import { ReactNode } from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
 interface IDSInputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     icon?: string;
+    clearButton?: ReactNode;
     unit?: string;
+    hint?: string | ReactNode;
+    subtitle?: string;
     showSearchLabel?: boolean;
     submitButton?: ReactNode;
 }

package/components/form/input/input.js

@@ -6,7 +6,7 @@ import { IDSInputBase } from './input-base.js';
 
 const IDSInput = forwardRef(({ invalid = false, noValidation = false, style, validationOnBlur = false, ...props }, ref) => {
     const inputRef = useRef(null);
-    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
+    const hasValidValue = useInputValidity(inputRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

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

@@ -4,7 +4,7 @@ interface IDSRadioBaseProps extends React.InputHTMLAttributes<HTMLInputElement>,
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }: IDSRadioBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }: IDSRadioBaseProps): React.JSX.Element;
 export declare namespace IDSRadioBase {
     var displayName: string;
 }

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

@@ -13,8 +13,7 @@ function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTes
                     "ids-input--light": light,
                     "ids-focus-anchor": focusAnchor
                 }), name: name, disabled: disabled, "aria-invalid": invalid, ...ariaHandler, ...props }), !!children && (jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-radio__label ids-label", {
-                            "ids-label--clickable": !disabled,
-                            "ids-label--disabled": disabled
+                            "ids-label--clickable": !disabled
                         }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }));
 }
 IDSRadioBase.displayName = "IDSRadioBase";

package/components/form/radio/radio-group-base.d.ts

@@ -7,10 +7,11 @@ interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElem
     required?: boolean;
     tooltip?: ReactNode;
     invalid?: boolean;
+    subtitle?: string | ReactNode;
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
-export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, subtitle, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): React.JSX.Element;
 export declare namespace IDSRadioGroupBase {
     var displayName: string;
 }

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

@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import clsx from 'clsx';
 
-function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact = false, required = false, tooltip, className, children, invalid, groupRef, ...props }) {
+function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact = false, required = false, tooltip, subtitle, 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: clsx("ids-label-wrapper", {
+    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsxs("div", { className: clsx("ids-label-wrapper", {
                     "ids-label-wrapper--sr-only": hideLegend
-                }, className), 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 }))] }));
+                }, className), children: [jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }), subtitle && jsx("div", { className: "ids-subtitle ids-subtitle--group", children: subtitle })] })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 IDSRadioGroupBase.displayName = "IDSRadioGroupBase";
 

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, FieldsetHTMLAttributes } from "react";
+import React, { ChangeEvent, ReactNode, FieldsetHTMLAttributes } from "react";
 interface IDSRadioGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     name?: string;
     legend?: string;
@@ -7,11 +7,12 @@ interface IDSRadioGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>
     compact?: boolean;
     invalid?: boolean;
     required?: boolean;
+    subtitle?: string | ReactNode;
     tooltip?: ReactNode;
     noValidation?: boolean;
     onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }: IDSRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, subtitle, children, onRadioChange, ...props }: IDSRadioGroupProps): React.JSX.Element;
 export declare namespace IDSRadioGroup {
     var displayName: string;
 }