@inera/ids-react 7.0.0 → 7.0.1

package/components/button/button.js

@@ -94,5 +94,6 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
         : oldIcon;
     return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), oldIcon && renderOldIcon, children] }));
 });
+IDSButton.displayName = "IDSButton";
 
 export { IDSButton };

package/components/dropdown/dropdown.js

@@ -60,12 +60,12 @@ const IDSDropdown = ({ expanded = false, persistent = false, position = "right",
                 key: `dropdown-content-link-${i}`
             });
         });
-        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx("ids-dropdown__content", {
+        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 (jsxs("span", { className: clsx(`ids-dropdown ids-dropdown--position-${position}`, className, {
+    return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
             "ids-dropdown--mblock": mBlock,
             "ids-dropdown--sblock": sBlock
         }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));

package/components/form/check-button/check-button.d.ts

@@ -1,7 +1,7 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSCheckButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     children?: ReactNode;
 }
-export declare const IDSCheckButton: React.FC<IDSCheckButtonProps>;
+export declare const IDSCheckButton: import("react").ForwardRefExoticComponent<IDSCheckButtonProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/check-button/check-button.js

@@ -1,11 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSCheckButton = ({ disabled = false, id, children, className, ...props }) => {
+const IDSCheckButton = forwardRef(({ disabled = false, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
-    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), children: [jsx("input", { id: fieldId, className: "ids-check-button__input", type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
-};
+    const checkButtonRef = useRef(null);
+    useImperativeHandle(ref, () => checkButtonRef.current);
+    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), children: [jsx("input", { id: fieldId, ref: checkButtonRef, className: "ids-check-button__input", type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
+});
+IDSCheckButton.displayName = "IDSCheckButton";
 
 export { IDSCheckButton };

package/components/form/checkbox/checkbox.d.ts

@@ -14,4 +14,4 @@ export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement>
     tooltip?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSCheckbox: React.FC<IDSCheckboxProps>;
+export declare const IDSCheckbox: React.ForwardRefExoticComponent<IDSCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/checkbox/checkbox.js

@@ -1,16 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import clsx from 'clsx';
 
-const IDSCheckbox = ({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, errorMsg = "", groupErrorMsgId = "", tooltip, id, children, className, ...props }) => {
+const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, errorMsg = "", groupErrorMsgId = "", tooltip, id, children, className, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const checkboxRef = ref ?? internalRef;
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
-    const checkboxRef = useRef(null);
     const hasValidValue = useInputValidity(checkboxRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     if (groupErrorMsgId) {
@@ -20,13 +21,13 @@ const IDSCheckbox = ({ invalid = false, disabled = false, required = false, inde
         useAriaDescribedBy(checkboxRef, errorMsgId, isInvalid, !!errorMsg);
     }
     useEffect(() => {
-        if (indeterminate) {
+        if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [checkboxRef, indeterminate]);
     useEffect(() => {
-        if (checkboxRef.current) {
-            const checkboxEl = checkboxRef.current;
+        const checkboxEl = checkboxRef.current;
+        if (checkboxEl) {
             const updateAriaChecked = () => {
                 checkboxEl.setAttribute("aria-checked", checkboxEl.indeterminate ? "mixed" : `${checkboxEl.checked}`);
             };
@@ -48,6 +49,7 @@ const IDSCheckbox = ({ invalid = false, disabled = false, required = false, inde
                                     "ids-label--clickable": disabled,
                                     "ids-label--no-label": noLabel
                                 }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
-};
+});
+IDSCheckbox.displayName = "IDSCheckbox";
 
 export { IDSCheckbox };

package/components/form/input/input.d.ts

@@ -18,5 +18,5 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     submitButton?: ReactNode;
     oldIcon?: ReactNode;
 }
-export declare const IDSInput: React.FC<IDSInputProps>;
+export declare const IDSInput: React.ForwardRefExoticComponent<IDSInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/input/input.js

@@ -1,18 +1,25 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSInput = ({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, block = false, light = false, readOnly = false, id, tooltip, submitButton, oldIcon, className, ...props }) => {
+const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "", showSearchLabel = false, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, block = false, light = false, readOnly = false, id, tooltip, submitButton, oldIcon, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const hintId = useElementId();
     const oldIconRef = useRef(null);
     const inputRef = useRef(null);
+    const combinedRef = (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
     const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg && !noValidation, !!hint, hintId);
@@ -45,10 +52,11 @@ const IDSInput = ({ label = "", type = "text", icon = "", hint = "", showSearchL
                         }), "aria-hidden": "false", htmlFor: fieldId, children: label }), tooltip] }), jsxs("div", { className: "ids-input__wrapper", children: [jsxs("div", { className: clsx("ids-input__inner-wrapper", {
                             "ids-input--icon": icon,
                             "ids-input__inner-wrapper--search": type === "search"
-                        }), children: [jsx("input", { ref: inputRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input", {
+                        }), children: [jsx("input", { ref: combinedRef, id: fieldId, type: type, readOnly: readOnly, className: clsx("ids-input", {
                                     "ids-input--light": light,
                                     "ids-input--invalid": invalid
                                 }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }), type === "search" && jsx("span", { className: "ids-input__search-icon" }), icon && jsx("span", { className: `ids-input__icon ids-icon-${icon}` }), oldIcon && jsx("span", { className: "ids-input__icon", children: renderOldIcon })] }), submitButton] }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSInput.displayName = "IDSInput"; // Needed when using forwardRef
 
 export { IDSInput };

package/components/form/radio/radio.d.ts

@@ -14,4 +14,4 @@ export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     children?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadio: React.FC<IDSRadioProps>;
+export declare const IDSRadio: React.ForwardRefExoticComponent<IDSRadioProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/radio/radio.js

@@ -1,14 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSRadio = ({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, tooltip, id, children, className, onChange, ...props }) => {
+const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, tooltip, id, children, className, onChange, ...props }, ref) => {
     const fieldId = useElementId(id);
     const radioRef = useRef(null);
+    useImperativeHandle(ref, () => radioRef.current);
     const hasValidValue = useInputValidity(radioRef);
     const isInvalid = (invalid || groupInvalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(radioRef, groupErrorMsgId, isInvalid, !!groupErrorMsgId);
@@ -21,6 +22,7 @@ const IDSRadio = ({ name = "", groupErrorMsgId = "", invalid = false, groupInval
                 }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-radio__label ids-label", {
                             "ids-input--clickable": !disabled
                         }), children: children }), tooltip] })] }));
-};
+});
+IDSRadio.displayName = "IDSRadio";
 
 export { IDSRadio };

package/components/form/radio-button/radio-button.d.ts

@@ -4,6 +4,6 @@ export interface IDSRadioButtonProps extends InputHTMLAttributes<HTMLInputElemen
     id?: string;
     icon: string;
     children?: ReactNode;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => {};
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadioButton: React.FC<IDSRadioButtonProps>;
+export declare const IDSRadioButton: React.ForwardRefExoticComponent<IDSRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/radio-button/radio-button.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSRadioButton = ({ name = "", icon = "user", id, children, onChange, className, ...props }) => {
+const IDSRadioButton = forwardRef(({ name = "", icon = "user", id, children, onChange, className, ...props }, ref) => {
     const fieldId = useElementId(id);
-    const radioRef = useRef(null);
-    return (jsxs("div", { className: clsx("ids-radio-button", className), children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: "ids-radio-button__input", name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
-};
+    const radioButtonRef = useRef(null);
+    useImperativeHandle(ref, () => radioButtonRef.current);
+    return (jsxs("div", { className: clsx("ids-radio-button", className), children: [jsx("input", { id: fieldId, ref: radioButtonRef, type: "radio", className: "ids-radio-button__input", name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
+});
+IDSRadioButton.displayName = "IDSRadioButton";
 
 export { IDSRadioButton };

package/components/form/range/range.d.ts

@@ -12,5 +12,5 @@ interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     tooltip?: ReactNode;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRange: React.FC<IDSRangeProps>;
+export declare const IDSRange: React.ForwardRefExoticComponent<IDSRangeProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/range/range.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import '@inera/ids-design/components/form/range/range.css';
 import clsx from 'clsx';
 
-const IDSRange = ({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, tooltip, id, onChange, className, ...props }) => {
+const IDSRange = forwardRef(({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, tooltip, id, onChange, className, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(value);
     const [ticks, setTicks] = useState([]);
     const fieldId = useElementId(id);
     const rangeRef = useRef(null);
+    useImperativeHandle(ref, () => rangeRef.current);
     useEffect(() => {
         if (step > 0) {
             const steps = [];
@@ -26,7 +27,8 @@ const IDSRange = ({ label = "", value = 0, showTicks = false, interval = 0, min
             onChange(ev);
         }
     };
-    return (jsxs("div", { className: clsx("ids-range", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: `ids-label ${disabled ? "ids-label--disabled" : ""}`, children: label }), tooltip] }), jsx("input", { id: fieldId, ref: rangeRef, type: "range", className: "ids-range__input", min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, step: step, value: internalValue, "aria-valuenow": internalValue, disabled: disabled, style: { backgroundSize: ((internalValue - min) * 100) / (max - min) + "% 100%" }, onChange: handleOnChange, ...props }), showTicks && (jsx("div", { className: `ids-range-ticks ${disabled ? "ids-range-ticks--disabled" : ""}`, children: ticks.map(tick => (jsx("div", { className: "ids-range-tick", children: tick }, tick))) }))] }));
-};
+    return (jsxs("div", { className: clsx("ids-range", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip] }), jsx("input", { id: fieldId, ref: rangeRef, type: "range", className: "ids-range__input", min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, step: step, value: internalValue, "aria-valuenow": internalValue, disabled: disabled, style: { backgroundSize: ((internalValue - min) * 100) / (max - min) + "% 100%" }, onChange: handleOnChange, ...props }), showTicks && (jsx("div", { className: clsx("ids-range-ticks", { "ids-range-ticks--disabled": disabled }), children: ticks.map(tick => (jsx("div", { className: "ids-range-tick", children: tick }, tick))) }))] }));
+});
+IDSRange.displayName = "IDSRange";
 
 export { IDSRange };

package/components/form/select/select.d.ts

@@ -11,5 +11,5 @@ interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     tooltip?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSSelect: React.FC<IDSSelectProps>;
+export declare const IDSSelect: React.ForwardRefExoticComponent<IDSSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export {};

package/components/form/select/select.js

@@ -1,22 +1,24 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSSelect = ({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }) => {
+const IDSSelect = forwardRef(({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const selectRef = useRef(null);
+    useImperativeHandle(ref, () => selectRef.current);
     const hasValidValue = useInputValidity(selectRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(selectRef, errorMsgId, isInvalid, !!errorMsg);
     return (jsxs("div", { className: clsx("ids-select-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { htmlFor: fieldId, className: "ids-label", children: label }), tooltip] }), jsx("div", { className: "ids-select-wrapper", children: jsx("select", { id: fieldId, ref: selectRef, className: clsx("ids-select", {
                         "ids-input--light": light
                     }), "aria-invalid": isInvalid, required: required, disabled: disabled, ...props, children: children }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSSelect.displayName = "IDSSelect";
 
 export { IDSSelect };

package/components/form/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, TextareaHTMLAttributes } from "react";
+import { ReactNode, TextareaHTMLAttributes } from "react";
 interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     hint?: string | ReactNode;
@@ -14,5 +14,5 @@ interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     readOnly?: boolean;
     tooltip?: ReactNode;
 }
-export declare const IDSTextarea: React.FC<IDSTextareaProps>;
+export declare const IDSTextarea: import("react").ForwardRefExoticComponent<IDSTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/components/form/textarea/textarea.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTextarea = ({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, id, tooltip, className, ...props }) => {
+const IDSTextarea = forwardRef(({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, id, tooltip, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
     const hintId = useElementId();
     const textareaRef = useRef(null);
+    useImperativeHandle(ref, () => textareaRef.current);
     const hasValidValue = useInputValidity(textareaRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
     useAriaDescribedBy(textareaRef, errorMsgId, isInvalid, !!errorMsg, !!hint, hintId);
@@ -24,6 +25,7 @@ const IDSTextarea = ({ label = "", hint, errorMsg = "", disabled = false, invali
                         }), htmlFor: fieldId, children: label }), tooltip && tooltip] }), jsx("textarea", { ref: textareaRef, id: fieldId, className: clsx("ids-textarea__textarea", {
                     "ids-input--light": light
                 }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, readOnly: readOnly, ...props }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSTextarea.displayName = "IDSTextarea";
 
 export { IDSTextarea };

package/components/form/time/time.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     errorMsg?: string;
@@ -9,5 +9,5 @@ interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
     light?: boolean;
     tooltip?: ReactNode;
 }
-export declare const IDSTime: React.FC<IDSTimeProps>;
+export declare const IDSTime: import("react").ForwardRefExoticComponent<IDSTimeProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/time/time.js

@@ -1,24 +1,26 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
 import clsx from 'clsx';
 
-const IDSTime = ({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, id, tooltip, className, ...props }) => {
+const IDSTime = forwardRef(({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, id, tooltip, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const errorMsgId = useElementId();
-    const timeRef = useRef(null);
-    const hasValidValue = useInputValidity(timeRef); // can this happen? i cannot enter an invalid value when i try
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const hasValidValue = useInputValidity(inputRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(timeRef, errorMsgId, isInvalid, !!errorMsg);
+    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg);
     return (jsxs("div", { className: clsx("ids-time-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
                             "ids-label--disabled": disabled
-                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time", children: jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: timeRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
+                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time", children: jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
                             "ids-input--light": light
                         }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }) }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
-};
+});
+IDSTime.displayName = "IDSTime";
 
 export { IDSTime };

package/components/form/toggle/toggle.d.ts

@@ -1,8 +1,8 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 interface IDSToggleProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled?: boolean;
     tooltip?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSToggle: React.FC<IDSToggleProps>;
+export declare const IDSToggle: import("react").ForwardRefExoticComponent<IDSToggleProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/toggle/toggle.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSToggle = ({ disabled = false, tooltip, id, children, className, ...props }) => {
+const IDSToggle = forwardRef(({ disabled = false, tooltip, id, children, className, ...props }, ref) => {
     const fieldId = useElementId(id);
     const toggleRef = useRef(null);
+    useImperativeHandle(ref, () => toggleRef.current);
     return (jsx(Fragment, { children: jsxs("div", { className: clsx("ids-toggle", className), children: [jsx("input", { id: fieldId, ref: toggleRef, className: "ids-toggle__input", type: "checkbox", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-tooltip-wrapper ids-label-tooltip-wrapper--inline", children: [jsx("label", { htmlFor: fieldId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip] })] }) }));
-};
+});
+IDSToggle.displayName = "IDSToggle";
 
 export { IDSToggle };

package/components/puff-list/puff-list-item/puff-list-item.d.ts

@@ -11,6 +11,7 @@ interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     day?: number;
     time?: string;
     noContent?: boolean;
+    noMargin?: boolean;
     dateLabel?: ReactNode;
     children?: ReactNode;
 }

package/components/puff-list/puff-list-item/puff-list-item.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/puff-list/puff-list.css';
 import { getMonthAsSweText, getDayAsText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, dateLabel, className, children }) => {
+const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, noMargin = false, dateLabel, className, children }) => {
     const [presentedDate, setPresentedDate] = useState(date);
     useEffect(() => {
         if (date) {
@@ -27,23 +27,21 @@ const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, y
         }
         return "";
     };
-    const getHeaderClass = (noContent) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item--no-margin": noContent
+    const getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
+        "ids-puff-list-item--no-margin": noMargin
     });
     const renderHeadline = () => {
         const headlineContent = jsx(Fragment, { children: headline });
         if (headlineLink && isValidElement(headlineLink)) {
-            return (jsx("h2", { className: getHeaderClass(noContent), children: cloneElement(headlineLink, {
+            return (jsx("h2", { className: getHeaderClass(noMargin), children: cloneElement(headlineLink, {
                     ...headlineLink.props,
                     children: headlineContent
                 }) }));
         }
-        return jsx("h2", { className: getHeaderClass(noContent), children: headline });
+        return jsx("h2", { className: getHeaderClass(noMargin), children: headline });
     };
     const renderBody = () => {
-        if (noContent)
-            return null;
-        const content = (jsxs(Fragment, { children: [renderHeadline(), jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
+        const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
         if (itemLink && isValidElement(itemLink)) {
             return cloneElement(itemLink, {
                 ...itemLink.props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inera/ids-react",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "type": "module",
   "peerDependencies": {
     "react": "*"