@inera/ids-react 9.2.2 → 9.4.0

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

@@ -66,7 +66,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, noCloseBu
     }, [srLabel]);
     useEffect(() => {
         const handleBodyScroll = () => {
-            if (visible && window.innerWidth <= 1024) {
+            if (visible && !noCloseButton && window.innerWidth <= 1024) {
                 document.body.style.overflow = "hidden";
             }
             else {
@@ -79,23 +79,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, noCloseBu
             window.removeEventListener("resize", handleBodyScroll);
             document.body.style.overflow = ""; // cleanup on unmount
         };
-    }, [visible]);
-    useEffect(() => {
-        const handleBodyScroll = () => {
-            if (visible && window.innerWidth <= 1024) {
-                document.body.style.overflow = "hidden";
-            }
-            else {
-                document.body.style.overflow = "";
-            }
-        };
-        handleBodyScroll();
-        window.addEventListener("resize", handleBodyScroll);
-        return () => {
-            window.removeEventListener("resize", handleBodyScroll);
-            document.body.style.overflow = ""; // cleanup on unmount
-        };
-    }, [visible]);
+    }, [visible, noCloseButton]);
     return (jsx(IDSSidePanelBase, { ...props, ref: componentRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noCloseButton: noCloseButton, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: closePanel, onTogglePanel: togglePanel, hamburgerRef: hamburgerRef, children: children }));
 }
 IDSSidePanel.displayName = "IDSSidePanel";

package/components/stepper/step-base.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleStep?: (step: string, expanded: boolean) => void;
     client?: boolean;
 }
-export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step-base.js

@@ -1,14 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/stepper/stepper.css';
+import { IDSStepIndicator } from './step-indicator.js';
 
 const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", expanded = false, disabled = false, onToggleStep, client, className, children, ...props }, ref) => {
-    const renderStepIndicator = () => {
-        if (state === "valid" || state === "invalid")
-            return null;
-        return stepNumber;
-    };
+    const childId = useId();
     const handleKeyPress = (e) => {
         if (!onToggleStep)
             return;
@@ -23,11 +20,11 @@ const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber =
             onKeyDown: handleKeyPress
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("div", { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("button", { ref: ref, type: "button", disabled: disabled, tabIndex: disabled ? -1 : undefined, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
-                }), "aria-expanded": expanded, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [headline && jsx("div", { className: "ids-step__headline", children: headline }), label && jsx("div", { className: "ids-step__subtitle", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
+                }), "aria-expanded": expanded, "aria-controls": childId, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx(IDSStepIndicator, { state: state, stepNumber: stepNumber, srIndicatorText: srIndicatorText }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [headline && jsx("div", { className: "ids-step__headline", children: headline }), label && jsx("div", { className: "ids-step__subtitle", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded
-                                    }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
+                                    }) })] })] }) }), jsx("div", { id: childId, className: clsx("ids-step__content", {
                     "ids-step__content--expanded": expanded
                 }), children: children })] }));
 });

package/components/stepper/step-indicator.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { StepState } from "./step-base";
+export interface IDSStepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: StepState;
+    stepNumber?: string;
+    srIndicatorText?: string;
+}
+export declare function IDSStepIndicator({ state, stepNumber, srIndicatorText }: IDSStepIndicatorProps): React.JSX.Element;
+export declare namespace IDSStepIndicator {
+    var displayName: string;
+}

package/components/stepper/step-indicator.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+function IDSStepIndicator({ state = "", stepNumber = "", srIndicatorText = "" }) {
+    return (jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: state !== "valid" && state !== "invalid" && stepNumber }));
+}
+IDSStepIndicator.displayName = "IDSStepIndicator";
+
+export { IDSStepIndicator };

package/components/stepper/step.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepProps extends React.HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step.js

@@ -1,22 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { IDSStepBase } from './step-base.js';
 
 const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIndicatorText = "", expanded = false, disabled = false, onToggleStep, onExpanded, onClosed, className, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const stepRef = React.useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // Merge forwarded + local ref
-    const mergedRef = (node) => {
-        stepRef.current = node;
-        if (typeof ref === "function")
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     const handleToggleStep = () => {
         if (disabled)
             return;
@@ -27,7 +18,7 @@ const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIn
             return next;
         });
     };
-    return (jsx(IDSStepBase, { client: true, ref: mergedRef, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
+    return (jsx(IDSStepBase, { client: true, ref: ref, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
 });
 IDSStep.displayName = "IDSStep";
 

package/components/stepper/stepper.d.ts

@@ -4,7 +4,7 @@ export interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactElement<IDSStepProps>[] | ReactElement<IDSStepProps>;
     onToggleStep?: (step: string, expanded: boolean) => void;
 }
-export declare function IDSStepper({ children, onToggleStep, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSStepper({ children, onToggleStep, className, ...props }: IDSStepperProps): React.JSX.Element;
 export declare namespace IDSStepper {
     var displayName: string;
 }

package/components/tabs/tab-link.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import clsx from 'clsx';
 
 const IDSTabLink = forwardRef(({ label, index = "", href, id = "", panelId = "", selected = false, icon = "", notification, onKeyDown, className, ...props }, ref) => {
-    return (jsx("a", { ...props, ref: ref, href: href, id: id, role: "tab", "aria-selected": selected, "aria-controls": panelId, className: clsx("ids-tab", { "ids-tab--selected": selected }, className), onKeyDown: onKeyDown, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification] }) }));
+    return (jsx("a", { ...props, ref: ref, href: href, id: id, role: "tab", "aria-selected": selected, "aria-controls": panelId, className: clsx("ids-tab", { "ids-tab--selected": selected }, className), onKeyDown: onKeyDown, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon}`, "aria-hidden": "true" }), label, notification] }) }));
 });
 IDSTabLink.displayName = "IDSTabLink";
 

package/components/tabs/tab.js

@@ -9,7 +9,7 @@ const IDSTab = forwardRef(({ label, index = "", id = "", panelId = "", selected
             onTabClick?.(index);
         }
     };
-    return (jsx("div", { ...props, ref: ref, id: id, role: "tab", "aria-selected": selected, "aria-controls": panelId, tabIndex: selected ? 0 : -1, className: clsx("ids-tab", { "ids-tab--selected": selected }, className), onKeyDown: onKeyDown, onClick: handleClick, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification && jsx("span", { className: "ids-tab-extra", children: notification })] }) }));
+    return (jsx("div", { ...props, ref: ref, id: id, role: "tab", "aria-selected": selected, "aria-controls": panelId, tabIndex: selected ? 0 : -1, className: clsx("ids-tab", { "ids-tab--selected": selected }, className), onKeyDown: onKeyDown, onClick: handleClick, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon}`, "aria-hidden": "true" }), label, notification && jsx("span", { className: "ids-tab-extra", children: notification })] }) }));
 });
 IDSTab.displayName = "IDSTab";
 

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

@@ -11,7 +11,7 @@ interface IDSTabsBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     tabs?: ReactElement<IDSTabProps>[];
     select?: ReactNode;
 }
-export declare function IDSTabsBase({ unresponsive, light, compact, breakpoint, selectLabel, tabs, className, children, select, ...props }: IDSTabsBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTabsBase({ unresponsive, light, compact, breakpoint, selectLabel, tabs, className, children, select, ...props }: IDSTabsBaseProps): React.JSX.Element;
 export declare namespace IDSTabsBase {
     var displayName: string;
 }

package/components/tabs/tabs.d.ts

@@ -9,7 +9,7 @@ export interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     breakpoint?: "m" | "s";
     selectLabel?: string;
 }
-export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, className, onTabChange, ...props }: IDSTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, className, onTabChange, ...props }: IDSTabsProps): React.JSX.Element;
 export declare namespace IDSTabs {
     var displayName: string;
 }

package/components/tag/tag.js

@@ -1,12 +1,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, memo } from 'react';
+import { forwardRef, isValidElement, cloneElement, memo } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tag/tag.css';
 
 const IDSTagMemo = forwardRef(({ clickable, closeButton, className, children, ...props }, ref) => {
-    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && jsx("span", { className: "ids-tag__close-btn", children: closeButton })] }) }));
+    // TODO remove ids-tag__close-btn and let the user supply a IDSControlButton in 10.0
+    const closeButtonElement = isValidElement(closeButton)
+        ? cloneElement(closeButton, {
+            className: clsx("ids-tag__close-btn", closeButton.props.className)
+        })
+        : closeButton;
+    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && closeButtonElement] }) }));
 });
 IDSTagMemo.displayName = "IDSTag";
 const IDSTag = memo(IDSTagMemo);
+IDSTag.displayName = "IDSTag";
 
 export { IDSTag };

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

@@ -7,12 +7,10 @@ export interface IDSTooltipBaseProps extends React.HTMLAttributes<HTMLSpanElemen
     translateX?: string;
     translateY?: string;
     trigger: ReactNode;
-    triggerIsIcon?: boolean;
     triggerRef?: React.Ref<HTMLSpanElement>;
     tooltipContentRef?: React.Ref<HTMLSpanElement>;
-    isHidden?: boolean;
 }
-export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerRef, tooltipContentRef, className, children, ...props }: IDSTooltipBaseProps): React.JSX.Element;
 export declare namespace IDSTooltipBase {
     var displayName: string;
 }

package/components/tooltip/tooltip-base.js

@@ -1,18 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from 'react';
+import { useId, isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tooltip/tooltip.css';
 
-function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }) {
+function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerRef, tooltipContentRef, className, children, ...props }) {
     const tooltipId = `tooltip-${useId()}`;
-    const ariaHandler = triggerIsIcon
-        ? {
-            "aria-labelledby": tooltipId
-        }
-        : {
-            "aria-describedby": tooltipId
-        };
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...ariaHandler, ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", hidden: isHidden, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
+    const ariaHandler = {
+        "aria-describedby": tooltipId
+    };
+    const triggerElement = isValidElement(trigger)
+        ? (() => {
+            const element = trigger;
+            return cloneElement(element, {
+                "aria-describedby": clsx(element.props["aria-describedby"], tooltipId)
+            });
+        })()
+        : trigger;
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...(!isValidElement(trigger) ? ariaHandler : {}), ref: triggerRef, children: triggerElement }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
 }
 IDSTooltipBase.displayName = "IDSTooltipBase";
 

package/components/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import { IDSTooltipBaseProps } from "./tooltip-base";
 export interface IDSTooltipProps extends Omit<IDSTooltipBaseProps, "translateX" | "translateY"> {
 }
-export declare function IDSTooltip({ position, maxWidth, trigger, className, ...props }: IDSTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTooltip({ position, maxWidth, trigger, className, ...props }: IDSTooltipProps): import("react").JSX.Element;
 export declare namespace IDSTooltip {
     var displayName: string;
 }

package/components/tooltip/tooltip.js

@@ -5,17 +5,9 @@ import { IDSTooltipBase } from './tooltip-base.js';
 
 function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }) {
     const [internalMaxWidth, setInternalMaxWidth] = useState(maxWidth);
-    const [triggerIsIcon, setTriggerIsIcon] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
     const tooltipContentRef = useRef(null);
     const triggerRef = useRef(null);
     const hasUpdatedMaxWidthRef = useRef(false);
-    const getFirstFocusableContent = () => {
-        const wrapper = triggerRef.current?.parentElement;
-        if (!wrapper)
-            return null;
-        return wrapper.querySelector('ids-button button, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    };
     const handleXOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
         const trigger = triggerRef.current;
@@ -56,15 +48,6 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             document.activeElement?.blur();
         }
     };
-    useEffect(() => {
-        const tooltipContent = tooltipContentRef.current;
-        if (!tooltipContent)
-            return;
-        const focusable = getFirstFocusableContent();
-        if (focusable) {
-            setTriggerIsIcon(!!triggerRef.current?.querySelector('[class^="ids-icon-"]'));
-        }
-    }, []);
     useEffect(() => {
         const tooltipContent = tooltipContentRef.current;
         if (!tooltipContent)
@@ -94,30 +77,7 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleXOverflow);
         };
     }, [triggerRef]);
-    const isTooltipVisible = () => {
-        const tooltip = tooltipContentRef.current;
-        if (!tooltip)
-            return false;
-        const style = getComputedStyle(tooltip);
-        return style.visibility !== "hidden" && style.display !== "none" && style.opacity !== "0";
-    };
-    useEffect(() => {
-        const triggerEl = triggerRef.current;
-        if (!triggerEl)
-            return;
-        const updateVisibility = () => setIsVisible(isTooltipVisible());
-        triggerEl.addEventListener("mouseenter", updateVisibility);
-        triggerEl.addEventListener("mouseleave", updateVisibility);
-        triggerEl.addEventListener("focusin", updateVisibility); // <-- replaces focus
-        triggerEl.addEventListener("focusout", updateVisibility); // <-- replaces blur
-        return () => {
-            triggerEl.removeEventListener("mouseenter", updateVisibility);
-            triggerEl.removeEventListener("mouseleave", updateVisibility);
-            triggerEl.removeEventListener("focusin", updateVisibility);
-            triggerEl.removeEventListener("focusout", updateVisibility);
-        };
-    }, [triggerRef.current]);
-    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, triggerIsIcon: triggerIsIcon, className: className, triggerRef: triggerRef, isHidden: !isVisible, tooltipContentRef: tooltipContentRef }));
+    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, className: className, triggerRef: triggerRef, tooltipContentRef: tooltipContentRef }));
 }
 IDSTooltip.displayName = "IDSTooltip";
 

package/components/utils/utils.js

@@ -1,5 +1,4 @@
 const breakPoints = {
-    small: 640,
     medium: 1024
 };
 const getDayAsText = (day) => {

package/index.d.ts

@@ -27,6 +27,7 @@ export * from "./components/form/toggle/toggle";
 export * from "./components/form/darkmode-toggle/darkmode-toggle";
 export * from "./components/form/spinner/spinner";
 export * from "./components/button/button";
+export * from "./components/button/control-button";
 export * from "./components/button/button-group";
 export * from "./components/grid/container";
 export * from "./components/grid/row";
@@ -60,6 +61,7 @@ export * from "./components/breadcrumbs/breadcrumbs";
 export * from "./components/form/datepicker/datepicker";
 export * from "./components/dialog/dialog";
 export * from "./components/dialog/dialog-base";
+export * from "./components/district-selector/district-selector";
 export * from "./components/dropdown/dropdown";
 export * from "./components/dropdown/dropdown-base";
 export * from "./components/dropdown/dropdown-content-link";
@@ -71,6 +73,7 @@ export * from "./components/popover/popover-content";
 export * from "./components/progressbar/progressbar";
 export * from "./components/badge/badge";
 export * from "./components/notification-badge/notification-badge";
+export * from "./components/message-avatar/message-avatar";
 export * from "./components/link/box-link";
 export * from "./components/side-menu/side-menu";
 export * from "./components/side-menu/side-menu-base";
@@ -80,6 +83,8 @@ export * from "./components/side-panel/side-panel-provider";
 export * from "./components/tooltip/tooltip";
 export * from "./components/tooltip/tooltip-base";
 export * from "./components/navigation-content/navigation-content";
+export * from "./components/navigation-content/navigation-content-item";
+export * from "./components/navigation-content/navigation-content-item-base";
 export * from "./components/carousel/carousel";
 export * from "./components/carousel/carousel-item";
 export * from "./components/tag/tag";
@@ -160,10 +165,17 @@ export * from "./components/header-inera-general/header-inera-general";
 export * from "./components/header-inera-general/header-inera-general-base";
 export * from "./components/header-inera-general/header-inera-general-item";
 export * from "./components/header-inera-general/header-inera-general-item-base";
+export * from "./components/header-inera-general/header-inera-general-avatar";
+export * from "./components/header-inera-general/header-inera-general-avatar-base";
+export * from "./components/header-inera-general/header-inera-general-avatar-mobile";
+export * from "./components/header-inera-general/header-inera-general-avatar-mobile-base";
 export * from "./components/header-inera-general/header-inera-general-nav";
 export * from "./components/header-inera-general/header-inera-general-nav-base";
+export * from "./components/header-inera-general/header-inera-general-nav-mobile";
 export * from "./components/header-inera-general/header-inera-general-nav-item";
 export * from "./components/header-inera-general/header-inera-general-nav-item-base";
+export * from "./components/header-inera-general/header-inera-general-nav-item-mobile";
+export * from "./components/header-inera-general/header-inera-general-nav-item-mobile-base";
 export * from "./components/header-inera-general/header-inera-general-menu-mobile";
 export * from "./components/header-inera-general/header-inera-general-menu-mobile-base";
 export * from "./components/header-inera-admin/header-inera-admin";

package/index.js

@@ -27,6 +27,7 @@ export { IDSToggle } from './components/form/toggle/toggle.js';
 export { IDSDarkmodeToggle } from './components/form/darkmode-toggle/darkmode-toggle.js';
 export { IDSSpinner } from './components/form/spinner/spinner.js';
 export { IDSButton } from './components/button/button.js';
+export { IDSControlButton } from './components/button/control-button.js';
 export { IDSButtonGroup } from './components/button/button-group.js';
 export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';
@@ -60,6 +61,7 @@ export { IDSBreadcrumbs } from './components/breadcrumbs/breadcrumbs.js';
 export { IDSDatePicker } from './components/form/datepicker/datepicker.js';
 export { IDSDialog } from './components/dialog/dialog.js';
 export { IDSDialogBase } from './components/dialog/dialog-base.js';
+export { IDSDistrictSelector } from './components/district-selector/district-selector.js';
 export { IDSDropdown } from './components/dropdown/dropdown.js';
 export { IDSDropdownBase } from './components/dropdown/dropdown-base.js';
 export { IDSDropdownContentLink } from './components/dropdown/dropdown-content-link.js';
@@ -71,6 +73,7 @@ export { IDSPopoverContent } from './components/popover/popover-content.js';
 export { IDSProgressbar } from './components/progressbar/progressbar.js';
 export { IDSBadge } from './components/badge/badge.js';
 export { IDSNotificationBadge } from './components/notification-badge/notification-badge.js';
+export { IDSMessageAvatar } from './components/message-avatar/message-avatar.js';
 export { IDSBoxLink } from './components/link/box-link.js';
 export { IDSSideMenu } from './components/side-menu/side-menu.js';
 export { IDSSideMenuBase } from './components/side-menu/side-menu-base.js';
@@ -80,6 +83,8 @@ export { IDSSidePanelProvider } from './components/side-panel/side-panel-provide
 export { IDSTooltip } from './components/tooltip/tooltip.js';
 export { IDSTooltipBase } from './components/tooltip/tooltip-base.js';
 export { IDSNavigationContent } from './components/navigation-content/navigation-content.js';
+export { IDSNavigationContentItem } from './components/navigation-content/navigation-content-item.js';
+export { IDSNavigationContentItemBase } from './components/navigation-content/navigation-content-item-base.js';
 export { IDSCarousel } from './components/carousel/carousel.js';
 export { IDSCarouselItem } from './components/carousel/carousel-item.js';
 export { IDSTag } from './components/tag/tag.js';
@@ -160,10 +165,17 @@ export { IDSHeaderIneraGeneral } from './components/header-inera-general/header-
 export { IDSHeaderIneraGeneralBase } from './components/header-inera-general/header-inera-general-base.js';
 export { IDSHeaderIneraGeneralItem } from './components/header-inera-general/header-inera-general-item.js';
 export { IDSHeaderIneraGeneralItemBase } from './components/header-inera-general/header-inera-general-item-base.js';
+export { IDSHeaderIneraGeneralAvatar } from './components/header-inera-general/header-inera-general-avatar.js';
+export { IDSHeaderIneraGeneralAvatarBase } from './components/header-inera-general/header-inera-general-avatar-base.js';
+export { IDSHeaderIneraGeneralAvatarMobile } from './components/header-inera-general/header-inera-general-avatar-mobile.js';
+export { IDSHeaderIneraGeneralAvatarMobileBase } from './components/header-inera-general/header-inera-general-avatar-mobile-base.js';
 export { IDSHeaderIneraGeneralNav } from './components/header-inera-general/header-inera-general-nav.js';
 export { IDSHeaderIneraGeneralNavBase } from './components/header-inera-general/header-inera-general-nav-base.js';
+export { IDSHeaderIneraGeneralNavMobile } from './components/header-inera-general/header-inera-general-nav-mobile.js';
 export { IDSHeaderIneraGeneralNavItem } from './components/header-inera-general/header-inera-general-nav-item.js';
 export { IDSHeaderIneraGeneralNavItemBase } from './components/header-inera-general/header-inera-general-nav-item-base.js';
+export { IDSHeaderIneraGeneralNavItemMobile } from './components/header-inera-general/header-inera-general-nav-item-mobile.js';
+export { IDSHeaderIneraGeneralNavItemMobileBase } from './components/header-inera-general/header-inera-general-nav-item-mobile-base.js';
 export { IDSHeaderIneraGeneralMenuMobile } from './components/header-inera-general/header-inera-general-menu-mobile.js';
 export { IDSHeaderIneraGeneralMenuMobileBase } from './components/header-inera-general/header-inera-general-menu-mobile-base.js';
 export { IDSHeaderIneraAdmin } from './components/header-inera-admin/header-inera-admin.js';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.2.2",
+  "version": "9.4.0",
   "type": "module",
   "peerDependencies": {
     "react": "*",
-    "react-day-picker": "^9.11.3"
+    "react-day-picker": "^9.11.3",
+    "react-dom": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "9.2.x",
+    "@inera/ids-design": "9.4.x",
     "clsx": "*"
   },
   "types": "index.d.ts",