@inera/ids-react 9.1.2 → 9.2.0

package/components/link/action-link.js

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/action-link/action-link.css';
 
 function IDSActionLink({ image, children, className, ...props }) {
-    return (jsx("div", { ...props, className: clsx("ids-action-link", className), children: jsxs("div", { className: "ids-action-link__inner", children: [jsx("div", { className: "ids-action-link__image", children: image }), children, jsx("div", { className: "ids-action-link__icon", "aria-hidden": "true" })] }) }));
+    return (jsx("div", { ...props, className: clsx("ids-action-link", className), children: jsxs("div", { className: "ids-action-link__inner", children: [jsx("div", { className: "ids-action-link__image", children: image }), jsx("span", { className: "ids-action-link__text", children: children }), jsx("div", { className: "ids-action-link__icon-wrapper", children: jsx("div", { className: "ids-action-link__icon", "aria-hidden": "true" }) })] }) }));
 }
+IDSActionLink.displayName = "IDSActionLink";
 
 export { IDSActionLink };

package/components/link/box-link.d.ts

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

package/components/link/box-link.js

@@ -5,5 +5,6 @@ import '@inera/ids-design/components/box-link/box-link.css';
 function IDSBoxLink({ button, children, className, ...props }) {
     return (jsx("div", { ...props, className: clsx("ids-box-link", { "ids-box-link--has-button": !!button }, className), children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), !!button && jsx("div", { className: "ids-box-link__button", children: button })] }) }));
 }
+IDSBoxLink.displayName = "IDSBoxLink";
 
 export { IDSBoxLink };

package/components/link/link.d.ts

@@ -15,3 +15,6 @@ export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
     children?: ReactElement;
 }
 export declare function IDSLink({ colorPreset, menu, footer, active, activeIcon, block, underlined, noUnderline, small, focusAnchor, endItem, className, children, ...props }: IDSLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace IDSLink {
+    var displayName: string;
+}

package/components/link/link.js

@@ -36,5 +36,6 @@ function IDSLink({ colorPreset = 0, menu = false, footer = false, active = false
         children: wrappedContent
     });
 }
+IDSLink.displayName = "IDSLink";
 
 export { IDSLink };

package/components/list-pagination/list-pagination-links.d.ts

@@ -17,3 +17,6 @@ export interface IDSListPaginationLinksProps extends React.HTMLAttributes<HTMLDi
     nextHref?: string;
 }
 export declare function IDSListPaginationLinks({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, linkPrefix, prevHref, nextHref, className, ...props }: IDSListPaginationLinksProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSListPaginationLinks {
+    var displayName: string;
+}

package/components/list-pagination/list-pagination-links.js

@@ -44,5 +44,6 @@ function IDSListPaginationLinks({ showing = "Visar", from = 0, to = 0, of = "av"
     };
     return (jsxs("div", { className: clsx("ids-list-pagination", className), ...props, children: [renderSummary(), jsxs("div", { className: "ids-list-pagination__content", children: [jsx("div", { className: "ids-list-pagination__prev-link", children: renderPrevLink() }), jsx("div", { className: "ids-list-pagination__nav-links", children: renderLinks() }), jsx("div", { className: "ids-list-pagination__next-link", children: renderNextLink() })] })] }));
 }
+IDSListPaginationLinks.displayName = "IDSListPaginationLinks";
 
 export { IDSListPaginationLinks };

package/components/list-pagination/list-pagination.d.ts

@@ -18,3 +18,6 @@ export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElem
     onNextPage?: (page: number) => void;
 }
 export declare function IDSListPagination({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, srNav, onChangePage, onPrevPage, onNextPage, className, ...props }: IDSListPaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSListPagination {
+    var displayName: string;
+}

package/components/list-pagination/list-pagination.js

@@ -12,13 +12,13 @@ function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", tot
     };
     const renderPrevButton = () => {
         if (current > 1) {
-            return jsx("button", { "aria-label": srPrevious, onClick: () => onPrevPage?.(current - 1), id: "prev-button" });
+            return (jsx("button", { type: "button", "aria-label": srPrevious, onClick: () => onPrevPage?.(current - 1), id: "prev-button" }));
         }
         return null;
     };
     const renderNextButton = () => {
         if (current < pages) {
-            return jsx("button", { "aria-label": srNext, onClick: () => onNextPage?.(current + 1), id: "next-button" });
+            return jsx("button", { type: "button", "aria-label": srNext, onClick: () => onNextPage?.(current + 1), id: "next-button" });
         }
         return null;
     };
@@ -37,7 +37,7 @@ function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", tot
                         current + 1,
                         ...(current < 4 ? [2, 3, 4] : []),
                         ...(current > pages - 3 ? [pages - 1, pages - 2, pages - 3] : [])
-                    ].includes(i), "data-hidden-before": pages > 7 && i > 1 && buttonArray[i - 2]?.props.hidden && !buttonArray[i - 1]?.props.hidden ? true : undefined, children: jsx("button", { className: clsx("ids-list-pagination__button", {
+                    ].includes(i), "data-hidden-before": pages > 7 && i > 1 && buttonArray[i - 2]?.props.hidden && !buttonArray[i - 1]?.props.hidden ? true : undefined, children: jsx("button", { type: "button", className: clsx("ids-list-pagination__button", {
                         "ids-list-pagination__button--current": isCurrent
                     }), "aria-label": isCurrent ? srCurrentPage : `${srGoToPage} ${i}`, onClick: () => !isCurrent && onChangePage?.(i), disabled: isCurrent, children: i }) }, i));
         }
@@ -45,5 +45,6 @@ function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", tot
     };
     return (jsxs("div", { className: clsx("ids-list-pagination", className), ...props, children: [renderSummary(), jsxs("div", { className: "ids-list-pagination__content", children: [jsx("div", { className: "ids-list-pagination__prev-button", children: renderPrevButton() }), jsx("div", { className: "ids-list-pagination__nav-buttons", children: renderButtons() }), jsx("div", { className: "ids-list-pagination__next-button", children: renderNextButton() })] })] }));
 }
+IDSListPagination.displayName = "IDSListPagination";
 
 export { IDSListPagination };

package/components/mobile-menu/mobile-item-base.d.ts

@@ -12,3 +12,6 @@ export interface IDSMobileMenuItemBaseProps extends React.HTMLAttributes<HTMLDiv
     client?: boolean;
 }
 export declare function IDSMobileMenuItemBase({ level, secondary, expanded, headline, link, active, showText, hideText, onToggleMenu, className, children, client, ...props }: IDSMobileMenuItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSMobileMenuItemBase {
+    var displayName: string;
+}

package/components/mobile-menu/mobile-item-base.js

@@ -42,5 +42,6 @@ function IDSMobileMenuItemBase({ level = 1, secondary = false, expanded = false,
     };
     return (jsxs("div", { ...props, className: clsx(getItemLevelClass(), expanded && "ids-mobile-menu-item--expanded", active && "ids-mobile-menu-item--active", secondary && "ids-mobile-menu-item--secondary"), children: [jsx("div", { className: `ids-mobile-menu-item__inner ${level && "ids-mobile-menu-item__inner--level-" + level}`, children: renderItem() }), jsx("div", { id: subItemId, className: "ids-mobile-menu-item__sub-items", children: children })] }));
 }
+IDSMobileMenuItemBase.displayName = "IDSMobileMenuItemBase";
 
 export { IDSMobileMenuItemBase };

package/components/mobile-menu/mobile-item.d.ts

@@ -4,3 +4,6 @@ export interface IDSMobileMenuItemProps extends Omit<React.ComponentProps<typeof
     onToggleMenu?: (isExpanded: boolean) => void;
 }
 export declare function IDSMobileMenuItem({ expanded, level, onToggleMenu, className, children, ...rest }: IDSMobileMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSMobileMenuItem {
+    var displayName: string;
+}

package/components/mobile-menu/mobile-item.js

@@ -22,5 +22,6 @@ function IDSMobileMenuItem({ expanded = false, level = 1, onToggleMenu, classNam
             })
             : child) }));
 }
+IDSMobileMenuItem.displayName = "IDSMobileMenuItem";
 
 export { IDSMobileMenuItem };

package/components/mobile-menu/mobile-menu.d.ts

@@ -4,3 +4,6 @@ export interface IDSMobileMenuProps extends HTMLAttributes<HTMLDivElement> {
     variation?: number;
 }
 export declare function IDSMobileMenu({ variation, children, className, ...props }: IDSMobileMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSMobileMenu {
+    var displayName: string;
+}

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

@@ -6,5 +6,6 @@ function IDSMobileMenu({ variation = 1, children, className, ...props }) {
     const menuClass = clsx("ids-mobile-menu", variation === 2 && "ids-mobile-menu--variation-2", className);
     return (jsx("div", { className: menuClass, ...props, children: children }));
 }
+IDSMobileMenu.displayName = "IDSMobileMenu";
 
 export { IDSMobileMenu };

package/components/navigation-content/navigation-content.d.ts

@@ -5,3 +5,6 @@ export interface IDSNavigationContentProps extends React.HTMLAttributes<HTMLDivE
     maxHeight?: string;
 }
 export declare function IDSNavigationContent({ headline, maxHeight, className, children, ...props }: IDSNavigationContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSNavigationContent {
+    var displayName: string;
+}

package/components/navigation-content/navigation-content.js

@@ -11,5 +11,6 @@ function IDSNavigationContent({ headline = "", maxHeight = "", className, childr
     });
     return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline })), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "none" }, children: linkWrappers })] })] }));
 }
+IDSNavigationContent.displayName = "IDSNavigationContent";
 
 export { IDSNavigationContent };

package/components/navigation-local/navigation-local.d.ts

@@ -4,3 +4,6 @@ export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivEle
     headline?: string;
 }
 export declare function IDSNavigationLocal({ headline, className, children, ...props }: IDSNavigationLocalProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSNavigationLocal {
+    var displayName: string;
+}

package/components/navigation-local/navigation-local.js

@@ -5,5 +5,6 @@ import '@inera/ids-design/components/navigation-local/navigation-local.css';
 function IDSNavigationLocal({ headline = "", className, children, ...props }) {
     return (jsxs("div", { className: clsx("ids-navigation-local", className), ...props, children: [jsx("h2", { className: "ids-navigation-local__headline", children: headline }), jsx("div", { className: "ids-navigation-local__links", children: children })] }));
 }
+IDSNavigationLocal.displayName = "IDSNavigationLocal";
 
 export { IDSNavigationLocal };

package/components/notification-badge/notification-badge.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
 import "@inera/ids-design/components/notification-badge/notification-badge.css";
-interface IDSNotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSNotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
     icon?: string;
-    onClick?: () => void;
 }
-export declare function IDSNotificationBadge({ type, icon, className, children, ...props }: IDSNotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const IDSNotificationBadge: React.NamedExoticComponent<IDSNotificationBadgeProps>;

package/components/notification-badge/notification-badge.js

@@ -1,9 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/notification-badge/notification-badge.css';
 
-function IDSNotificationBadge({ type = "primary", icon = "", className, children, ...props }) {
-    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), children] }));
-}
+const IDSNotificationBadge = React.memo(function IDSNotificationBadge(props) {
+    const { type = "primary", icon, children, className, ...rest } = props;
+    return (jsxs("div", { ...rest, className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), children] }));
+});
+IDSNotificationBadge.displayName = "IDSNotificationBadge";
 
 export { IDSNotificationBadge };

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import "@inera/ids-design/components/popover/popover.css";
 import React from "react";
+import "@inera/ids-design/components/popover/popover.css";
 interface IDSPopoverBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
     trigger: ReactNode;
     triggerRef?: React.Ref<HTMLSpanElement>;
@@ -12,4 +12,7 @@ interface IDSPopoverBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
     client?: boolean;
 }
 export declare function IDSPopoverBase({ trigger, triggerRef, togglePopover, handleKeyPress, client, expanded, className, children, ...props }: IDSPopoverBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPopoverBase {
+    var displayName: string;
+}
 export {};

package/components/popover/popover-base.js

@@ -23,5 +23,6 @@ function IDSPopoverBase({ trigger, triggerRef, togglePopover, handleKeyPress, cl
         : trigger;
     return (jsxs("span", { ...props, className: clsx("ids-popover", className), children: [enhancedTrigger, expanded && children] }));
 }
+IDSPopoverBase.displayName = "IDSPopoverBase";
 
 export { IDSPopoverBase };

package/components/popover/popover-content.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/popover/popover.css";
 export type PopoverPosition = "top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom";
 interface IDSPopoverContentProps {
     position?: PopoverPosition;
+    caretPosition?: PopoverPosition;
     headline?: ReactNode;
     children?: ReactNode;
     contentScrollAreaStyle?: CSSProperties;
@@ -12,8 +13,13 @@ interface IDSPopoverContentProps {
     closePopover?: () => void;
     contentRef?: React.Ref<HTMLDivElement>;
     scrollAreaRef?: React.Ref<HTMLDivElement>;
+    closeButtonRef?: React.Ref<HTMLButtonElement>;
     noScrollAreaFocus?: boolean;
     client?: boolean;
+    style?: React.CSSProperties;
+}
+export declare function IDSPopoverContent({ position, caretPosition, srCloseText, headline, contentScrollAreaStyle, noFocusTrap, noScrollAreaFocus, contentRef, scrollAreaRef, closeButtonRef, closePopover, client, children, style }: IDSPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPopoverContent {
+    var displayName: string;
 }
-export declare const IDSPopoverContent: React.ForwardRefExoticComponent<IDSPopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/popover/popover-content.js

@@ -1,20 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId } from 'react';
+import { useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/popover/popover.css';
 
-const IDSPopoverContent = forwardRef(({ position = "bottom", srCloseText = "Stäng", headline, contentScrollAreaStyle, noFocusTrap = false, noScrollAreaFocus = false, contentRef, scrollAreaRef, closePopover, client, children }, ref) => {
+function IDSPopoverContent({ position = "bottom", caretPosition = "bottom", srCloseText = "Stäng", headline, contentScrollAreaStyle, noFocusTrap = false, noScrollAreaFocus = false, contentRef, scrollAreaRef, closeButtonRef, closePopover, client, children, style }) {
     const contentId = `popover-content-${useId()}`;
-    const closeHandler = client && closePopover
-        ? {
-            onClick: closePopover
-        }
-        : {};
+    const closeHandler = client && closePopover ? { onClick: closePopover } : {};
     const renderCaret = (pos) => (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
-    return (jsxs("div", { ref: contentRef, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
+    return (jsxs("div", { ref: contentRef, style: style, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
             "ids-focus-trap": !noFocusTrap
-        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
-});
+        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(caretPosition), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler, ref: closeButtonRef }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
+}
 IDSPopoverContent.displayName = "IDSPopoverContent";
 
 export { IDSPopoverContent };

package/components/popover/popover.d.ts

@@ -16,4 +16,7 @@ interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
 export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPopover {
+    var displayName: string;
+}
 export {};

package/components/popover/popover.js

@@ -1,26 +1,48 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { IDSPopoverBase } from './popover-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { IDSPopoverContent } from './popover-content.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange, ...props }) {
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const scrollAreaRef = useRef(null);
+    const closeButtonRef = useRef(null);
     const [isExpanded, setIsExpanded] = useState(show);
-    const [contentScrollAreaStyle, setPopoverScrollAreaStyle] = useState({ height: "100%" });
+    const [mounted, setMounted] = useState(false);
+    const [ready, setReady] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const GAP = 4;
+    const CARET_SIZE = 8;
+    const closePopover = useCallback(() => {
+        handleVisibilityChange(false);
+        triggerRef.current?.focus();
+    }, []);
     useFocusTrap(contentRef.current, isExpanded && !noFocusTrap);
+    useEsc(closePopover, triggerRef, contentRef, isExpanded);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    useLayoutEffect(() => {
+        if (isExpanded) {
+            setReady(false);
+            setTimeout(() => requestAnimationFrame(() => setReady(true)), 100);
+        }
+    }, [isExpanded]);
+    useLayoutEffect(() => {
+        if (!ready)
+            return;
+        requestAnimationFrame(() => updatePosition());
+    }, [ready]);
     const handleVisibilityChange = (visible) => {
         setIsExpanded(visible);
         onVisibilityChange?.(visible);
     };
-    const closePopover = useCallback(() => {
-        handleVisibilityChange(false);
-        triggerRef.current?.focus();
-    }, []);
     const togglePopover = () => (isExpanded ? closePopover() : handleVisibilityChange(true));
     const handleKeyPress = (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -28,32 +50,7 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
             togglePopover();
         }
     };
-    useEffect(() => {
-        if (!isExpanded)
-            return;
-        const handleEsc = (e) => {
-            if (e.key === "Escape")
-                closePopover();
-        };
-        document.addEventListener("keydown", handleEsc);
-        return () => document.removeEventListener("keydown", handleEsc);
-    }, [isExpanded, closePopover]);
-    useEffect(() => {
-        if (!scrollAreaRef.current)
-            return;
-        const contentWrapperHeight = scrollAreaRef.current.getBoundingClientRect().height;
-        if (contentWrapperHeight >= maxHeight - 40) {
-            setPopoverScrollAreaStyle({
-                height: `${maxHeight - 40}px`
-            });
-        }
-        else {
-            setPopoverScrollAreaStyle({
-                height: "100%"
-            });
-        }
-    }, [scrollAreaRef, isExpanded, maxHeight]);
-    // Send events if you have a category and open the popup
+    // Category sync
     useEffect(() => {
         if (!category || !isExpanded)
             return;
@@ -62,39 +59,131 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
         });
         window.dispatchEvent(event);
     }, [isExpanded, category]);
-    // Listen for other popovers opening in same category
     useEffect(() => {
-        const handleOtherPopoverToggle = (e) => {
+        const handler = (e) => {
             if (e.detail.category !== category)
                 return;
             if (e.detail.source !== popoverRef.current) {
                 setIsExpanded(false);
             }
         };
-        window.addEventListener("ids-popover-toggle", handleOtherPopoverToggle);
-        return () => {
-            window.removeEventListener("ids-popover-toggle", handleOtherPopoverToggle);
-        };
+        window.addEventListener("ids-popover-toggle", handler);
+        return () => window.removeEventListener("ids-popover-toggle", handler);
     }, [category]);
+    //  Autofocus
     useEffect(() => {
-        if (isExpanded && autoFocus) {
-            const wrapper = scrollAreaRef.current;
-            const focusAnchor = wrapper.querySelector(".ids-focus-anchor");
-            if (focusAnchor) {
-                focusAnchor.focus();
-                setTimeout(() => {
-                    focusAnchor?.scrollIntoView({
-                        behavior: "smooth",
-                        block: "nearest"
+        if (isExpanded) {
+            if (autoFocus && scrollAreaRef.current) {
+                const container = scrollAreaRef.current;
+                const anchor = container.querySelector(".ids-focus-anchor");
+                if (anchor) {
+                    const containerRect = container.getBoundingClientRect();
+                    const anchorRect = anchor.getBoundingClientRect();
+                    const offsetTop = anchorRect.top - containerRect.top;
+                    container.scrollTo({
+                        top: container.scrollTop + offsetTop,
+                        behavior: "smooth"
                     });
-                }, 2);
+                    anchor.focus({ preventScroll: true });
+                }
+                else {
+                    container.focus({ preventScroll: true });
+                }
             }
-            else {
-                wrapper.focus();
+            else if (closeButtonRef.current) {
+                closeButtonRef.current.focus({ preventScroll: true });
             }
         }
     }, [isExpanded, autoFocus]);
-    return (jsx("span", { "data-popover-category": category, ref: popoverRef, children: jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className, children: jsx(IDSPopoverContent, { client: true, headline: headline, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, position: position, srCloseText: srCloseText, closePopover: closePopover, contentScrollAreaStyle: contentScrollAreaStyle, noFocusTrap: noFocusTrap, children: children }) }) }));
+    const updatePosition = useCallback(() => {
+        if (!triggerRef.current || !contentRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case "top":
+                top = triggerRect.top - contentRect.height - GAP - CARET_SIZE;
+                left = triggerRect.left + triggerRect.width / 2;
+                break;
+            case "bottom":
+                top = triggerRect.bottom + GAP + CARET_SIZE;
+                left = triggerRect.left + triggerRect.width / 2;
+                break;
+            case "left":
+                top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
+                left = triggerRect.left - contentRect.width / 2 - GAP - CARET_SIZE;
+                break;
+            case "left-bottom":
+                top = triggerRect.bottom - triggerRect.height;
+                left = triggerRect.left - contentRect.width / 2 - GAP - CARET_SIZE;
+                break;
+            case "left-top":
+                top = triggerRect.top + triggerRect.height - contentRect.height;
+                left = triggerRect.left - contentRect.width / 2 - GAP - CARET_SIZE;
+                break;
+            case "right":
+                top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
+                left = triggerRect.left + triggerRect.width + contentRect.width / 2 + GAP + CARET_SIZE;
+                break;
+            case "right-top":
+                top = triggerRect.top + triggerRect.height - contentRect.height;
+                left = triggerRect.left + triggerRect.width + contentRect.width / 2 + GAP + CARET_SIZE;
+                break;
+            case "right-bottom":
+                top = triggerRect.bottom - triggerRect.height;
+                left = triggerRect.left + triggerRect.width + contentRect.width / 2 + GAP + CARET_SIZE;
+                break;
+            case "bottom-left":
+                top = triggerRect.bottom + GAP + CARET_SIZE;
+                left = triggerRect.left + contentRect.width / 2;
+                break;
+            case "bottom-right":
+                top = triggerRect.bottom + GAP + CARET_SIZE;
+                left = triggerRect.right - contentRect.width / 2;
+                break;
+            case "top-left":
+                top = triggerRect.top - contentRect.height - GAP - CARET_SIZE;
+                left = triggerRect.left + contentRect.width / 2;
+                break;
+            case "top-right":
+                top = triggerRect.top - contentRect.height - GAP - CARET_SIZE;
+                left = triggerRect.right - contentRect.width / 2;
+                break;
+            default:
+                top = triggerRect.bottom;
+                left = triggerRect.left;
+        }
+        setCoords({
+            top: top + window.scrollY,
+            left: left + window.scrollX
+        });
+    }, [position]);
+    useLayoutEffect(() => {
+        if (!isExpanded || !triggerRef.current || !contentRef.current)
+            return;
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition);
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition);
+        };
+    }, [isExpanded, position]);
+    return (jsxs("span", { "data-popover-category": category, ref: popoverRef, children: [jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className }), mounted &&
+                isExpanded &&
+                createPortal(jsx(IDSPopoverContent, { client: true, headline: headline, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, caretPosition: position, srCloseText: srCloseText, closeButtonRef: closeButtonRef, closePopover: closePopover, contentScrollAreaStyle: {
+                        maxHeight: `${maxHeight - 40}px`,
+                        overflowY: "auto",
+                        paddingBottom: ".25rem"
+                    }, noFocusTrap: noFocusTrap, style: {
+                        position: "absolute",
+                        top: coords.top,
+                        left: coords.left,
+                        zIndex: 9999
+                    }, children: children }), document.body)] }));
 }
+IDSPopover.displayName = "IDSPopover";
 
 export { IDSPopover };

package/components/progressbar/progressbar.d.ts

@@ -6,7 +6,7 @@ export interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement
     value?: number;
     srLabel: string;
 }
-export declare function IDSProgressbar({ label, hideLabel, value, srLabel, className, ...props }: IDSProgressbarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace IDSProgressbar {
-    var displayName: string;
-}
+export declare const IDSProgressbar: React.MemoExoticComponent<{
+    ({ label, hideLabel, value, srLabel, className, ...props }: IDSProgressbarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;

package/components/progressbar/progressbar.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/progressbar/progressbar.css';
 
-function IDSProgressbar({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) {
+const IDSProgressbarBase = ({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) => {
     return (jsxs("div", { className: clsx("ids-progressbar", className), ...props, children: [!hideLabel && (jsxs("div", { className: "ids-progressbar__label", children: [label, " ", value, "%"] })), jsx("div", { className: "ids-progressbar__bar", role: "progressbar", ...(srLabel ? { "aria-label": srLabel } : {}), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: value > 0 && jsx("div", { className: "ids-progressbar__progress", style: { width: `calc(${value}% + 0.125rem)` } }) })] }));
-}
-IDSProgressbar.displayName = "IDSProgressbar";
+};
+IDSProgressbarBase.displayName = "IDSProgressbar";
+const IDSProgressbar = memo(IDSProgressbarBase);
 
 export { IDSProgressbar };

package/components/puff-list/puff-list-item-date.d.ts

@@ -9,4 +9,7 @@ interface IDSPuffListItemDateProps extends React.HTMLAttributes<HTMLDivElement>
     time?: string;
 }
 export declare function IDSPuffListItemDate({ date, showTime, day, year, month, monthLabel, time, ...props }: IDSPuffListItemDateProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItemDate {
+    var displayName: string;
+}
 export {};

package/components/puff-list/puff-list-item-date.js

@@ -18,5 +18,6 @@ function IDSPuffListItemDate({ date, showTime = false, day = 0, year = 0, month
     };
     return (jsxs("span", { ...props, className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] }));
 }
+IDSPuffListItemDate.displayName = "IDSPuffListItemDate";
 
 export { IDSPuffListItemDate };

package/components/puff-list/puff-list-item-info.d.ts

@@ -3,3 +3,6 @@ export interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivEl
     bottom?: boolean;
 }
 export declare function IDSPuffListItemInfo({ bottom, children, ...props }: IDSPuffListItemInfoProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItemInfo {
+    var displayName: string;
+}

package/components/puff-list/puff-list-item-info.js

@@ -4,5 +4,6 @@ import clsx from 'clsx';
 function IDSPuffListItemInfo({ bottom = false, children, ...props }) {
     return (jsx("div", { ...props, className: clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }), children: children }));
 }
+IDSPuffListItemInfo.displayName = "IDSPuffListItemInfo";
 
 export { IDSPuffListItemInfo };

package/components/puff-list/puff-list-item.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement> {
     header?: ReactNode;
     itemLink?: React.ReactElement;
     date?: React.ReactElement;