@inera/ids-react 9.2.2 → 9.4.0

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+export interface IDSNavigationContentItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    defaultExpanded?: boolean;
+    link?: ReactNode;
+    level?: number;
+    showText?: string;
+    hideText?: string;
+    onToggleItem?: (isExpanded: boolean) => void;
+}
+export declare function IDSNavigationContentItem({ defaultExpanded, level, onToggleItem, className, children, ...props }: IDSNavigationContentItemProps): React.JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import { IDSNavigationContentItemBase } from './navigation-content-item-base.js';
+
+function IDSNavigationContentItem({ defaultExpanded = false, level = 1, onToggleItem, className, children, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    useEffect(() => {
+        setIsExpanded(defaultExpanded);
+    }, [defaultExpanded]);
+    const handleToggleMenu = () => {
+        if (!!children) {
+            const newValue = !isExpanded;
+            setIsExpanded(newValue);
+            onToggleItem?.(newValue);
+        }
+    };
+    return (jsx(IDSNavigationContentItemBase, { ...props, client: true, expanded: isExpanded, level: level, onToggleItem: handleToggleMenu, className: className, children: React.Children.map(children, child => React.isValidElement(child)
+            ? React.cloneElement(child, {
+                "data-ids-sub-item": true,
+                level: level + 1
+            })
+            : child) }));
+}
+
+export { IDSNavigationContentItem };

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

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

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

@@ -1,15 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useId } from 'react';
 import clsx from 'clsx';
+import { IDSLink } from '../link/link.js';
 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) => {
-        if (!React.isValidElement(link))
-            return link;
-        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: link }, i));
+    const headerId = useId();
+    const linkWrappers = React.Children.map(children, (child, i) => {
+        if (!React.isValidElement(child))
+            return child;
+        if (child.type !== IDSLink)
+            return child;
+        return (jsx("li", { className: "ids-navigation-content__link-wrapper", children: child }, child.key ?? i));
     });
-    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 })] })] }));
+    return (jsx("nav", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), "aria-labelledby": headerId, ...props, children: jsxs("div", { className: "ids-navigation-content__inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: headerId, children: headline })), jsx("ul", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "none" }, children: linkWrappers })] }) }));
 }
 IDSNavigationContent.displayName = "IDSNavigationContent";
 

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

@@ -3,7 +3,7 @@ import "@inera/ids-design/components/navigation-local/navigation-local.css";
 export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
 }
-export declare function IDSNavigationLocal({ headline, className, children, ...props }: IDSNavigationLocalProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSNavigationLocal({ headline, className, children, ...props }: IDSNavigationLocalProps): React.JSX.Element;
 export declare namespace IDSNavigationLocal {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/notification-badge/notification-badge.css';
 
 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] }));
+    return (jsxs("div", { ...rest, className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), children: [icon && jsx("span", { className: `ids-icon-${icon}-small`, "aria-hidden": "true" }), children] }));
 });
 IDSNotificationBadge.displayName = "IDSNotificationBadge";
 

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

@@ -11,7 +11,7 @@ interface IDSPopoverBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
     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 declare function IDSPopoverBase({ trigger, triggerRef, togglePopover, handleKeyPress, client, expanded, className, children, ...props }: IDSPopoverBaseProps): React.JSX.Element;
 export declare namespace IDSPopoverBase {
     var displayName: string;
 }

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

@@ -0,0 +1,9 @@
+import { PopoverPosition } from "./popover-content";
+interface IDSPopoverCaretProps {
+    position?: PopoverPosition;
+}
+export declare function IDSPopoverCaret({ position }: IDSPopoverCaretProps): import("react").JSX.Element;
+export declare namespace IDSPopoverCaret {
+    var displayName: string;
+}
+export {};

package/components/popover/popover-caret.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function IDSPopoverCaret({ position = "bottom" }) {
+    return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${position}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${position}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${position}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${position}` })] }));
+}
+IDSPopoverCaret.displayName = "IDSPopoverCaret";
+
+export { IDSPopoverCaret };

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

@@ -18,7 +18,7 @@ interface IDSPopoverContentProps {
     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 function IDSPopoverContent({ position, caretPosition, srCloseText, headline, contentScrollAreaStyle, noFocusTrap, noScrollAreaFocus, contentRef, scrollAreaRef, closeButtonRef, closePopover, client, children, style }: IDSPopoverContentProps): React.JSX.Element;
 export declare namespace IDSPopoverContent {
     var displayName: string;
 }

package/components/popover/popover-content.js

@@ -2,14 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/popover/popover.css';
+import { IDSPopoverCaret } from './popover-caret.js';
 
 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 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, style: style, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
             "ids-focus-trap": !noFocusTrap
-        }), 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] }) })] }));
+        }), role: "tooltip", id: contentId, "data-position": position, children: [jsx(IDSPopoverCaret, { position: caretPosition }), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { className: "ids-popover-content__close-btn", "aria-label": srCloseText, ...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";
 

package/components/popover/popover.d.ts

@@ -10,12 +10,13 @@ interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     noFocusTrap?: boolean;
     autoFocus?: boolean;
     srCloseText?: string;
+    zIndex?: number;
     noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
     headline?: React.ReactNode;
     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 function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, zIndex, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): React.JSX.Element;
 export declare namespace IDSPopover {
     var displayName: string;
 }

package/components/popover/popover.js

@@ -7,7 +7,7 @@ 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 }) {
+function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", zIndex = 9999, headline, children, className, onVisibilityChange, ...props }) {
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -34,11 +34,6 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
             setTimeout(() => requestAnimationFrame(() => setReady(true)), 100);
         }
     }, [isExpanded]);
-    useLayoutEffect(() => {
-        if (!ready)
-            return;
-        requestAnimationFrame(() => updatePosition());
-    }, [ready]);
     const handleVisibilityChange = (visible) => {
         setIsExpanded(visible);
         onVisibilityChange?.(visible);
@@ -161,16 +156,35 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
         });
     }, [position]);
     useLayoutEffect(() => {
-        if (!isExpanded || !triggerRef.current || !contentRef.current)
+        if (!ready)
             return;
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        window.addEventListener("scroll", updatePosition);
+        requestAnimationFrame(() => updatePosition());
+    }, [ready, updatePosition]);
+    useLayoutEffect(() => {
+        if (!isExpanded)
+            return;
+        const update = () => {
+            requestAnimationFrame(updatePosition);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        if (triggerRef.current)
+            observer.observe(triggerRef.current);
+        if (contentRef.current)
+            observer.observe(contentRef.current);
+        observer.observe(document.documentElement);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        window.visualViewport?.addEventListener("resize", update);
+        window.visualViewport?.addEventListener("scroll", update);
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition);
+            observer.disconnect();
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+            window.visualViewport?.removeEventListener("resize", update);
+            window.visualViewport?.removeEventListener("scroll", update);
         };
-    }, [isExpanded, position]);
+    }, [isExpanded, updatePosition]);
     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: {
@@ -181,7 +195,7 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
                         position: "absolute",
                         top: coords.top,
                         left: coords.left,
-                        zIndex: 9999
+                        zIndex: zIndex
                     }, children: children }), document.body)] }));
 }
 IDSPopover.displayName = "IDSPopover";

package/components/progressbar/progressbar.d.ts

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

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

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

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

@@ -1,10 +1,10 @@
 import React, { ReactNode } from "react";
 export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    headlineLevel?: 2 | 3 | 4 | 5;
+    headlineLevel?: 2 | 3 | 4 | 5 | 6;
     headlineExtra?: ReactNode;
     noMargin?: boolean;
 }
-export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, children, ...props }: IDSPuffListItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, children, ...props }: IDSPuffListItemHeaderProps): React.JSX.Element;
 export declare namespace IDSPuffListItemHeader {
     var displayName: string;
 }

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

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

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

@@ -9,8 +9,9 @@ export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement>
     lean?: boolean;
     dateLabel?: ReactNode;
     extra?: ReactNode;
+    noListItem?: boolean;
 }
-export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, noListItem, className, children, ...props }: IDSPuffListItemProps): React.JSX.Element;
 export declare namespace IDSPuffListItem {
     var displayName: string;
 }

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

@@ -3,8 +3,8 @@ import { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 
-function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, className, children, ...props }) {
-    const Tag = lean ? "div" : "li";
+function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, noListItem, className, children, ...props }) {
+    const Tag = noListItem || lean ? "div" : "li";
     const content = (jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content-wrapper", children: [jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), jsx("div", { className: "ids-puff-list-item-header", children: header }), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] })] }));
     const wrappedContent = itemLink && isValidElement(itemLink)
         ? cloneElement(itemLink, {

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

@@ -3,7 +3,7 @@ import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListProps extends React.HTMLAttributes<HTMLDListElement> {
     children?: ReactNode;
 }
-export declare function IDSPuffList({ children, className, ...props }: IDSPuffListProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffList({ children, className, ...props }: IDSPuffListProps): React.JSX.Element;
 export declare namespace IDSPuffList {
     var displayName: string;
 }

package/components/region-icon/region-icon.d.ts

@@ -7,9 +7,12 @@ export interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement
     colorPreset?: number;
     light?: boolean;
     inline?: boolean;
+    srText?: string;
 }
-export declare function IDSRegionIcon({ name, size, colorPreset, light, inline, className, ...props }: IDSRegionIconProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace IDSRegionIcon {
+declare function IDSRegionIconBase({ name, size, colorPreset, light, // FIXME 10.0 remove
+inline, srText, className, ...props }: IDSRegionIconProps): React.JSX.Element;
+declare namespace IDSRegionIconBase {
     var displayName: string;
 }
+export declare const IDSRegionIcon: React.MemoExoticComponent<typeof IDSRegionIconBase>;
 export {};

package/components/region-icon/region-icon.js

@@ -1,8 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/region-icon/region-icon.css';
 
-function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) {
+function IDSRegionIconBase({ name, size = "m", colorPreset = 1, light = false, // FIXME 10.0 remove
+inline = false, srText = "", className, ...props }) {
     const getSize = () => {
         switch (size) {
             case "l":
@@ -19,8 +21,9 @@ function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inlin
                 return "2.5rem";
         }
     };
-    return (jsx("span", { ...props, className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), style: { fontSize: getSize() } }));
+    return (jsx("span", { ...props, className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), "aria-label": srText || name, style: { fontSize: getSize() } }));
 }
-IDSRegionIcon.displayName = "IDSRegionIcon";
+IDSRegionIconBase.displayName = "IDSRegionIcon";
+const IDSRegionIcon = React.memo(IDSRegionIconBase);
 
 export { IDSRegionIcon };

package/components/side-menu/side-menu-base.d.ts

@@ -15,7 +15,7 @@ interface IDSSideMenuBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     toggleButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSSideMenuBase({ label, srToggleText, expanded, active, level, icon, labelNotification, link, isExpanded, onToggleMenu, handleKeyDown, toggleButtonProps, className, children, client, ...props }: IDSSideMenuBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSideMenuBase({ label, srToggleText, expanded, active, level, icon, labelNotification, link, isExpanded, onToggleMenu, handleKeyDown, toggleButtonProps, className, children, client, ...props }: IDSSideMenuBaseProps): React.JSX.Element;
 export declare namespace IDSSideMenuBase {
     var displayName: string;
 }

package/components/side-menu/side-menu-base.js

@@ -1,41 +1,23 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/side-menu/side-menu.css';
+import { IDSSideMenuLabel } from './side-menu-label.js';
+import { IDSSideMenuToggle } from './side-menu-toggle.js';
 
 function IDSSideMenuBase({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, isExpanded = expanded, onToggleMenu, handleKeyDown, toggleButtonProps, className, children, client = false, ...props }) {
     const hasChildren = !!React.Children.toArray(children).length;
+    const childrenId = useId();
     const toggleHandlers = client && onToggleMenu
         ? {
             onClick: onToggleMenu,
             onKeyDown: handleKeyDown
         }
         : {};
-    const renderExpandButton = () => {
-        if (hasChildren) {
-            return (jsx("button", { className: clsx("ids-side-menu__chevron-button", {
-                    "ids-side-menu__chevron-button--expanded": isExpanded
-                }), ...toggleHandlers, ...toggleButtonProps, "aria-expanded": isExpanded, "aria-label": srToggleText }));
-        }
-        return icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" }));
-    };
-    const renderLabel = () => {
-        if (hasChildren) {
-            return (jsxs("button", { className: "ids-side-menu__label-button", ...toggleHandlers, ...toggleButtonProps, "aria-expanded": isExpanded, "aria-label": srToggleText, children: [jsx("div", { className: clsx("ids-side-menu__label-chevron", {
-                            "ids-side-menu__label-chevron--expanded": isExpanded
-                        }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
-        }
-        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
-    };
-    const renderMenuPost = () => {
-        if (label)
-            return renderLabel();
-        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", onClick: e => e.stopPropagation(), onKeyDown: e => e.code !== "Escape" && e.stopPropagation(), children: link })] }));
-    };
     return (jsxs("div", { className: clsx("ids-side-menu", `ids-side-menu--level-${level}`, className), ...props, children: [jsx("div", { className: clsx("ids-side-menu__header", {
                     "ids-side-menu--active": active,
-                    "ids-side-menu--node-label": hasChildren && label
-                }), children: jsx("div", { className: "ids-side-menu__header-inner", children: renderMenuPost() }) }), isExpanded && jsx("div", { className: "ids-side-menu__children", children: children })] }));
+                    "ids-side-menu__header--node-label": hasChildren && label
+                }), children: jsxs("div", { className: "ids-side-menu__header-inner", children: [label && (jsx(IDSSideMenuLabel, { hasChildren: hasChildren, toggleHandlers: toggleHandlers, toggleButtonProps: toggleButtonProps, expanded: isExpanded, childrenId: childrenId, label: label, icon: icon, labelNotification: labelNotification, srToggleText: srToggleText })), !label && (jsxs(Fragment, { children: [jsx(IDSSideMenuToggle, { hasChildren: hasChildren, childrenId: childrenId, toggleHandlers: toggleHandlers, toggleButtonProps: toggleButtonProps, icon: icon, srToggleText: srToggleText, expanded: isExpanded }), jsx("div", { className: "ids-side-menu__link", onClick: e => e.stopPropagation(), onKeyDown: e => e.code !== "Escape" && e.stopPropagation(), children: link })] }))] }) }), isExpanded && (jsx("div", { className: "ids-side-menu__children", id: childrenId, children: children }))] }));
 }
 IDSSideMenuBase.displayName = "IDSSideMenuBase";
 

package/components/side-menu/side-menu-label.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+interface IDSSideMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: string;
+    label?: string;
+    labelNotification?: ReactNode;
+    srToggleText?: string;
+    expanded?: boolean;
+    hasChildren?: boolean;
+    childrenId?: string;
+    toggleButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    toggleHandlers?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export declare function IDSSideMenuLabel({ label, srToggleText, expanded, icon, labelNotification, hasChildren, childrenId, toggleButtonProps, toggleHandlers }: IDSSideMenuLabelProps): React.JSX.Element;
+export declare namespace IDSSideMenuLabel {
+    var displayName: string;
+}
+export {};

package/components/side-menu/side-menu-label.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSSideMenuLabel({ label = "", srToggleText, expanded = false, icon = "", labelNotification, hasChildren, childrenId, toggleButtonProps, toggleHandlers }) {
+    if (hasChildren) {
+        return (jsxs("button", { className: "ids-side-menu__label-button", ...toggleHandlers, ...toggleButtonProps, "aria-expanded": expanded, "aria-controls": childrenId, "aria-label": srToggleText, children: [jsx("div", { className: clsx("ids-side-menu__label-chevron", {
+                        "ids-side-menu__label-chevron--expanded": expanded
+                    }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
+    }
+    return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
+}
+IDSSideMenuLabel.displayName = "IDSSideMenuLabel";
+
+export { IDSSideMenuLabel };

package/components/side-menu/side-menu-toggle.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface IDSSideMenuToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: string;
+    srToggleText?: string;
+    expanded?: boolean;
+    hasChildren?: boolean;
+    childrenId?: string;
+    toggleButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    toggleHandlers?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export declare function IDSSideMenuToggle({ srToggleText, expanded, icon, hasChildren, toggleButtonProps, toggleHandlers, childrenId }: IDSSideMenuToggleProps): React.JSX.Element;
+export declare namespace IDSSideMenuToggle {
+    var displayName: string;
+}
+export {};

package/components/side-menu/side-menu-toggle.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSSideMenuToggle({ srToggleText, expanded = false, icon = "", hasChildren, toggleButtonProps, toggleHandlers, childrenId }) {
+    if (hasChildren) {
+        return (jsx("button", { className: clsx("ids-side-menu__chevron-button", {
+                "ids-side-menu__chevron-button--expanded": expanded
+            }), ...toggleHandlers, ...toggleButtonProps, "aria-expanded": expanded, "aria-controls": childrenId, "aria-label": srToggleText }));
+    }
+    return icon ? (jsx("div", { className: "ids-side-menu__label-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__chevron-button--empty" }));
+}
+IDSSideMenuToggle.displayName = "IDSSideMenuToggle";
+
+export { IDSSideMenuToggle };

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

@@ -10,7 +10,7 @@ export interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     link?: React.ReactNode;
     onToggleMenu?: (isExpanded: boolean) => void;
 }
-export declare function IDSSideMenu({ expanded, onToggleMenu, srToggleText, className, ...props }: IDSSideMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSideMenu({ expanded, onToggleMenu, srToggleText, className, ...props }: IDSSideMenuProps): React.JSX.Element;
 export declare namespace IDSSideMenu {
     var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/side-panel/side-panel.css';
+import { IDSSidePanelFooter } from './side-panel-footer.js';
 
 const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noCloseButton = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, componentRef, className, children, ...props }, ref) => {
     const [ready, setReady] = React.useState(false);
@@ -23,14 +24,9 @@ const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated =
             onClick: onClosePanel
         }
         : {};
-    const renderFooter = () => {
-        if (menu && footer) {
-            return (jsxs("footer", { className: "ids-side-panel__footer", children: [footerLinks && jsx("div", { className: "ids-side-panel__footer-links", children: footerLinks }), footerDarkmodeToggle && jsx("div", { className: "ids-side-panel__footer-toggle", children: footerDarkmodeToggle }), footerText && jsx("div", { className: "ids-side-panel__footer-text", children: footerText })] }));
-        }
-        return null;
-    };
-    const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
-    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [!noCloseButton && (jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) })), renderContent()] }) }));
+    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: clsx("ids-side-panel__panel", {
+                "ids-side-panel__panel--no-close-button": noCloseButton
+            }), children: [!noCloseButton && (jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) })), jsxs("div", { className: "ids-side-panel__content", tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), menu && footer && (jsx(IDSSidePanelFooter, { footerLinks: footerLinks, footerText: footerText, footerDarkmodeToggle: footerDarkmodeToggle }))] })] }) }));
 });
 IDSSidePanelBase.displayName = "IDSSidePanelBase";
 

package/components/side-panel/side-panel-footer.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface IDSSidePanelFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    footerDarkmodeToggle?: ReactNode;
+    footerLinks?: ReactNode;
+    footerText?: ReactNode;
+}
+export declare function IDSSidePanelFooter({ footerLinks, footerText, footerDarkmodeToggle }: IDSSidePanelFooterProps): React.JSX.Element;
+export declare namespace IDSSidePanelFooter {
+    var displayName: string;
+}

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

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function IDSSidePanelFooter({ footerLinks, footerText, footerDarkmodeToggle }) {
+    return (jsxs("footer", { className: "ids-side-panel__footer", children: [footerLinks && jsx("div", { className: "ids-side-panel__footer-links", children: footerLinks }), footerDarkmodeToggle && jsx("div", { className: "ids-side-panel__footer-toggle", children: footerDarkmodeToggle }), footerText && jsx("div", { className: "ids-side-panel__footer-text", children: footerText })] }));
+}
+IDSSidePanelFooter.displayName = "IDSSidePanelFooter";
+
+export { IDSSidePanelFooter };

package/components/side-panel/side-panel-provider.d.ts

@@ -4,7 +4,7 @@ export interface IDSSidePanelProviderProps extends React.HTMLAttributes<HTMLDivE
     hideSidePanel?: boolean;
     sidePanel: ReactNode;
 }
-export declare function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, children, ...props }: IDSSidePanelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, children, ...props }: IDSSidePanelProviderProps): React.JSX.Element;
 export declare namespace IDSSidePanelProvider {
     var displayName: string;
 }

package/components/side-panel/side-panel.d.ts

@@ -20,7 +20,7 @@ export interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement>
     noScrollAreaFocus?: boolean;
     noCloseButton?: boolean;
 }
-export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, noCloseButton, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, noCloseButton, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react").JSX.Element;
 export declare namespace IDSSidePanel {
     var displayName: string;
 }