@amsterdam/design-system-react/dist/InvalidFormAlert/InvalidFormAlertWithErrors.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Alert } from '../Alert';
import { LinkList } from '../LinkList';
export const InvalidFormAlertWithErrors = forwardRef(({ className, errors, focusOnRender = true, hasFocusedOnce, heading = 'Verbeter de fouten voor u verder gaat', headingLevel, setHasFocusedOnce, ...restProps }, ref) => {
    const innerRef = useRef(null);
    // use a passed ref if it's there, otherwise use innerRef
    useImperativeHandle(ref, () => innerRef.current);
    useEffect(() => {
        if (innerRef.current && focusOnRender && !hasFocusedOnce) {
            innerRef.current.focus();
            setHasFocusedOnce(true);
        }
    }, [innerRef]);
    return (_jsx(Alert, { ...restProps, className: clsx('ams-invalid-form-alert', className), heading: heading, 
        // Remove the default label for the Alert.
        // Otherwise, focusing on the Alert causes NVDA to read the label twice.
        headingId: null, headingLevel: headingLevel, ref: innerRef, severity: "error", tabIndex: -1, children: _jsx(LinkList, { children: errors.map(({ id, label }) => (_jsx(LinkList.Link, { href: id, children: label }, `${id}-${label}`))) }) }));
});
InvalidFormAlertWithErrors.displayName = 'InvalidFormAlertWithErrors';