@inera/ids-react 6.2.0 → 7.0.0

package/components/form/form-hooks/useAriaDescribedBy.js

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+function useAriaDescribedBy(ref, errorMsgId, invalid, hasErrorMsg, hasHint, hintId) {
+    useEffect(() => {
+        const inputEl = ref.current;
+        if (!inputEl)
+            return;
+        if (hasErrorMsg || hasHint) {
+            if (invalid) {
+                if (hasErrorMsg) {
+                    inputEl.setAttribute("aria-describedby", errorMsgId);
+                }
+            }
+            else {
+                if (hasHint) {
+                    inputEl.setAttribute("aria-describedby", hintId);
+                }
+                else {
+                    inputEl.removeAttribute("aria-describedby");
+                }
+            }
+        }
+    }, [ref, errorMsgId, invalid]);
+}
+
+export { useAriaDescribedBy };

package/components/form/form-hooks/useGroupValidity.d.ts

@@ -0,0 +1 @@
+export declare function useGroupValidity(ref: React.RefObject<HTMLFieldSetElement>, type: "checkbox" | "radio"): boolean;

package/components/form/form-hooks/useGroupValidity.js

@@ -0,0 +1,60 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useGroupValidity(ref, type) {
+    const [isValid, setIsValid] = useState(true);
+    const [hasInteracted, setHasInteracted] = useState(false);
+    const initialized = useRef(false);
+    useEffect(() => {
+        const fieldset = ref.current;
+        if (!fieldset)
+            return;
+        const inputs = fieldset.querySelectorAll(`input[type="${type}"]`);
+        if (!inputs.length)
+            return;
+        const validate = () => {
+            if (type === "checkbox") {
+                const validStates = Array.from(inputs).map(cb => cb.validity.valid);
+                setIsValid(!validStates.some(v => !v));
+            }
+            else {
+                const isAnyChecked = Array.from(inputs).some(radio => radio.checked);
+                setIsValid(isAnyChecked);
+                if (isAnyChecked) {
+                    Array.from(inputs).forEach(radio => radio.setAttribute("aria-invalid", "false"));
+                }
+            }
+        };
+        if (!initialized.current) {
+            validate();
+            initialized.current = true;
+        }
+        const handleInteraction = () => {
+            setHasInteracted(true);
+            validate();
+        };
+        const handleChange = () => {
+            setHasInteracted(false);
+            validate();
+        };
+        inputs.forEach(cb => {
+            cb.addEventListener("invalid", handleInteraction);
+            cb.addEventListener("change", handleChange);
+        });
+        const form = fieldset.closest("form");
+        const handleSubmit = () => {
+            setHasInteracted(true);
+            validate();
+        };
+        form?.addEventListener("submit", handleSubmit);
+        return () => {
+            inputs.forEach(cb => {
+                cb.removeEventListener("invalid", handleInteraction);
+                cb.removeEventListener("change", handleChange);
+            });
+            form?.removeEventListener("submit", handleSubmit);
+        };
+    }, [ref]);
+    return isValid || !hasInteracted;
+}
+
+export { useGroupValidity };

package/components/form/form-hooks/useInputValidity.d.ts

@@ -0,0 +1 @@
+export declare function useInputValidity(ref: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): boolean;

package/components/form/form-hooks/useInputValidity.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+function useInputValidity(ref) {
+    const [isValid, setIsValid] = useState(true);
+    useEffect(() => {
+        const inputEl = ref.current;
+        if (!inputEl)
+            return;
+        const updateValidity = () => {
+            setIsValid(inputEl.validity.valid);
+        };
+        const form = inputEl.closest("form");
+        form?.addEventListener("submit", updateValidity);
+        inputEl.addEventListener("blur", updateValidity);
+        inputEl.addEventListener("change", updateValidity);
+        inputEl.addEventListener("invalid", updateValidity);
+        return () => {
+            form?.removeEventListener("submit", updateValidity);
+            inputEl.removeEventListener("blur", updateValidity);
+            inputEl.removeEventListener("change", updateValidity);
+            inputEl.removeEventListener("invalid", updateValidity);
+        };
+    }, [ref]);
+    return isValid;
+}
+
+export { useInputValidity };

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

@@ -1,3 +1,22 @@
-import '@inera/ids-core/components/form/input/register.js';
-import { IDSInput as Input } from '@inera/ids-core/components/form/input/input-element.js';
-export declare const IDSInput: import("@lit-labs/react").ReactWebComponent<Input, {}>;
+import React, { ReactNode, InputHTMLAttributes } from "react";
+interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    type?: string;
+    icon?: string;
+    hint?: string | ReactNode;
+    showSearchLabel?: boolean;
+    errorMsg?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    autoSize?: boolean;
+    block?: boolean;
+    light?: boolean;
+    readOnly?: boolean;
+    tooltip?: ReactNode;
+    submitButton?: ReactNode;
+    oldIcon?: ReactNode;
+}
+export declare const IDSInput: React.FC<IDSInputProps>;
+export {};

package/components/form/input/input.js

@@ -1,12 +1,54 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/input/register.js';
-import { IDSInput as IDSInput$1 } from '@inera/ids-core/components/form/input/input-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { 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 = createComponent({
-    tagName: 'ids-input',
-    elementClass: IDSInput$1,
-    react: React,
-});
+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 fieldId = useElementId(id);
+    const errorMsgId = useElementId();
+    const hintId = useElementId();
+    const oldIconRef = useRef(null);
+    const inputRef = useRef(null);
+    const hasValidValue = useInputValidity(inputRef);
+    const isInvalid = (invalid || !hasValidValue) && !noValidation;
+    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, !!errorMsg && !noValidation, !!hint, hintId);
+    useEffect(() => {
+        if (oldIconRef.current) {
+            oldIconRef.current.setAttribute("size", "s");
+            setOldIconColor(oldIconRef.current);
+        }
+    }, [oldIconRef, isInvalid, disabled]);
+    const setOldIconColor = (iconComponent) => {
+        let color = "var(--IDS-ICON__COLOR)";
+        let color2 = "var(--IDS-ICON__COLOR-2)";
+        if (isInvalid) {
+            color = "var(--IDS-INPUT--INVALID__ICON-FILL)";
+            color2 = "var(--IDS-INPUT--INVALID__ICON-FILL)";
+        }
+        if (disabled) {
+            color = "var(--IDS-INPUT--DISABLED__ICON-FILL)";
+            color2 = "var(--IDS-INPUT--DISABLED__ICON-FILL)";
+        }
+        iconComponent.setAttribute("color", color);
+        iconComponent.setAttribute("color2", color2);
+    };
+    const renderOldIcon = oldIcon && React__default.isValidElement(oldIcon)
+        ? React__default.cloneElement(oldIcon, { ref: oldIconRef })
+        : oldIcon;
+    return (jsxs("div", { className: clsx("ids-input-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+                            "ids-label--disabled": disabled || readOnly,
+                            "ids-hidden": type === "search" && !showSearchLabel
+                        }), "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", {
+                                    "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 }))] }));
+};
 
 export { IDSInput };

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

@@ -1,3 +1,13 @@
-import '@inera/ids-core/components/form/radio/register.js';
-import { IDSRadioGroup as IDSComponent } from '@inera/ids-core/components/form/radio/radio-group-element.js';
-export declare const IDSRadioGroup: import("@lit-labs/react").ReactWebComponent<IDSComponent, {}>;
+import React, { ReactNode } from "react";
+interface IDSRadioGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    name: string;
+    legend?: string;
+    errorMsg?: string | ReactNode;
+    compact?: boolean;
+    required?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+    onRadioChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const IDSRadioGroup: React.FC<IDSRadioGroupProps>;
+export {};

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

@@ -1,8 +1,31 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/radio/register.js';
-import { IDSRadioGroup as IDSRadioGroup$1 } from '@inera/ids-core/components/form/radio/radio-group-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
+import clsx from 'clsx';
 
-const IDSRadioGroup = createComponent(React, 'ids-radio-group', IDSRadioGroup$1);
+const IDSRadioGroup = ({ name = "options", legend = "", errorMsg = "", compact = false, required = false, onRadioChange, tooltip, className, children }) => {
+    const groupRef = useRef(null);
+    const isValid = useGroupValidity(groupRef, "radio");
+    const errorMsgId = useElementId();
+    const clonedChildren = React__default.Children.map(children, child => {
+        if (React__default.isValidElement(child) && child.type.displayName === "IDSRadio") {
+            return React__default.cloneElement(child, {
+                key: child.props.id,
+                name,
+                required,
+                groupErrorMsgId: errorMsg && errorMsgId,
+                groupInvalid: !isValid,
+                onChange: onRadioChange
+            });
+        }
+        return child;
+    });
+    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", {
+            "ids-form-group__fieldset--compact": compact
+        }, className), children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+};
 
 export { IDSRadioGroup };

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

@@ -1,3 +1,17 @@
-import '@inera/ids-core/components/form/radio/register.js';
-import { IDSRadio as Radio } from '@inera/ids-core/components/form/radio/radio-element.js';
-export declare const IDSRadio: import("@lit-labs/react").ReactWebComponent<Radio, {}>;
+import React, { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
+export interface IDSRadioProps extends InputHTMLAttributes<HTMLInputElement> {
+    name?: string;
+    id?: string;
+    groupErrorMsgId?: string;
+    invalid?: boolean;
+    groupInvalid?: boolean;
+    disabled?: boolean;
+    noLabel?: boolean;
+    noValidation?: boolean;
+    light?: boolean;
+    compact?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const IDSRadio: React.FC<IDSRadioProps>;

package/components/form/radio/radio.js

@@ -1,12 +1,26 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/radio/register.js';
-import { IDSRadio as IDSRadio$1 } from '@inera/ids-core/components/form/radio/radio-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } 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 = createComponent({
-    tagName: 'ids-radio',
-    elementClass: IDSRadio$1,
-    react: React,
-});
+const IDSRadio = ({ name = "", groupErrorMsgId = "", invalid = false, groupInvalid = false, disabled = false, noValidation = false, light = false, compact = false, tooltip, id, children, className, onChange, ...props }) => {
+    const fieldId = useElementId(id);
+    const radioRef = useRef(null);
+    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), children: [jsx("input", { id: fieldId, ref: radioRef, type: "radio", className: clsx({
+                    "ids-input--light": light
+                }), 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] })] }));
+};
 
 export { IDSRadio };

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

@@ -0,0 +1,9 @@
+import React, { ReactNode, InputHTMLAttributes } from "react";
+interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+    legend?: string;
+    children?: ReactNode;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const IDSRadioButtonGroup: React.FC<IDSRadioButtonGroupProps>;
+export {};

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import clsx from 'clsx';
+
+const IDSRadioButtonGroup = ({ name = "options", legend = "", onChange, className, children }) => {
+    const groupRef = useRef(null);
+    const clonedChildren = React__default.Children.map(children, child => {
+        if (React__default.isValidElement(child) && child.type.displayName === "IDSRadioButton") {
+            return React__default.cloneElement(child, {
+                key: child.props.id,
+                icon: child.props.icon,
+                name,
+                onChange
+            });
+        }
+        return child;
+    });
+    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", className), children: [jsx("legend", { children: legend && legend }), clonedChildren] }));
+};
+
+export { IDSRadioButtonGroup };

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

@@ -0,0 +1,9 @@
+import React, { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSRadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+    name?: string;
+    id?: string;
+    icon: string;
+    children?: ReactNode;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => {};
+}
+export declare const IDSRadioButton: React.FC<IDSRadioButtonProps>;

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import clsx from 'clsx';
+
+const IDSRadioButton = ({ name = "", icon = "user", id, children, onChange, className, ...props }) => {
+    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 })] }));
+};
+
+export { IDSRadioButton };

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

@@ -1,3 +1,16 @@
-import '@inera/ids-core/components/form/range/register.js';
-import { IDSRange as Range } from '@inera/ids-core/components/form/range/range-element.js';
-export declare const IDSRange: import("@lit-labs/react").ReactWebComponent<Range, {}>;
+import React, { ReactNode, InputHTMLAttributes, ChangeEvent } from "react";
+import "@inera/ids-design/components/form/range/range.css";
+interface IDSRangeProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    value?: number;
+    showTicks?: boolean;
+    interval?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    tooltip?: ReactNode;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const IDSRange: React.FC<IDSRangeProps>;
+export {};

package/components/form/range/range.js

@@ -1,12 +1,32 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/range/register.js';
-import { IDSRange as IDSRange$1 } from '@inera/ids-core/components/form/range/range-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, 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 = createComponent({
-    tagName: 'ids-range',
-    elementClass: IDSRange$1,
-    react: React,
-});
+const IDSRange = ({ label = "", value = 0, showTicks = false, interval = 0, min = 0, max = 0, step = 0, disabled = false, tooltip, id, onChange, className, ...props }) => {
+    const [internalValue, setInternalValue] = useState(value);
+    const [ticks, setTicks] = useState([]);
+    const fieldId = useElementId(id);
+    const rangeRef = useRef(null);
+    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));
+            }
+            setTicks(steps);
+        }
+    }, [min, max, step, interval, showTicks]);
+    const handleOnChange = (ev) => {
+        setInternalValue(+ev.target.value);
+        if (onChange) {
+            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))) }))] }));
+};
 
 export { IDSRange };

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

@@ -1,3 +1,15 @@
-import '@inera/ids-core/components/form/select/register.js';
-import { IDSSelect as Select } from '@inera/ids-core/components/form/select/select-element.js';
-export declare const IDSSelect: import("@lit-labs/react").ReactWebComponent<Select, {}>;
+import React, { ReactNode } from "react";
+interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    srOf?: string;
+    errorMsg?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    light?: boolean;
+    noValidation?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSSelect: React.FC<IDSSelectProps>;
+export {};

package/components/form/select/select.js

@@ -1,12 +1,22 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/select/register.js';
-import { IDSSelect as IDSSelect$1 } from '@inera/ids-core/components/form/select/select-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } 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 = createComponent({
-    tagName: 'ids-select',
-    elementClass: IDSSelect$1,
-    react: React,
-});
+const IDSSelect = ({ label = "", srOf = "av", errorMsg = "", disabled = false, required = false, invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }) => {
+    const fieldId = useElementId(id);
+    const errorMsgId = useElementId();
+    const selectRef = useRef(null);
+    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 }))] }));
+};
 
 export { IDSSelect };

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

@@ -1,3 +1,18 @@
-import '@inera/ids-core/components/form/select-multiple/register.js';
-import { IDSSelectMultiple as SelectMultiple } from '@inera/ids-core/components/form/select-multiple/select-multiple-element.js';
-export declare const IDSSelectMultiple: import("@lit-labs/react").ReactWebComponent<SelectMultiple, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/form/select-multiple/select-multiple.css";
+interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    selectedLabel?: string;
+    selectedLabelPlural?: string;
+    placeholder?: string;
+    maxHeight?: string;
+    expanded?: boolean;
+    errorMsg?: string;
+    invalid?: boolean;
+    light?: boolean;
+    noValidation?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSSelectMultiple: React.FC<IDSSelectMultipleProps>;
+export {};

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

@@ -1,12 +1,63 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/select-multiple/register.js';
-import { IDSSelectMultiple as IDSSelectMultiple$1 } from '@inera/ids-core/components/form/select-multiple/select-multiple-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.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 = createComponent({
-    tagName: 'ids-select-multiple',
-    elementClass: IDSSelectMultiple$1,
-    react: React,
-});
+const IDSSelectMultiple = ({ label = "", selectedLabel = "vald", selectedLabelPlural = "valda", placeholder = "", maxHeight = "", expanded = false, errorMsg = "", invalid = false, light = false, noValidation = false, tooltip, id, children, className, ...props }) => {
+    const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
+    const [checkedBoxesCount, setCheckedBoxesCount] = useState(0);
+    const [value, setValue] = useState(placeholder);
+    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]);
+    useEffect(() => {
+        const handleInteractionOutside = (event) => {
+            const target = event.target;
+            if (selectMultipleRef.current) {
+                const root = selectMultipleRef.current.closest(".ids-select-multiple-component");
+                if (root && !root.contains(target)) {
+                    setIsExpanded(false);
+                }
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape" && isExpanded) {
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener("click", handleInteractionOutside);
+        document.addEventListener("focusin", handleInteractionOutside);
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("click", handleInteractionOutside);
+            document.removeEventListener("focusin", handleInteractionOutside);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isExpanded]);
+    return (jsxs("div", { className: clsx("ids-select-multiple-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { id: labelId, htmlFor: inputId, className: "ids-label", children: label }), tooltip] }), jsx("div", { className: "ids-select-multiple-wrapper", children: jsx("input", { id: inputId, "aria-labelledby": labelId, ref: selectMultipleRef, type: "button", className: clsx("ids-select-multiple__select", {
+                        "ids-input--light": light
+                    }), "aria-expanded": isExpanded, "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--show": isExpanded
+                    }), children: jsx("div", { className: "ids-select-multiple__dropdown__inner", style: { maxHeight: maxHeight }, children: jsx(IDSCheckboxGroup, { block: true, errorMsg: errorMsg, setCheckedBoxesCount: setCheckedBoxesCount, onValidityChange: (isValid) => {
+                                setCheckboxListInvalid(!isValid);
+                            }, children: children }) }) }) })] }));
+};
 
 export { IDSSelectMultiple };

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

@@ -1,3 +1,9 @@
-import '@inera/ids-core/components/form/spinner/register.js';
-import { IDSSpinner as Spinner } from '@inera/ids-core/components/form/spinner/spinner-element.js';
-export declare const IDSSpinner: import("@lit-labs/react").ReactWebComponent<Spinner, {}>;
+import React from "react";
+import "@inera/ids-design/components/form/spinner/spinner.css";
+interface IDSSpinnerProps extends React.HTMLAttributes<HTMLElement> {
+    light?: boolean;
+    live?: "polite" | "assertive" | "off";
+    srText?: string;
+}
+export declare const IDSSpinner: React.FC<IDSSpinnerProps>;
+export {};