@inera/ids-react 8.2.0 → 9.0.1

package/components/{pagination/list-pagination → list-pagination}/list-pagination.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/pagination/list-pagination/list-pagination.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/list-pagination/list-pagination.css';
 
-function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", onChangePage, onPrevPage, onNextPage, className, ...props }) {
+function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", srNav = "Paginering", onChangePage, onPrevPage, onNextPage, className, ...props }) {
     const renderSummary = () => {
         if (from && to && total) {
             return jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` });
@@ -40,7 +41,7 @@ function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", tot
                         "ids-list-pagination__button--current": isCurrent
                     }), "aria-label": isCurrent ? srCurrentPage : `${srGoToPage} ${i}`, onClick: () => !isCurrent && onChangePage?.(i), disabled: isCurrent, children: i }) }, i));
         }
-        return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
+        return (jsx("nav", { "aria-label": srNav, children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
     };
     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() })] })] }));
 }

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+export interface IDSMobileMenuItemBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    level?: number;
+    secondary?: boolean;
+    expanded?: boolean;
+    headline?: string;
+    link?: ReactNode;
+    active?: boolean;
+    showText?: string;
+    hideText?: string;
+    onToggleMenu?: () => void;
+    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;

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

@@ -0,0 +1,46 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSMobileMenuItemBase({ level = 1, secondary = false, expanded = false, headline = "", link, active = false, showText = "Expandera", hideText = "Minimera", onToggleMenu, className, children, client = false, ...props }) {
+    const subItemId = `mobile-menu-sub-item-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    const getItemLevelClass = () => {
+        switch (level) {
+            case 2:
+                return "ids-mobile-menu-item--2";
+            case 3:
+                return "ids-mobile-menu-item--3";
+            default:
+                return "ids-mobile-menu-item";
+        }
+    };
+    const renderItem = () => {
+        const commonProps = {
+            "aria-label": expanded ? hideText : showText,
+            "aria-expanded": expanded,
+            "aria-controls": subItemId,
+            className: clsx("ids-mobile-menu-item__expand-btn", !!level && `ids-mobile-menu-item__expand-btn--level-${level}`, {
+                "ids-mobile-menu-item__expand-btn--headline": headline,
+                "ids-mobile-menu__chevron--expanded": expanded
+            }),
+            ...toggleHandler
+        };
+        if (headline) {
+            return jsx("button", { ...commonProps, children: headline });
+        }
+        else if (link && !!children) {
+            return (jsxs(Fragment, { children: [link, jsx("button", { ...commonProps })] }));
+        }
+        else {
+            return link;
+        }
+    };
+    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 })] }));
+}
+
+export { IDSMobileMenuItemBase };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { IDSMobileMenuItemBase } from "./mobile-item-base";
+export interface IDSMobileMenuItemProps extends Omit<React.ComponentProps<typeof IDSMobileMenuItemBase>, "subItemId" | "onToggleMenu"> {
+    onToggleMenu?: (isExpanded: boolean) => void;
+}
+export declare function IDSMobileMenuItem({ expanded, level, onToggleMenu, className, children, ...rest }: IDSMobileMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import { IDSMobileMenuItemBase } from './mobile-item-base.js';
+
+function IDSMobileMenuItem({ expanded = false, level = 1, onToggleMenu, className, children, ...rest }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    const handleToggleMenu = () => {
+        if (!!children || rest.headline) {
+            const newValue = !isExpanded;
+            setIsExpanded(newValue);
+            onToggleMenu?.(newValue);
+        }
+    };
+    return (jsx(IDSMobileMenuItemBase, { ...rest, client: true, className: className, level: level, expanded: isExpanded, onToggleMenu: handleToggleMenu, children: React.Children.map(children, child => React.isValidElement(child)
+            ? React.cloneElement(child, {
+                "data-ids-sub-item": true,
+                level: level + 1
+            })
+            : child) }));
+}
+
+export { IDSMobileMenuItem };

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+import "@inera/ids-design/components/mobile-menu/mobile-menu.css";
+export interface IDSMobileMenuProps extends HTMLAttributes<HTMLDivElement> {
+    variation?: number;
+}
+export declare function IDSMobileMenu({ variation, children, className, ...props }: IDSMobileMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
+
+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 }));
+}
+
+export { IDSMobileMenu };

package/components/{navigation/content → navigation-content}/navigation-content.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "@inera/ids-design/components/navigation/content/navigation-content.css";
+import "@inera/ids-design/components/navigation-content/navigation-content.css";
 export interface IDSNavigationContentProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     maxHeight?: string;

package/components/{navigation/content → navigation-content}/navigation-content.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import '@inera/ids-design/components/navigation/content/navigation-content.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/navigation-content/navigation-content.css';
 
 function IDSNavigationContent({ headline = "", maxHeight = "", className, children, ...props }) {
     const linkWrappers = React.Children.map(children, (link, i) => {

package/components/{navigation/local → navigation-local}/navigation-local.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "@inera/ids-design/components/navigation/local/navigation-local.css";
+import "@inera/ids-design/components/navigation-local/navigation-local.css";
 export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
 }

package/components/{navigation/local → navigation-local}/navigation-local.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/navigation/local/navigation-local.css';
 import clsx from 'clsx';
+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 })] }));

package/components/{notification/badge → notification-badge}/notification-badge.d.ts

@@ -5,5 +5,5 @@ interface IDSNotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement>
     icon?: string;
     onClick?: () => void;
 }
-export declare function IDSNotificationBadge({ type, icon, onClick, className, children, ...props }: IDSNotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSNotificationBadge({ type, icon, className, children, ...props }: IDSNotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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] }));
+}
+
+export { IDSNotificationBadge };

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

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

package/components/popover/popover-base.js

@@ -0,0 +1,27 @@
+import { jsxs } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/popover/popover.css';
+
+function IDSPopoverBase({ trigger, triggerRef, togglePopover, handleKeyPress, client, expanded = false, className, children, ...props }) {
+    const triggerId = `popover-trigger-${useId()}`;
+    const triggerHandlers = client && togglePopover
+        ? {
+            onClick: togglePopover,
+            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-popover", className), children: [enhancedTrigger, expanded && children] }));
+}
+
+export { IDSPopoverBase };

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

@@ -0,0 +1,19 @@
+import React, { ReactNode, CSSProperties } from "react";
+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;
+    headline?: ReactNode;
+    children?: ReactNode;
+    contentScrollAreaStyle?: CSSProperties;
+    noFocusTrap?: boolean;
+    className?: string;
+    srCloseText?: string;
+    closePopover?: () => void;
+    contentRef?: React.Ref<HTMLDivElement>;
+    scrollAreaRef?: React.Ref<HTMLDivElement>;
+    noScrollAreaFocus?: boolean;
+    client?: boolean;
+}
+export declare const IDSPopoverContent: React.ForwardRefExoticComponent<IDSPopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/popover/popover-content.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, 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) => {
+    const contentId = `popover-content-${useId()}`;
+    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}`, {
+            "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] }) })] }));
+});
+IDSPopoverContent.displayName = "IDSPopoverContent";
+
+export { IDSPopoverContent };

package/components/popover/popover.d.ts

@@ -1,20 +1,19 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/popover/popover.css";
-import "@inera/ids-design/components/popover/popover-content.css";
-export type PopoverPosition = "top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom";
+import React from "react";
+import { PopoverPosition } from "./popover-content";
 interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     position?: PopoverPosition;
     category?: string;
-    trigger: ReactNode;
+    trigger: React.ReactNode;
     maxWidth?: number;
     maxHeight?: number;
     show?: boolean;
     noFocusTrap?: boolean;
     autoFocus?: boolean;
     srCloseText?: string;
+    noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
-    headline?: ReactNode;
-    children?: ReactNode;
+    headline?: React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare const IDSPopover: React.FC<IDSPopoverProps>;
+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 {};

package/components/popover/popover.js

@@ -1,87 +1,84 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import '@inera/ids-design/components/popover/popover.css';
-import '@inera/ids-design/components/popover/popover-content.css';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { IDSPopoverBase } from './popover-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
-import clsx from 'clsx';
-import { useElementId } from '../utils/hooks/useElementId.js';
+import { IDSPopoverContent } from './popover-content.js';
 
-const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange, ...props }) => {
-    const contentId = useElementId();
-    const [isVisible, setIsVisible] = useState(show);
-    const [popoverContentStyle, setPopoverContentStyle] = useState({
-        position: "absolute",
-        maxWidth: `${maxWidth}px`,
-        maxHeight: `${maxHeight}px`,
-        boxSizing: "initial"
-    });
-    const [popoverContentWrapperStyle, setPopoverContentWrapperStyle] = useState({
-        height: "100%"
-    });
+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 contentWrapperRef = useRef(null);
-    const popoverContentRef = useRef(null);
-    useFocusTrap(popoverContentRef.current, isVisible && !noFocusTrap);
-    const handleVisibilityChange = (isVisible) => {
-        setIsVisible(isVisible);
-        onVisibilityChange?.(isVisible);
+    const contentRef = useRef(null);
+    const scrollAreaRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(show);
+    const [contentScrollAreaStyle, setPopoverScrollAreaStyle] = useState({ height: "100%" });
+    useFocusTrap(contentRef.current, isExpanded && !noFocusTrap);
+    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 === " ") {
+            e.preventDefault();
+            togglePopover();
+        }
+    };
     useEffect(() => {
-        const wrapper = popoverRef.current;
-        if (!wrapper)
+        if (!isExpanded)
             return;
-        const observer = new MutationObserver(mutations => {
-            for (const mutation of mutations) {
-                if (mutation.type === "attributes" &&
-                    mutation.attributeName === "data-show" &&
-                    !wrapper.hasAttribute("data-show")) {
-                    closePopover();
-                }
-            }
-        });
-        observer.observe(wrapper, {
-            attributes: true,
-            attributeFilter: ["data-show"]
-        });
-        return () => observer.disconnect();
-    }, [closePopover]);
-    const showPopover = useCallback(() => {
-        if (category) {
-            const others = document.querySelectorAll(`[data-popover-category="${category}"]`);
-            others.forEach(el => {
-                if (el !== popoverRef.current) {
-                    el.removeAttribute("data-show");
-                }
+        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`
             });
         }
-        handleVisibilityChange(true);
-    }, [category]);
-    const togglePopover = (e) => {
-        e.preventDefault();
-        isVisible ? closePopover() : showPopover();
-    };
-    const handleEsc = (e) => {
-        if (e.key === "Escape" && isVisible) {
-            closePopover();
+        else {
+            setPopoverScrollAreaStyle({
+                height: "100%"
+            });
         }
-    };
-    const handleTriggerKeyDown = (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (!isVisible) {
-                showPopover();
+    }, [scrollAreaRef, isExpanded, maxHeight]);
+    // Send events if you have a category and open the popup
+    useEffect(() => {
+        if (!category || !isExpanded)
+            return;
+        const event = new CustomEvent("ids-popover-toggle", {
+            detail: { category, source: popoverRef.current }
+        });
+        window.dispatchEvent(event);
+    }, [isExpanded, category]);
+    // Listen for other popovers opening in same category
+    useEffect(() => {
+        const handleOtherPopoverToggle = (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);
+        };
+    }, [category]);
     useEffect(() => {
-        if (isVisible && autoFocus) {
-            const wrapper = contentWrapperRef.current;
+        if (isExpanded && autoFocus) {
+            const wrapper = scrollAreaRef.current;
             const focusAnchor = wrapper.querySelector(".ids-focus-anchor");
             if (focusAnchor) {
                 focusAnchor.focus();
@@ -96,99 +93,8 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
                 wrapper.focus();
             }
         }
-    }, [isVisible, autoFocus]);
-    useEffect(() => {
-        if (!isVisible)
-            return;
-        document.addEventListener("keydown", handleEsc);
-        return () => document.removeEventListener("keydown", handleEsc);
-    }, [isVisible]);
-    useEffect(() => {
-        if (contentWrapperRef.current) {
-            const contentWrapperHeight = contentWrapperRef.current.getBoundingClientRect().height;
-            if (contentWrapperHeight >= maxHeight - 40) {
-                setPopoverContentWrapperStyle({
-                    height: `${maxHeight - 40}px`,
-                    paddingRight: "1rem"
-                });
-            }
-            else {
-                setPopoverContentWrapperStyle({
-                    height: "100%",
-                    paddingRight: "0.25rem"
-                });
-            }
-        }
-    }, [contentWrapperRef, isVisible]);
-    useEffect(() => {
-        const content = popoverContentRef?.current;
-        if (!content)
-            return;
-        const width = content.offsetWidth;
-        const height = content.offsetHeight;
-        const triggerWidth = triggerRef.current.offsetWidth;
-        const triggerHeight = triggerRef.current.offsetHeight;
-        let top, left, right, bottom;
-        if (position === "top") {
-            left = `-${width / 2 - triggerWidth / 2}px`;
-            bottom = `calc(100% + 0.875rem)`;
-        }
-        if (position === "top-right") {
-            right = "0";
-            bottom = `calc(100% + 0.875rem)`;
-        }
-        if (position === "top-left") {
-            left = "0";
-            bottom = `calc(100% + 0.875rem)`;
-        }
-        if (position === "right") {
-            left = `calc(100% + 0.875rem)`;
-            top = `-${height / 2 - triggerHeight / 2}px`;
-        }
-        if (position === "right-top") {
-            left = `calc(100% + 0.875rem)`;
-            bottom = "0";
-        }
-        if (position === "right-bottom") {
-            left = `calc(100% + 0.875rem)`;
-            top = "0";
-        }
-        if (position === "bottom") {
-            left = `-${width / 2 - triggerWidth / 2}px`;
-            top = `calc(100% + 0.875rem)`;
-        }
-        if (position === "bottom-right") {
-            right = "0";
-            top = `calc(100% + 0.875rem)`;
-        }
-        if (position === "bottom-left") {
-            left = `-8px`;
-            top = `calc(100% + 0.875rem)`;
-        }
-        if (position === "left") {
-            right = `calc(100% + 0.875rem)`;
-            top = `-${height / 2 - triggerHeight / 2}px`;
-        }
-        if (position === "left-top") {
-            right = `calc(100% + 0.875rem)`;
-            bottom = "0";
-        }
-        if (position === "left-bottom") {
-            right = `calc(100% + 0.875rem)`;
-            top = "0";
-        }
-        setPopoverContentStyle(prev => ({
-            ...prev,
-            top: top ?? undefined,
-            left: left ?? undefined,
-            right: right ?? undefined,
-            bottom: bottom ?? undefined
-        }));
-    }, [position, isVisible]);
-    const renderCaret = (pos) => {
-        return (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("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible && { "data-show": "true" }), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "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", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
-};
+    }, [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, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, position: position, srCloseText: srCloseText, closePopover: closePopover, contentScrollAreaStyle: contentScrollAreaStyle, noFocusTrap: noFocusTrap, children: children }) }) }));
+}
 
 export { IDSPopover };

package/components/progressbar/progressbar.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/progressbar/progressbar.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/progressbar/progressbar.css';
 
 function IDSProgressbar({ 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", "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)` } }) })] }));
+    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";
 

package/components/puff-list/{puff-list-item/puff-list-item-date.d.ts → puff-list-item-date.d.ts}

@@ -1,5 +1,4 @@
 import React from "react";
-import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListItemDateProps extends React.HTMLAttributes<HTMLDivElement> {
     date?: Date | null;
     showTime?: boolean;

package/components/puff-list/{puff-list-item/puff-list-item-date.js → puff-list-item-date.js}

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/puff-list/puff-list.css';
-import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
+import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 
 function IDSPuffListItemDate({ date, showTime = false, day = 0, year = 0, month = 0, monthLabel = "", time = "", ...props }) {
     const getDay = () => getDayAsText(date ? date.getDate() : day);
@@ -17,7 +16,7 @@ function IDSPuffListItemDate({ date, showTime = false, day = 0, year = 0, month
         }
         return "";
     };
-    return (jsxs("span", { className: "ids-puff-list-item__date", ...props, children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] }));
+    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() })] }));
 }
 
 export { IDSPuffListItemDate };

package/components/puff-list/{puff-list-item/puff-list-item-header.d.ts → puff-list-item-header.d.ts}

@@ -4,7 +4,7 @@ export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHea
     headlineExtra?: ReactNode;
     noMargin?: boolean;
 }
-export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, className, children, ...props }: IDSPuffListItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, children, ...props }: IDSPuffListItemHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSPuffListItemHeader {
     var displayName: string;
 }

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSPuffListItemHeader({ headlineLevel = 2, headlineExtra, noMargin = false, children, ...props }) {
+    const Tag = `h${headlineLevel}`;
+    return (jsxs(Tag, { ...props, className: clsx("ids-puff-list-item-header__headline", {
+            "ids-puff-list-item-header__headline--no-margin": noMargin
+        }), children: [children, headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
+}
+IDSPuffListItemHeader.displayName = "IDSPuffListItemHeader";
+
+export { IDSPuffListItemHeader };