@inera/ids-react 8.1.0 → 9.0.0

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

@@ -1,18 +1,18 @@
-import { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
+import { ReactNode, InputHTMLAttributes } from "react";
 export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
-    name?: string;
     id?: string;
-    groupErrorMsgId?: string;
-    invalid?: boolean;
-    groupInvalid?: boolean;
-    disabled?: boolean;
-    noValidation?: boolean;
+    key?: string;
+    name?: string;
     light?: boolean;
     compact?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    groupInvalid?: boolean;
     focusAnchor?: boolean;
     tooltip?: ReactNode;
-    children?: ReactNode;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     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,28 +1,16 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 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';
+import { IDSRadioBase } from './radio-base.js';
 
-const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, focusAnchor = false, dataTestId = "", tooltip, id, children, className, onChange, ...props }, ref) => {
-    const fieldId = useElementId(id);
+const IDSRadio = forwardRef(({ groupErrorMsgId, invalid = false, groupInvalid = false, noValidation = false, children, ...props }, ref) => {
     const radioRef = useRef(null);
-    useImperativeHandle(ref, () => radioRef.current);
     const hasValidValue = useInputValidity(radioRef);
-    const isInvalid = (invalid || groupInvalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(radioRef, groupErrorMsgId, isInvalid, !!groupErrorMsgId);
-    return (jsxs("div", { className: clsx("ids-radio", {
-            "ids-radio--compact": compact
-        }, className), "data-testid": dataTestId, children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: clsx("ids-radio__input", {
-                    "ids-input--light": light,
-                    "ids-focus-anchor": focusAnchor
-                }), 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
-                        }), children: children }), tooltip] })] }));
+    const isInvalid = invalid || groupInvalid || (!hasValidValue && !noValidation);
+    // Expose ref to user
+    useImperativeHandle(ref, () => radioRef.current);
+    return (jsx(IDSRadioBase, { ...props, inputRef: radioRef, errorMsgId: groupErrorMsgId, invalid: isInvalid, children: children }));
 });
 IDSRadio.displayName = "IDSRadio";
 

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

@@ -0,0 +1,8 @@
+import { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSRadioButtonGroupBaseProps extends InputHTMLAttributes<HTMLFieldSetElement> {
+    legend?: string;
+    children?: ReactNode;
+    tooltip?: ReactNode;
+    groupRef?: React.Ref<HTMLFieldSetElement>;
+}
+export declare function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }: IDSRadioButtonGroupBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }) {
+    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", 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] }));
+}
+
+export { IDSRadioButtonGroupBase };

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

@@ -1,9 +1,10 @@
-import React, { ReactNode, InputHTMLAttributes } from "react";
+import { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
 interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     name: string;
     legend?: string;
+    tooltip?: ReactNode;
     children?: ReactNode;
-    onRadioChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRadioButtonGroup: React.FC<IDSRadioButtonGroupProps>;
+export declare function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, className, ...props }: IDSRadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,22 +1,28 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import { IDSRadioButtonGroupBase } from './radio-button-group-base.js';
+import { IDSRadioButton } from './radio-button.js';
+import React from 'react';
 
-const IDSRadioButtonGroup = ({ name = "options", legend = "", onRadioChange, className, children, ...props }) => {
-    const groupRef = useRef(null);
+function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, className, ...props }) {
     const clonedChildren = React.Children.map(children, child => {
-        if (React.isValidElement(child) && child.type.displayName === "IDSRadioButton") {
-            return React.cloneElement(child, {
-                key: child.props.id,
-                icon: child.props.icon,
+        if (!React.isValidElement(child))
+            return child;
+        if (child.type === IDSRadioButton) {
+            const { id, icon, ...rest } = child.props;
+            const cloneProps = {
+                ...rest,
+                icon,
                 name,
                 onChange: onRadioChange
-            });
+            };
+            if (id)
+                cloneProps.id = id;
+            return React.cloneElement(child, cloneProps);
         }
         return child;
     });
-    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", className), ...props, children: [jsx("legend", { children: legend && legend }), clonedChildren] }));
-};
+    return (jsx(IDSRadioButtonGroupBase, { legend: legend, tooltip: tooltip, className: className, ...props, children: clonedChildren }));
+}
 
 export { IDSRadioButtonGroup };

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

@@ -1,11 +1,10 @@
-import { ChangeEvent, ReactNode, InputHTMLAttributes } from "react";
+import { InputHTMLAttributes } from "react";
 export interface IDSRadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
-    name?: string;
     id?: string;
-    focusAnchor?: boolean;
     icon: string;
-    children?: ReactNode;
+    name?: string;
     dataTestId?: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    focusAnchor?: boolean;
+    disabled?: boolean;
 }
 export declare const IDSRadioButton: import("react").ForwardRefExoticComponent<IDSRadioButtonProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,17 +1,12 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 
-const IDSRadioButton = forwardRef(({ name = "", icon = "user", focusAnchor = false, id, children, onChange, dataTestId = "", className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const radioButtonRef = useRef(null);
-    useImperativeHandle(ref, () => radioButtonRef.current);
-    return (jsxs("div", { className: clsx("ids-radio-button", className), "data-testid": dataTestId, children: [jsx("input", { id: fieldId, ref: radioButtonRef, type: "radio", className: clsx("ids-radio-button__input", {
+const IDSRadioButton = forwardRef(function IDSRadioButton({ id, icon, name, dataTestId, disabled, focusAnchor, className, children, ...props }, ref) {
+    const inputId = !!id ? id : useId();
+    return (jsxs("div", { className: clsx("ids-radio-button", className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, name: name, ref: ref, type: "radio", disabled: disabled, className: clsx("ids-radio-button__input", {
                     "ids-focus-anchor": focusAnchor
-                }), name: name, onChange: onChange, ...props }), jsx("label", { htmlFor: fieldId, className: `ids-radio-button__label ids-icon-${icon}`, children: children })] }));
+                }), ...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

@@ -0,0 +1,18 @@
+import { InputHTMLAttributes, ReactNode, Ref, CSSProperties } from "react";
+export interface IDSRangeBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
+    label?: string;
+    showTicks?: boolean;
+    ticks?: number[];
+    disabled?: boolean;
+    focusAnchor?: boolean;
+    dataTestId?: string;
+    tooltip?: ReactNode;
+    valueNow: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputRef?: Ref<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;

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

@@ -0,0 +1,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 }) {
+    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%"
+                }, ...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))) }))] }));
+}
+
+export { IDSRangeBase };

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

@@ -1,6 +1,5 @@
-import React, { ReactNode, InputHTMLAttributes, ChangeEvent } from "react";
-import "@inera/ids-design/components/form/range/range.css";
-interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
+import { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     value?: number;
     showTicks?: boolean;
@@ -12,7 +11,5 @@ interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     focusAnchor?: boolean;
     dataTestId?: string;
     tooltip?: ReactNode;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IDSRange: React.ForwardRefExoticComponent<IDSRangeProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export declare const IDSRange: import("react").ForwardRefExoticComponent<IDSRangeProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/form/range/range.js

@@ -1,35 +1,35 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 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';
+import { IDSRangeBase } from './range-base.js';
 
-const IDSRange = forwardRef(({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, focusAnchor = false, dataTestId = "", tooltip, id, onChange, className, ...props }, ref) => {
-    const [internalValue, setInternalValue] = useState(value);
+const IDSRange = forwardRef(({ label, value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, onChange, style, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(value ?? 0);
     const [ticks, setTicks] = useState([]);
-    const fieldId = useElementId(id);
-    const rangeRef = useRef(null);
-    useImperativeHandle(ref, () => rangeRef.current);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
     useEffect(() => {
-        if (step > 0) {
-            const steps = [];
-            const increment = interval > 0 ? interval : step;
-            for (let i = min; i <= max; i += increment) {
-                steps.push(Math.floor(i));
+        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));
             }
-            setTicks(steps);
+            setTicks(out);
         }
-    }, [min, max, step, interval, showTicks]);
-    const handleOnChange = (ev) => {
-        setInternalValue(+ev.target.value);
-        if (onChange) {
-            onChange(ev);
+        else {
+            setTicks([]);
         }
+    }, [min, max, step, interval, showTicks]);
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleChange = (e) => {
+        const newValue = Number(e.target.value);
+        setInternalValue(newValue);
+        onChange?.(e);
     };
-    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, 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: clsx("ids-range__input", {
-                    "ids-focus-anchor": focusAnchor
-                }), 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))) }))] }));
+    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 }));
 });
 IDSRange.displayName = "IDSRange";
 

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

@@ -0,0 +1,19 @@
+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;
+    selectRef?: React.Ref<HTMLSelectElement>;
+    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;

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+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 showErrorMsg = invalid && !!errorMsg;
+    const ariaHandler = showErrorMsg
+        ? {
+            "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 }))] }));
+}
+
+export { IDSSelectBase };

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

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

package/components/form/select/select.js

@@ -1,26 +1,16 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-import { IDSErrorMessage } from '../error-message/error-message.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
-import clsx from 'clsx';
+import { IDSSelectBase } from './select-base.js';
 
-const IDSSelect = forwardRef(({ label = "", errorMsg = "", disabled = false, required = false, invalid = false, light = false, dataTestId = "", noValidation = false, focusAnchor = false, tooltip, id, children, className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const errorMsgId = useElementId();
+const IDSSelect = forwardRef(({ id, label, errorMsg, disabled, required, light, focusAnchor, tooltip, dataTestId, invalid = false, noValidation = false, validatesOnBlur = false, children, style, ...props }, ref) => {
+    const errorMsgId = `select-error-${useId()}`;
     const selectRef = useRef(null);
-    useImperativeHandle(ref, () => selectRef.current);
-    const hasValidValue = useInputValidity(selectRef);
+    const hasValidValue = useInputValidity(selectRef, validatesOnBlur);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    useAriaDescribedBy(selectRef, errorMsgId, isInvalid, !!errorMsg);
-    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, 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("div", { className: "ids-select__wrapper", children: jsx("select", { id: fieldId, ref: selectRef, className: clsx("ids-select__select", {
-                        "ids-input--light": light,
-                        "ids-focus-anchor": focusAnchor
-                    }), "aria-invalid": isInvalid, "aria-disabled": disabled, required: required, disabled: disabled, ...props, children: children }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    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 }));
 });
 IDSSelect.displayName = "IDSSelect";
 

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

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from "react";
+export interface IDSSelectMultipleBaseProps {
+    labelId?: string;
+    id?: string;
+    label?: string;
+    expanded?: boolean;
+    placeholder?: string;
+    numbCheckedBoxes?: number;
+    selectedLabel?: string;
+    selectedLabelPlural?: string;
+    maxHeight?: string;
+    errorMsg?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    ariaDisabled?: boolean;
+    light?: boolean;
+    focusAnchor?: boolean;
+    tooltip?: ReactNode;
+    inputRef?: React.Ref<HTMLInputElement>;
+    componentRef?: React.Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    client?: boolean;
+    style?: CSSProperties;
+}
+export declare function IDSSelectMultipleBase({ labelId, id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, inputRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSSelectMultipleBase({ labelId, id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "8.125rem", tooltip, componentRef, inputRef, invalid, disabled, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `select-multiple-base-${reactId}`;
+    const inputLabelId = !!labelId ? labelId : `select-multiple-base-label-${reactId}`;
+    const displayedValue = numbCheckedBoxes === 0 || !numbCheckedBoxes
+        ? placeholder
+        : numbCheckedBoxes === 1
+            ? `${numbCheckedBoxes} ${selectedLabel}`
+            : `${numbCheckedBoxes} ${selectedLabelPlural}`;
+    const clickHandler = client && !!onClick
+        ? {
+            onClick
+        }
+        : {};
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: inputLabelId, htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled || ariaDisabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("input", { id: inputId, ref: inputRef, "aria-labelledby": inputLabelId, type: "button", className: clsx("ids-select-multiple__select", {
+                        "ids-input--light": light,
+                        "ids-focus-anchor": focusAnchor
+                    }), "aria-expanded": expanded, disabled: disabled, "aria-disabled": ariaDisabled, "aria-invalid": invalid, placeholder: placeholder, defaultValue: displayedValue, ...clickHandler }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
+                        "ids-select-multiple__dropdown--expanded": expanded
+                    }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight }, children: children }) }) })] }));
+}
+
+export { IDSSelectMultipleBase };

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

@@ -1,10 +1,10 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/form/select-multiple/select-multiple.css";
-interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+import React, { HTMLAttributes } from "react";
+export interface IDSSelectMultipleProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     selectedLabel?: string;
     selectedLabelPlural?: string;
     placeholder?: string;
+    numbCheckedBoxes?: number;
     maxHeight?: string;
     expanded?: boolean;
     errorMsg?: string;
@@ -14,9 +14,12 @@ interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElem
     light?: boolean;
     focusAnchor?: boolean;
     noValidation?: boolean;
-    tooltip?: ReactNode;
-    children?: ReactNode;
+    tooltip?: React.ReactNode;
+    children?: React.ReactNode;
     dataTestId?: string;
+    id?: string;
+}
+export declare function IDSSelectMultiple({ invalid, noValidation, expanded, errorMsg, ariaDisabled, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSelectMultiple {
+    var displayName: string;
 }
-export declare const IDSSelectMultiple: React.FC<IDSSelectMultipleProps>;
-export {};

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

@@ -1,74 +1,49 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSSelectMultipleBase } from './select-multiple-base.js';
 import { IDSCheckboxGroup } from '../checkbox/checkbox-group.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
-import '@inera/ids-design/components/form/select-multiple/select-multiple.css';
-import clsx from 'clsx';
 
-const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPlural = "valda", placeholder = "", maxHeight = "", dataTestId = "", expanded = false, errorMsg = "", invalid = false, disabled = false, ariaDisabled = false, light = false, noValidation = false, focusAnchor = false, tooltip, id, children, className, ...props }) => {
-    const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
-    const [checkedBoxesCount, setCheckedBoxesCount] = useState(0);
-    const [value, setValue] = useState(placeholder);
+function IDSSelectMultiple({ invalid = false, noValidation = false, expanded = false, errorMsg, ariaDisabled = false, style, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const labelId = useElementId("label-" + id);
-    const inputId = useElementId("input-" + id);
-    const errorMsgId = useElementId();
-    const selectMultipleRef = useRef(null);
-    useAriaDescribedBy(selectMultipleRef, errorMsgId, checkboxListInvalid, !!errorMsg);
-    useEffect(() => {
-        let inputValue = placeholder;
-        if (checkedBoxesCount === 1) {
-            inputValue = `${checkedBoxesCount} ${selectedLabel}`;
-        }
-        if (checkedBoxesCount > 1) {
-            inputValue = `${checkedBoxesCount} ${selectedLabelPlural}`;
-        }
-        setValue(inputValue);
-    }, [checkedBoxesCount]);
+    const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
+    const inputRef = useRef(null);
+    const componentRef = useRef(null);
     useEffect(() => {
-        if (checkboxListInvalid) {
+        if (checkboxListInvalid)
             setIsExpanded(true);
-        }
     }, [checkboxListInvalid]);
     useEffect(() => {
-        const handleInteractionOutside = (event) => {
-            const target = event.target;
-            if (selectMultipleRef.current) {
-                const root = selectMultipleRef.current.closest(".ids-select-multiple");
-                if (root && !root.contains(target)) {
-                    setIsExpanded(false);
-                }
+        const handleClickOutside = (event) => {
+            if (componentRef.current && !componentRef.current.contains(event.target)) {
+                setIsExpanded(false);
             }
         };
         const handleKeyDown = (event) => {
-            if (event.key === "Escape" && isExpanded) {
+            if (event.key === "Escape")
                 setIsExpanded(false);
-            }
         };
-        document.addEventListener("click", handleInteractionOutside);
-        document.addEventListener("focusin", handleInteractionOutside);
+        document.addEventListener("click", handleClickOutside);
+        document.addEventListener("focusin", handleClickOutside);
         document.addEventListener("keydown", handleKeyDown);
         return () => {
-            document.removeEventListener("click", handleInteractionOutside);
-            document.removeEventListener("focusin", handleInteractionOutside);
+            document.removeEventListener("click", handleClickOutside);
+            document.removeEventListener("focusin", handleClickOutside);
             document.removeEventListener("keydown", handleKeyDown);
         };
-    }, [isExpanded]);
-    return (jsxs("div", { className: clsx("ids-select-multiple", className), "data-testid": dataTestId, children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { id: labelId, htmlFor: inputId, className: clsx("ids-label", {
-                            "ids-label--disabled": disabled || ariaDisabled
-                        }), children: label }), tooltip] }), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("input", { id: inputId, "aria-labelledby": labelId, ref: selectMultipleRef, type: "button", className: clsx("ids-select-multiple__select", {
-                        "ids-input--light": light,
-                        "ids-focus-anchor": focusAnchor
-                    }), "aria-expanded": isExpanded, disabled: disabled, "aria-disabled": ariaDisabled, "aria-invalid": invalid || checkboxListInvalid, placeholder: placeholder, value: value, onClick: () => setIsExpanded(!isExpanded), ...props }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
-                        "ids-select-multiple__dropdown--expanded": isExpanded
-                    }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
-                                if (!isValid) {
-                                    setIsExpanded(true);
-                                }
-                                setCheckboxListInvalid(!isValid);
-                            }, children: children }) }) }) })] }));
-};
+    }, []);
+    return (jsx(IDSSelectMultipleBase, { ...props, style: style, client: true, componentRef: componentRef, inputRef: inputRef, invalid: invalid || (!noValidation && checkboxListInvalid), expanded: isExpanded, ariaDisabled: ariaDisabled, onClick: () => {
+            setIsExpanded(!isExpanded);
+        }, children: jsx(IDSCheckboxGroup, { block: true, noValidation: noValidation, errorMsg: errorMsg, onValidityChange: (isValid) => {
+                if (!isValid) {
+                    setIsExpanded(true);
+                    setCheckboxListInvalid(!isValid);
+                }
+                else {
+                    setCheckboxListInvalid(false);
+                }
+            }, children: children }) }));
+}
+IDSSelectMultiple.displayName = "IDSSelectMultiple";
 
 export { IDSSelectMultiple };

package/components/form/spinner/spinner.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
-import "@inera/ids-design/components/form/spinner/spinner.css";
-interface IDSSpinnerProps extends React.HTMLAttributes<HTMLElement> {
-    light?: boolean;
+interface IDSSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "1" | "2" | "3";
     live?: "polite" | "assertive" | "off";
     srText?: string;
 }
-export declare const IDSSpinner: React.FC<IDSSpinnerProps>;
+export declare function IDSSpinner({ variant, live, srText, className, ...rest }: IDSSpinnerProps): import("react/jsx-runtime").JSX.Element;
 export {};