@inera/ids-react 8.1.0 → 9.0.0

package/components/tooltip/tooltip.js

@@ -1,46 +1,53 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/tooltip/tooltip.css';
-import { useElementId } from '../utils/hooks/useElementId.js';
-import clsx from 'clsx';
+import { IDSTooltipBase } from './tooltip-base.js';
 
-const IDSTooltip = ({ position = "top", maxWidth = "20rem", trigger, children, className, ...props }) => {
-    const [translateX, setTranslateX] = useState(position === "top" || position === "bottom" ? "-50%" : "0");
-    const [translateY, setTranslateY] = useState(position.includes("top") ? "-100%" : "100%");
+function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }) {
+    const [internalMaxWidth, setInternalMaxWidth] = useState(maxWidth);
+    const [triggerIsIcon, setTriggerIsIcon] = useState(false);
     const tooltipContentRef = useRef(null);
     const triggerRef = useRef(null);
-    const tooltipId = useElementId();
+    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 handleOverflow = () => {
+    const handleXOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
         const trigger = triggerRef.current;
-        if (!tooltipContent || !trigger)
+        if (!tooltipContent || !trigger || !!internalMaxWidth || !!maxWidth)
             return;
-        const rect = tooltipContent.getBoundingClientRect();
-        const triggerHeight = trigger.getBoundingClientRect().height;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        if (rect.right > vw) {
-            tooltipContent.style.left = "auto";
-            tooltipContent.style.right = "0";
-            setTranslateX("0");
-        }
-        if (rect.left < 0) {
-            tooltipContent.style.left = "0";
-            tooltipContent.style.right = "auto";
-            setTranslateX("0");
-        }
-        if (rect.bottom > vh) {
-            setTranslateY(`-${triggerHeight + 16}px`);
-        }
-        if (rect.top < 0) {
-            setTranslateY(`${triggerHeight + 16}px`);
+        if (!hasUpdatedMaxWidthRef.current) {
+            const rect = tooltipContent.getBoundingClientRect();
+            const triggerRect = trigger.getBoundingClientRect();
+            const vw = window.innerWidth;
+            let newMaxWidth;
+            if (rect.x < 0 || rect.x + rect.width > vw) {
+                const triggerRight = vw - triggerRect.x - triggerRect.width;
+                if (rect.x < 0 || rect.x + rect.width > vw) {
+                    if (triggerRect.x < triggerRight) {
+                        newMaxWidth = vw - triggerRect.x;
+                        tooltipContent.style.transform = `translate(0, ${position.includes("top") ? "-100%" : "100%"})`;
+                        tooltipContent.style.left = "0";
+                        tooltipContent.style.right = "auto";
+                    }
+                    else {
+                        newMaxWidth = vw - triggerRight;
+                        tooltipContent.style.transform = `translate(0, ${position.includes("top") ? "-100%" : "100%"})`;
+                        tooltipContent.style.right = "0";
+                        tooltipContent.style.left = "auto";
+                    }
+                }
+                if (newMaxWidth > 480 && vw > 480) {
+                    newMaxWidth = 480;
+                }
+                tooltipContent.style.maxWidth = `${newMaxWidth}px`;
+                setInternalMaxWidth(`${newMaxWidth}px`);
+            }
+            hasUpdatedMaxWidthRef.current = true;
         }
     };
     const checkKey = (e) => {
@@ -52,32 +59,41 @@ const IDSTooltip = ({ position = "top", maxWidth = "20rem", trigger, children, c
         const tooltipContent = tooltipContentRef.current;
         if (!tooltipContent)
             return;
-        tooltipContent.setAttribute("role", "tooltip");
         const focusable = getFirstFocusableContent();
         if (focusable) {
-            if (triggerRef.current?.querySelector('[class^="ids-icon-"]') || triggerRef.current?.querySelector("ids-icon")) {
-                focusable.setAttribute("role", "img");
-                focusable.setAttribute("aria-labelledby", tooltipId);
-            }
-            else {
-                focusable.setAttribute("aria-describedby", tooltipId);
-            }
+            setTriggerIsIcon(!!triggerRef.current?.querySelector('[class^="ids-icon-"]'));
         }
+    }, []);
+    useEffect(() => {
+        const tooltipContent = tooltipContentRef.current;
+        if (!tooltipContent)
+            return;
         document.addEventListener("keydown", checkKey);
         return () => document.removeEventListener("keydown", checkKey);
     }, []);
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const observer = new ResizeObserver(() => {
+            hasUpdatedMaxWidthRef.current = false;
+            setInternalMaxWidth(maxWidth);
+        });
+        observer.observe(document.documentElement);
+        return () => observer.disconnect();
+    }, [maxWidth]);
     useEffect(() => {
         const triggerWrapper = triggerRef.current;
         if (!triggerWrapper)
             return;
-        triggerWrapper.addEventListener("mouseenter", handleOverflow);
-        triggerWrapper.addEventListener("focusin", handleOverflow);
+        triggerWrapper.addEventListener("mouseenter", handleXOverflow);
+        triggerWrapper.addEventListener("focusin", handleXOverflow);
         return () => {
-            triggerWrapper.removeEventListener("mouseenter", handleOverflow);
-            triggerWrapper.removeEventListener("focusin", handleOverflow);
+            triggerWrapper.removeEventListener("mouseenter", handleXOverflow);
+            triggerWrapper.removeEventListener("focusin", handleXOverflow);
         };
     }, [triggerRef]);
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
-};
+    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, triggerIsIcon: triggerIsIcon, className: className, triggerRef: triggerRef, tooltipContentRef: tooltipContentRef }));
+}
 
 export { IDSTooltip };

package/components/utils/contexts/HeaderContext.d.ts

@@ -1,5 +1,6 @@
 export interface IDSHeaderConfig {
     unresponsive: boolean;
+    hideAvatar?: boolean;
     hideRegionPicker?: boolean;
 }
 export declare const HeaderContext: import("react").Context<IDSHeaderConfig>;

package/components/utils/hooks/useFocusTrap.js

@@ -6,7 +6,7 @@ function useFocusTrap(container, active) {
             return;
         const focusableSelectors = [
             "a[href]",
-            "button:not([disabled])",
+            'button:not([disabled]):not([tabindex="-1"])',
             "textarea:not([disabled])",
             "input:not([disabled]):not([type='radio'])",
             ".ids-focus-anchor",

package/index.d.ts

@@ -1,100 +1,176 @@
 export * from "./components/form/check-button/check-button";
 export * from "./components/form/radio-button/radio-button";
 export * from "./components/form/radio-button/radio-button-group";
+export * from "./components/form/radio-button/radio-button-group-base";
 export * from "./components/form/checkbox/checkbox";
+export * from "./components/form/checkbox/checkbox-base";
 export * from "./components/form/checkbox/checkbox-group";
+export * from "./components/form/checkbox/checkbox-group-base";
 export * from "./components/form/input/input";
+export * from "./components/form/input/input-base";
 export * from "./components/form/radio/radio";
+export * from "./components/form/radio/radio-base";
 export * from "./components/form/radio/radio-group";
+export * from "./components/form/radio/radio-group-base";
 export * from "./components/form/textarea/textarea";
+export * from "./components/form/textarea/textarea-base";
 export * from "./components/form/range/range";
+export * from "./components/form/range/range-base";
 export * from "./components/form/select/select";
+export * from "./components/form/select/select-base";
 export * from "./components/form/select-multiple/select-multiple";
+export * from "./components/form/select-multiple/select-multiple-base";
 export * from "./components/form/error-message/error-message";
 export * from "./components/form/time/time";
+export * from "./components/form/time/time-base";
+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-group/button-group";
+export * from "./components/button/button-group";
 export * from "./components/grid/container";
 export * from "./components/grid/row";
 export * from "./components/grid/column";
+export * from "./components/grid-layout/grid-row";
+export * from "./components/grid-layout/grid-column";
+export * from "./components/grid-layout/grid-container";
 export * from "./components/accordion/accordion";
+export * from "./components/accordion/accordion-base";
+export * from "./components/link/action-link";
 export * from "./components/alert/alert";
-export * from "./components/global-alert/global-alert";
-export * from "./components/mobile/menu/item/mobile-item";
-export * from "./components/mobile/menu/mobile-menu";
+export * from "./components/alert/alert-base";
+export * from "./components/alert/global-alert";
+export * from "./components/alert/global-alert-base";
+export * from "./components/mobile-menu/mobile-item";
+export * from "./components/mobile-menu/mobile-item-base";
+export * from "./components/mobile-menu/mobile-menu";
 export * from "./components/link/link";
-export * from "./components/notification/badge/notification-badge";
 export * from "./components/tabs/tabs";
+export * from "./components/tabs/tabs-base";
 export * from "./components/tabs/tab";
+export * from "./components/tabs/tab-link";
 export * from "./components/tabs/tab-panel";
 export * from "./components/puff-list/puff-list";
-export * from "./components/puff-list/puff-list-item/puff-list-item";
-export * from "./components/puff-list/puff-list-item/puff-list-item-date";
-export * from "./components/puff-list/puff-list-item/puff-list-item-header";
-export * from "./components/puff-list/puff-list-item/puff-list-item-info";
+export * from "./components/puff-list/puff-list-item";
+export * from "./components/puff-list/puff-list-item-date";
+export * from "./components/puff-list/puff-list-item-header";
+export * from "./components/puff-list/puff-list-item-info";
 export * from "./components/date-label/date-label";
 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/dropdown/dropdown";
+export * from "./components/dropdown/dropdown-base";
 export * from "./components/dropdown/dropdown-content-link";
 export * from "./components/dropdown/dropdown-content-button";
 export * from "./components/card/card";
 export * from "./components/popover/popover";
+export * from "./components/popover/popover-base";
+export * from "./components/popover/popover-content";
 export * from "./components/progressbar/progressbar";
 export * from "./components/badge/badge";
-export * from "./components/box-link/box-link";
+export * from "./components/notification-badge/notification-badge";
+export * from "./components/link/box-link";
 export * from "./components/side-menu/side-menu";
+export * from "./components/side-menu/side-menu-base";
 export * from "./components/side-panel/side-panel";
+export * from "./components/side-panel/side-panel-base";
+export * from "./components/side-panel/side-panel-provider";
 export * from "./components/tooltip/tooltip";
-export * from "./components/navigation/content/navigation-content";
+export * from "./components/tooltip/tooltip-base";
+export * from "./components/navigation-content/navigation-content";
 export * from "./components/carousel/carousel";
 export * from "./components/carousel/carousel-item";
 export * from "./components/tag/tag";
 export * from "./components/stepper/stepper";
 export * from "./components/stepper/step";
-export * from "./components/form/toggle/toggle";
+export * from "./components/stepper/step-base";
 export * from "./components/region-icon/region-icon";
-export * from "./components/navigation/local/navigation-local";
-export * from "./components/pagination/data-pagination/data-pagination";
-export * from "./components/pagination/list-pagination/list-pagination";
+export * from "./components/navigation-local/navigation-local";
+export * from "./components/data-pagination/data-pagination";
+export * from "./components/list-pagination/list-pagination";
+export * from "./components/list-pagination/list-pagination-links";
 export * from "./components/header-1177/header-1177";
+export * from "./components/header-1177/header-1177-base";
 export * from "./components/header-1177/header-1177-region-picker";
+export * from "./components/header-1177/header-1177-region-picker-base";
 export * from "./components/header-1177/header-1177-region-picker-mobile";
+export * from "./components/header-1177/header-1177-region-picker-mobile-base";
 export * from "./components/header-1177/header-1177-item";
+export * from "./components/header-1177/header-1177-item-base";
 export * from "./components/header-1177/header-1177-avatar";
+export * from "./components/header-1177/header-1177-avatar-base";
 export * from "./components/header-1177/header-1177-nav";
+export * from "./components/header-1177/header-1177-nav-base";
 export * from "./components/header-1177/header-1177-nav-item";
+export * from "./components/header-1177/header-1177-nav-item-base";
 export * from "./components/header-1177/header-1177-nav-item-mobile";
+export * from "./components/header-1177/header-1177-nav-item-mobile-base";
 export * from "./components/header-1177/header-1177-menu-mobile";
+export * from "./components/header-1177/header-1177-menu-mobile-base";
 export * from "./components/header-1177-admin/header-1177-admin";
+export * from "./components/header-1177-admin/header-1177-admin-base";
 export * from "./components/header-1177-admin/header-1177-admin-item";
+export * from "./components/header-1177-admin/header-1177-admin-item-base";
 export * from "./components/header-1177-admin/header-1177-admin-avatar";
+export * from "./components/header-1177-admin/header-1177-admin-avatar-base";
 export * from "./components/header-1177-admin/header-1177-admin-menu-mobile";
+export * from "./components/header-1177-admin/header-1177-admin-menu-mobile-base";
 export * from "./components/header-1177-admin/header-1177-admin-avatar-mobile";
+export * from "./components/header-1177-admin/header-1177-admin-avatar-mobile-base";
 export * from "./components/header-1177-admin/header-1177-admin-nav";
+export * from "./components/header-1177-admin/header-1177-admin-nav-base";
 export * from "./components/header-1177-admin/header-1177-admin-nav-item";
+export * from "./components/header-1177-admin/header-1177-admin-nav-item-base";
+export * from "./components/header-1177-admin/header-1177-admin-nav-item-mobile";
+export * from "./components/header-1177-admin/header-1177-admin-nav-item-mobile-base";
 export * from "./components/header-1177-pro/header-1177-pro";
+export * from "./components/header-1177-pro/header-1177-pro-base";
 export * from "./components/header-1177-pro/header-1177-pro-region-picker";
+export * from "./components/header-1177-pro/header-1177-pro-region-picker-base";
 export * from "./components/header-1177-pro/header-1177-pro-region-picker-mobile";
+export * from "./components/header-1177-pro/header-1177-pro-region-picker-mobile-base";
 export * from "./components/header-1177-pro/header-1177-pro-item";
+export * from "./components/header-1177-pro/header-1177-pro-item-base";
 export * from "./components/header-1177-pro/header-1177-pro-menu-mobile";
+export * from "./components/header-1177-pro/header-1177-pro-menu-mobile-base";
 export * from "./components/header-1177-pro/header-1177-pro-avatar";
+export * from "./components/header-1177-pro/header-1177-pro-avatar-base";
 export * from "./components/header-1177-pro/header-1177-pro-avatar-mobile";
+export * from "./components/header-1177-pro/header-1177-pro-avatar-mobile-base";
 export * from "./components/header-1177-pro/header-1177-pro-nav";
+export * from "./components/header-1177-pro/header-1177-pro-nav-base";
 export * from "./components/header-1177-pro/header-1177-pro-nav-item";
+export * from "./components/header-1177-pro/header-1177-pro-nav-item-base";
+export * from "./components/header-1177-pro/header-1177-pro-nav-item-mobile";
+export * from "./components/header-1177-pro/header-1177-pro-nav-item-mobile-base";
 export * from "./components/header-inera/header-inera";
+export * from "./components/header-inera/header-inera-base";
 export * from "./components/header-inera/header-inera-item";
+export * from "./components/header-inera/header-inera-item-base";
 export * from "./components/header-inera/header-inera-nav";
+export * from "./components/header-inera/header-inera-nav-base";
 export * from "./components/header-inera/header-inera-nav-item";
+export * from "./components/header-inera/header-inera-nav-item-base";
 export * from "./components/header-inera/header-inera-menu-mobile";
+export * from "./components/header-inera/header-inera-menu-mobile-base";
 export * from "./components/header-inera-admin/header-inera-admin";
+export * from "./components/header-inera-admin/header-inera-admin-base";
 export * from "./components/header-inera-admin/header-inera-admin-item";
+export * from "./components/header-inera-admin/header-inera-admin-item-base";
 export * from "./components/header-inera-admin/header-inera-admin-avatar";
+export * from "./components/header-inera-admin/header-inera-admin-avatar-base";
 export * from "./components/header-inera-admin/header-inera-admin-avatar-mobile";
+export * from "./components/header-inera-admin/header-inera-admin-avatar-mobile-base";
 export * from "./components/header-inera-admin/header-inera-admin-nav";
+export * from "./components/header-inera-admin/header-inera-admin-nav-base";
 export * from "./components/header-inera-admin/header-inera-admin-nav-item";
+export * from "./components/header-inera-admin/header-inera-admin-nav-item-base";
 export * from "./components/header-inera-admin/header-inera-admin-menu-mobile";
+export * from "./components/header-inera-admin/header-inera-admin-menu-mobile-base";
+export * from "./components/header-inera-admin/header-inera-admin-nav-item-mobile";
+export * from "./components/header-inera-admin/header-inera-admin-nav-item-mobile-base";
 export * from "./components/header-patient/header-patient";
 export * from "./components/footer-1177/footer-1177";
 export * from "./components/footer-1177-admin/footer-1177-admin";

package/index.js

@@ -1,100 +1,176 @@
 export { IDSCheckButton } from './components/form/check-button/check-button.js';
 export { IDSRadioButton } from './components/form/radio-button/radio-button.js';
 export { IDSRadioButtonGroup } from './components/form/radio-button/radio-button-group.js';
+export { IDSRadioButtonGroupBase } from './components/form/radio-button/radio-button-group-base.js';
 export { IDSCheckbox } from './components/form/checkbox/checkbox.js';
+export { IDSCheckboxBase } from './components/form/checkbox/checkbox-base.js';
 export { IDSCheckboxGroup } from './components/form/checkbox/checkbox-group.js';
+export { IDSCheckboxGroupBase } from './components/form/checkbox/checkbox-group-base.js';
 export { IDSInput } from './components/form/input/input.js';
+export { IDSInputBase } from './components/form/input/input-base.js';
 export { IDSRadio } from './components/form/radio/radio.js';
+export { IDSRadioBase } from './components/form/radio/radio-base.js';
 export { IDSRadioGroup } from './components/form/radio/radio-group.js';
+export { IDSRadioGroupBase } from './components/form/radio/radio-group-base.js';
 export { IDSTextarea } from './components/form/textarea/textarea.js';
+export { IDSTextareaBase } from './components/form/textarea/textarea-base.js';
 export { IDSRange } from './components/form/range/range.js';
+export { IDSRangeBase } from './components/form/range/range-base.js';
 export { IDSSelect } from './components/form/select/select.js';
+export { IDSSelectBase } from './components/form/select/select-base.js';
 export { IDSSelectMultiple } from './components/form/select-multiple/select-multiple.js';
+export { IDSSelectMultipleBase } from './components/form/select-multiple/select-multiple-base.js';
 export { IDSErrorMessage } from './components/form/error-message/error-message.js';
 export { IDSTime } from './components/form/time/time.js';
+export { IDSTimeBase } from './components/form/time/time-base.js';
+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 { IDSButtonGroup } from './components/button-group/button-group.js';
+export { IDSButtonGroup } from './components/button/button-group.js';
 export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';
 export { IDSColumn } from './components/grid/column.js';
+export { IDSGridRow } from './components/grid-layout/grid-row.js';
+export { IDSGridColumn } from './components/grid-layout/grid-column.js';
+export { IDSGridContainer } from './components/grid-layout/grid-container.js';
 export { IDSAccordion } from './components/accordion/accordion.js';
+export { IDSAccordionBase } from './components/accordion/accordion-base.js';
+export { IDSActionLink } from './components/link/action-link.js';
 export { IDSAlert } from './components/alert/alert.js';
-export { IDSGlobalAlert } from './components/global-alert/global-alert.js';
-export { IDSMobileMenuItem } from './components/mobile/menu/item/mobile-item.js';
-export { IDSMobileMenu } from './components/mobile/menu/mobile-menu.js';
+export { IDSAlertBase } from './components/alert/alert-base.js';
+export { IDSGlobalAlert } from './components/alert/global-alert.js';
+export { IDSGlobalAlertBase } from './components/alert/global-alert-base.js';
+export { IDSMobileMenuItem } from './components/mobile-menu/mobile-item.js';
+export { IDSMobileMenuItemBase } from './components/mobile-menu/mobile-item-base.js';
+export { IDSMobileMenu } from './components/mobile-menu/mobile-menu.js';
 export { IDSLink } from './components/link/link.js';
-export { IDSNotificationBadge } from './components/notification/badge/notification-badge.js';
 export { IDSTabs } from './components/tabs/tabs.js';
+export { IDSTabsBase } from './components/tabs/tabs-base.js';
 export { IDSTab } from './components/tabs/tab.js';
+export { IDSTabLink } from './components/tabs/tab-link.js';
 export { IDSTabPanel } from './components/tabs/tab-panel.js';
 export { IDSPuffList } from './components/puff-list/puff-list.js';
-export { IDSPuffListItem } from './components/puff-list/puff-list-item/puff-list-item.js';
-export { IDSPuffListItemDate } from './components/puff-list/puff-list-item/puff-list-item-date.js';
-export { IDSPuffListItemHeader } from './components/puff-list/puff-list-item/puff-list-item-header.js';
-export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item/puff-list-item-info.js';
+export { IDSPuffListItem } from './components/puff-list/puff-list-item.js';
+export { IDSPuffListItemDate } from './components/puff-list/puff-list-item-date.js';
+export { IDSPuffListItemHeader } from './components/puff-list/puff-list-item-header.js';
+export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item-info.js';
 export { IDSDateLabel } from './components/date-label/date-label.js';
 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 { IDSDropdown } from './components/dropdown/dropdown.js';
+export { IDSDropdownBase } from './components/dropdown/dropdown-base.js';
 export { IDSDropdownContentLink } from './components/dropdown/dropdown-content-link.js';
 export { IDSDropdownContentButton } from './components/dropdown/dropdown-content-button.js';
 export { IDSCard } from './components/card/card.js';
 export { IDSPopover } from './components/popover/popover.js';
+export { IDSPopoverBase } from './components/popover/popover-base.js';
+export { IDSPopoverContent } from './components/popover/popover-content.js';
 export { IDSProgressbar } from './components/progressbar/progressbar.js';
 export { IDSBadge } from './components/badge/badge.js';
-export { IDSBoxLink } from './components/box-link/box-link.js';
+export { IDSNotificationBadge } from './components/notification-badge/notification-badge.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';
 export { IDSSidePanel } from './components/side-panel/side-panel.js';
+export { IDSSidePanelBase } from './components/side-panel/side-panel-base.js';
+export { IDSSidePanelProvider } from './components/side-panel/side-panel-provider.js';
 export { IDSTooltip } from './components/tooltip/tooltip.js';
-export { IDSNavigationContent } from './components/navigation/content/navigation-content.js';
+export { IDSTooltipBase } from './components/tooltip/tooltip-base.js';
+export { IDSNavigationContent } from './components/navigation-content/navigation-content.js';
 export { IDSCarousel } from './components/carousel/carousel.js';
 export { IDSCarouselItem } from './components/carousel/carousel-item.js';
 export { IDSTag } from './components/tag/tag.js';
 export { IDSStepper } from './components/stepper/stepper.js';
 export { IDSStep } from './components/stepper/step.js';
-export { IDSToggle } from './components/form/toggle/toggle.js';
+export { IDSStepBase } from './components/stepper/step-base.js';
 export { IDSRegionIcon } from './components/region-icon/region-icon.js';
-export { IDSNavigationLocal } from './components/navigation/local/navigation-local.js';
-export { IDSDataPagination } from './components/pagination/data-pagination/data-pagination.js';
-export { IDSListPagination } from './components/pagination/list-pagination/list-pagination.js';
+export { IDSNavigationLocal } from './components/navigation-local/navigation-local.js';
+export { IDSDataPagination } from './components/data-pagination/data-pagination.js';
+export { IDSListPagination } from './components/list-pagination/list-pagination.js';
+export { IDSListPaginationLinks } from './components/list-pagination/list-pagination-links.js';
 export { IDSHeader1177 } from './components/header-1177/header-1177.js';
+export { IDSHeader1177Base } from './components/header-1177/header-1177-base.js';
 export { IDSHeader1177RegionPicker } from './components/header-1177/header-1177-region-picker.js';
+export { IDSHeader1177RegionPickerBase } from './components/header-1177/header-1177-region-picker-base.js';
 export { IDSHeader1177RegionPickerMobile } from './components/header-1177/header-1177-region-picker-mobile.js';
+export { IDSHeader1177RegionPickerMobileBase } from './components/header-1177/header-1177-region-picker-mobile-base.js';
 export { IDSHeader1177Item } from './components/header-1177/header-1177-item.js';
+export { IDSHeader1177ItemBase } from './components/header-1177/header-1177-item-base.js';
 export { IDSHeader1177Avatar } from './components/header-1177/header-1177-avatar.js';
+export { IDSHeader1177AvatarBase } from './components/header-1177/header-1177-avatar-base.js';
 export { IDSHeader1177Nav } from './components/header-1177/header-1177-nav.js';
+export { IDSHeader1177NavBase } from './components/header-1177/header-1177-nav-base.js';
 export { IDSHeader1177NavItem } from './components/header-1177/header-1177-nav-item.js';
+export { IDSHeader1177NavItemBase } from './components/header-1177/header-1177-nav-item-base.js';
 export { IDSHeader1177NavItemMobile } from './components/header-1177/header-1177-nav-item-mobile.js';
+export { IDSHeader1177NavItemMobileBase } from './components/header-1177/header-1177-nav-item-mobile-base.js';
 export { IDSHeader1177MenuMobile } from './components/header-1177/header-1177-menu-mobile.js';
+export { IDSHeader1177MenuMobileBase } from './components/header-1177/header-1177-menu-mobile-base.js';
 export { IDSHeader1177Admin } from './components/header-1177-admin/header-1177-admin.js';
+export { IDSHeader1177AdminBase } from './components/header-1177-admin/header-1177-admin-base.js';
 export { IDSHeader1177AdminItem } from './components/header-1177-admin/header-1177-admin-item.js';
+export { IDSHeader1177AdminItemBase } from './components/header-1177-admin/header-1177-admin-item-base.js';
 export { IDSHeader1177AdminAvatar } from './components/header-1177-admin/header-1177-admin-avatar.js';
+export { IDSHeader1177AdminAvatarBase } from './components/header-1177-admin/header-1177-admin-avatar-base.js';
 export { IDSHeader1177AdminMenuMobile } from './components/header-1177-admin/header-1177-admin-menu-mobile.js';
+export { IDSHeader1177AdminMenuMobileBase } from './components/header-1177-admin/header-1177-admin-menu-mobile-base.js';
 export { IDSHeader1177AdminAvatarMobile } from './components/header-1177-admin/header-1177-admin-avatar-mobile.js';
+export { IDSHeader1177AdminAvatarMobileBase } from './components/header-1177-admin/header-1177-admin-avatar-mobile-base.js';
 export { IDSHeader1177AdminNav } from './components/header-1177-admin/header-1177-admin-nav.js';
+export { IDSHeader1177AdminNavBase } from './components/header-1177-admin/header-1177-admin-nav-base.js';
 export { IDSHeader1177AdminNavItem } from './components/header-1177-admin/header-1177-admin-nav-item.js';
+export { IDSHeader1177AdminNavItemBase } from './components/header-1177-admin/header-1177-admin-nav-item-base.js';
+export { IDSHeader1177AdminNavItemMobile } from './components/header-1177-admin/header-1177-admin-nav-item-mobile.js';
+export { IDSHeader1177AdminNavItemMobileBase } from './components/header-1177-admin/header-1177-admin-nav-item-mobile-base.js';
 export { IDSHeader1177Pro } from './components/header-1177-pro/header-1177-pro.js';
+export { IDSHeader1177ProBase } from './components/header-1177-pro/header-1177-pro-base.js';
 export { IDSHeader1177ProRegionPicker } from './components/header-1177-pro/header-1177-pro-region-picker.js';
+export { IDSHeader1177ProRegionPickerBase } from './components/header-1177-pro/header-1177-pro-region-picker-base.js';
 export { IDSHeader1177ProRegionPickerMobile } from './components/header-1177-pro/header-1177-pro-region-picker-mobile.js';
+export { IDSHeader1177ProRegionPickerMobileBase } from './components/header-1177-pro/header-1177-pro-region-picker-mobile-base.js';
 export { IDSHeader1177ProItem } from './components/header-1177-pro/header-1177-pro-item.js';
+export { IDSHeader1177ProItemBase } from './components/header-1177-pro/header-1177-pro-item-base.js';
 export { IDSHeader1177ProMenuMobile } from './components/header-1177-pro/header-1177-pro-menu-mobile.js';
+export { IDSHeader1177ProMenuMobileBase } from './components/header-1177-pro/header-1177-pro-menu-mobile-base.js';
 export { IDSHeader1177ProAvatar } from './components/header-1177-pro/header-1177-pro-avatar.js';
+export { IDSHeader1177ProAvatarBase } from './components/header-1177-pro/header-1177-pro-avatar-base.js';
 export { IDSHeader1177ProAvatarMobile } from './components/header-1177-pro/header-1177-pro-avatar-mobile.js';
+export { IDSHeader1177ProAvatarMobileBase } from './components/header-1177-pro/header-1177-pro-avatar-mobile-base.js';
 export { IDSHeader1177ProNav } from './components/header-1177-pro/header-1177-pro-nav.js';
+export { IDSHeader1177ProNavBase } from './components/header-1177-pro/header-1177-pro-nav-base.js';
 export { IDSHeader1177ProNavItem } from './components/header-1177-pro/header-1177-pro-nav-item.js';
+export { IDSHeader1177ProNavItemBase } from './components/header-1177-pro/header-1177-pro-nav-item-base.js';
+export { IDSHeader1177ProNavItemMobile } from './components/header-1177-pro/header-1177-pro-nav-item-mobile.js';
+export { IDSHeader1177ProNavItemMobileBase } from './components/header-1177-pro/header-1177-pro-nav-item-mobile-base.js';
 export { IDSHeaderInera } from './components/header-inera/header-inera.js';
+export { IDSHeaderIneraBase } from './components/header-inera/header-inera-base.js';
 export { IDSHeaderIneraItem } from './components/header-inera/header-inera-item.js';
+export { IDSHeaderIneraItemBase } from './components/header-inera/header-inera-item-base.js';
 export { IDSHeaderIneraNav } from './components/header-inera/header-inera-nav.js';
+export { IDSHeaderIneraNavBase } from './components/header-inera/header-inera-nav-base.js';
 export { IDSHeaderIneraNavItem } from './components/header-inera/header-inera-nav-item.js';
+export { IDSHeaderIneraNavItemBase } from './components/header-inera/header-inera-nav-item-base.js';
 export { IDSHeaderIneraMenuMobile } from './components/header-inera/header-inera-menu-mobile.js';
+export { IDSHeaderIneraMenuMobileBase } from './components/header-inera/header-inera-menu-mobile-base.js';
 export { IDSHeaderIneraAdmin } from './components/header-inera-admin/header-inera-admin.js';
+export { IDSHeaderIneraAdminBase } from './components/header-inera-admin/header-inera-admin-base.js';
 export { IDSHeaderIneraAdminItem } from './components/header-inera-admin/header-inera-admin-item.js';
+export { IDSHeaderIneraAdminItemBase } from './components/header-inera-admin/header-inera-admin-item-base.js';
 export { IDSHeaderIneraAdminAvatar } from './components/header-inera-admin/header-inera-admin-avatar.js';
+export { IDSHeaderIneraAdminAvatarBase } from './components/header-inera-admin/header-inera-admin-avatar-base.js';
 export { IDSHeaderIneraAdminAvatarMobile } from './components/header-inera-admin/header-inera-admin-avatar-mobile.js';
+export { IDSHeaderIneraAdminAvatarMobileBase } from './components/header-inera-admin/header-inera-admin-avatar-mobile-base.js';
 export { IDSHeaderIneraAdminNav } from './components/header-inera-admin/header-inera-admin-nav.js';
+export { IDSHeaderIneraAdminNavBase } from './components/header-inera-admin/header-inera-admin-nav-base.js';
 export { IDSHeaderIneraAdminNavItem } from './components/header-inera-admin/header-inera-admin-nav-item.js';
+export { IDSHeaderIneraAdminNavItemBase } from './components/header-inera-admin/header-inera-admin-nav-item-base.js';
 export { IDSHeaderIneraAdminMenuMobile } from './components/header-inera-admin/header-inera-admin-menu-mobile.js';
+export { IDSHeaderIneraAdminMenuMobileBase } from './components/header-inera-admin/header-inera-admin-menu-mobile-base.js';
+export { IDSHeaderIneraAdminNavItemMobile } from './components/header-inera-admin/header-inera-admin-nav-item-mobile.js';
+export { IDSHeaderIneraAdminNavItemMobileBase } from './components/header-inera-admin/header-inera-admin-nav-item-mobile-base.js';
 export { IDSHeaderPatient } from './components/header-patient/header-patient.js';
 export { IDSFooter1177 } from './components/footer-1177/footer-1177.js';
 export { IDSFooter1177Admin } from './components/footer-1177-admin/footer-1177-admin.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "8.1.0",
+  "version": "9.0.0",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "8.1.x",
+    "@inera/ids-design": "9.0.x",
     "clsx": "*"
   },
   "types": "index.d.ts",

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

@@ -1,9 +0,0 @@
-import React, { ButtonHTMLAttributes } from "react";
-import "@inera/ids-design/components/box-link/box-link.css";
-export interface IDSBoxLinkProps extends React.HTMLAttributes<HTMLDivElement> {
-    srButton?: string;
-    buttonIcon?: string;
-    onButtonClick?: () => void;
-    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-}
-export declare function IDSBoxLink({ srButton, buttonIcon, onButtonClick, buttonProps, children, className, ...props }: IDSBoxLinkProps): import("react/jsx-runtime").JSX.Element;

package/components/box-link/box-link.js

@@ -1,11 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
-import '@inera/ids-design/components/box-link/box-link.css';
-import clsx from 'clsx';
-
-function IDSBoxLink({ srButton = "", buttonIcon = "", onButtonClick, buttonProps = {}, children, className, ...props }) {
-    const boxLinkRef = useRef(null);
-    return (jsx("div", { className: clsx("ids-box-link", { "ids-box-link--has-button": !!onButtonClick }, className), ref: boxLinkRef, ...props, children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), onButtonClick && (jsx("div", { className: "ids-box-link__button", children: jsx("button", { className: buttonIcon ? `ids-icon-${buttonIcon}` : undefined, onClick: onButtonClick, "aria-label": srButton, ...buttonProps }) }))] }) }));
-}
-
-export { IDSBoxLink };

package/components/global-alert/global-alert.d.ts

@@ -1,16 +0,0 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/global-alert/global-alert.css";
-interface IDSGlobalAlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    agent?: boolean;
-    srExpandText?: string;
-    srCollapseText?: string;
-    collapsed?: boolean;
-    noRole?: boolean;
-    onCollapsedChange?: (isCollapsed: boolean) => void;
-    icon?: string;
-    children?: ReactNode;
-    actions?: ReactNode;
-    headline: string;
-}
-export declare const IDSGlobalAlert: React.FC<IDSGlobalAlertProps>;
-export {};