@inera/ids-react 9.1.0 → 9.1.2

package/components/dialog/dialog.js

@@ -11,7 +11,7 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
     const dialogRef = useRef(null);
     const scrollAreaRef = useRef(null);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
-    useEsc(() => setIsVisible(false), triggerRef, isVisible && !persistent);
+    useEsc(() => setIsVisible(false), triggerRef, dialogRef, isVisible && !persistent);
     // Sync prop show
     useEffect(() => {
         setIsVisible(show);

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

@@ -34,4 +34,4 @@ export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElemen
     onClose?: () => void;
     onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
 }
-export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, 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, 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;

package/components/form/datepicker/datepicker.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useId, useState, useEffect } from 'react';
+import { useId, useRef, useState, useEffect } from 'react';
 import { isValid, getWeek, format, subMonths, addMonths } from 'date-fns';
 import { sv } from 'react-day-picker/locale';
 import clsx from 'clsx';
@@ -24,7 +24,12 @@ const getPrevMonthYear = (date) => {
 const getNextMonthYear = (date) => {
     return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
 };
-function IDSDatePicker({ label, value, light = false, placeholder = "åååå-mm-dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", 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 }) {
+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 reactId = useId();
+    const dialogId = `datepicker-dialog-${reactId}`;
+    const headerId = `datepicker-header-${reactId}`;
+    const inputId = id ?? `datepicker-input-${reactId}`;
+    const errorMsgId = `datepicker-error-${reactId}`;
     const shortWeek = "v.";
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
@@ -32,10 +37,6 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå-mm
     const headerRef = useRef(null);
     const prevMonthButtonRef = useRef(null);
     const nextMonthButtonRef = useRef(null);
-    const dialogId = `datepicker-dialog-${useId()}`;
-    const headerId = `datepicker-header-${useId()}`;
-    const inputId = props.id || `datepicker-input-${useId()}`;
-    const errorMsgId = `datepicker-error-${useId()}`;
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [inputValue, setInputValue] = useState(value);
     const initialSelectedDate = !!value ? createNewDate(value) : undefined;
@@ -234,7 +235,7 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå-mm
                                     WeekNumberHeader: props => (jsx(WeekNumberHeader, { ...props, className: "ids-datepicker__week-number-header", children: shortWeek })),
                                     MonthsDropdown: props => (jsx(MonthsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__month-select" })),
                                     YearsDropdown: props => (jsx(YearsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__year-select" }))
-                                }, startMonth: startMonth, endMonth: endMonth, month: month, onMonthChange: setMonth, defaultMonth: defaultMonth, selected: selectedDate, onSelect: handleDayPickerSelect, onDayClick: onDayClick })] })] }), (showError || showInvalidError || showMissingError) && (jsxs(IDSErrorMessage, { id: errorMsgId, show: true, children: [showInvalidError && !showMissingError && invalidDateErrorMsg, showMissingError && missingDateErrorMsg, showError && errorMsg] }))] }));
+                                }, 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] }))] }));
 }
 
 export { IDSDatePicker };

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

@@ -19,9 +19,10 @@ function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel
             }
             : {};
     ariaHandler["aria-label"] = type === "search" && !showSearchLabel ? label : "";
-    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-inout--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
-                                            "ids-label--disabled": disabled || readOnly,
-                                            "ids-hidden": type === "search" && !showSearchLabel
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-input--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
+                                    "ids-hidden": type === "search" && !showSearchLabel
+                                }), children: [jsx("label", { className: clsx("ids-label", {
+                                            "ids-label--disabled": disabled || readOnly
                                         }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-input__unit-wrapper", children: [jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
                                                     "ids-input--light": light,
                                                     "ids-input--invalid": invalid,

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

@@ -14,7 +14,7 @@ function IDSSelectMultiple({ label, id, invalid = false, noValidation = false, e
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded);
     useEffect(() => {
         if (checkboxListInvalid && !noValidation)
             setIsExpanded(true);

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

@@ -20,7 +20,7 @@ function IDSHeader1177Avatar({ expanded = false, persistent = false, children, .
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     // Clicking a link inside dropdown closes it
     useEffect(() => {

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

@@ -16,7 +16,7 @@ function IDSHeader1177MenuMobile({ srLabel = "Meny", persistent = false, expande
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();

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

@@ -15,7 +15,7 @@ function IDSHeader1177NavItem({ expanded = false, ...props }) {
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

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

@@ -18,7 +18,7 @@ function IDSHeader1177AdminAvatarMobile({ username = "", unit = "", expanded = f
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     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 }));
 }

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

@@ -18,7 +18,7 @@ function IDSHeader1177AdminAvatar({ username, unit, expanded = false, children,
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     const handleClickOutside = (event) => {
         if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {

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

@@ -15,7 +15,7 @@ function IDSHeader1177AdminMenuMobile({ srLabel = "Meny", persistent = false, ex
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();

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

@@ -15,7 +15,7 @@ function IDSHeader1177AdminNavItem({ expanded = false, ...props }) {
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

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

@@ -17,7 +17,7 @@ function IDSHeader1177ProAvatarMobile({ username = "", unit = "", expanded = fal
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     return (jsx(IDSHeader1177ProAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, buttonRef: buttonRef, onToggleMenu: username ? toggleAvatar : undefined, hide: headerContext?.hideAvatar ?? false, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }

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

@@ -19,7 +19,7 @@ function IDSHeader1177ProAvatar({ username, unit, expanded = false, children, pe
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     useEffect(() => {
         const clickOutsideHandler = (e) => {

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

@@ -15,7 +15,7 @@ function IDSHeader1177ProMenuMobile({ srLabel = "Meny", persistent = false, expa
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();

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

@@ -15,7 +15,7 @@ function IDSHeader1177ProNavItem({ expanded = false, ...props }) {
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

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

@@ -15,7 +15,7 @@ function IDSHeaderIneraMenuMobile({ srLabel = "Meny", expanded = false, persiste
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();

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

@@ -15,7 +15,7 @@ function IDSHeaderIneraNavItem({ expanded = false, ...props }) {
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

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

@@ -19,7 +19,7 @@ function IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded =
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     return (jsx(IDSHeaderIneraAdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, buttonRef: buttonRef, onToggleMenu: username ? toggleAvatar : undefined, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }

package/components/header-inera-admin/header-inera-admin-avatar.js

@@ -20,7 +20,7 @@ function IDSHeaderIneraAdminAvatar({ username, unit, expanded = false, children,
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     useEffect(() => {
         const clickOutsideHandler = (e) => {

package/components/header-inera-admin/header-inera-admin-menu-mobile.js

@@ -15,7 +15,7 @@ function IDSHeaderIneraAdminMenuMobile({ srLabel = "Meny", expanded = false, per
         if (!persistent)
             setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();

package/components/header-inera-admin/header-inera-admin-nav-item.js

@@ -15,7 +15,7 @@ function IDSHeaderIneraAdminNavItem({ expanded = false, ...props }) {
     useClickOutside([componentRef, buttonRef], () => {
         setIsExpanded(false);
     });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

package/components/side-panel/side-panel.js

@@ -10,7 +10,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
     const isControlled = show !== undefined;
     const [internalShow, setInternalShow] = useState(false);
     const visible = isControlled ? show : internalShow;
-    useEsc(() => setVisible(false), hamburgerRef, internalShow);
+    useEsc(() => setVisible(false), hamburgerRef, internalRef, internalShow);
     const setVisible = (value) => {
         if (!isControlled) {
             setInternalShow(value);

package/components/utils/hooks/useEsc.d.ts

@@ -1,10 +1,2 @@
 import { RefObject } from "react";
-/**
- * useEsc
- * Calls the provided callback when Escape is pressed and optionally focuses a ref
- *
- * @param callback - function to call when Escape is pressed
- * @param focusRef - optional ref to focus when Escape is pressed
- * @param enabled - optional, defaults to true; disables listener when false
- */
-export declare function useEsc(callback: () => void, focusRef?: RefObject<HTMLElement>, enabled?: boolean): void;
+export declare function useEsc(callback: (event: KeyboardEvent) => void, focusRef?: RefObject<HTMLElement>, containerRef?: RefObject<HTMLElement>, enabled?: boolean): void;

package/components/utils/hooks/useEsc.js

@@ -1,27 +1,24 @@
 import { useEffect } from 'react';
 
-/**
- * useEsc
- * Calls the provided callback when Escape is pressed and optionally focuses a ref
- *
- * @param callback - function to call when Escape is pressed
- * @param focusRef - optional ref to focus when Escape is pressed
- * @param enabled - optional, defaults to true; disables listener when false
- */
-function useEsc(callback, focusRef, enabled = true) {
+function useEsc(callback, focusRef, containerRef, enabled = true) {
     useEffect(() => {
         if (!enabled)
             return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                callback();
-                focusRef?.current?.focus();
+        const handler = (event) => {
+            if (event.key !== "Escape")
+                return;
+            if (containerRef?.current) {
+                const active = document.activeElement;
+                if (!containerRef.current.contains(active))
+                    return;
             }
+            event.preventDefault();
+            callback(event);
+            focusRef?.current?.focus();
         };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [callback, focusRef, enabled]);
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [callback, focusRef, enabled, containerRef]);
 }
 
 export { useEsc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "type": "module",
   "peerDependencies": {
     "react": "*",