@inera/ids-react 8.1.0 → 9.0.0

package/components/form/datepicker/datepicker.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+import { Matcher, Modifiers } from "react-day-picker";
+export interface IDSDatePickerChangeEvent {
+    value: string;
+    valueAsDate?: Date;
+    invalidDate: boolean;
+    missingDate: boolean;
+}
+export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    label: string;
+    value?: string;
+    light?: boolean;
+    placeholder?: string;
+    calendarHeader?: string;
+    defaultMonth?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    srOpenText?: string;
+    srCloseText?: string;
+    focusedDay?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    errorMsg?: string;
+    missingDateErrorMsg?: string;
+    invalidDateErrorMsg?: string;
+    invalid?: boolean;
+    disableNavigation?: boolean;
+    tooltip?: ReactNode;
+    modifiers?: Record<string, Matcher | Matcher[]>;
+    onChange?: (event: IDSDatePickerChangeEvent) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
+}
+export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/form/datepicker/datepicker.js

@@ -0,0 +1,217 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useId, useState, useEffect } from 'react';
+import { isValid, getWeek, 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 { useFocusTrap } from '../../utils/hooks/useFocusTrap.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+
+const locale = { locale: sv };
+const createNewDate = (dateString) => {
+    return new Date(dateString + "T00:00:00Z");
+};
+const getSweMonth = (date) => {
+    return `${format(date, "MMMM", locale)}`;
+};
+const getSweYear = (date) => {
+    return `${format(date, "yyyy", locale)}`;
+};
+const getPrevMonthYear = (date) => {
+    return `${getSweMonth(subMonths(date, 1))} ${getSweYear(subMonths(date, 1))}`;
+};
+const getNextMonthYear = (date) => {
+    return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
+};
+function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm/dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", 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 shortWeek = "v.";
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const headerRef = useRef(null);
+    const prevMonthButtonRef = useRef(null);
+    const nextMonthButtonRef = useRef(null);
+    const dialogId = `datepicker-dialog-${useId()}`;
+    const headerId = `datepicker-header-${useId()}`;
+    const inputId = `datepicker-input-${useId()}`;
+    const errorMsgId = `datepicker-error-${useId()}`;
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const initialSelectedDate = !!value ? createNewDate(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 [isInvalid, setIsInvalid] = useState(invalid);
+    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg;
+    const showMissingError = !!hasMissingError && !!missingDateErrorMsg;
+    const showError = !!invalid && !!errorMsg && !isDialogOpen;
+    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, (showError || showMissingError || showInvalidError) && !noValidation);
+    useFocusTrap(dialogRef.current, isDialogOpen);
+    const handleOpenDialog = (e) => {
+        e.preventDefault();
+        setIsDialogOpen(true);
+        onOpen?.();
+    };
+    const closeDialog = () => {
+        setIsDialogOpen(false);
+        triggerRef.current.focus();
+        onClose?.();
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dialogRef.current && !dialogRef.current.contains(event.target)) {
+                setIsDialogOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    useEffect(() => {
+        if (!isDialogOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setIsDialogOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isDialogOpen]);
+    const handleDayPickerSelect = (date) => {
+        const dateString = format(date, "yyyy-MM-dd");
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        if (!date) {
+            setInputValue("");
+            setSelectedDate(undefined);
+        }
+        else {
+            setSelectedDate(date);
+            setInputValue(dateString);
+        }
+        requestAnimationFrame(() => {
+            if (inputRef.current) {
+                inputRef.current.checkValidity();
+                inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+                inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+                setHasMissingError(!noValidation && required && inputRef.current.validity.valueMissing);
+                setIsInvalid(!inputRef.current.validity.valid || invalid);
+            }
+        });
+        emitValue(dateString, date);
+        closeDialog();
+    };
+    const handleInvalid = (e) => {
+        setHasMissingError(!noValidation && required && e.currentTarget.validity.valueMissing);
+        setIsInvalid(!e.currentTarget.validity.valid || invalid);
+        emitValue(e.currentTarget.value, undefined);
+    };
+    // if the input value is changed programmatically
+    useEffect(() => {
+        if (value !== inputValue && inputRef.current) {
+            setIsInvalid(false);
+            setHasDateError(false);
+            setInputValue(value);
+            setHasMissingError(!noValidation && required && !value);
+            if (value) {
+                const parsedDate = createNewDate(value);
+                if (isValid(parsedDate)) {
+                    setSelectedDate(parsedDate);
+                    setMonth(parsedDate);
+                }
+                else {
+                    setSelectedDate(undefined);
+                    setIsInvalid(true);
+                    setHasDateError(true);
+                }
+            }
+        }
+    }, [value, inputRef]);
+    const handleInputChange = (e) => {
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        setInputValue(e.currentTarget.value);
+        const parsedDate = createNewDate(e.currentTarget.value);
+        if (isValid(parsedDate)) {
+            setSelectedDate(parsedDate);
+            setMonth(parsedDate);
+        }
+        else {
+            setSelectedDate(undefined);
+            setIsInvalid(!e.currentTarget.validity.valid || invalid);
+        }
+        emitValue(e.currentTarget.value, parsedDate);
+    };
+    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
+        });
+    };
+    const handleBlur = () => {
+        setHasDateError(!noValidation && value.trim().length && !isValid(selectedDate));
+    };
+    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";
+        const goTo = "gå till";
+        const goToPrevMonth = () => {
+            previousMonth && goToMonth(previousMonth);
+            requestAnimationFrame(() => {
+                if (prevMonthButtonRef.current) {
+                    prevMonthButtonRef.current.focus();
+                }
+            });
+        };
+        const goToNextMonth = () => {
+            nextMonth && goToMonth(nextMonth);
+            requestAnimationFrame(() => {
+                if (nextMonthButtonRef.current) {
+                    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)
+            return;
+        header?.focus();
+    }, [isDialogOpen]);
+    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && (isInvalid || hasDateError) }, 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 && (isInvalid || hasDateError), placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur }), 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", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+                                    labelWeekNumberHeader: () => "Veckonumer",
+                                    labelWeekNumber: (weekNumber) => `vecka`,
+                                    labelDayButton(date, modifiers, options, dateLib) {
+                                        const formattedDate = dateLib.format(date, "EEEE d MMMM yyyy", { locale: sv });
+                                        const weekNumber = getWeek(date, {
+                                            weekStartsOn: 1,
+                                            firstWeekContainsDate: 4
+                                        });
+                                        return `${formattedDate}, vecka ${weekNumber}`;
+                                    },
+                                    labelNext: () => "Nästa månad",
+                                    labelPrevious: () => "Föregående månad",
+                                    labelMonthDropdown: () => "Välj månad",
+                                    labelYearDropdown: () => "Välj år"
+                                }, modifiers: modifiers, captionLayout: "dropdown", showWeekNumber: true, autoFocus: true, components: {
+                                    Nav: () => null,
+                                    DropdownNav: CustomNav,
+                                    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 && invalidDateErrorMsg, showMissingError && missingDateErrorMsg, showError && errorMsg] }))] }));
+}
+
+export { IDSDatePicker };

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

@@ -1,10 +1,9 @@
 import React, { ReactNode } from "react";
-import "@inera/ids-design/components/form/error-message/error-message.css";
 interface IDSErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
     id?: string;
     show?: boolean;
     compact?: boolean;
     children?: ReactNode;
 }
-export declare const IDSErrorMessage: React.FC<IDSErrorMessageProps>;
+export declare function IDSErrorMessage({ show, compact, id, children, className, ...props }: IDSErrorMessageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/form/error-message/error-message.js

@@ -1,12 +1,10 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@inera/ids-design/components/form/error-message/error-message.css';
 import clsx from 'clsx';
 
-const IDSErrorMessage = ({ show = false, compact = false, id, children, className, ...props }) => {
+function IDSErrorMessage({ show = false, compact = false, id, children, className, ...props }) {
     return (jsx("div", { id: id, style: { marginTop: compact && "0" }, className: clsx("ids-error-message", {
             "ids-error-message--show": show
         }, className), ...props, children: jsxs("span", { className: "ids-error-message__text", children: [" ", children, " "] }) }));
-};
+}
 
 export { IDSErrorMessage };

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

@@ -1 +1,4 @@
-export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio", onInvalid?: () => void): boolean;
+export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio", onInvalid?: () => void): {
+    isValid: boolean;
+    hasInteracted: boolean;
+};

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

@@ -34,7 +34,9 @@ function useGroupValidity(ref, type, onInvalid) {
             validate();
         };
         const handleChange = () => {
-            setHasInteracted(false);
+            if (isValid) {
+                setHasInteracted(false);
+            }
             validate();
         };
         inputs.forEach(cb => {
@@ -55,7 +57,10 @@ function useGroupValidity(ref, type, onInvalid) {
             form?.removeEventListener("submit", handleSubmit);
         };
     }, [ref, onInvalid]);
-    return isValid || !hasInteracted;
+    return {
+        isValid,
+        hasInteracted
+    };
 }
 
 export { useGroupValidity };

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

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

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

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-function useInputValidity(ref) {
+function useInputValidity(ref, validateOnBlur) {
     const [isValid, setIsValid] = useState(true);
     useEffect(() => {
         const inputEl = ref.current;
@@ -11,13 +11,17 @@ function useInputValidity(ref) {
         };
         const form = inputEl.closest("form");
         form?.addEventListener("submit", updateValidity);
-        inputEl.addEventListener("blur", updateValidity);
-        inputEl.addEventListener("change", updateValidity);
+        if (validateOnBlur) {
+            inputEl.addEventListener("blur", updateValidity);
+        }
+        inputEl.addEventListener("input", updateValidity);
         inputEl.addEventListener("invalid", updateValidity);
         return () => {
             form?.removeEventListener("submit", updateValidity);
-            inputEl.removeEventListener("blur", updateValidity);
-            inputEl.removeEventListener("change", updateValidity);
+            if (validateOnBlur) {
+                inputEl.removeEventListener("blur", updateValidity);
+            }
+            inputEl.removeEventListener("input", updateValidity);
             inputEl.removeEventListener("invalid", updateValidity);
         };
     }, [ref]);

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

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

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+
+function IDSInputBase({ label, type = "text", icon, hint, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `input-base-${reactId}`;
+    const baseHintId = !!hintId ? hintId : `input-base-hint-${reactId}`;
+    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `input-base-error-${reactId}`;
+    const showErrorMsg = invalid && !!errorMsg;
+    const ariaHandler = showErrorMsg
+        ? {
+            "aria-describedby": baseErrorMsgId
+        }
+        : !!hint
+            ? {
+                "aria-describedby": baseHintId
+            }
+            : {};
+    ariaHandler["aria-label"] = type === "search" && !showSearchLabel ? label : "";
+    return (jsx("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-inout--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
+                                "ids-label--disabled": disabled || readOnly,
+                                "ids-hidden": type === "search" && !showSearchLabel
+                            }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), 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, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }) }));
+}
+
+export { IDSInputBase };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     label: string;
     type?: string;
@@ -16,6 +16,7 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     tooltip?: ReactNode;
     submitButton?: ReactNode;
     dataTestId?: string;
+    validationOnBlur?: boolean;
 }
-export declare const IDSInput: React.ForwardRefExoticComponent<IDSInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const IDSInput: import("react").ForwardRefExoticComponent<IDSInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/input/input.js

@@ -1,39 +1,23 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
-import clsx from 'clsx';
+import { IDSInputBase } from './input-base.js';
 
-const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", dataTestId = "", disabled = false, invalid = false, required = false, noValidation = false, focusAnchor = false, light = false, readOnly = false, id, tooltip, submitButton, className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const errorMsgId = useElementId();
-    const hintId = useElementId();
+const IDSInput = forwardRef(({ invalid = false, noValidation = false, style, validationOnBlur = false, ...props }, ref) => {
     const inputRef = useRef(null);
-    const combinedRef = (node) => {
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
         inputRef.current = node;
         if (typeof ref === "function")
             ref(node);
         else if (ref)
             ref.current = node;
     };
-    const hasValidValue = useInputValidity(inputRef);
+    // Validation
+    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg && !noValidation, !!hint, hintId);
-    const inputElement = (jsxs("div", { className: clsx("ids-input__wrapper", {
-            "ids-input--icon": icon
-        }), "data-testid": dataTestId, children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: combinedRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
-                    "ids-input--light": light,
-                    "ids-input--invalid": invalid,
-                    "ids-focus-anchor": focusAnchor
-                }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }));
-    const labelElement = (jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
-                    "ids-label--disabled": disabled || readOnly,
-                    "ids-hidden": type === "search" && !showSearchLabel
-                }), htmlFor: fieldId, children: label }), tooltip] }));
-    return (jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    return jsx(IDSInputBase, { ...props, style: style, invalid: isInvalid, inputRef: mergedRef });
 });
 IDSInput.displayName = "IDSInput";
 

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

@@ -0,0 +1,16 @@
+import React, { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSRadioBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
+    name?: string;
+    light?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    focusAnchor?: boolean;
+    tooltip?: ReactNode;
+    dataTestId?: string;
+    children?: ReactNode;
+    errorMsgId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+export declare function IDSRadioBase({ id, name, light, compact, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }: IDSRadioBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSRadioBase({ id, name, light, compact, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `radio-base-${reactId}`;
+    const showErrorMsg = invalid && !!errorMsgId;
+    // for radio the errorMsgId always comes from the group
+    const ariaHandler = showErrorMsg
+        ? {
+            "aria-describedby": errorMsgId
+        }
+        : {};
+    return (jsxs("div", { className: clsx("ids-radio", className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: inputRef, type: "radio", className: clsx("ids-radio__input", {
+                    "ids-input--light": light,
+                    "ids-focus-anchor": focusAnchor
+                }), name: name, disabled: disabled, "aria-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
+                        }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }));
+}
+
+export { IDSRadioBase };

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

@@ -0,0 +1,13 @@
+import React, { ReactNode, FieldsetHTMLAttributes } from "react";
+interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend?: string;
+    errorMsg?: string | ReactNode;
+    compact?: boolean;
+    required?: boolean;
+    tooltip?: ReactNode;
+    invalid?: boolean;
+    errorMsgId?: string;
+    groupRef?: React.Ref<HTMLFieldSetElement>;
+}
+export declare function IDSRadioGroupBase({ legend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+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 }))] }));
+}
+
+export { IDSRadioGroupBase };

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

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

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

@@ -1,31 +1,37 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
-import { IDSErrorMessage } from '../error-message/error-message.js';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useId } from 'react';
+import { IDSRadioGroupBase } from './radio-group-base.js';
+import { IDSRadio } from './radio.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
-import clsx from 'clsx';
 
-const IDSRadioGroup = ({ name = "options", legend = "", errorMsg = "", compact = false, required = false, onRadioChange, tooltip, className, children, ...props }) => {
+function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }) {
     const groupRef = useRef(null);
-    const isValid = useGroupValidity(groupRef, "radio");
-    const errorMsgId = useElementId();
+    const { isValid, hasInteracted } = useGroupValidity(groupRef, "radio");
+    const reactId = useId();
+    const groupName = !!name ? name : `radio-group-name-${reactId}`;
+    const errorMsgId = `radio-error-${reactId}`;
     const clonedChildren = React.Children.map(children, child => {
-        if (React.isValidElement(child) && child.type.displayName === "IDSRadio") {
-            return React.cloneElement(child, {
+        if (!React.isValidElement(child))
+            return child;
+        if (child.type === IDSRadio) {
+            const { id, ...rest } = child.props;
+            const cloneProps = {
+                ...rest,
                 key: child.props.id,
-                name,
-                required,
-                groupErrorMsgId: errorMsg && errorMsgId,
-                groupInvalid: !isValid,
+                id: child.props.id,
+                name: groupName,
+                required: required && !noValidation,
+                noValidation,
+                groupErrorMsgId: errorMsg ? errorMsgId : undefined,
+                groupInvalid: !isValid && hasInteracted && !noValidation,
                 onChange: onRadioChange
-            });
+            };
+            return React.cloneElement(child, cloneProps);
         }
         return child;
     });
-    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", {
-            "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, invalid: !isValid && hasInteracted || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
+}
 
 export { IDSRadioGroup };