@inera/ids-react 9.3.0 → 9.4.0

package/components/message-avatar/message-avatar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "@inera/ids-design/components/message-avatar/message-avatar.css";
+export interface IDSMessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    user?: 1 | 2;
+    icon?: string;
+    label?: string;
+    subtitle?: string;
+}
+export declare function IDSMessageAvatar({ user, icon, label, subtitle, children, className, ...props }: IDSMessageAvatarProps): React.JSX.Element;
+export declare namespace IDSMessageAvatar {
+    var displayName: string;
+}

package/components/message-avatar/message-avatar.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/message-avatar/message-avatar.css';
+
+function IDSMessageAvatar({ user = 1, icon, label, subtitle, children, className, ...props }) {
+    return (jsx("div", { className: clsx(`ids-message-avatar ids-message-avatar--user-${user}`, className), ...props, children: jsxs("div", { className: "ids-message-avatar__inner", children: [!!icon && (jsx("div", { className: "ids-message-avatar__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) })), !!children && jsx("div", { className: "ids-message-avatar__image", children: children }), jsxs("div", { className: "ids-message-avatar__info", children: [!!label && jsx("div", { className: "ids-message-avatar__label", children: label }), !!subtitle && jsx("div", { className: "ids-message-avatar__subtitle", children: subtitle })] })] }) }));
+}
+IDSMessageAvatar.displayName = "IDSMessageAvatar";
+
+export { IDSMessageAvatar };

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

@@ -11,7 +11,7 @@ export interface IDSMobileMenuItemBaseProps extends React.HTMLAttributes<HTMLDiv
     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;
+export declare function IDSMobileMenuItemBase({ level, secondary, expanded, headline, link, active, showText, hideText, onToggleMenu, className, children, client, ...props }: IDSMobileMenuItemBaseProps): React.JSX.Element;
 export declare namespace IDSMobileMenuItemBase {
     var displayName: string;
 }

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

@@ -1,10 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
+import { IDSMobileMenuItemLink } from './mobile-item-link.js';
 
 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
+    const toggleHandlers = client && onToggleMenu
         ? {
             onClick: onToggleMenu
         }
@@ -19,28 +20,7 @@ function IDSMobileMenuItemBase({ level = 1, secondary = false, expanded = false,
                 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 })] }));
+    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: jsx(IDSMobileMenuItemLink, { subItemId: subItemId, level: level, hasChildren: !!children, toggleHandlers: toggleHandlers, expanded: expanded, headline: headline, link: link, srShowText: showText, srHideText: hideText }) }), jsx("div", { id: subItemId, className: "ids-mobile-menu-item__sub-items", children: children })] }));
 }
 IDSMobileMenuItemBase.displayName = "IDSMobileMenuItemBase";
 

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export interface IDSMobileMenuItemLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+    subItemId?: string;
+    level?: number;
+    hasChildren?: boolean;
+    expanded?: boolean;
+    headline?: string;
+    link?: ReactNode;
+    srShowText?: string;
+    srHideText?: string;
+    toggleHandlers?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export declare function IDSMobileMenuItemLink({ subItemId, hasChildren, level, expanded, headline, link, srShowText, srHideText, toggleHandlers }: IDSMobileMenuItemLinkProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+export declare namespace IDSMobileMenuItemLink {
+    var displayName: string;
+}

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

@@ -0,0 +1,27 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSMobileMenuItemLink({ subItemId, hasChildren, level = 1, expanded = false, headline = "", link, srShowText, srHideText, toggleHandlers }) {
+    const chevronAriaLabel = expanded ? srHideText : srShowText;
+    const commonProps = {
+        "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
+        }),
+        ...toggleHandlers
+    };
+    if (headline) {
+        return jsx("button", { ...commonProps, children: headline });
+    }
+    else if (link && hasChildren) {
+        return (jsxs(Fragment, { children: [link, jsx("button", { ...commonProps, "aria-label": chevronAriaLabel })] }));
+    }
+    else {
+        return link;
+    }
+}
+IDSMobileMenuItemLink.displayName = "IDSMobileMenuItemLink";
+
+export { IDSMobileMenuItemLink };

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

@@ -3,7 +3,7 @@ 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;
+export declare function IDSMobileMenuItem({ expanded, level, onToggleMenu, className, children, ...rest }: IDSMobileMenuItemProps): React.JSX.Element;
 export declare namespace IDSMobileMenuItem {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ 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;
+export declare function IDSMobileMenu({ variation, children, className, ...props }: IDSMobileMenuProps): import("react").JSX.Element;
 export declare namespace IDSMobileMenu {
     var displayName: string;
 }

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+export interface IDSNavigationContentItemBaseProps extends React.HTMLAttributes<HTMLElement> {
+    selected?: boolean;
+    expanded?: boolean;
+    level?: number;
+    showText?: string;
+    hideText?: string;
+    client?: boolean;
+    link?: ReactNode;
+    onToggleItem?: () => void;
+}
+export declare function IDSNavigationContentItemBase({ selected, expanded, level, showText, hideText, link, client, onToggleItem, className, children, ...props }: IDSNavigationContentItemBaseProps): React.JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSNavigationContentItemBase({ selected = false, expanded = false, level = 1, showText = "Expandera", hideText = "Minimera", link, client, onToggleItem, className, children, ...props }) {
+    const subItemId = `navigation-content-sub-items-${useId()}`;
+    const toggleHandler = client && onToggleItem
+        ? {
+            onClick: onToggleItem
+        }
+        : {};
+    return (jsxs("li", { className: clsx("ids-navigation-content-item", { "ids-navigation-content-item--expanded": expanded }, className), ...props, children: [jsxs("div", { className: clsx("ids-navigation-content-item__item", `ids-navigation-content-item__item--level-${level}`, {
+                    "ids-navigation-content-item__item--selected": selected
+                }), children: [jsx("div", { className: "ids-navigation-content-item__link", children: link }), !!children && (jsx("button", { type: "button", "aria-label": expanded ? hideText : showText, "aria-expanded": expanded, "aria-controls": subItemId, className: "ids-navigation-content-item__expand-btn", ...toggleHandler }))] }), !!children && (jsx("ul", { id: subItemId, className: "ids-navigation-content-item__sub-items", children: children }))] }));
+}
+
+export { IDSNavigationContentItemBase };

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", { 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] }) })] }));
+        }), 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

@@ -16,7 +16,7 @@ interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: React.ReactNode;
     children?: React.ReactNode;
 }
-export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, zIndex, 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/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

@@ -4,7 +4,7 @@ export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHea
     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

@@ -11,7 +11,7 @@ export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement>
     extra?: ReactNode;
     noListItem?: boolean;
 }
-export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, noListItem, 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.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;
 }