@inera/ids-react 9.2.2 → 9.4.0

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

@@ -15,7 +15,7 @@ interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     client?: boolean;
     accordionRef?: React.Ref<HTMLDivElement>;
 }
-export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): React.JSX.Element;
 export declare namespace IDSAccordionBase {
     var displayName: string;
 }

package/components/accordion/accordion.d.ts

@@ -13,7 +13,7 @@ interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onExpandedChange?: (expanded: boolean) => void;
 }
-export declare function IDSAccordion({ headline, subtitle, accordions, level, headlineSize, expanded, defaultExpanded, lean, noBorder, onCollapsed, onExpanded, onExpandedChange, children, ...props }: IDSAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordion({ headline, subtitle, accordions, level, headlineSize, expanded, defaultExpanded, lean, noBorder, onCollapsed, onExpanded, onExpandedChange, children, ...props }: IDSAccordionProps): React.JSX.Element;
 export declare namespace IDSAccordion {
     var displayName: string;
 }

package/components/accordion/accordion.js

@@ -9,7 +9,7 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
     const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
     const isExpanded = isControlled ? expanded : internalExpanded;
-    const hasChildren = React.Children.toArray(children).some(child => {
+    const hasChildren = React.Children.toArray(children).some((child) => {
         return React.isValidElement(child) && child.type === IDSAccordion;
     });
     useEffect(() => {

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

@@ -18,7 +18,7 @@ export interface IDSAlertBaseProps extends React.HTMLAttributes<HTMLDivElement>
     onToggleCollapse?: () => void;
     client?: boolean;
 }
-export declare function IDSAlertBase({ collapsible, ribbon, collapsed, dismissible, headline, collapsableHeadline, compact, type, srCloseText, srCollapseText, srExpandText, noRole, onClose, onToggleCollapse, client, children, className, ...props }: IDSAlertBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAlertBase({ collapsible, ribbon, collapsed, dismissible, headline, collapsableHeadline, compact, type, srCloseText, srCollapseText, srExpandText, noRole, onClose, onToggleCollapse, client, children, className, ...props }: IDSAlertBaseProps): React.JSX.Element;
 export declare namespace IDSAlertBase {
     var displayName: string;
 }

package/components/alert/alert-base.js

@@ -21,9 +21,9 @@ function IDSAlertBase({ collapsible = false, ribbon = false, collapsed = false,
             "ids-alert--ribbon": ribbon,
             "ids-alert--compact": compact,
             "ids-alert--dismissible": dismissible
-        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
+        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
                                 "ids-alert__expand-button--expanded": !collapsed
-                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
+                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 }
 IDSAlertBase.displayName = "IDSAlertBase";
 

package/components/alert/alert.d.ts

@@ -4,7 +4,7 @@ export interface IDSAlertProps extends Omit<IDSAlertBaseProps, "contentId" | "on
     defaultCollapsed?: boolean;
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSAlert({ collapsed, defaultCollapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAlert({ collapsed, defaultCollapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react").JSX.Element;
 export declare namespace IDSAlert {
     var displayName: string;
 }

package/components/badge/badge.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/badge/badge.css';
 
 const IDSBadge = React.memo(function IDSBadge(props) {
     const { type = "primary", icon, children, className, ...rest } = props;
-    return (jsx("div", { ...rest, className: clsx(`ids-badge ids-badge--${type}`, className), children: jsxs("div", { className: "ids-badge__inner", children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), icon && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
+    return (jsx("div", { ...rest, className: clsx(`ids-badge ids-badge--${type}`, className), children: jsxs("div", { className: "ids-badge__inner", children: [icon && (jsx("span", { className: "ids-badge__icon", children: jsx("span", { className: `ids-icon-${icon}-small`, "aria-hidden": "true" }) })), children] }) }));
 });
 IDSBadge.displayName = "IDSBadge";
 

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -4,7 +4,7 @@ interface IDSBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     lead?: string;
     mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;
 }
-export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): React.JSX.Element;
 export declare namespace IDSBreadcrumbs {
     var displayName: string;
 }

package/components/breadcrumbs/breadcrumbs.js

@@ -25,19 +25,23 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
         }
     };
     const getMobileLink = () => {
-        if (mobileLink) {
-            return React.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
-        }
-        else {
+        if (!mobileLink)
             return null;
-        }
+        return React.cloneElement(mobileLink, {
+            className: "ids-breadcrumbs__mobile-link"
+        });
     };
     const getLinks = () => {
         const links = React.Children.toArray(children);
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {
-                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: child }, index));
+                const currentChild = React.isValidElement(child)
+                    ? React.cloneElement(child, {
+                        "aria-current": "page"
+                    })
+                    : child;
+                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: currentChild }, index));
             }
             else {
                 return (jsxs("li", { className: "ids-breadcrumbs__crumb", "data-crumb": true, children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));

package/components/button/button-group.d.ts

@@ -8,7 +8,7 @@ interface IDSButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     unresponsive?: boolean;
     break?: Break;
 }
-export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): React.JSX.Element;
 export declare namespace IDSButtonGroup {
     var displayName: string;
 }

package/components/button/button.d.ts

@@ -7,6 +7,7 @@ export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     fab?: boolean;
     focusAnchor?: boolean;
     icon?: string;
+    endIcon?: string;
     iconButton?: boolean;
     loading?: boolean;
     mBlock?: boolean;

package/components/button/button.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { IDSSpinner } from '../form/spinner/spinner.js';
 
-const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
+const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", endIcon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
     let classNames;
     if (fab) {
         classNames = clsx("ids-button", {
@@ -26,7 +26,12 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
             "ids-focus-anchor": focusAnchor
         }, className);
     }
-    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children] }));
+    const loadingHandler = !!loading
+        ? {
+            tabIndex: -1
+        }
+        : {};
+    return (jsxs("button", { ...props, ref: ref, className: classNames, ...(toggle ? { "aria-pressed": active } : {}), ...loadingHandler, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}${size === "s" ? "-small" : ""}`, "aria-hidden": "true" }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children, endIcon && jsx("span", { className: `ids-icon-${endIcon}` })] }));
 });
 IDSButton.displayName = "IDSButton";
 

package/components/button/control-button.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+export interface IDSControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    disabled?: boolean;
+}
+export declare const IDSControlButton: import("react").ForwardRefExoticComponent<IDSControlButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/button/control-button.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+const IDSControlButton = forwardRef(({ disabled = false, icon, className, ...props }, ref) => {
+    return (jsx("button", { className: clsx("ids-control-button", className), ...props, ref: ref, "aria-disabled": disabled, disabled: disabled, children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) }));
+});
+IDSControlButton.displayName = "IDSControlButton";
+
+export { IDSControlButton };

package/components/card/card.d.ts

@@ -9,7 +9,7 @@ interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
     lean?: boolean;
     interactive?: boolean;
 }
-export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): React.JSX.Element;
 export declare namespace IDSCard {
     var displayName: string;
 }

package/components/carousel/carousel-item.d.ts

@@ -8,7 +8,7 @@ export interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElemen
     nextSlide?: boolean;
     children: React.ReactNode;
 }
-export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): React.JSX.Element;
 export declare namespace IDSCarouselItem {
     var displayName: string;
 }

package/components/carousel/carousel.d.ts

@@ -5,7 +5,7 @@ interface IDSCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     srPrevLabel?: string;
     children: React.ReactNode;
 }
-export declare function IDSCarousel({ srNextLabel, srPrevLabel, className, children, ...props }: IDSCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCarousel({ srNextLabel, srPrevLabel, className, children, ...props }: IDSCarouselProps): React.JSX.Element;
 export declare namespace IDSCarousel {
     var displayName: string;
 }

package/components/carousel/carousel.js

@@ -23,7 +23,7 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
     // Validate slide count
     useEffect(() => {
         if (slideCount < 3) {
-            console.warn("Carousel requires at least 3 carousel-items");
+            console.warn("Carousel requires at least 4 carousel-items");
         }
     }, [slideCount]);
     // Initial setup
@@ -51,10 +51,12 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
         const firstImage = carouselRef.current?.querySelector(".ids-carousel-item__image img");
         const buttons = carouselRef.current?.querySelectorAll("button");
         const handleImageLoad = () => {
-            setButtonLocation();
-            buttons?.forEach(btn => {
-                setTimeout(() => {
-                    btn.style.opacity = "1";
+            setTimeout(() => {
+                setButtonLocation();
+                buttons?.forEach(btn => {
+                    setTimeout(() => {
+                        btn.style.opacity = "1";
+                    }, 200);
                 }, 200);
             });
         };
@@ -124,7 +126,7 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
                     "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-content", {
+                }), 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

@@ -13,8 +13,9 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     dayTo?: number;
     srText?: string;
 }
-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 declare namespace IDSDateLabel {
+declare function IDSDateLabelBase({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react").JSX.Element;
+declare namespace IDSDateLabelBase {
     var displayName: string;
 }
+export declare const IDSDateLabel: import("react").MemoExoticComponent<typeof IDSDateLabelBase>;
 export {};

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
 import '@inera/ids-design/components/date-label/date-label.css';
 
-function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
+function IDSDateLabelBase({ 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);
@@ -14,6 +15,7 @@ function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel =
     const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
     return (jsxs("span", { ...props, className: clsx("ids-date-label", className), "aria-label": srText, 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() })] }))] }));
 }
-IDSDateLabel.displayName = "IDSDateLabel";
+IDSDateLabelBase.displayName = "IDSDateLabel";
+const IDSDateLabel = memo(IDSDateLabelBase);
 
 export { IDSDateLabel };

package/components/dialog/dialog-base.js

@@ -20,7 +20,7 @@ const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headl
                     "ids-dialog--hidden": !show,
                     "ids-focus-trap": !noFocusTrap,
                     "ids-dialog--dismissible": !!dismissible
-                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { className: "ids-dialog__close-button", "aria-label": srClose, ...closeHandler }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 });

package/components/dialog/dialog.d.ts

@@ -17,7 +17,7 @@ export interface IDSDialogProps extends HTMLAttributes<HTMLDivElement> {
     noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
 }
-export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react").JSX.Element;
 export declare namespace IDSDialog {
     var displayName: string;
 }

package/components/dialog/dialog.js

@@ -68,7 +68,7 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
             }
         }
     }, [isVisible, autoFocus]);
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, ref: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, srClose: srClose, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, ref: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
 }
 IDSDialog.displayName = "IDSDialog";
 

package/components/district-selector/district-selector.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/district-selector/district-selector.css";
+export interface IDSDistrictSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    srSelectedText?: string;
+    districtIcon?: ReactNode;
+    districtText?: string | ReactNode;
+    selected?: boolean;
+}
+export declare const IDSDistrictSelector: React.NamedExoticComponent<IDSDistrictSelectorProps>;

package/components/district-selector/district-selector.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/district-selector/district-selector.css';
+
+const IDSDistrictSelector = React.memo(function IDSDistrictSelector({ label = "Anpassa innehållet", srSelectedText, districtIcon, districtText, selected, children, className, ...props }) {
+    return (jsx("div", { className: clsx("ids-district-selector", className), ...props, children: jsxs("div", { className: "ids-district-selector__inner", children: [jsxs("div", { className: "ids-district-selector__content", children: [selected && districtIcon && (jsx("div", { className: "ids-district-selector__district-icon", "aria-label": srSelectedText, children: districtIcon })), selected && districtText && (jsx("div", { className: "ids-district-selector__district-text", "aria-label": srSelectedText, children: districtText })), !selected && jsx("div", { className: "ids-district-selector__label", children: label })] }), jsx("div", { className: "ids-district-selector__button", children: children })] }) }));
+});
+IDSDistrictSelector.displayName = "IDSDistrictSelector";
+
+export { IDSDistrictSelector };

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

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import "@inera/ids-design/components/dropdown/dropdown.css";
 type Position = "left" | "right";
 export interface IDSDropdownBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
-    expanded: boolean;
+    expanded?: boolean;
     mBlock?: boolean;
     sBlock?: boolean;
     position?: Position;
@@ -14,5 +14,5 @@ export interface IDSDropdownBaseProps extends React.HTMLAttributes<HTMLSpanEleme
     onTriggerClick?: () => void;
     client?: boolean;
 }
-export declare function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock, sBlock, client, children, className, maxHeight, minWidth, contentRef, ...props }: IDSDropdownBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock, sBlock, client, children, className, maxHeight, minWidth, contentRef, ...props }: IDSDropdownBaseProps): React.JSX.Element;
 export {};

package/components/dropdown/dropdown-base.js

@@ -3,7 +3,7 @@ import React, { useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 
-function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
+function IDSDropdownBase({ expanded = false, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
     const reactId = useId();
     const triggerId = `dropdown-trigger-${reactId}`;
     const contentId = `dropdown-trigger-${reactId}`;

package/components/dropdown/dropdown.d.ts

@@ -8,10 +8,11 @@ type Props = Omit<IDSDropdownBaseProps, "onTriggerClick" | "triggerRef" | "conte
     persistent?: boolean;
     sBlock?: boolean;
     mBlock?: boolean;
+    expaneded?: boolean;
     onClosed?: () => void;
     onOpened?: () => void;
 };
-export declare function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded, persistent, onClosed, onOpened, children, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded, persistent, onClosed, onOpened, children, className, ...props }: Props): React.JSX.Element;
 export declare namespace IDSDropdown {
     var displayName: string;
 }

package/components/dropdown/dropdown.js

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from 'react';
 import { IDSDropdownBase } from './dropdown-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 
 function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded = false, persistent = false, onClosed, onOpened, children, className, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -15,6 +16,7 @@ function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, ex
         onClosed?.();
     };
     useEsc(closeMenu, triggerRef, contentRef, isExpanded);
+    useClickOutside(closeMenu, contentRef, triggerRef, !persistent && isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface Footer1177ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177Columns({ col1, col2, col3 }: Footer1177ColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177Columns {
+    var displayName: string;
+}

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

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177Columns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
+    }
+    if (!!col1 && !!col2 && !col3) {
+        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 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        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 null;
+}
+IDSFooter1177Columns.displayName = "IDSFooter1177Columns";
+
+export { IDSFooter1177Columns };

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface Footer1177HeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    subHeadline?: string;
+}
+export declare function IDSFooter1177Headline({ headline, srHeadline, subHeadline }: Footer1177HeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177Headline {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177Headline({ headline = "", srHeadline = "", subHeadline = "" }) {
+    if (srHeadline) {
+        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("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
+}
+IDSFooter1177Headline.displayName = "IDSFooter1177Headline";
+
+export { IDSFooter1177Headline };

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

@@ -15,7 +15,7 @@ export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177({ headline, srHeadline, subHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177({ headline, srHeadline, subHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): React.JSX.Element;
 export declare namespace IDSFooter1177 {
     var displayName: string;
 }

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

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
+import { IDSFooter1177Headline } from './footer-1177-headline.js';
+import { IDSFooter1177Columns } from './footer-1177-columns.js';
 
 function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            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("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
-        }
-        if (!!col1 && !!col2 && !col3) {
-            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 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            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 null;
-    };
-    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: [jsxs("div", { className: "ids-footer-1177__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177__darkmode-toggle", children: toggle })] }), 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 }) })] })] }));
+    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: jsx(IDSFooter1177Headline, { headline: headline, subHeadline: subHeadline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-1177__content", children: [jsxs("div", { className: "ids-footer-1177__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177__cols", children: jsx(IDSFooter1177Columns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), 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 }) })] })] }));
 }
 IDSFooter1177.displayName = "IDSFooter1177";
 

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface Footer1177AdminColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177AdminColumns({ col1, col2, col3 }: Footer1177AdminColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177AdminColumns {
+    var displayName: string;
+}

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

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177AdminColumns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: col1 });
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooter1177AdminColumns.displayName = "IDSFooter1177AdminColumns";
+
+export { IDSFooter1177AdminColumns };

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Footer1177AdminHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooter1177AdminHeadline({ headline, srHeadline }: Footer1177AdminHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177AdminHeadline {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177AdminHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-admin__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
+}
+IDSFooter1177AdminHeadline.displayName = "IDSFooter1177AdminHeadline";
+
+export { IDSFooter1177AdminHeadline };

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

@@ -14,7 +14,7 @@ interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177Admin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177AdminProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177Admin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177AdminProps): React.JSX.Element;
 export declare namespace IDSFooter1177Admin {
     var displayName: string;
 }