@inera/ids-react 9.0.4 → 9.1.1

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

@@ -2,6 +2,7 @@ import { ChangeEvent, ReactNode, FieldsetHTMLAttributes } from "react";
 interface IDSRadioGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     name?: string;
     legend?: string;
+    hideLegend?: boolean;
     errorMsg?: string | ReactNode;
     compact?: boolean;
     invalid?: boolean;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
 function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }) {
-    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", className), ...props, children: [legend ? (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })) : null, children] }));
+    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", "ids-form-group__fieldset--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 })] }) })) : null, children] }));
 }
 
 export { IDSRadioButtonGroupBase };

package/components/form/select/select.d.ts

@@ -11,6 +11,6 @@ export interface IDSSelectProps extends SelectHTMLAttributes<HTMLSelectElement>
     tooltip?: ReactNode;
     dataTestId?: string;
     noValidation?: boolean;
-    validatesOnBlur?: boolean;
+    validationOnBlur?: boolean;
 }
 export declare const IDSSelect: import("react").ForwardRefExoticComponent<IDSSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/components/form/select/select.js

@@ -4,10 +4,10 @@ import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSSelectBase } from './select-base.js';
 
-const IDSSelect = forwardRef(({ id, label, errorMsg, disabled, required, light, focusAnchor, tooltip, dataTestId, invalid = false, noValidation = false, validatesOnBlur = false, children, style, ...props }, ref) => {
+const IDSSelect = forwardRef(({ id, label, errorMsg, disabled, required, light, focusAnchor, tooltip, dataTestId, invalid = false, noValidation = false, validationOnBlur = false, children, style, ...props }, ref) => {
     const errorMsgId = `select-error-${useId()}`;
     const selectRef = useRef(null);
-    const hasValidValue = useInputValidity(selectRef, validatesOnBlur);
+    const hasValidValue = useInputValidity(selectRef, validationOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useImperativeHandle(ref, () => selectRef.current);
     return (jsx(IDSSelectBase, { ...props, style: style, id: id, label: label, errorMsg: errorMsg, disabled: disabled, required: required, light: light, focusAnchor: focusAnchor, tooltip: tooltip, dataTestId: dataTestId, selectRef: selectRef, errorMsgId: errorMsgId, invalid: isInvalid, children: children }));

package/components/form/select-multiple/select-multiple-base.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from "react";
 export interface IDSSelectMultipleBaseProps {
-    labelId?: string;
     id?: string;
+    labelId?: string;
     label?: string;
     expanded?: boolean;
     placeholder?: string;
@@ -16,7 +16,7 @@ export interface IDSSelectMultipleBaseProps {
     light?: boolean;
     focusAnchor?: boolean;
     tooltip?: ReactNode;
-    inputRef?: React.Ref<HTMLInputElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     componentRef?: React.Ref<HTMLDivElement>;
     children?: ReactNode;
     className?: string;
@@ -24,4 +24,4 @@ export interface IDSSelectMultipleBaseProps {
     client?: boolean;
     style?: CSSProperties;
 }
-export declare function IDSSelectMultipleBase({ labelId, id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, inputRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultipleBase({ id, labelId, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, buttonRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/form/select-multiple/select-multiple-base.js

@@ -2,10 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSSelectMultipleBase({ labelId, id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "8.125rem", tooltip, componentRef, inputRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
-    const reactId = useId();
-    const inputId = !!id ? id : `select-multiple-base-${reactId}`;
-    const inputLabelId = !!labelId ? labelId : `select-multiple-base-label-${reactId}`;
+function IDSSelectMultipleBase({ id, labelId, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, componentRef, buttonRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
+    const defaultLabelId = !!labelId ? labelId : `select-multiple-base-label-${useId()}`;
+    const dropdownId = `select-multiple-dropdown-${useId()}`;
     const displayedValue = numbCheckedBoxes === 0 || !numbCheckedBoxes
         ? placeholder
         : numbCheckedBoxes === 1
@@ -16,10 +15,10 @@ function IDSSelectMultipleBase({ labelId, id, label, placeholder, numbCheckedBox
             onClick
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: inputLabelId, htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled || ariaDisabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("input", { id: inputId, ref: inputRef, "aria-labelledby": inputLabelId, type: "button", className: clsx("ids-select-multiple__select", {
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: defaultLabelId, className: clsx("ids-label", { "ids-label--disabled": disabled || ariaDisabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": defaultLabelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), "aria-expanded": expanded, disabled: disabled, "aria-disabled": ariaDisabled, "aria-invalid": invalid, placeholder: placeholder, defaultValue: displayedValue, ...clickHandler }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
+                    }), disabled: disabled, "aria-disabled": ariaDisabled, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
                         "ids-select-multiple__dropdown--expanded": expanded
                     }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight }, children: children }) }) })] }));
 }

package/components/form/select-multiple/select-multiple.d.ts

@@ -19,7 +19,7 @@ export interface IDSSelectMultipleProps extends HTMLAttributes<HTMLDivElement> {
     dataTestId?: string;
     id?: string;
 }
-export declare function IDSSelectMultiple({ invalid, noValidation, expanded, errorMsg, ariaDisabled, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultiple({ label, id, invalid, noValidation, expanded, errorMsg, ariaDisabled, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSSelectMultiple {
     var displayName: string;
 }

package/components/form/select-multiple/select-multiple.js

@@ -3,12 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSSelectMultipleBase } from './select-multiple-base.js';
 import { IDSCheckboxGroup } from '../checkbox/checkbox-group.js';
+import { useClickOutside } from '../../utils/hooks/useClickOutside.js';
+import { useEsc } from '../../utils/hooks/useEsc.js';
 
-function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = false, errorMsg, ariaDisabled = false, style, children, ...props }) {
+function IDSSelectMultiple({ label, id, invalid = false, noValidation = false, expanded = false, errorMsg, ariaDisabled = false, style, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
-    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
     const componentRef = useRef(null);
+    useClickOutside([componentRef, buttonRef], () => {
+        setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded);
     useEffect(() => {
         if (checkboxListInvalid && !noValidation)
             setIsExpanded(true);
@@ -16,28 +22,9 @@ function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = f
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape")
-                setIsExpanded(false);
-        };
-        document.addEventListener("click", handleClickOutside);
-        document.addEventListener("focusin", handleClickOutside);
-        document.addEventListener("keydown", handleKeyDown);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-            document.removeEventListener("focusin", handleClickOutside);
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, []);
-    return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, componentRef: componentRef, inputRef: inputRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
+    return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, label: label, id: id, componentRef: componentRef, buttonRef: buttonRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
             setIsExpanded(!isExpanded);
-        }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
+        }, children: jsx(IDSCheckboxGroup, { block: true, legend: label, hideLegend: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
                 if (!isValid && !noValidation) {
                     setIsExpanded(true);
                     setCheckboxListInvalid(!isValid);

package/components/form/textarea/textarea.d.ts

@@ -6,7 +6,7 @@ export interface IDSTextareaProps extends React.TextareaHTMLAttributes<HTMLTextA
     invalid?: boolean;
     required?: boolean;
     noValidation?: boolean;
-    validatesOnBlur?: boolean;
+    validationOnBlur?: boolean;
     autoSize?: boolean;
     noResize?: boolean;
     block?: boolean;

package/components/form/textarea/textarea.js

@@ -4,10 +4,10 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTextareaBase } from './textarea-base.js';
 
-const IDSTextarea = forwardRef(({ id, label, hint, errorMsg, disabled = false, invalid = false, required = false, noValidation = false, validatesOnBlur = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, dataTestId = "", tooltip, className, children, style, ...props }, ref) => {
+const IDSTextarea = forwardRef(({ id, label, hint, errorMsg, disabled = false, invalid = false, required = false, noValidation = false, validationOnBlur = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, focusAnchor = false, dataTestId = "", tooltip, className, children, style, ...props }, ref) => {
     const textareaRef = useRef(null);
     useImperativeHandle(ref, () => textareaRef.current);
-    const isValid = useInputValidity(textareaRef, validatesOnBlur);
+    const isValid = useInputValidity(textareaRef, validationOnBlur);
     const isInvalid = (invalid || !isValid) && !noValidation;
     return (jsx(IDSTextareaBase, { id: id, label: label, hint: hint, errorMsg: errorMsg, invalid: isInvalid, required: required, disabled: disabled, readOnly: readOnly, light: light, autoSize: autoSize, noResize: noResize, block: block, focusAnchor: focusAnchor, tooltip: tooltip, className: className, textareaRef: textareaRef, dataTestId: dataTestId, style: style, ...props }));
 });

package/components/form/time/time.d.ts

@@ -11,6 +11,6 @@ export interface IDSTimeProps extends React.InputHTMLAttributes<HTMLInputElement
     errorMsgId?: string;
     dataTestId?: string;
     noValidation?: boolean;
-    validatesOnBlur?: boolean;
+    validationOnBlur?: boolean;
 }
 export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/time/time.js

@@ -4,10 +4,10 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTimeBase } from './time-base.js';
 
-const IDSTime = forwardRef(({ invalid = false, noValidation = false, validatesOnBlur = false, style, ...props }, ref) => {
+const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, style, ...props }, ref) => {
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
-    const hasValidValue = useInputValidity(inputRef, validatesOnBlur);
+    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: inputRef, ...props, style: style });
 });

package/components/{alert → global-alert}/global-alert.d.ts

@@ -3,5 +3,5 @@ import { IDSGlobalAlertBase } from "./global-alert-base";
 interface IDSGlobalAlertProps extends Omit<React.ComponentProps<typeof IDSGlobalAlertBase>, "onToggle" | "contentId"> {
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSGlobalAlert({ collapsed, onCollapsedChange, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSGlobalAlert({ collapsed, onCollapsedChange, className, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/{alert → global-alert}/global-alert.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { IDSGlobalAlertBase } from './global-alert-base.js';
 
-function IDSGlobalAlert({ collapsed = false, onCollapsedChange, ...props }) {
+function IDSGlobalAlert({ collapsed = false, onCollapsedChange, className, ...props }) {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -13,7 +13,7 @@ function IDSGlobalAlert({ collapsed = false, onCollapsedChange, ...props }) {
         setIsCollapsed(newState);
         onCollapsedChange?.(newState);
     };
-    return jsx(IDSGlobalAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggle: handleToggleCollapse });
+    return (jsx(IDSGlobalAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggle: handleToggleCollapse, className: className }));
 }
 
 export { IDSGlobalAlert };

package/components/header-1177/header-1177-avatar-base.d.ts

@@ -11,6 +11,7 @@ interface IDSHeader1177AvatarBaseProps extends HTMLAttributes<HTMLDivElement> {
     onToggle?: () => void;
     componentRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
 }
-export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, ...props }: IDSHeader1177AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-avatar-base.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177AvatarBase({ username, agent, children, unresponsive = false, expanded = false, hide = false, noMobileMenu = false, client = false, onToggle, componentRef, menuRef, ...props }) {
+function IDSHeader1177AvatarBase({ username, agent, children, unresponsive = false, expanded = false, hide = false, noMobileMenu = false, client = false, onToggle, componentRef, menuRef, buttonRef, ...props }) {
     if (hide)
         return null;
     const menuId = `header-1177-avatar-menu${useId()}`;
@@ -13,7 +13,7 @@ function IDSHeader1177AvatarBase({ username, agent, children, unresponsive = fal
         : {};
     return (jsx("div", { ref: componentRef, className: clsx("ids-header-1177-avatar", {
             "ids-header-1177-avatar--unresponsive": unresponsive
-        }), style: { flexGrow: username ? "1" : "0" }, ...props, children: username && (jsx("div", { className: "ids-header-1177-avatar__avatar", children: jsxs("div", { className: "ids-header-1177-avatar__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
+        }), style: { flexGrow: username ? "1" : "0" }, ...props, children: username && (jsx("div", { className: "ids-header-1177-avatar__avatar", children: jsxs("div", { className: "ids-header-1177-avatar__menu-wrapper", children: [jsx("button", { ref: buttonRef, className: clsx("ids-header-1177-avatar__button", {
                             "ids-header-1177-avatar__button--expanded": expanded
                         }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-avatar__name", title: username, children: username }) }), jsxs("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-avatar__menu", {
                             "ids-header-1177-avatar__menu--expanded": expanded,

package/components/header-1177/header-1177-avatar.js

@@ -3,6 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177AvatarBase } from './header-1177-avatar-base.js';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSHeader1177Avatar({ expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
@@ -11,30 +14,14 @@ function IDSHeader1177Avatar({ expanded = false, persistent = false, children, .
     const [isExpanded, setIsExpanded] = useState(expanded);
     const componentRef = useRef(null);
     const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useFocusTrap(componentRef.current, isExpanded && !persistent);
+    useClickOutside([componentRef, buttonRef], () => {
+        if (!persistent)
+            setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
-    // Close when clicking outside
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
     // Clicking a link inside dropdown closes it
     useEffect(() => {
         if (!persistent && isExpanded) {
@@ -44,7 +31,7 @@ function IDSHeader1177Avatar({ expanded = false, persistent = false, children, .
         }
     }, [isExpanded, persistent]);
     const closeOnClick = () => setIsExpanded(false);
-    return (jsx(IDSHeader1177AvatarBase, { ...props, client: true, expanded: isExpanded, onToggle: toggleAvatar, componentRef: componentRef, menuRef: menuRef, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+    return (jsx(IDSHeader1177AvatarBase, { ...props, client: true, expanded: isExpanded, onToggle: toggleAvatar, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
 
 export { IDSHeader1177Avatar };

package/components/header-1177/header-1177-menu-mobile-base.d.ts

@@ -6,7 +6,8 @@ interface IDSHeader1177MenuMobileBaseProps extends HTMLAttributes<HTMLDivElement
     onToggleMenu?: () => void;
     componentRef?: React.Ref<HTMLDivElement>;
     menuRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSHeader1177MenuMobileBase({ srLabel, expanded, unresponsive, children, onToggleMenu, client, componentRef, menuRef, ...props }: IDSHeader1177MenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177MenuMobileBase({ srLabel, expanded, unresponsive, children, onToggleMenu, client, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177MenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-menu-mobile-base.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177MenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive, children, onToggleMenu, client = false, componentRef, menuRef, ...props }) {
+function IDSHeader1177MenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive, children, onToggleMenu, client = false, componentRef, menuRef, buttonRef, ...props }) {
     const menuId = `header-1177-menu-${useId()}`;
     const toggleHandler = client && onToggleMenu
         ? {
@@ -12,7 +12,7 @@ function IDSHeader1177MenuMobileBase({ srLabel = "Meny", expanded = false, unres
     return (jsxs("div", { ...props, className: clsx("ids-header-1177-menu-mobile", {
             "ids-header-1177-menu-mobile--expanded": expanded,
             "ids-header-1177-menu-mobile--unresponsive": unresponsive
-        }), ref: componentRef, children: [jsx("button", { ...toggleHandler, "aria-expanded": expanded, "aria-label": srLabel, "aria-controls": menuId, className: "ids-header-1177-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), expanded && (jsx("div", { id: menuId, className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
+        }), ref: componentRef, children: [jsx("button", { ...toggleHandler, ref: buttonRef, "aria-expanded": expanded, "aria-label": srLabel, "aria-controls": menuId, className: "ids-header-1177-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), expanded && (jsx("div", { id: menuId, className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
 }
 
 export { IDSHeader1177MenuMobileBase };

package/components/header-1177/header-1177-menu-mobile.js

@@ -3,12 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSHeader1177MenuMobileBase } from './header-1177-menu-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSHeader1177MenuMobile({ srLabel = "Meny", persistent = false, expanded = false, children, onExpanded, onClosed, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
     const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useClickOutside([componentRef, buttonRef], () => {
+        if (!persistent)
+            setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();
@@ -35,20 +43,7 @@ function IDSHeader1177MenuMobile({ srLabel = "Meny", persistent = false, expande
             return () => links.forEach(link => link.removeEventListener("click", handleLinkClick));
         }
     }, [isExpanded, persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177MenuMobileBase, { ...props, client: true, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, menuRef: menuRef, children: children }));
+    return (jsx(IDSHeader1177MenuMobileBase, { ...props, client: true, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, children: children }));
 }
 
 export { IDSHeader1177MenuMobile };

package/components/header-1177/header-1177-nav-item-base.d.ts

@@ -11,8 +11,9 @@ export interface IDSHeader1177NavItemBaseProps extends HTMLAttributes<HTMLElemen
     col4?: React.ReactNode;
     componentRef?: React.Ref<HTMLDivElement>;
     menuRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     onToggleItem?: () => void;
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, client, unresponsive, ...props }: IDSHeader1177NavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, client, unresponsive, ...props }: IDSHeader1177NavItemBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/header-1177/header-1177-nav-item-base.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, client = false, unresponsive, ...props }) {
+function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, client = false, unresponsive, ...props }) {
     const itemId = `header-1177-item-${useId()}`;
     const toggleHandler = client && onToggleItem
         ? {
@@ -13,7 +13,7 @@ function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col
             "ids-header-1177-nav-item--unresponsive": unresponsive,
             "ids-header-1177-nav-item--expanded": expanded,
             "ids-header-1177-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-nav-item__link", children: React.Children.map(children, child => {
+        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, ref: buttonRef, "aria-expanded": expanded, className: "ids-header-1177-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-nav-item__link", children: React.Children.map(children, child => {
                     if (!React.isValidElement(child))
                         return child;
                     const element = child;

package/components/header-1177/header-1177-nav-item.js

@@ -3,12 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSHeader1177NavItemBase } from './header-1177-nav-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSHeader1177NavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const componentRef = useRef(null);
     const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useClickOutside([componentRef, buttonRef], () => {
+        setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
@@ -37,20 +44,7 @@ function IDSHeader1177NavItem({ expanded = false, ...props }) {
         menuEl.addEventListener("click", onMenuClick);
         return () => menuEl.removeEventListener("click", onMenuClick);
     }, [menuRef]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded]);
-    return (jsx(IDSHeader1177NavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+    return (jsx(IDSHeader1177NavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
 
 export { IDSHeader1177NavItem };

package/components/header-1177-admin/header-1177-admin-avatar-base.d.ts

@@ -8,7 +8,8 @@ interface IDSHeader1177AdminAvatarBaseProps extends HTMLAttributes<HTMLElement>
     onToggleAvatar?: () => void;
     componentRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSHeader1177AdminAvatarBase({ username, unit, expanded, unresponsive, hide, componentRef, menuRef, children, onToggleAvatar, client, ...props }: IDSHeader1177AdminAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177AdminAvatarBase({ username, unit, expanded, unresponsive, hide, componentRef, menuRef, buttonRef, children, onToggleAvatar, client, ...props }: IDSHeader1177AdminAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177-admin/header-1177-admin-avatar-base.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177AdminAvatarBase({ username, unit, expanded = false, unresponsive = false, hide = false, componentRef, menuRef, children, onToggleAvatar, client = false, ...props }) {
+function IDSHeader1177AdminAvatarBase({ username, unit, expanded = false, unresponsive = false, hide = false, componentRef, menuRef, buttonRef, children, onToggleAvatar, client = false, ...props }) {
     if (hide)
         return null;
     const menuId = `header-1177-admin-avatar-menu-${useId()}`;
@@ -13,7 +13,7 @@ function IDSHeader1177AdminAvatarBase({ username, unit, expanded = false, unresp
         : {};
     return (jsx("div", { ref: componentRef, className: clsx("ids-header-1177-admin-avatar", {
             "ids-header-1177-admin-avatar--unresponsive": unresponsive
-        }), ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-1177-admin-avatar__button", {
+        }), ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar__menu-wrapper", children: [jsxs("button", { ref: buttonRef, className: clsx("ids-header-1177-admin-avatar__button", {
                         "ids-header-1177-admin-avatar__button--expanded": expanded
                     }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-admin-avatar__name", title: username, children: username }), unit && (jsxs(Fragment, { children: [jsx("span", { className: "ids-header-1177-admin-avatar__unit-separator", children: "|" }), jsx("span", { className: "ids-header-1177-admin-avatar__unit", title: unit, children: unit })] }))] }), jsx("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-admin-avatar__menu", {
                         "ids-header-1177-admin-avatar__menu--expanded": expanded

package/components/header-1177-admin/header-1177-admin-avatar-mobile-base.d.ts

@@ -8,6 +8,7 @@ interface IDSHeader1177AdminAvatarMobileBaseProps extends HTMLAttributes<HTMLEle
     client?: boolean;
     onToggleAvatar?: () => void;
     componentRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
 }
-export declare function IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unresponsive, expanded, hide, client, onToggleAvatar, componentRef, ...props }: IDSHeader1177AdminAvatarMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unresponsive, expanded, hide, client, onToggleAvatar, componentRef, buttonRef, ...props }: IDSHeader1177AdminAvatarMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177-admin/header-1177-admin-avatar-mobile-base.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unresponsive, expanded = false, hide = false, client = false, onToggleAvatar, componentRef, ...props }) {
+function IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unresponsive, expanded = false, hide = false, client = false, onToggleAvatar, componentRef, buttonRef, ...props }) {
     if (hide)
         return null;
     const menuId = `header-1177-admin-avatar-mobile-menu-${useId()}`;
@@ -15,7 +15,7 @@ function IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unrespon
             "ids-header-1177-admin-avatar-mobile--unresponsive": unresponsive
         }), ref: componentRef, ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar-mobile__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-admin-avatar-mobile__button", {
                         "ids-header-1177-admin-avatar-mobile__button--expanded": expanded
-                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-1177-admin-avatar-mobile__menu", {
+                    }), ...toggleHandler, ref: buttonRef, "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-1177-admin-avatar-mobile__menu", {
                         "ids-header-1177-admin-avatar-mobile__menu--expanded": expanded
                     }), children: [unit && jsx("div", { className: "ids-header-1177-admin-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-1177-admin-avatar-mobile__menu-links", children: children })] })] }) }));
 }

package/components/header-1177-admin/header-1177-admin-avatar-mobile.js

@@ -1,38 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
+import { useId, useState, useRef } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177AdminAvatarMobileBase } from './header-1177-admin-avatar-mobile-base.js';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSHeader1177AdminAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     useId();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
+    const buttonRef = useRef(null);
+    useFocusTrap(componentRef.current, isExpanded && !persistent);
+    useClickOutside([componentRef, buttonRef], () => {
+        if (!persistent)
+            setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177AdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar, expanded: isExpanded, onToggleAvatar: toggleAvatar, componentRef: componentRef, children: children }));
+    return (jsx(IDSHeader1177AdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar, expanded: isExpanded, onToggleAvatar: toggleAvatar, componentRef: componentRef, buttonRef: buttonRef, children: children }));
 }
 
 export { IDSHeader1177AdminAvatarMobile };