@inera/ids-react 9.1.2 → 9.2.0

package/components/dropdown/dropdown.d.ts

@@ -12,4 +12,7 @@ type Props = Omit<IDSDropdownBaseProps, "onTriggerClick" | "triggerRef" | "conte
     onOpened?: () => void;
 };
 export declare function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded, persistent, onClosed, onOpened, children, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSDropdown {
+    var displayName: string;
+}
 export {};

package/components/dropdown/dropdown.js

@@ -2,45 +2,22 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSDropdownBase } from './dropdown-base.js';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded = false, persistent = false, onClosed, onOpened, children, className, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
+    useFocusTrap(contentRef.current, isExpanded);
+    const closeMenu = () => {
+        setIsExpanded(false);
+        onClosed?.();
+    };
+    useEsc(closeMenu, triggerRef, contentRef, isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // Click outside to close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleClickOutside = (event) => {
-            if (triggerRef.current &&
-                !triggerRef.current.contains(event.target) &&
-                contentRef.current &&
-                !contentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-                onClosed?.();
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [isExpanded, persistent, onClosed]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-                onClosed?.();
-                triggerRef.current?.focus();
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent, onClosed]);
     const toggleDropdown = () => {
         setIsExpanded(prev => {
             const next = !prev;
@@ -51,7 +28,27 @@ function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, ex
             return next;
         });
     };
+    useEffect(() => {
+        if (!isExpanded)
+            return;
+        const content = contentRef.current;
+        if (!content)
+            return;
+        requestAnimationFrame(() => {
+            const focusable = content.querySelectorAll([
+                "a[href]",
+                "button:not([disabled])",
+                "[tabindex]:not([tabindex='-1'])",
+                "input:not([disabled])",
+                "select:not([disabled])",
+                "textarea:not([disabled])"
+            ].join(","));
+            const firstVisible = Array.from(focusable).find(el => el.offsetParent !== null);
+            firstVisible?.focus();
+        });
+    }, [isExpanded]);
     return (jsx(IDSDropdownBase, { ...props, client: true, className: className, expanded: isExpanded, trigger: button, triggerRef: triggerRef, contentRef: contentRef, maxHeight: maxHeight, sBlock: sBlock, mBlock: mBlock, minWidth: minWidth, position: position, onTriggerClick: toggleDropdown, children: children }));
 }
+IDSDropdown.displayName = "IDSDropdown";
 
 export { IDSDropdown };

package/components/footer-1177/footer-1177.d.ts

@@ -16,3 +16,6 @@ export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSFooter1177({ headline, srHeadline, subHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooter1177 {
+    var displayName: string;
+}

package/components/footer-1177/footer-1177.js

@@ -23,5 +23,6 @@ function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", col1,
     };
     return (jsxs("footer", { className: clsx("ids-footer-1177", className), ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsxs("div", { className: "ids-footer-1177__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
+IDSFooter1177.displayName = "IDSFooter1177";
 
 export { IDSFooter1177 };

package/components/footer-1177-admin/footer-1177-admin.d.ts

@@ -15,4 +15,7 @@ interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSFooter1177Admin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177AdminProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooter1177Admin {
+    var displayName: string;
+}
 export {};

package/components/footer-1177-admin/footer-1177-admin.js

@@ -23,5 +23,6 @@ function IDSFooter1177Admin({ headline = "", srHeadline = "", col1, col2, col3,
     };
     return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsxs("div", { className: "ids-footer-1177-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 }
+IDSFooter1177Admin.displayName = "IDSFooter1177Admin";
 
 export { IDSFooter1177Admin };

package/components/footer-1177-pro/footer-1177-pro.d.ts

@@ -19,4 +19,7 @@ interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSFooter1177Pro({ headline, srHeadline, mobileHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooter1177Pro {
+    var displayName: string;
+}
 export {};

package/components/footer-1177-pro/footer-1177-pro.js

@@ -23,5 +23,6 @@ function IDSFooter1177Pro({ headline = "", srHeadline = "", mobileHeadline = "",
     };
     return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ...props, children: [jsx("div", { className: "ids-footer-1177-pro__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-pro__inner", children: [jsx("div", { className: "ids-footer-1177-pro__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-pro__content", children: [jsxs("div", { className: "ids-footer-1177-pro__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-pro__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-pro__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-pro__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-pro__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-pro__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline", children: mobileHeadline })] }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 }
+IDSFooter1177Pro.displayName = "IDSFooter1177Pro";
 
 export { IDSFooter1177Pro };

package/components/footer-inera/footer-inera.d.ts

@@ -15,4 +15,7 @@ interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSFooterInera({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooterInera {
+    var displayName: string;
+}
 export {};

package/components/footer-inera/footer-inera.js

@@ -23,5 +23,6 @@ function IDSFooterInera({ headline = "", srHeadline = "", col1, col2, col3, togg
     };
     return (jsxs("footer", { className: clsx("ids-footer-inera", className), ...props, children: [jsx("div", { className: "ids-footer-inera__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera__inner", children: [jsx("div", { className: "ids-footer-inera__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera__content", children: [jsxs("div", { className: "ids-footer-inera__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera__sub-footer", children: [jsx("div", { className: "ids-footer-inera__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
+IDSFooterInera.displayName = "IDSFooterInera";
 
 export { IDSFooterInera };

package/components/footer-inera-admin/footer-inera-admin.d.ts

@@ -15,4 +15,7 @@ interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSFooterIneraAdmin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraAdminProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooterIneraAdmin {
+    var displayName: string;
+}
 export {};

package/components/footer-inera-admin/footer-inera-admin.js

@@ -21,7 +21,8 @@ function IDSFooterIneraAdmin({ headline = "", srHeadline = "", col1, col2, col3,
         }
         return null;
     };
-    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsxs("div", { className: "ids-footer-inera-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsxs("div", { className: "ids-footer-inera-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
+IDSFooterIneraAdmin.displayName = "IDSFooterIneraAdmin";
 
 export { IDSFooterIneraAdmin };

package/components/footer-inera-general/footer-inera-general.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/footer-inera-general/footer-inera-general.css";
+interface FooterIneraGeneralProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    toggle?: ReactNode;
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
+    mobileMenu?: ReactNode;
+    mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
+    children?: ReactNode;
+}
+export declare function IDSFooterIneraGeneral({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraGeneralProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSFooterIneraGeneral {
+    var displayName: string;
+}
+export {};

package/components/footer-inera-general/footer-inera-general.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-inera-general/footer-inera-general.css';
+
+function IDSFooterIneraGeneral({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-general__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-general__headline", children: headline })] }));
+        }
+        return jsx("h2", { className: "ids-footer-inera-general__headline", children: headline });
+    };
+    const renderCols = () => {
+        if (!!col1 && !col2 && !col3) {
+            return jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--100"), children: col1 });
+        }
+        else if (!!col1 && !!col2 && !col3) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col2 })] }));
+        }
+        else if (!!col1 && !!col2 && !!col3) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col3 })] }));
+        }
+        return null;
+    };
+    return (jsxs("footer", { className: clsx("ids-footer-inera-general", className), ...props, children: [jsx("div", { className: "ids-footer-inera-general__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-general__inner", children: [jsx("div", { className: "ids-footer-inera-general__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-general__content", children: [jsxs("div", { className: "ids-footer-inera-general__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-general__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-general__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-general__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-general__sub-footer", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-general__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-general__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-general__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+}
+IDSFooterIneraGeneral.displayName = "IDSFooterIneraGeneral";
+
+export { IDSFooterIneraGeneral };

package/components/form/check-button/check-button.js

@@ -8,5 +8,6 @@ const IDSCheckButton = forwardRef(function IDSCheckButton({ id, dataTestId, disa
                     "ids-focus-anchor": focusAnchor
                 }), type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: inputId, className: "ids-check-button__label", children: children })] }));
 });
+IDSCheckButton.displayName = "IDSCheckButton";
 
 export { IDSCheckButton };

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

@@ -1,19 +1,13 @@
-import React, { ReactNode, ReactElement, InputHTMLAttributes } from "react";
-export interface IDSCheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
+import React, { ReactElement } from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSCheckboxBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     indeterminate?: boolean;
-    light?: boolean;
     block?: boolean;
-    compact?: boolean;
-    focusAnchor?: boolean;
-    errorMsg?: string | ReactNode;
-    tooltip?: ReactNode;
-    dataTestId?: string;
-    id?: string;
     groupErrorMsgId?: string;
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }: IDSCheckboxBaseProps): ReactElement;
+export declare function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }: IDSCheckboxBaseProps): ReactElement;
+export declare namespace IDSCheckboxBase {
+    var displayName: string;
+}

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

@@ -3,28 +3,28 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }) {
+function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, block, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }) {
     const reactId = useId();
-    const inputId = !!id ? id : `checkbox-base-${reactId}`;
-    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-base-error-${reactId}`;
+    const inputId = id ?? `checkbox-base-${reactId}`;
+    const baseErrorMsgId = errorMsgId ?? `checkbox-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaErrorHandler = showErrorMsg || !!groupErrorMsgId
-        ? {
-            "aria-describedby": groupErrorMsgId || baseErrorMsgId
-        }
-        : {};
+    const ariaErrorHandler = {};
+    if (showErrorMsg || !!groupErrorMsgId) {
+        ariaErrorHandler["aria-describedby"] = groupErrorMsgId || baseErrorMsgId;
+    }
     const ariaCheckedHandler = indeterminate ? { "aria-checked": "mixed" } : {};
     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", {
                             "ids-focus-anchor": focusAnchor
-                        }), "aria-invalid": invalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...ariaErrorHandler, ...ariaCheckedHandler, ...props }), !!children && (jsxs("div", { className: clsx("ids-label-wrapper", {
+                        }), "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
-                                }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, children: errorMsg }))] }));
+                                }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
+IDSCheckboxBase.displayName = "IDSCheckboxBase";
 
 export { IDSCheckboxBase };

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

@@ -11,3 +11,6 @@ export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLField
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
 export declare function IDSCheckboxGroupBase({ legend, errorMsg, 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

@@ -4,12 +4,13 @@ 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 }) {
-    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-group-base-error-${useId()}`;
-    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", {
+    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", {
                     "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 }))] }));
 }
+IDSCheckboxGroupBase.displayName = "IDSCheckboxGroupBase";
 
 export { IDSCheckboxGroupBase };

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

@@ -12,3 +12,6 @@ export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetE
     onValidityChange?: (isValid: boolean) => void;
 }
 export declare function IDSCheckboxGroup({ errorMsg, block, invalid, 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

@@ -36,5 +36,6 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
     });
     return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
 }
+IDSCheckboxGroup.displayName = "IDSCheckboxGroup";
 
 export { IDSCheckboxGroup };

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

@@ -1,19 +1,9 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
-export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-    id?: string;
-    key?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
+import React from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSCheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     indeterminate?: boolean;
-    noValidation?: boolean;
-    light?: boolean;
-    block?: boolean;
-    compact?: boolean;
-    focusAnchor?: boolean;
-    errorMsg?: string | ReactNode;
-    tooltip?: ReactNode;
-    dataTestId?: string;
     groupErrorMsgId?: string;
+    key?: string;
+    block?: boolean;
 }
 export declare const IDSCheckbox: React.ForwardRefExoticComponent<IDSCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/checkbox/checkbox.js

@@ -8,14 +8,22 @@ const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeter
     const internalRef = useRef(null);
     const checkboxRef = ref ?? internalRef;
     const hasValidValue = useInputValidity(checkboxRef);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
+    const computedInvalid = (invalid || !hasValidValue) && !noValidation;
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        checkboxRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
     // indeterminate support
     useEffect(() => {
         if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsx(IDSCheckboxBase, { ...props, inputRef: checkboxRef, invalid: isInvalid, indeterminate: indeterminate, children: children }));
+    return (jsx(IDSCheckboxBase, { ...props, inputRef: mergedRef, invalid: computedInvalid, indeterminate: indeterminate, children: children }));
 });
 IDSCheckbox.displayName = "IDSCheckbox";
 

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

@@ -1,15 +1,14 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { Matcher, Modifiers } from "react-day-picker";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
 export interface IDSDatePickerChangeEvent {
     value: string;
     valueAsDate?: Date;
     invalidDate: boolean;
     missingDate: boolean;
 }
-export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
-    label: string;
+export interface IDSDatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, CommonFormPropsWithReadOnly {
     value?: string;
-    light?: boolean;
     placeholder?: string;
     calendarHeader?: string;
     defaultMonth?: Date;
@@ -18,16 +17,10 @@ export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElemen
     srOpenText?: string;
     srCloseText?: string;
     focusedDay?: Date;
-    disabled?: boolean;
-    required?: boolean;
-    noValidation?: boolean;
-    errorMsg?: string;
     missingDateErrorMsg?: string;
     invalidDateErrorMsg?: string;
-    validationOnBlur?: boolean;
-    invalid?: boolean;
     disableNavigation?: boolean;
-    tooltip?: ReactNode;
+    noValidation?: boolean;
     modifiers?: Record<string, Matcher | Matcher[]>;
     onChange?: (event: IDSDatePickerChangeEvent) => void;
     onOpen?: () => void;
@@ -35,3 +28,6 @@ export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElemen
     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 namespace IDSDatePicker {
+    var displayName: string;
+}

package/components/form/datepicker/datepicker.js

@@ -7,6 +7,7 @@ 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';
+import { useClickOutside } from '../../utils/hooks/useClickOutside.js';
 
 const locale = { locale: sv };
 const createNewDate = (dateString) => {
@@ -46,11 +47,15 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
     const [hasMissingError, setHasMissingError] = useState(false);
     const [hasOtherError, setHasOtherError] = useState(false);
     const hasError = hasMissingError || hasDateError || hasOtherError || invalid;
-    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg;
-    const showMissingError = !!hasMissingError && !!missingDateErrorMsg;
-    const showError = !!invalid && !!errorMsg && !isDialogOpen;
+    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg && !noValidation;
+    const showMissingError = !!hasMissingError && !!missingDateErrorMsg && !noValidation;
+    const showError = !!invalid && !!errorMsg && !isDialogOpen && !noValidation;
     useAriaDescribedBy(inputRef, errorMsgId, invalid, (showError || showMissingError || showInvalidError) && !noValidation);
     useFocusTrap(dialogRef.current, isDialogOpen);
+    useClickOutside(() => {
+        setIsDialogOpen(false);
+        onClose?.();
+    }, [dialogRef, triggerRef], triggerRef, isDialogOpen);
     const handleOpenDialog = (e) => {
         e.preventDefault();
         setIsDialogOpen(true);
@@ -61,15 +66,6 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         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;
@@ -125,11 +121,13 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         resetErrors();
         setInputValue(e.currentTarget.value);
         const parsedDate = createNewDate(e.currentTarget.value);
+        setHasDateError(false);
         if (isValid(parsedDate)) {
             setSelectedDate(parsedDate);
             setMonth(parsedDate);
         }
         else {
+            setHasDateError(true);
             setSelectedDate(undefined);
         }
         emitValue(e.currentTarget.value, parsedDate);
@@ -139,6 +137,7 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         if (value !== inputValue && inputRef.current) {
             resetErrors();
             setInputValue(value);
+            setHasDateError(false);
             if (value) {
                 const parsedDate = createNewDate(value);
                 if (isValid(parsedDate)) {
@@ -147,6 +146,7 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
                 }
                 else {
                     setSelectedDate(undefined);
+                    setHasDateError(true);
                 }
             }
         }
@@ -174,7 +174,7 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
         const form = inputRef.current?.form;
         if (!form)
             return;
-        const handleSubmit = (e) => {
+        const handleSubmit = (_e) => {
             if (!noValidation) {
                 requestAnimationFrame(() => {
                     updateErrors(inputRef.current.validity, !isValid(createNewDate(inputRef.current.value)));
@@ -214,10 +214,10 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
             return;
         header?.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", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+    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: {
                                     labelWeekNumberHeader: () => "Veckonumer",
-                                    labelWeekNumber: (weekNumber) => `vecka`,
-                                    labelDayButton(date, modifiers, options, dateLib) {
+                                    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,
@@ -237,5 +237,6 @@ function IDSDatePicker({ label, id, value, light = false, placeholder = "ååå
                                     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] }))] }));
 }
+IDSDatePicker.displayName = "IDSDatePicker";
 
 export { IDSDatePicker };

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

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

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

@@ -6,5 +6,6 @@ function IDSErrorMessage({ show = false, compact = false, id, children, classNam
             "ids-error-message--show": show
         }, className), ...props, children: jsxs("span", { className: "ids-error-message__text", children: [" ", children, " "] }) }));
 }
+IDSErrorMessage.displayName = "IDSErrorMessage";
 
 export { IDSErrorMessage };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export interface CommonFormProps {
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    noValidation?: boolean;
+    validationOnBlur?: boolean;
+    label?: string;
+    errorMsg?: string;
+    hint?: string | ReactNode;
+    tooltip?: ReactNode;
+    focusAnchor?: boolean;
+    dataTestId?: string;
+    light?: boolean;
+}
+export interface CommonFormPropsWithReadOnly extends CommonFormProps {
+    readOnly?: boolean;
+}