@inera/ids-react 9.2.2 → 9.3.0

package/components/accordion/accordion.js

@@ -9,7 +9,7 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
     const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
     const isExpanded = isControlled ? expanded : internalExpanded;
-    const hasChildren = React.Children.toArray(children).some(child => {
+    const hasChildren = React.Children.toArray(children).some((child) => {
         return React.isValidElement(child) && child.type === IDSAccordion;
     });
     useEffect(() => {

package/components/alert/alert-base.js

@@ -21,9 +21,9 @@ function IDSAlertBase({ collapsible = false, ribbon = false, collapsed = false,
             "ids-alert--ribbon": ribbon,
             "ids-alert--compact": compact,
             "ids-alert--dismissible": dismissible
-        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
+        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
                                 "ids-alert__expand-button--expanded": !collapsed
-                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
+                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 }
 IDSAlertBase.displayName = "IDSAlertBase";
 

package/components/breadcrumbs/breadcrumbs.js

@@ -37,7 +37,12 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {
-                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: child }, index));
+                const currentChild = React.isValidElement(child)
+                    ? React.cloneElement(child, {
+                        "aria-current": "page"
+                    })
+                    : child;
+                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: currentChild }, index));
             }
             else {
                 return (jsxs("li", { className: "ids-breadcrumbs__crumb", "data-crumb": true, children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));

package/components/button/button.d.ts

@@ -7,6 +7,7 @@ export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     fab?: boolean;
     focusAnchor?: boolean;
     icon?: string;
+    endIcon?: string;
     iconButton?: boolean;
     loading?: boolean;
     mBlock?: boolean;

package/components/button/button.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { IDSSpinner } from '../form/spinner/spinner.js';
 
-const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
+const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", endIcon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
     let classNames;
     if (fab) {
         classNames = clsx("ids-button", {
@@ -26,7 +26,7 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
             "ids-focus-anchor": focusAnchor
         }, className);
     }
-    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children] }));
+    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children, endIcon && jsx("span", { className: `ids-icon-${endIcon}` })] }));
 });
 IDSButton.displayName = "IDSButton";
 

package/components/button/control-button.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+export interface IDSControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    disabled?: boolean;
+}
+export declare const IDSControlButton: import("react").ForwardRefExoticComponent<IDSControlButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/button/control-button.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const IDSControlButton = forwardRef(({ disabled = false, icon, className, ...props }, ref) => {
+    return (jsx("button", { className: "ids-control-button", ...props, ref: ref, "aria-disabled": disabled, disabled: disabled, children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) }));
+});
+IDSControlButton.displayName = "IDSControlButton";
+
+export { IDSControlButton };

package/components/carousel/carousel.js

@@ -23,7 +23,7 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
     // Validate slide count
     useEffect(() => {
         if (slideCount < 3) {
-            console.warn("Carousel requires at least 3 carousel-items");
+            console.warn("Carousel requires at least 4 carousel-items");
         }
     }, [slideCount]);
     // Initial setup

package/components/dialog/dialog-base.js

@@ -20,7 +20,7 @@ const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headl
                     "ids-dialog--hidden": !show,
                     "ids-focus-trap": !noFocusTrap,
                     "ids-dialog--dismissible": !!dismissible
-                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { className: "ids-dialog__close-button", "aria-label": srClose, ...closeHandler }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 });

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

@@ -16,13 +16,12 @@ function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, bl
     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", {
+                }), children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
                             "ids-focus-anchor": focusAnchor
                         }), "aria-invalid": invalid, disabled: disabled, 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,
-                                    "ids-label--disabled": disabled
+                                    "ids-label--clickable": !disabled
                                 }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSCheckboxBase.displayName = "IDSCheckboxBase";

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

@@ -9,8 +9,9 @@ export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLField
     invalid?: boolean;
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
+    subtitle?: string | ReactNode;
 }
-export declare function IDSCheckboxGroupBase({ legend, errorMsg, compact, hideLegend, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroupBase({ legend, errorMsg, subtitle, compact, hideLegend, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSCheckboxGroupBase {
     var displayName: string;
 }

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

@@ -3,13 +3,13 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSCheckboxGroupBase({ legend, errorMsg = "", compact = false, hideLegend, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
+function IDSCheckboxGroupBase({ legend, errorMsg = "", subtitle, compact = false, hideLegend, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
     const baseErrorMsgId = errorMsgId ?? `checkbox-group-base-error-${useId()}`;
     return (jsxs("fieldset", { ref: groupRef, "aria-describedby": invalid && errorMsg ? baseErrorMsgId : undefined, className: clsx("ids-form-group__fieldset", {
             "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [legend && (jsx("div", { className: clsx("ids-label-wrapper", {
+        }, 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, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: 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, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 IDSCheckboxGroupBase.displayName = "IDSCheckboxGroupBase";
 

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

@@ -8,10 +8,11 @@ export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetE
     tooltip?: ReactNode;
     block?: boolean;
     noValidation?: boolean;
+    subtitle?: string | ReactNode;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
 }
-export declare function IDSCheckboxGroup({ errorMsg, block, invalid, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroup({ errorMsg, block, invalid, subtitle, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSCheckboxGroup {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ import { IDSCheckboxGroupBase } from './checkbox-group-base.js';
 import { IDSCheckbox } from './checkbox.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 
-function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false, onValidityChange, children, ...props }) {
+function IDSCheckboxGroup({ errorMsg = "", block, invalid, subtitle, noValidation = false, onValidityChange, children, ...props }) {
     const groupRef = useRef(null);
     const errorMsgId = useId();
     const { isValid, hasInteracted } = useGroupValidity(groupRef, "checkbox", () => {
@@ -34,7 +34,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
         }
         return child;
     });
-    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, subtitle: subtitle, children: clonedChildren }));
 }
 IDSCheckboxGroup.displayName = "IDSCheckboxGroup";
 

package/components/form/checkbox/checkbox.js

@@ -4,10 +4,9 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { IDSCheckboxBase } from './checkbox-base.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 
-const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, children, ...props }, ref) => {
-    const internalRef = useRef(null);
-    const checkboxRef = ref ?? internalRef;
-    const hasValidValue = useInputValidity(checkboxRef);
+const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, validationOnBlur = false, children, ...props }, ref) => {
+    const checkboxRef = useRef(null);
+    const hasValidValue = useInputValidity(checkboxRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

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

@@ -21,13 +21,15 @@ export interface IDSDatePickerProps extends Omit<React.InputHTMLAttributes<HTMLI
     invalidDateErrorMsg?: string;
     disableNavigation?: boolean;
     noValidation?: boolean;
+    readOnly?: boolean;
+    dataTestId?: string;
     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, id, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, 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;
+export declare function IDSDatePicker({ label, id, value, light, placeholder, subtitle, dataTestId, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, readOnly, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSDatePicker {
     var displayName: string;
 }

package/components/form/datepicker/datepicker.js

@@ -1,6 +1,6 @@
 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';
@@ -10,6 +10,8 @@ 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/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;