@inera/ids-react 8.1.0 → 9.0.0

package/components/data-pagination/data-pagination.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/data-pagination/data-pagination.css';
+
+const IDSDataPagination = forwardRef(({ from, to, of = "av", total, defaultValue = "", firstPageButton, previousButton, nextButton, lastPageButton, light = false, className, children, ...props }, ref) => {
+    const summaryText = `${from} - ${to} ${of} ${total}`;
+    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), ...props, children: [!!children && jsx("div", { className: "ids-data-pagination__select", children: children }), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [firstPageButton && jsx("div", { className: "ids-data-pagination__first-page-button", children: firstPageButton }), previousButton && jsx("div", { className: "ids-data-pagination__prev-button", children: previousButton }), nextButton && jsx("div", { className: "ids-data-pagination__next-button", children: nextButton }), lastPageButton && jsx("div", { className: "ids-data-pagination__last-page-button", children: lastPageButton })] })] }));
+});
+IDSDataPagination.displayName = "IDSDataPagination";
+
+export { IDSDataPagination };

package/components/date-label/date-label.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/date-label/date-label.css';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
+import '@inera/ids-design/components/date-label/date-label.css';
 
 function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
     const getYear = () => (date ? date.getFullYear() : year);
@@ -12,7 +12,7 @@ function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel =
     const getDayTo = () => (dateTo ? getDayAsText(dateTo.getDate()) : getDayAsText(dayTo));
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
     const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
-    return (jsxs("span", { className: clsx("ids-date-label", className), "aria-label": srText, ...props, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: "ids-date-label__time ids-date-label__time--separator", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
+    return (jsxs("span", { ...props, className: clsx("ids-date-label", className), "aria-label": srText, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: "ids-date-label__time ids-date-label__time--separator", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
 }
 
 export { IDSDateLabel };

package/components/dialog/dialog-base.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, HTMLAttributes } from "react";
+import "@inera/ids-design/components/dialog/dialog.css";
+export interface IDSDialogBaseProps extends HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+    noFocusTrap?: boolean;
+    width?: string;
+    maxWidth?: string;
+    height?: string;
+    headline?: ReactNode;
+    onCloseDialog?: () => void;
+    actions?: ReactNode;
+    dismissible?: boolean;
+    srClose?: string;
+    noScrollAreaFocus?: boolean;
+    noOverlay?: boolean;
+    dialogRef?: React.Ref<HTMLDivElement>;
+    scrollAreaRef?: React.Ref<HTMLDivElement>;
+    onOverlayClick?: () => void;
+    client?: boolean;
+}
+export declare const IDSDialogBase: import("react").ForwardRefExoticComponent<IDSDialogBaseProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/dialog/dialog-base.js

@@ -0,0 +1,29 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/dialog/dialog.css';
+
+const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headline, actions, dismissible, onCloseDialog, srClose = "Stäng", noScrollAreaFocus, noOverlay = false, noFocusTrap = false, dialogRef, scrollAreaRef, onOverlayClick, client = false, children, className, ...props }, ref) => {
+    const reactId = useId();
+    const headlineId = `dialog-header-${reactId}`;
+    const overlayHandler = client && onOverlayClick
+        ? {
+            onClick: onOverlayClick
+        }
+        : {};
+    const closeHandler = client && onCloseDialog
+        ? {
+            onClick: onCloseDialog
+        }
+        : {};
+    return (jsxs(Fragment, { children: [!noOverlay && (jsx("div", { className: `ids-dialog-overlay ${!show ? "ids-dialog-overlay--hidden" : ""}`, ...overlayHandler })), jsxs("div", { ...props, className: clsx("ids-dialog", {
+                    "ids-dialog--hidden": !show,
+                    "ids-focus-trap": !noFocusTrap,
+                    "ids-dialog--dismissible": !!dismissible
+                }), ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                            "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
+                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
+});
+IDSDialogBase.displayName = "IDSDialogBase";
+
+export { IDSDialogBase };

package/components/dialog/dialog.d.ts

@@ -1,23 +1,20 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/dialog/dialog.css";
-interface IDSDialogProps extends React.HTMLAttributes<HTMLDivElement> {
-    actions?: ReactNode;
-    autoFocus?: boolean;
-    dismissible?: boolean;
+import { ReactNode, HTMLAttributes } from "react";
+export interface IDSDialogProps extends HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+    srClose?: string;
     headline?: ReactNode;
-    height?: string;
-    keepScrollbar?: boolean;
+    width?: string;
     maxWidth?: string;
-    noFocusTrap?: boolean;
+    height?: string;
+    trigger?: ReactNode;
+    dismissible?: boolean;
     noOverlay?: boolean;
-    noScrollAreaFocus?: boolean;
+    actions?: ReactNode;
+    autoFocus?: boolean;
     persistent?: boolean;
-    show?: boolean;
-    srClose?: string;
-    trigger?: ReactNode;
-    width?: string;
-    children?: ReactNode;
+    noFocusTrap?: boolean;
+    keepScrollbar?: boolean;
+    noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
 }
-export declare function IDSDialog({ show, srClose, dismissible, autoFocus, noOverlay, noFocusTrap, keepScrollbar, persistent, noScrollAreaFocus, width, maxWidth, height, trigger, headline, actions, children, className, onVisibilityChange, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;

package/components/dialog/dialog.js

@@ -1,31 +1,27 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/dialog/dialog.css';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { IDSDialogBase } from './dialog-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
-import clsx from 'clsx';
 
-function IDSDialog({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) {
+function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth, height, trigger, actions, noOverlay = false, dismissible = false, autoFocus = true, noFocusTrap = false, persistent = false, keepScrollbar = false, noScrollAreaFocus = false, onVisibilityChange, children, className, ...props }) {
     const [isVisible, setIsVisible] = useState(show);
+    const triggerRef = useRef(null);
     const dialogRef = useRef(null);
-    const bodyRef = useRef(null);
-    const [hasScrollbar, setHasScrollbar] = useState(false);
+    const scrollAreaRef = useRef(null);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
+    // Sync prop show
     useEffect(() => {
         setIsVisible(show);
     }, [show]);
+    // Notify visibility change
     useEffect(() => {
         onVisibilityChange?.(isVisible);
     }, [isVisible]);
+    // Body scroll and scrollbar detection
     useEffect(() => {
-        const checkScrollbar = () => {
-            if (bodyRef.current) {
-                setHasScrollbar(bodyRef.current.clientHeight < bodyRef.current.scrollHeight);
-            }
-        };
         if (isVisible) {
             !keepScrollbar && document.body.classList.add("ids-hide-overflow");
-            checkScrollbar();
         }
         else {
             document.body.classList.remove("ids-hide-overflow");
@@ -34,6 +30,7 @@ function IDSDialog({ show = false, srClose = "Stäng", dismissible = false, auto
             document.body.classList.remove("ids-hide-overflow");
         };
     }, [isVisible, keepScrollbar]);
+    // Escape key
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.key === "Escape" && isVisible && !persistent) {
@@ -42,35 +39,38 @@ function IDSDialog({ show = false, srClose = "Stäng", dismissible = false, auto
         };
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isVisible, persistent, setIsVisible]);
+    }, [isVisible, persistent]);
+    // Auto focus
     useEffect(() => {
         if (isVisible && autoFocus) {
-            setTimeout(() => {
-                const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
-                    bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
-                    dialogRef.current?.querySelector("button.ids-dialog__close-button");
-                focusable?.focus();
-            });
+            if (!dialogRef?.current)
+                return;
+            const wrapper = dialogRef.current;
+            const focusAnchor = wrapper.querySelector(".ids-focus-anchor");
+            if (focusAnchor) {
+                focusAnchor.focus();
+                setTimeout(() => {
+                    focusAnchor?.scrollIntoView({
+                        behavior: "smooth",
+                        block: "nearest"
+                    });
+                }, 2);
+            }
+            else {
+                wrapper.focus();
+            }
         }
     }, [isVisible, autoFocus]);
-    const overlayClick = () => {
-        if (!persistent) {
+    const overlayClick = useCallback(() => {
+        if (!persistent)
             setIsVisible(false);
-        }
-    };
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), !noOverlay && (jsx("div", { className: clsx("ids-dialog-overlay", {
-                    "ids-dialog-overlay--hidden": !isVisible
-                }), onClick: overlayClick })), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
-                    "ids-dialog--hidden": !isVisible
-                }, className), role: "dialog", "aria-modal": "true", style: {
-                    width,
-                    maxWidth,
-                    height,
-                    maxHeight: height || undefined
-                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__close-button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
-                            "ids-dialog__body--has-scrollbar": hasScrollbar,
-                            "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
-                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
+        triggerRef.current?.focus();
+    }, []);
+    const closeDialog = useCallback(() => {
+        setIsVisible(false);
+        triggerRef.current?.focus();
+    }, []);
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, dialogRef: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
 }
 
 export { IDSDialog };

package/components/dropdown/dropdown-base.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/dropdown/dropdown.css";
+type Position = "left" | "right";
+export interface IDSDropdownBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
+    expanded: boolean;
+    mBlock?: boolean;
+    sBlock?: boolean;
+    position?: Position;
+    maxHeight?: string;
+    minWidth?: string;
+    triggerRef?: React.Ref<HTMLSpanElement>;
+    contentRef?: React.Ref<HTMLDivElement>;
+    trigger?: ReactNode;
+    onTriggerClick?: () => void;
+    client?: boolean;
+}
+export declare function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock, sBlock, client, children, className, maxHeight, minWidth, contentRef, ...props }: IDSDropdownBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dropdown/dropdown-base.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/dropdown/dropdown.css';
+
+function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
+    const triggerId = `dropdown-trigger-${useId()}`;
+    const handleKeyPress = (e) => {
+        if (!!onTriggerClick && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            onTriggerClick();
+        }
+    };
+    const triggerHandlers = client && onTriggerClick
+        ? {
+            onClick: onTriggerClick,
+            onKeyDown: handleKeyPress
+        }
+        : {};
+    const enhancedTrigger = React.isValidElement(trigger)
+        ? React.cloneElement(trigger, {
+            ref: triggerRef,
+            id: triggerId,
+            "aria-expanded": expanded,
+            "aria-haspopup": "dialog",
+            ...triggerHandlers,
+            ...trigger.props
+        })
+        : trigger;
+    return (jsxs("span", { ...props, className: clsx(`ids-dropdown`, className, {
+            "ids-dropdown--m-block": mBlock,
+            "ids-dropdown--s-block": sBlock,
+            "ids-dropdown--expanded": expanded
+        }), children: [enhancedTrigger, jsx("div", { ...props, ref: contentRef, "aria-labelledby": triggerId, "aria-hidden": !expanded, className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
+                    "ids-dropdown-content--show": expanded,
+                    "ids-dropdown-content--mblock": mBlock,
+                    "ids-dropdown-content--sblock": sBlock,
+                    "ids-dropdown-content--scrollable": !!maxHeight
+                }, className), style: { minWidth }, children: jsx("div", { className: "ids-dropdown-content__scroll-area", role: "menu", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: children }) })] }));
+}
+
+export { IDSDropdownBase };

package/components/dropdown/dropdown-content-button.d.ts

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
-import "@inera/ids-design/components/dropdown/dropdown.css";
 export interface IDSDropdownContentButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     icon?: string;
     children: ReactNode;

package/components/dropdown/dropdown-content-button.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import '@inera/ids-design/components/dropdown/dropdown.css';
 import clsx from 'clsx';
 
 const IDSDropdownContentButton = forwardRef(({ icon, children, className, ...props }, ref) => {

package/components/dropdown/dropdown-content-link.d.ts

@@ -1,6 +1,5 @@
-import React, { ReactElement, HTMLAttributes } from "react";
-import "@inera/ids-design/components/dropdown/dropdown.css";
+import { ReactElement, HTMLAttributes } from "react";
 export interface IDSDropdownContentLinkProps extends Omit<HTMLAttributes<HTMLAnchorElement>, "children"> {
     children: ReactElement;
 }
-export declare function IDSDropdownContentLink({ children, className, ...props }: IDSDropdownContentLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function IDSDropdownContentLink({ children, className, ...props }: IDSDropdownContentLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/components/dropdown/dropdown-content-link.js

@@ -1,18 +1,11 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/dropdown/dropdown.css';
+import { cloneElement } from 'react';
 import clsx from 'clsx';
 
 function IDSDropdownContentLink({ children, className, ...props }) {
-    if (!isValidElement(children) || children.type !== "a") {
-        console.error("IDSDropdownContentLink expects a single <a> element as its child.");
-        return null;
-    }
-    const childClassName = clsx("ids-dropdown-content__link", children.props.className, className);
-    const content = jsx(Fragment, { children: children.props.children });
+    const content = children.props.children;
     return cloneElement(children, {
         ...props,
-        className: childClassName,
+        className: clsx("ids-dropdown-content__link", className),
         role: "menuitem",
         children: content
     });

package/components/dropdown/dropdown.d.ts

@@ -1,17 +1,15 @@
-import React, { ReactNode, ReactElement } from "react";
-import "@inera/ids-design/components/dropdown/dropdown.css";
-type Position = "left" | "right";
-interface IDSDropdownProps extends React.HTMLAttributes<HTMLSpanElement> {
-    button: ReactElement;
-    expanded?: boolean;
+import React from "react";
+import { IDSDropdownBaseProps } from "./dropdown-base";
+type Props = Omit<IDSDropdownBaseProps, "onTriggerClick" | "triggerRef" | "contentRef"> & {
+    button: React.ReactNode;
+    position?: "left" | "right";
+    maxHeight?: string;
+    minWidth?: string;
+    persistent?: boolean;
+    sBlock?: boolean;
     mBlock?: boolean;
     onClosed?: () => void;
     onOpened?: () => void;
-    persistent?: boolean;
-    position?: Position;
-    sBlock?: boolean;
-    maxHeight?: string;
-    children: ReactNode;
-}
-export declare function IDSDropdown({ expanded, persistent, position, sBlock, mBlock, maxHeight, onOpened, onClosed, children, className, button, ...props }: IDSDropdownProps): import("react/jsx-runtime").JSX.Element;
+};
+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 {};

package/components/dropdown/dropdown.js

@@ -1,34 +1,46 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/dropdown/dropdown.css';
-import { useElementId } from '../utils/hooks/useElementId.js';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { IDSDropdownBase } from './dropdown-base.js';
 
-function IDSDropdown({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, maxHeight = "", onOpened, onClosed, children, className, button, ...props }) {
+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);
-    const buttonId = useElementId();
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
+    // Click outside to close
     useEffect(() => {
-        if (!persistent && isExpanded) {
-            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);
-        }
+        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?.();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isExpanded, persistent, onClosed]);
-    const handleToggle = (e) => {
+    const toggleDropdown = () => {
         setIsExpanded(prev => {
             const next = !prev;
             if (next)
@@ -38,38 +50,7 @@ function IDSDropdown({ expanded = false, persistent = false, position = "right",
             return next;
         });
     };
-    const renderTrigger = () => {
-        if (isValidElement(button)) {
-            return cloneElement(button, {
-                id: buttonId,
-                ref: triggerRef,
-                onClick: handleToggle,
-                "aria-expanded": isExpanded,
-                "aria-haspopup": "menu",
-                className: clsx(button.props.className)
-            });
-        }
-        return null;
-    };
-    const renderDropdownContent = () => {
-        const enhancedChildren = React.Children.map(children, (child, i) => {
-            if (!React.isValidElement(child))
-                return child;
-            return cloneElement(child, {
-                key: `dropdown-content-link-${i}`
-            });
-        });
-        return (jsx("div", { ref: contentRef, "aria-labelledby": buttonId, "aria-hidden": !isExpanded, role: "menu", className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
-                "ids-dropdown-content--show": isExpanded,
-                "ids-dropdown-content--mblock": mBlock,
-                "ids-dropdown-content--sblock": sBlock,
-                "ids-dropdown-content--scrollable": !!maxHeight
-            }), ...props, children: jsx("div", { className: "ids-dropdown-content__scroll-area", role: "menu", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: enhancedChildren }) }));
-    };
-    return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
-            "ids-dropdown--mblock": mBlock,
-            "ids-dropdown--sblock": sBlock
-        }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));
+    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 }));
 }
 
 export { IDSDropdown };

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

@@ -1,14 +1,13 @@
-import React, { ReactElement, ReactNode } from "react";
-import { IDSLinkProps } from "../link/link";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/footer-1177/footer-1177.css";
 export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
+    toggle?: ReactNode;
     srHeadline?: string;
     subHeadline?: string;
-    cols?: 1 | 2 | 3;
-    col1?: ReactElement<IDSLinkProps>[];
-    col2?: ReactElement<IDSLinkProps>[];
-    col3?: ReactElement<IDSLinkProps>[];
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -16,4 +15,4 @@ export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177({ headline, srHeadline, subHeadline, cols, col1, col2, col3, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
 
-function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
+function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
     const renderHeadline = () => {
         if (srHeadline) {
             return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
@@ -10,15 +10,18 @@ function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", cols
         return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
     };
     const renderCols = () => {
-        if (cols === 1) {
+        if (!!col1 && !col2 && !col3) {
             return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
         }
-        if (cols === 2) {
+        if (!!col1 && !!col2 && !col3) {
             return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col2 })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
+        else if (!!col1 && !!col2 && !!col3) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
+        }
+        return null;
     };
-    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: [jsx("div", { className: "ids-footer-1177__text", children: children }), 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 }) })] })] }));
+    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 }) })] })] }));
 }
 
 export { IDSFooter1177 };

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

@@ -1,13 +1,12 @@
-import React, { ReactElement, ReactNode } from "react";
-import { IDSLinkProps } from "../link/link";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
 interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
+    toggle?: ReactNode;
     srHeadline?: string;
-    cols?: 1 | 2 | 3;
-    col1?: ReactElement<IDSLinkProps>[];
-    col2?: ReactElement<IDSLinkProps>[];
-    col3?: ReactElement<IDSLinkProps>[];
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -15,5 +14,5 @@ interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177Admin: React.FC<Footer1177AdminProps>;
+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 {};