@inera/ids-react 9.1.1 → 9.2.0

package/components/form/error-message/error-message.d.ts

@@ -6,4 +6,7 @@ interface IDSErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
 export declare function IDSErrorMessage({ show, compact, id, children, className, ...props }: IDSErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSErrorMessage {
+    var displayName: string;
+}
 export {};

package/components/form/error-message/error-message.js

@@ -6,5 +6,6 @@ function IDSErrorMessage({ show = false, compact = false, id, children, classNam
             "ids-error-message--show": show
         }, className), ...props, children: jsxs("span", { className: "ids-error-message__text", children: [" ", children, " "] }) }));
 }
+IDSErrorMessage.displayName = "IDSErrorMessage";
 
 export { IDSErrorMessage };

package/components/form/form-props/form-props.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export interface CommonFormProps {
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    noValidation?: boolean;
+    validationOnBlur?: boolean;
+    label?: string;
+    errorMsg?: string;
+    hint?: string | ReactNode;
+    tooltip?: ReactNode;
+    focusAnchor?: boolean;
+    dataTestId?: string;
+    light?: boolean;
+}
+export interface CommonFormPropsWithReadOnly extends CommonFormProps {
+    readOnly?: boolean;
+}

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

@@ -1,25 +1,16 @@
-import React, { ReactNode, InputHTMLAttributes, CSSProperties } from "react";
-export interface IDSInputBaseProps extends InputHTMLAttributes<HTMLInputElement> {
-    label: string;
-    type?: string;
+import React, { ReactNode, CSSProperties } from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSInputBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     icon?: string;
-    hint?: string | ReactNode;
     unit?: string;
     showSearchLabel?: boolean;
-    errorMsg?: string;
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-    focusAnchor?: boolean;
-    light?: boolean;
-    readOnly?: boolean;
-    tooltip?: ReactNode;
     submitButton?: ReactNode;
-    dataTestId?: string;
-    id?: string;
     hintId?: string;
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     style?: CSSProperties;
 }
-export declare function IDSInputBase({ label, type, icon, hint, unit, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSInputBase({ label, type, icon, hint, unit, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSInputBase {
+    var displayName: string;
+}

package/components/form/input/input-base.js

@@ -3,23 +3,21 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }) {
+function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, ...props }) {
     const reactId = useId();
-    const inputId = !!id ? id : `input-base-${reactId}`;
-    const baseHintId = !!hintId ? hintId : `input-base-hint-${reactId}`;
-    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `input-base-error-${reactId}`;
+    const inputId = id ?? `input-base-${reactId}`;
+    const baseHintId = hintId ?? `input-base-hint-${reactId}`;
+    const baseErrorMsgId = errorMsgId ?? `input-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaHandler = showErrorMsg
-        ? {
-            "aria-describedby": baseErrorMsgId
-        }
-        : !!hint
-            ? {
-                "aria-describedby": baseHintId
-            }
-            : {};
-    ariaHandler["aria-label"] = type === "search" && !showSearchLabel ? label : "";
-    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-input--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
+    const ariaHandler = {};
+    const describedByIds = [showErrorMsg && baseErrorMsgId, hint && baseHintId].filter(Boolean);
+    if (describedByIds.length) {
+        ariaHandler["aria-describedby"] = describedByIds.join(" ");
+    }
+    if (type === "search" && !showSearchLabel && label) {
+        ariaHandler["aria-label"] = label;
+    }
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-input--icon": !!icon }, className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: clsx("ids-label-wrapper", "ids-label-wrapper--margin-bottom", {
                                     "ids-hidden": type === "search" && !showSearchLabel
                                 }), children: [jsx("label", { className: clsx("ids-label", {
                                             "ids-label--disabled": disabled || readOnly
@@ -27,7 +25,8 @@ function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel
                                                     "ids-input--light": light,
                                                     "ids-input--invalid": invalid,
                                                     "ids-focus-anchor": focusAnchor
-                                                }), "aria-invalid": invalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit })] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                                                }), "aria-invalid": invalid, required: required, disabled: disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), unit && (jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit }))] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
+IDSInputBase.displayName = "IDSInputBase";
 
 export { IDSInputBase };

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

@@ -1,23 +1,10 @@
-import { ReactNode, InputHTMLAttributes } from "react";
-interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    label: string;
-    type?: string;
+import { ReactNode } from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+interface IDSInputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     icon?: string;
-    hint?: string | ReactNode;
     unit?: string;
     showSearchLabel?: boolean;
-    errorMsg?: string;
-    disabled?: boolean;
-    invalid?: boolean;
-    required?: boolean;
-    noValidation?: boolean;
-    focusAnchor?: boolean;
-    light?: boolean;
-    readOnly?: boolean;
-    tooltip?: ReactNode;
     submitButton?: ReactNode;
-    dataTestId?: string;
-    validationOnBlur?: boolean;
 }
 export declare const IDSInput: import("react").ForwardRefExoticComponent<IDSInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/form/input/input.js

@@ -6,6 +6,8 @@ import { IDSInputBase } from './input-base.js';
 
 const IDSInput = forwardRef(({ invalid = false, noValidation = false, style, validationOnBlur = false, ...props }, ref) => {
     const inputRef = useRef(null);
+    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
+    const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {
         inputRef.current = node;
@@ -14,10 +16,7 @@ const IDSInput = forwardRef(({ invalid = false, noValidation = false, style, val
         else if (ref)
             ref.current = node;
     };
-    // Validation
-    const hasValidValue = useInputValidity(inputRef, validationOnBlur);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    return jsx(IDSInputBase, { ...props, style: style, invalid: isInvalid, inputRef: mergedRef });
+    return jsx(IDSInputBase, { ...props, style: style, invalid: computedInvalid, inputRef: mergedRef });
 });
 IDSInput.displayName = "IDSInput";
 

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

@@ -1,16 +1,11 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
-export interface IDSRadioBaseProps extends InputHTMLAttributes<HTMLInputElement> {
-    id?: string;
-    name?: string;
-    light?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: ReactNode;
-    dataTestId?: string;
-    children?: ReactNode;
+import React from "react";
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+interface IDSRadioBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     errorMsgId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function IDSRadioBase({ id, name, light, compact, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }: IDSRadioBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }: IDSRadioBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRadioBase {
+    var displayName: string;
+}
+export {};

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

@@ -2,23 +2,21 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSRadioBase({ id, name, light, compact, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }) {
-    const reactId = useId();
-    const inputId = !!id ? id : `radio-base-${reactId}`;
+function IDSRadioBase({ id, name, light, disabled, focusAnchor, tooltip, dataTestId, children, className, inputRef, invalid, errorMsgId, ...props }) {
+    const inputId = id ?? `radio-base-${useId()}`;
     const showErrorMsg = invalid && !!errorMsgId;
-    // for radio the errorMsgId always comes from the group
-    const ariaHandler = showErrorMsg
-        ? {
-            "aria-describedby": errorMsgId
-        }
-        : {};
+    const ariaHandler = {};
+    if (showErrorMsg) {
+        ariaHandler["aria-describedby"] = errorMsgId;
+    }
     return (jsxs("div", { className: clsx("ids-radio", className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: inputRef, type: "radio", className: clsx("ids-radio__input", {
                     "ids-input--light": light,
                     "ids-focus-anchor": focusAnchor
-                }), name: name, disabled: disabled, "aria-disabled": disabled, "aria-invalid": invalid, ...ariaHandler, ...props }), !!children && (jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-radio__label ids-label", {
+                }), name: name, disabled: disabled, "aria-invalid": invalid, ...ariaHandler, ...props }), !!children && (jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-radio__label ids-label", {
                             "ids-label--clickable": !disabled,
                             "ids-label--disabled": disabled
                         }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }));
 }
+IDSRadioBase.displayName = "IDSRadioBase";
 
 export { IDSRadioBase };

package/components/form/radio/radio-group-base.d.ts

@@ -11,4 +11,7 @@ interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElem
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
 export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRadioGroupBase {
+    var displayName: string;
+}
 export {};

package/components/form/radio/radio-group-base.js

@@ -8,5 +8,6 @@ function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact =
                     "ids-label-wrapper--sr-only": hideLegend
                 }, className), children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
+IDSRadioGroupBase.displayName = "IDSRadioGroupBase";
 
 export { IDSRadioGroupBase };

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

@@ -12,4 +12,7 @@ interface IDSRadioGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement>
     onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }: IDSRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRadioGroup {
+    var displayName: string;
+}
 export {};

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

@@ -19,7 +19,6 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
             const { id, ...rest } = child.props;
             const cloneProps = {
                 ...rest,
-                key: child.key,
                 id: child.props.id,
                 name: groupName,
                 required: required && !noValidation,
@@ -28,11 +27,12 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
                 groupInvalid: groupInvalid,
                 onChange: onRadioChange
             };
-            return React.cloneElement(child, cloneProps);
+            return React.cloneElement(child, cloneProps, undefined);
         }
         return child;
     });
     return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
 }
+IDSRadioGroup.displayName = "IDSRadioGroup";
 
 export { IDSRadioGroup };

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

@@ -1,18 +1,6 @@
-import { ReactNode, InputHTMLAttributes } from "react";
-export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
-    id?: string;
-    key?: string;
-    name?: string;
-    light?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSRadioProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
     groupInvalid?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: ReactNode;
-    dataTestId?: string;
-    children?: ReactNode;
-    noValidation?: boolean;
     groupErrorMsgId?: string;
 }
 export declare const IDSRadio: import("react").ForwardRefExoticComponent<IDSRadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/radio/radio.js

@@ -1,14 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef } from 'react';
 import { IDSRadioBase } from './radio-base.js';
 
 const IDSRadio = forwardRef(({ groupErrorMsgId, invalid = false, groupInvalid = false, noValidation = false, children, ...props }, ref) => {
     const radioRef = useRef(null);
-    const isInvalid = invalid || groupInvalid;
-    // Expose ref to user
-    useImperativeHandle(ref, () => radioRef.current);
-    return (jsx(IDSRadioBase, { ...props, inputRef: radioRef, errorMsgId: groupErrorMsgId, invalid: isInvalid, children: children }));
+    const computedInvalid = invalid || groupInvalid;
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        radioRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (jsx(IDSRadioBase, { ...props, inputRef: mergedRef, errorMsgId: groupErrorMsgId, invalid: computedInvalid, children: children }));
 });
 IDSRadio.displayName = "IDSRadio";
 

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

@@ -6,3 +6,6 @@ export interface IDSRadioButtonGroupBaseProps extends InputHTMLAttributes<HTMLFi
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
 export declare function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }: IDSRadioButtonGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRadioButtonGroupBase {
+    var displayName: string;
+}

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

@@ -4,5 +4,6 @@ import clsx from 'clsx';
 function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }) {
     return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", "ids-form-group__fieldset--compact", className), ...props, children: [legend ? (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })) : null, children] }));
 }
+IDSRadioButtonGroupBase.displayName = "IDSRadioButtonGroupBase";
 
 export { IDSRadioButtonGroupBase };

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

@@ -7,4 +7,7 @@ interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLFieldSetEleme
     onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 export declare function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, className, ...props }: IDSRadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRadioButtonGroup {
+    var displayName: string;
+}
 export {};

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

@@ -9,7 +9,7 @@ function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, c
         if (!React.isValidElement(child))
             return child;
         if (child.type === IDSRadioButton) {
-            const { id, icon, ...rest } = child.props;
+            const { id, icon, defaultValue, ...rest } = child.props;
             const cloneProps = {
                 ...rest,
                 icon,
@@ -18,11 +18,14 @@ function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, c
             };
             if (id)
                 cloneProps.id = id;
+            if (defaultValue)
+                cloneProps.defaultValue = defaultValue;
             return React.cloneElement(child, cloneProps);
         }
         return child;
     });
     return (jsx(IDSRadioButtonGroupBase, { legend: legend, tooltip: tooltip, className: className, ...props, children: clonedChildren }));
 }
+IDSRadioButtonGroup.displayName = "IDSRadioButtonGroup";
 
 export { IDSRadioButtonGroup };

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

@@ -8,5 +8,6 @@ const IDSRadioButton = forwardRef(function IDSRadioButton({ id, icon, name, data
                     "ids-focus-anchor": focusAnchor
                 }), ...props }), jsx("label", { htmlFor: inputId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
 });
+IDSRadioButton.displayName = "IDSRadioButton";
 
 export { IDSRadioButton };

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

@@ -1,13 +1,8 @@
-import { InputHTMLAttributes, ReactNode, Ref, CSSProperties } from "react";
-export interface IDSRangeBaseProps extends InputHTMLAttributes<HTMLInputElement> {
-    id?: string;
-    label?: string;
+import { Ref, CSSProperties } from "react";
+import { CommonFormProps } from "../form-props/form-props";
+export interface IDSRangeBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormProps {
     showTicks?: boolean;
     ticks?: number[];
-    disabled?: boolean;
-    focusAnchor?: boolean;
-    dataTestId?: string;
-    tooltip?: ReactNode;
     valueNow: number;
     min?: number;
     max?: number;
@@ -16,3 +11,6 @@ export interface IDSRangeBaseProps extends InputHTMLAttributes<HTMLInputElement>
     style?: CSSProperties;
 }
 export declare function IDSRangeBase({ id, label, showTicks, ticks, disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step, inputRef, style, className, ...props }: IDSRangeBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRangeBase {
+    var displayName: string;
+}

package/components/form/range/range-base.js

@@ -2,15 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step = 1, inputRef, style, className, ...props }) {
+function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min = 0, max = 10, step = 1, inputRef, style, className, ...props }) {
     const inputId = !!id ? id : `range-${useId()}`;
     return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("input", { id: inputId, ref: inputRef, type: "range", className: clsx("ids-range__input", {
                     "ids-focus-anchor": focusAnchor
                 }), min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, "aria-valuenow": valueNow, "aria-disabled": disabled, disabled: disabled, step: step, style: {
-                    backgroundSize: ((valueNow - min) * 100) / (max - min) + "% 100%"
+                    backgroundSize: ((valueNow - (min ?? 0)) * 100) / ((max ?? 100) - (min ?? 0)) + "% 100%"
                 }, ...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))) }))] }));
 }
+IDSRangeBase.displayName = "IDSRangeBase";
 
 export { IDSRangeBase };

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

@@ -1,15 +1,10 @@
-import { ReactNode, InputHTMLAttributes } from "react";
-export interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
+import { CommonFormProps } from "../form-props/form-props";
+export interface IDSRangeProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormProps {
     value?: number;
     showTicks?: boolean;
     interval?: number;
     min?: number;
     max?: number;
     step?: number;
-    disabled?: boolean;
-    focusAnchor?: boolean;
-    dataTestId?: string;
-    tooltip?: ReactNode;
 }
 export declare const IDSRange: import("react").ForwardRefExoticComponent<IDSRangeProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/range/range.js

@@ -1,19 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { IDSRangeBase } from './range-base.js';
 
-const IDSRange = forwardRef(({ label, value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, onChange, style, ...props }, ref) => {
+const IDSRange = forwardRef(({ label, value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, onChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = useState(value ?? 0);
     const [ticks, setTicks] = useState([]);
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
+    const rangeRef = useRef(null);
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        rangeRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
     useEffect(() => {
         if (step > 0 && showTicks) {
             const out = [];
             const inc = interval > 0 ? interval : step;
             for (let i = min; i <= max; i += inc) {
-                out.push(Math.floor(i));
+                out.push(Math.min(Math.floor(i), max));
             }
             setTicks(out);
         }
@@ -29,7 +36,7 @@ const IDSRange = forwardRef(({ label, value = 0, showTicks = false, interval = 0
         setInternalValue(newValue);
         onChange?.(e);
     };
-    return (jsx(IDSRangeBase, { ...props, label: label, inputRef: inputRef, ticks: ticks, showTicks: showTicks, min: min, max: max, step: step, value: internalValue, valueNow: internalValue, onChange: handleChange, style: style }));
+    return (jsx(IDSRangeBase, { ...props, label: label, inputRef: mergedRef, ticks: ticks, showTicks: showTicks, min: min, max: max, step: step, value: internalValue, valueNow: internalValue, onChange: handleChange }));
 });
 IDSRange.displayName = "IDSRange";
 

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

@@ -1,19 +1,11 @@
-import { CSSProperties, ReactNode, SelectHTMLAttributes } from "react";
-export interface IDSSelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    id?: string;
-    label?: string;
-    errorMsgId?: string;
-    errorMsg?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: ReactNode;
-    children?: ReactNode;
-    className?: string;
-    dataTestId?: string;
+import { CSSProperties } from "react";
+import { CommonFormProps } from "../form-props/form-props";
+export interface IDSSelectBaseProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
     selectRef?: React.Ref<HTMLSelectElement>;
+    errorMsgId?: string;
     style?: CSSProperties;
 }
 export declare function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }: IDSSelectBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSelectBase {
+    var displayName: string;
+}

package/components/form/select/select-base.js

@@ -5,20 +5,20 @@ import { IDSErrorMessage } from '../error-message/error-message.js';
 
 function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }) {
     const reactId = useId();
-    const selectId = !!id ? id : `select-base-${reactId}`;
-    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `select-base-error-${reactId}`;
+    const selectId = id ?? `select-base-${reactId}`;
+    const baseErrorMsgId = errorMsgId ?? `select-base-error-${reactId}`;
     const showErrorMsg = invalid && !!errorMsg;
-    const ariaHandler = showErrorMsg
-        ? {
-            "aria-describedby": baseErrorMsgId
-        }
-        : {};
+    const ariaHandler = {};
+    if (showErrorMsg) {
+        ariaHandler["aria-describedby"] = baseErrorMsgId;
+    }
     return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: selectId, className: clsx("ids-label", {
                             "ids-label--disabled": disabled
                         }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select__wrapper", children: jsx("select", { id: selectId, ref: selectRef, className: clsx("ids-select__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                    }), "aria-invalid": invalid, "aria-disabled": disabled, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
+IDSSelectBase.displayName = "IDSSelectBase";
 
 export { IDSSelectBase };

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

@@ -1,16 +1,4 @@
-import { ReactNode, SelectHTMLAttributes } from "react";
-export interface IDSSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    id?: string;
-    label?: string;
-    errorMsg?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    light?: boolean;
-    focusAnchor?: boolean;
-    tooltip?: ReactNode;
-    dataTestId?: string;
-    noValidation?: boolean;
-    validationOnBlur?: boolean;
+import { CommonFormProps } from "../form-props/form-props";
+export interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
 }
 export declare const IDSSelect: import("react").ForwardRefExoticComponent<IDSSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/components/form/select/select.js

@@ -1,16 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useId, useRef } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSSelectBase } from './select-base.js';
 
-const IDSSelect = forwardRef(({ id, label, errorMsg, disabled, required, light, focusAnchor, tooltip, dataTestId, invalid = false, noValidation = false, validationOnBlur = false, children, style, ...props }, ref) => {
+const IDSSelect = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, children, ...props }, ref) => {
     const errorMsgId = `select-error-${useId()}`;
     const selectRef = useRef(null);
     const hasValidValue = useInputValidity(selectRef, validationOnBlur);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useImperativeHandle(ref, () => selectRef.current);
-    return (jsx(IDSSelectBase, { ...props, style: style, id: id, label: label, errorMsg: errorMsg, disabled: disabled, required: required, light: light, focusAnchor: focusAnchor, tooltip: tooltip, dataTestId: dataTestId, selectRef: selectRef, errorMsgId: errorMsgId, invalid: isInvalid, children: children }));
+    const computedInvalid = (invalid || !hasValidValue) && !noValidation;
+    // Merge forwarded + local ref
+    const mergedRef = (node) => {
+        selectRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (jsx(IDSSelectBase, { ...props, selectRef: mergedRef, errorMsgId: errorMsgId, invalid: computedInvalid, children: children }));
 });
 IDSSelect.displayName = "IDSSelect";