@festo-ui/react 9.0.1-dev.809 → 9.0.1-dev.817

package/dist/forms/select/Select.d.ts

@@ -1,22 +1,22 @@
 import type { ReactNode } from 'react';
 import { type Ref } from 'react';
-import type { ComponentBase } from '../../utils/types';
 export interface SelectOption<T> {
     readonly data: T;
     readonly label: ReactNode;
     readonly disabled?: boolean;
 }
-export interface SelectProps<T> extends ComponentBase {
-    readonly defaultValue?: T;
+export interface SelectProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
     readonly value?: T;
+    readonly defaultValue?: T;
+    readonly name?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
     readonly label?: string;
     readonly options?: SelectOption<T>[];
-    readonly onChange?: (value: T) => void;
-    readonly disabled?: boolean;
-    readonly name?: string;
     readonly hint?: string;
     readonly error?: string;
     readonly placeholder?: string;
+    readonly onChange?: (value: T) => void;
 }
 declare function SelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: SelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Select: <T>(props: SelectProps<T> & {

package/dist/forms/select/Select.js

@@ -89,4 +89,5 @@ function SelectComponent({ defaultValue = '', value: controlled, label, options
     });
 }
 const Select = /*#__PURE__*/ forwardRef(SelectComponent);
+Select.displayName = 'Select';
 export { Select };

package/dist/forms/slider/Slider.d.ts

@@ -1,8 +1,6 @@
 import './Slider.scss';
-import type React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-export interface SliderProps extends ClassNameProps {
-    readonly disabled?: boolean;
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> {
     readonly min: number;
     readonly max: number;
     readonly step?: number;
@@ -10,8 +8,7 @@ export interface SliderProps extends ClassNameProps {
     readonly onChangeCommitted?: (value: number) => void;
     readonly label?: string;
     readonly showValue?: boolean;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
-    readonly id?: string;
+    readonly onChange?: (value: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly widthOffset?: number;
 }
-export declare function Slider({ disabled, label, max, min, onChange, onChangeCommitted, step, value, showValue, className, id: idProps, widthOffset, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare const Slider: (props: SliderProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/slider/Slider.js

@@ -1,14 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./Slider.css";
 import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
 import { useId } from "../../utils/useId.js";
-function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted, step, value, showValue = true, className, id: idProps, widthOffset = 8 }) {
+const Slider = /*#__PURE__*/ forwardRef(({ disabled = false, label, name, max, min, onChange, onChangeCommitted, step, value, showValue = true, className, id: idProps, widthOffset = 8, ...props }, ref)=>{
     const id = useId(idProps);
     const [innerValue, setInnerValue] = useState(value);
     const [left, setLeft] = useState(null);
     const [numberOffset, setNumberOffset] = useState(0);
     const labelEl = useRef(null);
+    const handleRef = useForkRef(ref, labelEl);
     const classes = classnames('fwe-slider', {
         'fr-slider-value': !label && showValue
     }, {
@@ -40,7 +42,7 @@ function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted
     const handleChange = (e)=>{
         const newValue = Number.parseFloat(e.target.value);
         setInnerValue(newValue);
-        if (onChange) onChange(e, newValue);
+        if (onChange) onChange(newValue, e);
     };
     useEffect(()=>{
         function handleResize() {
@@ -53,7 +55,7 @@ function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted
         updateValuePosition
     ]);
     return /*#__PURE__*/ jsxs("label", {
-        ref: labelEl,
+        ref: handleRef,
         className: classes,
         htmlFor: id,
         children: [
@@ -64,6 +66,7 @@ function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted
                 id: id,
                 className: "fwe-slider-input",
                 type: "range",
+                name: name,
                 disabled: disabled,
                 min: min,
                 max: max,
@@ -72,7 +75,8 @@ function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted
                 value: innerValue,
                 onKeyUp: handleAfterChange,
                 onMouseUp: handleAfterChange,
-                onTouchEnd: handleAfterChange
+                onTouchEnd: handleAfterChange,
+                ...props
             }),
             showValue && null !== left && /*#__PURE__*/ jsx("span", {
                 className: "fr-slider-value",
@@ -89,5 +93,6 @@ function Slider({ disabled = false, label, max, min, onChange, onChangeCommitted
             })
         ]
     });
-}
+});
+Slider.displayName = 'Slider';
 export { Slider };

package/dist/forms/switch/Switch.d.ts

@@ -1,12 +1,10 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface SwitchProps extends ClassNameProps {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'checked'> {
     readonly labelPosition?: 'before' | 'after' | 'below';
     readonly large?: boolean;
     readonly title: string;
     readonly value?: boolean;
     readonly defaultValue?: boolean;
-    readonly disabled?: boolean;
-    readonly onChange?: (value: boolean) => void;
-    readonly id?: string;
+    readonly onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function Switch({ labelPosition, large, title, value, defaultValue, disabled, onChange, className, id: idProps, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare const Switch: (props: SwitchProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/switch/Switch.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 import { useId } from "../../utils/useId.js";
-function Switch({ labelPosition = 'after', large = false, title, value, defaultValue, disabled = false, onChange, className, id: idProps }) {
+const Switch = /*#__PURE__*/ forwardRef(({ labelPosition = 'after', large = false, title, name, required = false, value, defaultValue, disabled = false, onChange, className, id: idProps, ...props }, ref)=>{
     const id = useId(idProps);
     const labelClassName = classnames('fwe-switch', {
         [`fwe-switch-label-${labelPosition}`]: true
@@ -13,21 +14,25 @@ function Switch({ labelPosition = 'after', large = false, title, value, defaultV
         controlled: value,
         default: defaultValue
     });
-    const handleChange = ()=>{
+    const handleChange = (event)=>{
         const newValue = !currentValue;
         setCurrentValue(newValue);
-        if (onChange) onChange(newValue);
+        if (onChange) onChange(newValue, event);
     };
     return /*#__PURE__*/ jsxs("label", {
         className: labelClassName,
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsx("input", {
                 type: "checkbox",
+                name: name,
+                required: required,
                 disabled: disabled,
                 checked: currentValue,
-                onChange: ()=>handleChange(),
-                id: id
+                onChange: handleChange,
+                id: id,
+                ...props
             }),
             /*#__PURE__*/ jsx("div", {
                 className: "fwe-switch-track"
@@ -38,5 +43,6 @@ function Switch({ labelPosition = 'after', large = false, title, value, defaultV
             })
         ]
     });
-}
+});
+Switch.displayName = 'Switch';
 export { Switch };

package/dist/forms/text-area/TextArea.d.ts

@@ -1,22 +1,13 @@
 import './TextArea.scss';
-import React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-export interface TextAreaProps extends ClassNameProps {
-    readonly disabled?: boolean;
-    readonly required?: boolean;
-    readonly readonly?: boolean;
-    readonly onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    readonly onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    readonly onInput?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-    readonly onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+import React, { type ComponentPropsWithoutRef } from 'react';
+export interface TextAreaProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'onChange' | 'value' | 'defaultValue'> {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     readonly label: string;
     readonly hint?: string;
     readonly error?: string;
-    readonly value?: string;
-    readonly defaultValue?: string;
-    readonly name?: string;
     readonly rows?: number;
-    readonly maxLength?: number;
     readonly id?: string;
 }
-export declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: (props: TextAreaProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-area/TextArea.js

@@ -1,40 +1,62 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./TextArea.css";
 import classnames from "classnames";
-import react, { useEffect, useState } from "react";
+import react, { forwardRef, useEffect, useLayoutEffect, useState } from "react";
 import { useId } from "../../utils/useId.js";
-function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps }) {
+const TextArea = /*#__PURE__*/ forwardRef(({ onChange, label, error, hint, value, defaultValue, rows, maxLength, className, id: idProps, ...props }, ref)=>{
     const controlled = void 0 !== value;
-    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
+    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue ?? '');
     const id = useId(idProps);
     const hintClasses = classnames('fwe-input-text-info');
     const shadowRef = react.useRef(null);
-    const ref = react.useRef(null);
+    const textareaRef = react.useRef(null);
     const [height, setHeight] = useState(void 0);
+    const resizeToContent = react.useCallback(()=>{
+        const input = textareaRef.current;
+        const shadow = shadowRef.current;
+        const minRows = 2;
+        if (shadow && input) {
+            shadow.value = input.value || innerValue || 'x';
+            shadow.style.width = input.clientWidth.toString();
+            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
+            setHeight(newHeight + 4 + 4 + 1);
+        }
+    }, [
+        innerValue
+    ]);
     useEffect(()=>{
         if (controlled) setInnerValue(value);
     }, [
         value,
         controlled
     ]);
+    useLayoutEffect(()=>{
+        if (rows) return;
+        resizeToContent();
+    }, [
+        rows,
+        resizeToContent
+    ]);
     useEffect(()=>{
-        const input = ref.current;
-        const shadow = shadowRef.current;
-        const minRows = 2;
-        if (shadow && input) {
-            shadow.value = input.value || 'x';
-            shadow.style.width = `${input.clientWidth}`;
-            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
-            setHeight(newHeight + 4 + 4 + 1);
-        }
-    }, []);
+        if (rows) return;
+        const handleResize = ()=>resizeToContent();
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        rows,
+        resizeToContent
+    ]);
     function handleChange(event) {
         if (!controlled) setInnerValue(event.target.value);
-        if (onChange) onChange(event);
+        if (!rows) resizeToContent();
+        if (onChange) onChange(event.target.value, event);
     }
     return /*#__PURE__*/ jsxs("label", {
         className: classnames('fwe-input-text', className),
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsx("textarea", {
                 style: {
@@ -43,21 +65,15 @@ function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, requ
                         overflow: 'hidden'
                     }
                 },
-                ref: ref,
-                name: name,
+                ref: textareaRef,
                 className: classnames('fr-textarea', `fwe-row-${rows}`),
-                disabled: disabled,
-                readOnly: readonly,
-                required: required,
                 autoComplete: "off",
                 onChange: handleChange,
-                onFocus: onFocus,
-                onInput: onInput,
-                onBlur: onBlur,
                 maxLength: maxLength,
                 defaultValue: defaultValue,
                 value: value,
-                id: id
+                id: id,
+                ...props
             }),
             /*#__PURE__*/ jsx("textarea", {
                 style: {
@@ -95,5 +111,6 @@ function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, requ
             })
         ]
     });
-}
+});
+TextArea.displayName = 'TextArea';
 export { TextArea };

package/dist/forms/text-input/TextInput.d.ts

@@ -1,12 +1,13 @@
 import './TextInput.scss';
-import type React from 'react';
-export interface TextInputProps extends React.HTMLProps<HTMLInputElement> {
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
     readonly?: boolean;
     value?: string;
     defaultValue?: string;
+    label?: string;
     hint?: string;
     error?: string;
-    labelClassName?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const TextInput: (props: TextInputProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-input/TextInput.js

@@ -9,9 +9,12 @@ const SUPPORTED_INPUT_TYPES = [
     'password',
     'datetime-local'
 ];
-const TextInput = /*#__PURE__*/ forwardRef(({ readonly, type, value, defaultValue, error, hint, label, labelClassName, icon, id: idProps, autoFocus, ...props }, ref)=>{
+const TextInput = /*#__PURE__*/ forwardRef(({ readonly, type, value, defaultValue, error, hint, label, icon, onChange, className, id: idProps, autoFocus, ...props }, ref)=>{
     const id = useId(idProps);
     const inputRef = useRef(null);
+    const handleChange = (e)=>{
+        onChange?.(e.target.value, e);
+    };
     useEffect(()=>{
         if (autoFocus && inputRef.current) {
             const timer = setTimeout(()=>{
@@ -25,7 +28,7 @@ const TextInput = /*#__PURE__*/ forwardRef(({ readonly, type, value, defaultValu
     const innerType = type && SUPPORTED_INPUT_TYPES.includes(type) ? type : 'text';
     const labelClasses = classnames('fwe-input-text', {
         'fwe-input-text-icon': icon
-    }, labelClassName);
+    }, className);
     return /*#__PURE__*/ jsxs("label", {
         className: labelClasses,
         htmlFor: id,
@@ -37,6 +40,7 @@ const TextInput = /*#__PURE__*/ forwardRef(({ readonly, type, value, defaultValu
                 type: innerType,
                 value: value,
                 defaultValue: defaultValue,
+                onChange: handleChange,
                 id: id,
                 ref: inputRef,
                 ...props
@@ -57,4 +61,5 @@ const TextInput = /*#__PURE__*/ forwardRef(({ readonly, type, value, defaultValu
         ]
     });
 });
+TextInput.displayName = 'TextInput';
 export { TextInput };

package/dist/forms/time-picker/TimePicker.d.ts

@@ -1,6 +1,5 @@
 import './TimePicker.scss';
 import type React from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
 export interface TimePickerOptions {
     readonly timeFormat?: '12' | '24';
     readonly showSeconds?: boolean;
@@ -10,13 +9,15 @@ export interface TimePickerOptions {
         maxValue: Date;
     };
 }
-export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'onChange'> {
-    readonly error?: string;
-    readonly hint?: string;
-    readonly required?: boolean;
-    readonly disabled?: boolean;
+export interface TimePickerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'defaultValue' | 'children'> {
     readonly value?: Date;
     readonly defaultValue?: Date;
+    readonly name?: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly children?: React.ReactNode;
+    readonly error?: string;
+    readonly hint?: string;
     readonly options?: TimePickerOptions;
     readonly formatDate?: (date: Date) => string;
     readonly onChange?: (date: Date) => void;

package/dist/forms/time-picker/TimePicker.js

@@ -8,7 +8,7 @@ import { createPortal } from "react-dom";
 import { useForkRef } from "../../utils/useForkRef.js";
 import { useId } from "../../utils/useId.js";
 import { TimePickerDropdown } from "./time-picker-dropdown/TimePickerDropdown.js";
-const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled, children, value, options, defaultValue, formatDate, onChange, id: idProps, ...props }, ref)=>{
+const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled, children, value, options, defaultValue, formatDate, name, onChange, id: idProps, className, ...props }, ref)=>{
     const id = useId(idProps);
     const innerFormatDate = formatDate ?? Intl.DateTimeFormat('default', {
         hour: 'numeric',
@@ -62,7 +62,7 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
                 ref: allRefs,
                 onClick: toggle,
                 disabled: disabled,
-                className: "fr-time-picker",
+                className: classnames('fr-time-picker', className),
                 ...props,
                 children: /*#__PURE__*/ jsxs("label", {
                     htmlFor: id,
@@ -79,6 +79,7 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
                             id: id,
                             "aria-label": "picked time",
                             type: "text",
+                            name: name,
                             readOnly: true,
                             required: required,
                             className: classnames({
@@ -120,4 +121,5 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
         ]
     });
 });
+TimePicker.displayName = 'TimePicker';
 export { TimePicker };

package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js

@@ -205,4 +205,5 @@ const TimePickerDropdown = /*#__PURE__*/ forwardRef(({ timeFormat, date, onDateC
         ]
     });
 });
+TimePickerDropdown.displayName = 'TimePickerDropdown';
 export { TimePickerDropdown };

package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.js

@@ -11,4 +11,5 @@ const TimePickerInput = /*#__PURE__*/ forwardRef(({ min, max, value, onInput, 'a
         onInput: onInput,
         ref: ref
     }));
+TimePickerInput.displayName = 'TimePickerInput';
 export { TimePickerInput };

package/dist/utils/types.d.ts

@@ -1,16 +1,3 @@
-import type { CSSProperties } from 'react';
-export interface ComponentBase {
-    readonly className?: string;
-    readonly style?: CSSProperties;
-    readonly 'data-testid'?: string;
-    readonly id?: string;
-}
-export interface ClassNameProps {
-    className?: string;
-}
-export interface ClassNamePropsWithChildren extends ClassNameProps {
-    children?: React.ReactNode;
-}
 export interface Image {
     src: string;
     alt: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "9.0.1-dev.809",
+  "version": "9.0.1-dev.817",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@festo-ui/react-icons": "*",
-    "@headlessui/react": "^2.2.9",
     "@floating-ui/react": "^0.26.0",
+    "@headlessui/react": "^2.2.9",
     "classnames": "^2.2.6",
     "react-remove-scroll": "^2.7.2",
     "react-transition-group": "^4.4.5",
@@ -52,7 +52,6 @@
     "@rstest/core": "^0.6.5",
     "@rstest/coverage-istanbul": "^0.0.5",
     "@storybook/addon-docs": "^10.2.3",
-    "@storybook/preset-scss": "^1.0.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -60,21 +59,15 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@types/react-transition-group": "^4.4.5",
-    "autoprefixer": "^10.4.13",
     "cross-env": "^10.1.0",
-    "css-minimizer-webpack-plugin": "^4.2.2",
     "jsdom": "^26.1.0",
-    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.49",
-    "postcss-loader": "^8.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sass": "^1.82.0",
-    "sass-loader": "^16.0.4",
     "storybook": "^10.2.3",
     "storybook-addon-rslib": "^3.2.2",
     "storybook-react-rsbuild": "^3.2.2",
-    "ts-loader": "^9.4.2",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {

package/dist/forms/multi-select/MultiSelect.module.js

@@ -1,8 +0,0 @@
-import "./MultiSelect_module.css";
-const MultiSelect_module = {
-    "chip-container": "chip-container-VYPHrz",
-    chipContainer: "chip-container-VYPHrz",
-    "chip-ellipsis": "chip-ellipsis-AW26fc",
-    chipEllipsis: "chip-ellipsis-AW26fc"
-};
-export { MultiSelect_module as default };