@inera/ids-react 7.2.0 → 8.1.0

package/components/carousel/carousel.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useState, useRef, Children, useEffect } from 'react';
+import { useState, useRef, Children, useEffect } from 'react';
 import '@inera/ids-design/components/carousel/carousel.css';
 import clsx from 'clsx';
 import { breakPoints } from '../utils/utils.js';
 
-const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "Nästa slide", srPrevLabel = "Föregående slide", className, children }) => {
+const IDSCarousel = ({ srNextLabel = "Nästa", srPrevLabel = "Föregående", className, children, ...props }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [isAnimating, setIsAnimating] = useState(false);
     const [isAnimatingLeft, setIsAnimatingLeft] = useState(false);
@@ -61,9 +61,7 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
     }, []);
     // Set button location
     const setButtonLocation = () => {
-        const imageHeight = carouselRef.current
-            ?.querySelector(".ids-carousel-item__image")
-            ?.getBoundingClientRect().height;
+        const imageHeight = carouselRef.current?.querySelector(".ids-carousel-item__image")?.getBoundingClientRect().height;
         const buttonPlacement = imageHeight / 2;
         if (imageHeight && buttonPlacement) {
             setButtonPosition({
@@ -72,15 +70,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             });
         }
     };
-    useEffect(() => {
-        if (!autoplay)
-            return;
-        const delay = Math.max(autoplayDelay, 500);
-        const timer = setInterval(() => {
-            handleNext();
-        }, delay);
-        return () => clearInterval(timer);
-    }, [autoplay, autoplayDelay]);
     // change slide
     const handleNext = () => {
         if (isAnimating)
@@ -93,7 +82,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             setIsAnimatingRight(false);
         }, 500);
     };
-    // Previous slide
     const handlePrev = () => {
         if (isAnimating)
             return;
@@ -105,6 +93,22 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             setIsAnimatingLeft(false);
         }, 500);
     };
+    useEffect(() => {
+        if (!carouselRef.current)
+            return;
+        const allSlides = carouselRef.current.querySelectorAll(".ids-carousel-item-wrapper");
+        allSlides.forEach((slide, index) => {
+            const isActive = index === activeSlideIndex;
+            if (isActive) {
+                slide.removeAttribute("inert");
+                slide.setAttribute("aria-hidden", "false");
+            }
+            else {
+                slide.setAttribute("inert", "");
+                slide.setAttribute("aria-hidden", "true");
+            }
+        });
+    }, [activeSlideIndex]);
     // Touch/swipe
     const touchStartX = useRef(null);
     const handleTouchStart = (e) => {
@@ -118,28 +122,6 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             handleNext();
         touchStartX.current = null;
     };
-    const setTabIndexRecursively = (node, tabIndex) => {
-        if (React__default.isValidElement(node)) {
-            const props = {};
-            // Skip recursion into IDSLink — set tabIndex only at the top level if needed
-            if (node.type.displayName === "IDSLink" || node.type.name === "IDSLink") {
-                return React__default.cloneElement(node, {
-                    tabIndex
-                });
-            }
-            if (typeof node.type === "string") {
-                const focusableTags = ["a", "button", "input", "select", "textarea"];
-                if (focusableTags.includes(node.type)) {
-                    props.tabIndex = tabIndex;
-                }
-            }
-            if (node.props && node.props.children) {
-                props.children = React__default.Children.map(node.props.children, child => setTabIndexRecursively(child, tabIndex));
-            }
-            return React__default.cloneElement(node, props);
-        }
-        return node;
-    };
     const slides = Children.map(children, (child, index) => {
         const isActive = index === activeSlideIndex;
         const isPrev = index === (activeSlideIndex - 1 + slideCount) % slideCount;
@@ -151,16 +133,14 @@ const IDSCarousel = ({ autoplay = false, autoplayDelay = 5000, srNextLabel = "N
             itemClass += " prev";
         else if (isNext)
             itemClass += " next";
-        // Disable tabbing for all elements inside inactive slides
-        const processedChild = isActive ? child : setTabIndexRecursively(child, -1);
-        return (jsx("div", { className: itemClass, "aria-hidden": !isActive, children: processedChild }, index));
+        return isActive ? (jsx("div", { className: itemClass, "aria-hidden": "false", children: child }, index)) : (jsx("div", { className: itemClass, "aria-hidden": "true", inert: true, children: child }, index));
     });
     const isMobile = windowWidth < breakPoints.medium;
-    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
+    return (jsxs("div", { className: clsx("ids-carousel", className), ref: carouselRef, ...props, children: [jsx("button", { "aria-label": srPrevLabel, className: clsx("ids-carousel__button-prev", {
                     "ids-carousel__button-prev--mobile": isMobile
                 }), onClick: handlePrev, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("button", { "aria-label": srNextLabel, className: clsx("ids-carousel__button-next", {
                     "ids-carousel__button-next--mobile": isMobile
-                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-slide js-carousel-slide", {
+                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-content js-carousel-slide", {
                     "animating-left": isAnimatingLeft,
                     "animating-right": isAnimatingRight
                 }), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: jsx("div", { "aria-live": "polite", children: slides }) })] }));

package/components/date-label/date-label.d.ts

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, TimeHTMLAttributes } from "react";
+import { DetailedHTMLProps, TimeHTMLAttributes } from "react";
 import "@inera/ids-design/components/date-label/date-label.css";
 interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> {
     date?: Date | null;
@@ -6,6 +6,12 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     month?: number;
     monthLabel?: string;
     day?: number;
+    dateTo?: Date | null;
+    yearTo?: number;
+    monthTo?: number;
+    monthToLabel?: string;
+    dayTo?: number;
+    srText?: string;
 }
-export declare const IDSDateLabel: React.FC<IDSDateLabelProps>;
+export declare function IDSDateLabel({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/date-label/date-label.js

@@ -1,25 +1,18 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/date-label/date-label.css';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day = 0, className, ...props }) => {
-    const [presentedDate, setPresentedDate] = useState(null);
-    useEffect(() => {
-        if (date) {
-            setPresentedDate(new Date(date));
-        }
-    }, [date]);
-    const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
-    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
-    const getDay = () => {
-        const dayNumber = presentedDate ? presentedDate.getDate() : day;
-        return getDayAsText(dayNumber);
-    };
+function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
+    const getYear = () => (date ? date.getFullYear() : year);
+    const getYearTo = () => (dateTo ? dateTo.getFullYear() : yearTo);
+    const getMonth = () => (date ? date.getMonth() + 1 : month);
+    const getMonthTo = () => (dateTo ? dateTo.getMonth() + 1 : monthTo);
+    const getDay = () => (date ? getDayAsText(date.getDate()) : getDayAsText(day));
+    const getDayTo = () => (dateTo ? getDayAsText(dateTo.getDate()) : getDayAsText(dayTo));
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    return (jsxs("time", { className: clsx("ids-date-label", className), dateTime: `${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`, ...props, children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }));
-};
+    const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
+    return (jsxs("span", { className: clsx("ids-date-label", className), "aria-label": srText, ...props, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: "ids-date-label__time ids-date-label__time--separator", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
+}
 
 export { IDSDateLabel };

package/components/dialog/dialog.d.ts

@@ -1,23 +1,23 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/dialog/dialog.css";
 interface IDSDialogProps extends React.HTMLAttributes<HTMLDivElement> {
-    show?: boolean;
-    srClose?: string;
-    dismissible?: boolean;
+    actions?: ReactNode;
     autoFocus?: boolean;
-    noOverlay?: boolean;
-    noFocusTrap?: boolean;
+    dismissible?: boolean;
+    headline?: ReactNode;
+    height?: string;
     keepScrollbar?: boolean;
-    persistent?: boolean;
-    noScrollAreaFocus?: boolean;
-    width?: string;
     maxWidth?: string;
-    height?: string;
+    noFocusTrap?: boolean;
+    noOverlay?: boolean;
+    noScrollAreaFocus?: boolean;
+    persistent?: boolean;
+    show?: boolean;
+    srClose?: string;
     trigger?: ReactNode;
-    headline?: ReactNode;
-    actions?: ReactNode;
+    width?: string;
     children?: ReactNode;
-    onVisibilityChange?: (value: boolean) => void;
+    onVisibilityChange?: (isVisible: boolean) => void;
 }
-export declare const IDSDialog: React.FC<IDSDialogProps>;
+export declare function IDSDialog({ show, srClose, dismissible, autoFocus, noOverlay, noFocusTrap, keepScrollbar, persistent, noScrollAreaFocus, width, maxWidth, height, trigger, headline, actions, children, className, onVisibilityChange, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dialog/dialog.js

@@ -1,16 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useId, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/dialog/dialog.css';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import clsx from 'clsx';
 
-const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) => {
+function IDSDialog({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) {
     const [isVisible, setIsVisible] = useState(show);
     const dialogRef = useRef(null);
     const bodyRef = useRef(null);
-    const headlineId = useId();
-    const contentId = useId();
     const [hasScrollbar, setHasScrollbar] = useState(false);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
     useEffect(() => {
@@ -50,8 +48,7 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
             setTimeout(() => {
                 const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
                     bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
-                    dialogRef.current?.querySelector("button.ids-dialog__header__button");
-                console.log("focusable", focusable);
+                    dialogRef.current?.querySelector("button.ids-dialog__close-button");
                 focusable?.focus();
             });
         }
@@ -61,19 +58,19 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
             setIsVisible(false);
         }
     };
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), jsx("div", { className: clsx("ids-dialog-overlay", {
-                    "ids-dialog-overlay--hidden": !isVisible || noOverlay
-                }), onClick: overlayClick }), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), !noOverlay && (jsx("div", { className: clsx("ids-dialog-overlay", {
+                    "ids-dialog-overlay--hidden": !isVisible
+                }), onClick: overlayClick })), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
                     "ids-dialog--hidden": !isVisible
-                }, className), role: "dialog", "aria-modal": "true", "aria-labelledby": headlineId, "aria-describedby": contentId, style: {
+                }, className), role: "dialog", "aria-modal": "true", style: {
                     width,
                     maxWidth,
                     height,
                     maxHeight: height || undefined
-                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__header", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__header__button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
+                }, ...props, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, className: "ids-dialog__close-button", onClick: () => setIsVisible(false) }) })), jsxs("div", { ref: bodyRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--has-scrollbar": hasScrollbar,
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
-                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { id: headlineId, className: "ids-dialog__body__headline", children: headline }), jsx("div", { id: contentId, className: "ids-dialog__body__content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
-};
+                        }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
+}
 
 export { IDSDialog };

package/components/dropdown/dropdown-content-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import "@inera/ids-design/components/dropdown/dropdown.css";
+export interface IDSDropdownContentButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    icon?: string;
+    children: ReactNode;
+}
+export declare const IDSDropdownContentButton: import("react").ForwardRefExoticComponent<IDSDropdownContentButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/dropdown/dropdown-content-button.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '@inera/ids-design/components/dropdown/dropdown.css';
+import clsx from 'clsx';
+
+const IDSDropdownContentButton = forwardRef(({ icon, children, className, ...props }, ref) => {
+    return (jsxs("button", { ...props, ref: ref, role: "menuitem", className: clsx("ids-dropdown-content__button", className), children: [icon && jsx("span", { className: `ids-icon-${icon} ids-dropdown--start-icon` }), children] }));
+});
+IDSDropdownContentButton.displayName = "IDSDropdownContentButton";
+
+export { IDSDropdownContentButton };

package/components/dropdown/dropdown-content-link.d.ts

@@ -3,4 +3,4 @@ import "@inera/ids-design/components/dropdown/dropdown.css";
 export interface IDSDropdownContentLinkProps extends Omit<HTMLAttributes<HTMLAnchorElement>, "children"> {
     children: ReactElement;
 }
-export declare const IDSDropdownContentLink: React.FC<IDSDropdownContentLinkProps>;
+export declare function IDSDropdownContentLink({ children, className, ...props }: IDSDropdownContentLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/components/dropdown/dropdown-content-link.js

@@ -3,18 +3,19 @@ import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 import clsx from 'clsx';
 
-const IDSDropdownContentLink = ({ children, className, ...props }) => {
+function IDSDropdownContentLink({ children, className, ...props }) {
     if (!isValidElement(children) || children.type !== "a") {
         console.error("IDSDropdownContentLink expects a single <a> element as its child.");
         return null;
     }
-    const childClassName = clsx("ids-dropdown-content-link", children.props.className, className);
+    const childClassName = clsx("ids-dropdown-content__link", children.props.className, className);
     const content = jsx(Fragment, { children: children.props.children });
     return cloneElement(children, {
         ...props,
         className: childClassName,
+        role: "menuitem",
         children: content
     });
-};
+}
 
 export { IDSDropdownContentLink };

package/components/dropdown/dropdown.d.ts

@@ -2,15 +2,16 @@ import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/dropdown/dropdown.css";
 type Position = "left" | "right";
 interface IDSDropdownProps extends React.HTMLAttributes<HTMLSpanElement> {
+    button: ReactElement;
     expanded?: boolean;
+    mBlock?: boolean;
+    onClosed?: () => void;
+    onOpened?: () => void;
     persistent?: boolean;
     position?: Position;
     sBlock?: boolean;
-    mBlock?: boolean;
-    onOpened?: () => void;
-    onClosed?: () => void;
-    button: ReactElement;
+    maxHeight?: string;
     children: ReactNode;
 }
-export declare const IDSDropdown: React.FC<IDSDropdownProps>;
+export declare function IDSDropdown({ expanded, persistent, position, sBlock, mBlock, maxHeight, onOpened, onClosed, children, className, button, ...props }: IDSDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dropdown/dropdown.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
+import React, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSDropdown = ({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, onOpened, onClosed, children, className, button, ...props }) => {
+function IDSDropdown({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, maxHeight = "", onOpened, onClosed, children, className, button, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const buttonId = useElementId();
-    const contentId = useElementId();
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
@@ -45,30 +44,32 @@ const IDSDropdown = ({ expanded = false, persistent = false, position = "right",
                 id: buttonId,
                 ref: triggerRef,
                 onClick: handleToggle,
-                "aria-controls": contentId,
                 "aria-expanded": isExpanded,
+                "aria-haspopup": "menu",
                 className: clsx(button.props.className)
             });
         }
         return null;
     };
     const renderDropdownContent = () => {
-        const enhancedChildren = React__default.Children.map(children, (child, i) => {
-            if (!React__default.isValidElement(child))
+        const enhancedChildren = React.Children.map(children, (child, i) => {
+            if (!React.isValidElement(child))
                 return child;
             return cloneElement(child, {
                 key: `dropdown-content-link-${i}`
             });
         });
-        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx(`ids-dropdown__content ids-dropdown__content--position-${position}`, {
-                "ids-dropdown__content--mblock": mBlock,
-                "ids-dropdown__content--sblock": sBlock
-            }), ...props, children: enhancedChildren }));
+        return (jsx("div", { ref: contentRef, "aria-labelledby": buttonId, "aria-hidden": !isExpanded, role: "menu", className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
+                "ids-dropdown-content--show": isExpanded,
+                "ids-dropdown-content--mblock": mBlock,
+                "ids-dropdown-content--sblock": sBlock,
+                "ids-dropdown-content--scrollable": !!maxHeight
+            }), ...props, children: jsx("div", { className: "ids-dropdown-content__scroll-area", role: "menu", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: enhancedChildren }) }));
     };
     return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
             "ids-dropdown--mblock": mBlock,
             "ids-dropdown--sblock": sBlock
         }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));
-};
+}
 
 export { IDSDropdown };

package/components/footer-1177/footer-1177.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-1177/footer-1177.css";
 import { IDSLinkProps } from "../link/link";
-interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
+import "@inera/ids-design/components/footer-1177/footer-1177.css";
+export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
     subHeadline?: string;
@@ -9,9 +9,6 @@ interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -19,5 +16,4 @@ interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177: React.FC<Footer1177Props>;
-export {};
+export declare function IDSFooter1177({ headline, srHeadline, subHeadline, cols, col1, col2, col3, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;

package/components/footer-1177/footer-1177.js

@@ -1,67 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
 
-const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size = "2", col2Size = "2", col3Size = "2", subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-    }, [cols, col1Size, col2Size, col3Size]);
-    const getColumnWidth = (col) => {
-        const map = { 1: col1Size, 2: col2Size, 3: col3Size };
-        return `ids-footer-1177__col-size-${map[col]}`;
-    };
+function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
     const renderHeadline = () => {
         if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
+            return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
         }
-        return (jsxs("h1", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
-    };
-    const renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    colorPreset: 2,
-                    block: true
-                });
-            }
-            return link;
-        });
+        return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
     };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--1", getColumnWidth(1)), children: renderCol(col1) }));
+            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
         }
-        else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+        if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col2 })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
-    };
-    const renderCookieLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React__default.isValidElement(node)) {
-                if (node.type === React__default.Fragment) {
-                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React__default.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 4,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-row", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), renderCols()] })] }) }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-row", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-1177__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
-};
+    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+}
 
 export { IDSFooter1177 };

package/components/footer-1177-admin/footer-1177-admin.d.ts

@@ -1,21 +1,19 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSFooter1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
-    serviceName?: string;
+import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
+interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
     cols?: 1 | 2 | 3;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
-    subFooterMobile?: ReactNode;
     mobileMenu?: ReactNode;
     mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177Admin: React.FC<IDSFooter1177AdminProps>;
+export declare const IDSFooter1177Admin: React.FC<Footer1177AdminProps>;
 export {};