@inera/ids-react 8.1.0 → 8.2.0

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

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/action-link/action-link.css";
+export interface IDSActionLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+    image?: ReactNode;
+}
+export declare function IDSActionLink({ image, children, className, ...props }: IDSActionLinkProps): import("react/jsx-runtime").JSX.Element;

package/components/action-link/action-link.js

@@ -0,0 +1,9 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@inera/ids-design/components/action-link/action-link.css';
+import clsx from 'clsx';
+
+function IDSActionLink({ image, children, className, ...props }) {
+    return (jsx("div", { className: clsx("ids-action-link", className), ...props, children: jsxs("div", { className: "ids-action-link__inner", children: [jsx("div", { className: "ids-action-link__image", children: image }), children, jsx("div", { className: "ids-action-link__icon", "aria-hidden": "true" })] }) }));
+}
+
+export { IDSActionLink };

package/components/form/checkbox/checkbox.js

@@ -47,8 +47,9 @@ const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required =
                         }), "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: !noValidation && required, "aria-required": !noValidation && required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                             "ids-label-tooltip-wrapper--block": block,
                             "ids-label-tooltip-wrapper--inline": tooltip
-                        }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-checkbox__label", {
-                                    "ids-label--clickable": disabled,
+                        }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-checkbox__label ids-label", {
+                                    "ids-label--clickable": !disabled,
+                                    "ids-label--disabled": disabled,
                                     "ids-label--no-label": noLabel
                                 }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
 });

package/components/form/datepicker/datepicker.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { Matcher, Modifiers } from "react-day-picker";
+import "@inera/ids-design/components/form/datepicker/datepicker.css";
+export interface IDSDatePickerProps extends React.HTMLAttributes<HTMLElement> {
+    label: string;
+    value?: string;
+    light?: boolean;
+    placeholder?: string;
+    calendarHeader?: string;
+    defaultMonth?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    srOpenText?: string;
+    srCloseText?: string;
+    focusedDay?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    errorMsg?: string;
+    missingDateErrorMsg?: string;
+    invalidDateErrorMsg?: string;
+    invalid?: boolean;
+    disableNavigation?: boolean;
+    modifiers?: Record<string, Matcher | Matcher[]>;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
+}
+export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/form/datepicker/datepicker.js

@@ -0,0 +1,179 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getWeek, format, isValid, subMonths, addMonths } from 'date-fns';
+import { sv } from 'react-day-picker/locale';
+import clsx from 'clsx';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { DayPicker, WeekNumberHeader, MonthsDropdown, YearsDropdown, useDayPicker, DropdownNav } from 'react-day-picker';
+import { useFocusTrap } from '../../utils/hooks/useFocusTrap.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import '@inera/ids-design/components/form/datepicker/datepicker.css';
+
+const locale = { locale: sv };
+const createNewDate = (dateString) => {
+    return new Date(dateString + "T00:00:00Z");
+};
+const getSweMonth = (date) => {
+    return `${format(date, "MMMM", locale)}`;
+};
+const getSweYear = (date) => {
+    return `${format(date, "yyyy", locale)}`;
+};
+const getPrevMonthYear = (date) => {
+    return `${getSweMonth(subMonths(date, 1))} ${getSweYear(subMonths(date, 1))}`;
+};
+const getNextMonthYear = (date) => {
+    return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
+};
+function IDSDatePicker({ label, value = "", light = false, placeholder = "åååå/mm/dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required = false, invalid = false, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
+    const shortWeek = "v.";
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const headerRef = useRef(null);
+    const prevMonthButtonRef = useRef(null);
+    const nextMonthButtonRef = useRef(null);
+    const dialogId = useElementId();
+    const headerId = useElementId();
+    const inputId = useElementId();
+    const errorMsgId = useElementId();
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const initialSelectedDate = !!value ? createNewDate(value) : undefined;
+    const [selectedDate, setSelectedDate] = useState(initialSelectedDate || defaultMonth);
+    const [month, setMonth] = useState(initialSelectedDate || defaultMonth || new Date());
+    const [hasDateError, setHasDateError] = useState(false);
+    const [hasMissingError, setHasMissingError] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(invalid);
+    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg;
+    const showMissingError = !!hasMissingError && !!missingDateErrorMsg;
+    const showError = !!invalid && !!errorMsg;
+    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, (showError || showMissingError || showInvalidError) && !noValidation);
+    useFocusTrap(dialogRef.current, isDialogOpen);
+    const handleOpenDialog = (e) => {
+        e.preventDefault();
+        setIsDialogOpen(true);
+        onOpen?.();
+    };
+    const closeDialog = () => {
+        setIsDialogOpen(false);
+        triggerRef.current.focus();
+        onClose?.();
+    };
+    const handleDayPickerSelect = (date) => {
+        const dateString = format(date, "yyyy-MM-dd");
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        if (!date) {
+            setInputValue("");
+            setSelectedDate(undefined);
+        }
+        else {
+            setSelectedDate(date);
+            setInputValue(dateString);
+        }
+        requestAnimationFrame(() => {
+            if (inputRef.current) {
+                inputRef.current.reportValidity();
+                inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+                inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+                setHasMissingError(!noValidation && required && inputRef.current.validity.valueMissing);
+                setIsInvalid(!inputRef.current.validity.valid || invalid);
+            }
+        });
+        emitValue(dateString, date);
+        closeDialog();
+    };
+    const handleInvalid = (e) => {
+        setHasMissingError(!noValidation && required && e.target.validity.valueMissing);
+        setIsInvalid(!e.target.validity.valid || invalid);
+    };
+    const handleInputChange = (e) => {
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        setInputValue(e.target.value);
+        const parsedDate = createNewDate(e.target.value);
+        if (isValid(parsedDate)) {
+            setSelectedDate(parsedDate);
+            setMonth(parsedDate);
+        }
+        else {
+            setSelectedDate(undefined);
+        }
+        emitValue(e.target.value, parsedDate);
+    };
+    const emitValue = (val, parsedDate) => {
+        const isMissing = required && !val;
+        const isValidDate = parsedDate instanceof Date && isValid(parsedDate);
+        const customEvent = new CustomEvent("change", {
+            detail: {
+                value: val,
+                valueAsDate: isValidDate ? createNewDate(val) : undefined,
+                invalidDate: !isValid(parsedDate),
+                missingDate: isMissing
+            },
+            bubbles: true
+        });
+        onChange?.(customEvent);
+    };
+    const handleBlur = () => {
+        setHasDateError(!noValidation && value.trim().length && !isValid(selectedDate));
+    };
+    function CustomNav(props) {
+        // Add the nav buttons after the dropdowns for correct tab order
+        const { children } = props;
+        const { goToMonth, previousMonth, nextMonth } = useDayPicker();
+        const currentMonth = "aktuell månad";
+        const goTo = "gå till";
+        const goToPrevMonth = () => {
+            previousMonth && goToMonth(previousMonth);
+            requestAnimationFrame(() => {
+                if (prevMonthButtonRef.current) {
+                    prevMonthButtonRef.current.focus();
+                }
+            });
+        };
+        const goToNextMonth = () => {
+            nextMonth && goToMonth(nextMonth);
+            requestAnimationFrame(() => {
+                if (nextMonthButtonRef.current) {
+                    nextMonthButtonRef.current.focus();
+                }
+            });
+        };
+        return (jsxs(DropdownNav, { className: "ids-datepicker__nav", ...props, children: [jsx("div", { className: "ids-datepicker__nav-dropdowns", children: children }), jsxs("div", { className: "ids-datepicker__nav-buttons", children: [jsx("button", { type: "button", ref: prevMonthButtonRef, className: "ids-datepicker__nav-prev", onClick: goToPrevMonth, disabled: !previousMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getPrevMonthYear(month)}` }), jsx("button", { type: "button", ref: nextMonthButtonRef, className: "ids-datepicker__nav-next", onClick: goToNextMonth, disabled: !nextMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getNextMonthYear(month)}` })] })] }));
+    }
+    useEffect(() => {
+        const header = headerRef.current;
+        if (!header)
+            return;
+        header?.focus();
+    }, [isDialogOpen]);
+    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && (isInvalid || hasDateError) }, className), ...props, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: required, disabled: disabled, "aria-invalid": !noValidation && (isInvalid || hasDateError), placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur }), jsx("button", { ref: triggerRef, className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled, onClick: handleOpenDialog, "aria-controls": "dialog", "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+                                    labelWeekNumberHeader: () => "Veckonumer",
+                                    labelWeekNumber: (weekNumber) => `vecka`,
+                                    labelDayButton(date, modifiers, options, dateLib) {
+                                        const formattedDate = dateLib.format(date, "EEEE d MMMM yyyy", { locale: sv });
+                                        const weekNumber = getWeek(date, {
+                                            weekStartsOn: 1,
+                                            firstWeekContainsDate: 4
+                                        });
+                                        return `${formattedDate}, vecka ${weekNumber}`;
+                                    },
+                                    labelNext: () => "Nästa månad",
+                                    labelPrevious: () => "Föregående månad",
+                                    labelMonthDropdown: () => "Välj månad",
+                                    labelYearDropdown: () => "Välj år"
+                                }, modifiers: modifiers, captionLayout: "dropdown", showWeekNumber: true, autoFocus: true, components: {
+                                    Nav: () => null,
+                                    DropdownNav: CustomNav,
+                                    WeekNumberHeader: props => (jsx(WeekNumberHeader, { ...props, className: "ids-datepicker__week-number-header", children: shortWeek })),
+                                    MonthsDropdown: props => (jsx(MonthsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__month-select" })),
+                                    YearsDropdown: props => (jsx(YearsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__year-select" }))
+                                }, startMonth: startMonth, endMonth: endMonth, month: month, onMonthChange: setMonth, defaultMonth: defaultMonth, selected: selectedDate, onSelect: handleDayPickerSelect, onDayClick: onDayClick })] })] }), (showError || showInvalidError || showMissingError) && (jsxs(IDSErrorMessage, { id: errorMsgId, show: true, children: [showInvalidError && !showMissingError && invalidDateErrorMsg, showMissingError && missingDateErrorMsg, showError && errorMsg] }))] }));
+}
+
+export { IDSDatePicker };

package/components/form/input/input.js

@@ -33,7 +33,7 @@ const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "",
                     "ids-label--disabled": disabled || readOnly,
                     "ids-hidden": type === "search" && !showSearchLabel
                 }), htmlFor: fieldId, children: label }), tooltip] }));
-    return (jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    return (jsxs("div", { className: "ids-input-component", children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint }))] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
 });
 IDSInput.displayName = "IDSInput";
 

package/components/form/radio/radio.js

@@ -21,7 +21,8 @@ const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false,
                 }), disabled: disabled, "aria-disabled": disabled, "aria-invalid": isInvalid, name: name, onChange: onChange, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                     "ids-label-tooltip-wrapper--inline": tooltip
                 }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-radio__label ids-label", {
-                            "ids-input--clickable": !disabled
+                            "ids-label--clickable": !disabled,
+                            "ids-label--disabled": disabled
                         }), children: children }), tooltip] })] }));
 });
 IDSRadio.displayName = "IDSRadio";

package/components/grid/container.d.ts

@@ -4,6 +4,7 @@ export interface IDSContainerProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
     maxWidth?: string;
     gutterless?: boolean;
+    rowGap?: string;
     children?: ReactNode;
 }
 export declare const IDSContainer: import("react").ForwardRefExoticComponent<IDSContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/container.js

@@ -3,10 +3,14 @@ import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/container/container.css';
 import clsx from 'clsx';
 
-const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, children, className, style, ...props }, ref) => {
-    const mergedStyle = { ...style, width: width ?? style?.width, maxWidth: maxWidth ?? style?.maxWidth };
-    const classNames = clsx("ids-container", gutterless && `ids-container--gutterless-${gutterless}`, className);
-    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, rowGap, children, className, style, ...props }, ref) => {
+    const mergedStyle = {
+        ...style,
+        width: width ?? style?.width,
+        maxWidth: maxWidth ?? style?.maxWidth,
+        rowGap: rowGap ?? style?.rowGap
+    };
+    return (jsx("div", { ref: ref, className: clsx("ids-container", { "ids-container--gutterless": gutterless }, className), style: mergedStyle, ...props, children: children }));
 });
 IDSContainer.displayName = "IDSContainer";
 

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

@@ -9,7 +9,7 @@ function IDSNavigationContent({ headline = "", maxHeight = "", className, childr
             return link;
         return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: link }, i));
     });
-    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline })), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "auto" }, children: linkWrappers })] })] }));
+    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline })), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "none" }, children: linkWrappers })] })] }));
 }
 
 export { IDSNavigationContent };

package/components/notification/badge/notification-badge.js

@@ -3,7 +3,7 @@ import '@inera/ids-design/components/notification-badge/notification-badge.css';
 import clsx from 'clsx';
 
 function IDSNotificationBadge({ type = "primary", icon = "", onClick, className, children, ...props }) {
-    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
+    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), children] }));
 }
 
 export { IDSNotificationBadge };

package/components/popover/popover.js

@@ -188,7 +188,7 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
     const renderCaret = (pos) => {
         return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
     };
-    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible ? { "data-show": "true" } : {}), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
+    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible && { "data-show": "true" }), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
 };
 
 export { IDSPopover };

package/components/stepper/step.js

@@ -29,7 +29,7 @@ const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicato
             return null;
         return stepNumber;
     };
-    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...(last && { last }), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, onClick: toggleExpansion, onKeyDown: handleKeyPress, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [label && jsx("div", { className: "ids-step__label", children: label }), headline && jsx("div", { className: "ids-step__headline", children: headline })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded

package/components/tabs/tab.js

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

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

@@ -19,6 +19,7 @@ export * from "./components/grid/container";
 export * from "./components/grid/row";
 export * from "./components/grid/column";
 export * from "./components/accordion/accordion";
+export * from "./components/action-link/action-link";
 export * from "./components/alert/alert";
 export * from "./components/global-alert/global-alert";
 export * from "./components/mobile/menu/item/mobile-item";
@@ -35,6 +36,7 @@ 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/date-label/date-label";
 export * from "./components/breadcrumbs/breadcrumbs";
+export * from "./components/form/datepicker/datepicker";
 export * from "./components/dialog/dialog";
 export * from "./components/dropdown/dropdown";
 export * from "./components/dropdown/dropdown-content-link";

package/index.js

@@ -19,6 +19,7 @@ export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';
 export { IDSColumn } from './components/grid/column.js';
 export { IDSAccordion } from './components/accordion/accordion.js';
+export { IDSActionLink } from './components/action-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';
@@ -35,6 +36,7 @@ export { IDSPuffListItemHeader } from './components/puff-list/puff-list-item/puf
 export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item/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 { IDSDropdown } from './components/dropdown/dropdown.js';
 export { IDSDropdownContentLink } from './components/dropdown/dropdown-content-link.js';

package/package.json

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