@festo-ui/react 9.0.1 → 10.0.0-dev.826

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.css

@@ -0,0 +1,31 @@
+label.fwe-input-text input[type="text"][aria-invalid="true"], label.fwe-input-text input[type="password"][aria-invalid="true"], label.fwe-input-text input[type="date"][aria-invalid="true"], label.fwe-input-text input[type="datetime-local"][aria-invalid="true"], label.fwe-input-text input[type="number"][aria-invalid="true"] {
+  box-shadow: none;
+  outline: none;
+  border-bottom: 1px solid var(--fwe-red) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:focus, label.fwe-input-text input[type="password"][aria-invalid="true"]:focus, label.fwe-input-text input[type="date"][aria-invalid="true"]:focus, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:focus, label.fwe-input-text input[type="number"][aria-invalid="true"]:focus {
+  border-bottom: 1px solid var(--fwe-red) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled {
+  border-bottom: 1px solid var(--fwe-control-disabled) !important;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="text"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"]:disabled ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-label, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"]:disabled ~ .fwe-input-text-info {
+  color: var(--fwe-text-disabled);
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-info, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-info {
+  display: none;
+}
+
+label.fwe-input-text input[type="text"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="password"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="date"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="datetime-local"][aria-invalid="true"] ~ .fwe-input-text-invalid, label.fwe-input-text input[type="number"][aria-invalid="true"] ~ .fwe-input-text-invalid {
+  display: block;
+}
+
+label.fwe-input-text:has(input:disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+

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

@@ -1,24 +1,13 @@
-import type React from 'react';
-export interface TextInputProps {
-    disabled?: boolean;
-    required?: boolean;
+import './TextInput.scss';
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> {
     readonly?: boolean;
-    placeholder?: string;
-    type?: string;
-    step?: string;
-    min?: number;
-    max?: number;
     value?: string;
     defaultValue?: string;
-    name?: string;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     label?: string;
     hint?: string;
     error?: string;
-    labelClassName?: string;
-    icon?: React.ReactNode;
-    autoFocus?: boolean;
+    icon?: ReactNode;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
+export declare const TextInput: (props: TextInputProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

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

@@ -1,10 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import "./TextInput.css";
 import classnames from "classnames";
 import { forwardRef, useEffect, useRef } from "react";
 import { useId } from "../../utils/useId.js";
-const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, placeholder, max, min, onBlur, onFocus, onInput, step, type, value, defaultValue, name, error, hint, label, labelClassName, icon, id: idProps, autoFocus, ...props }, ref)=>{
+const SUPPORTED_INPUT_TYPES = [
+    'text',
+    'number',
+    'password',
+    'datetime-local'
+];
+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(()=>{
@@ -15,42 +25,22 @@ const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, plac
     }, [
         autoFocus
     ]);
-    const supported = [
-        'text',
-        'number',
-        'password',
-        'datetime-local'
-    ];
-    const innerType = type && supported.includes(type) ? type : 'text';
+    const innerType = type && SUPPORTED_INPUT_TYPES.includes(type) ? type : 'text';
     const labelClasses = classnames('fwe-input-text', {
         'fwe-input-text-icon': icon
-    }, labelClassName);
-    const hintClasses = classnames('fwe-input-text-info');
-    function handleChange(e) {
-        if (props.onChange) props.onChange(e);
-    }
+    }, className);
     return /*#__PURE__*/ jsxs("label", {
         className: labelClasses,
         htmlFor: id,
         ref: ref,
         children: [
             /*#__PURE__*/ jsx("input", {
-                name: name,
-                disabled: disabled,
-                required: required,
                 readOnly: readonly,
-                placeholder: placeholder,
                 autoComplete: "off",
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                onBlur: onBlur,
-                onFocus: onFocus,
-                onInput: onInput,
                 type: innerType,
                 value: value,
                 defaultValue: defaultValue,
+                onChange: handleChange,
                 id: id,
                 ref: inputRef,
                 ...props
@@ -61,7 +51,7 @@ const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, plac
                 children: label
             }),
             hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
+                className: "fwe-input-text-info",
                 children: hint
             }),
             error && /*#__PURE__*/ jsx("span", {
@@ -71,4 +61,5 @@ const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, plac
         ]
     });
 });
+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

@@ -1,14 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./TimePicker.css";
 import { IconTime } from "@festo-ui/react-icons";
+import { offset, useFloating } from "@floating-ui/react";
 import classnames from "classnames";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import react_dom from "react-dom";
-import { usePopper } from "react-popper";
+import { forwardRef, useEffect, useRef, useState } from "react";
+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',
@@ -18,34 +18,18 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
         }
     }).format;
     const timeFormat = options?.timeFormat ?? '24';
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const customModifier = useMemo(()=>({
-            name: 'offset',
-            options: {
-                offset: ({ placement })=>{
-                    if ('bottom' === placement) return [
-                        0,
-                        -12
-                    ];
-                    return [
-                        0,
-                        0
-                    ];
-                }
-            }
-        }), []);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            customModifier
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom',
+        middleware: [
+            offset(({ rects })=>-rects.reference.height - 12)
         ]
     });
     const buttonRef = useRef(null);
     const allRefs = useForkRef(ref, buttonRef);
     const labelRef = useRef(null);
-    const combinedLabelRef = useForkRef(labelRef, (r)=>setReferenceElement(r));
+    const combinedLabelRef = useForkRef(labelRef, refs.setReference);
     const timePickerRef = useRef(null);
-    const combinedTimePickerRef = useForkRef(timePickerRef, (r)=>setPopperElement(r));
+    const combinedTimePickerRef = useForkRef(timePickerRef, refs.setFloating);
     const [open, setOpen] = useState(false);
     const controlled = void 0 !== value;
     const initialValue = controlled ? value : defaultValue;
@@ -78,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,
@@ -95,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({
@@ -118,7 +103,7 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
                     ]
                 })
             }),
-            open && /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsx(TimePickerDropdown, {
+            open && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(TimePickerDropdown, {
                 labelRef: labelRef,
                 ref: combinedTimePickerRef,
                 onClose: handleClose,
@@ -129,12 +114,12 @@ const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled,
                 range: options?.range,
                 date: innerValue,
                 style: {
-                    ...styles.popper,
+                    ...floatingStyles,
                     minWidth: labelRef?.current?.scrollWidth
-                },
-                ...attributes.popper
+                }
             }), container.body)
         ]
     });
 });
+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/index.d.ts

@@ -1,3 +1,4 @@
+export type { Placement } from '@floating-ui/react';
 export { Accordion, type AccordionProps, } from './components/accordion/Accordion';
 export { AccordionHeader } from './components/accordion/accordion-header/AccordionHeader';
 export { AccordionItem, type AccordionItemProps, } from './components/accordion/accordion-item/AccordionItem';
@@ -25,11 +26,11 @@ export { ImageGallerySwiper, type ImageGallerySwiperProps, } from './components/
 export { ImageGalleryThumbsSwiper, type ImageGalleryThumbsSwiperProps, } from './components/modals/image-gallery/ImageGalleryThumbsSwiper';
 export { Prompt, type PromptProps } from './components/modals/Prompt';
 export { Pagination, type PaginationProps, type PaginationType, } from './components/pagination/Pagination';
-export { Legend, type LegendProps, type PopoverLegendItem, } from './components/popovers/legend/Legend';
+export { Legend, type LegendItem, type LegendProps, } from './components/popovers/legend/Legend';
 export { Popover, type PopoverProps, } from './components/popovers/popover/Popover';
 export { PopoverMenu, type PopoverMenuProps, } from './components/popovers/popover-menu/PopoverMenu';
 export { PopoverMenuContext } from './components/popovers/popover-menu/PopoverMenuContext';
-export { PopoverMenuItem, type PopoverMenuItemProps, } from './components/popovers/popover-menu-item/PopoverMenuItem';
+export { PopoverMenuItem, type PopoverMenuItemProps, } from './components/popovers/popover-menu/popover-menu-item/PopoverMenuItem';
 export { Tooltip, type TooltipProps, } from './components/popovers/tooltip/Tooltip';
 export { Progress, type ProgressProps } from './components/progress/Progress';
 export { SearchInput, type SearchInputProps, } from './components/search-input/SearchInput';
@@ -45,12 +46,13 @@ export { type TabItemAppearance, Tabs, type TabsConfiguration, type TabsProps, t
 export { TabPane, type TabPaneProps } from './components/tab/tab-pane/TabPane';
 export { TableHeaderCell, type TableHeaderCellProps, } from './components/table-header-cell/TableHeaderCell';
 export { Checkbox, type CheckboxProps } from './forms/checkbox/Checkbox';
-export { RadioButton, type RadioButtonProps as RadioProps, } from './forms/radio/RadioButton';
+export { ComboBox, type ComboBoxOption, type ComboBoxProps, } from './forms/combobox/ComboBox';
+export { MultiSelect, type MultiSelectProps, } from './forms/multi-select/MultiSelect';
+export { RadioButton, type RadioButtonProps, } from './forms/radio/RadioButton';
 export { RadioGroup, type RadioGroupProps } from './forms/radio/RadioGroup';
 export { Segment, type SegmentConfiguration, type SegmentProps, } from './forms/segment/Segment';
 export { SegmentControl, type SegmentControlProps, } from './forms/segment/segment-control/SegmentControl';
-export { Select, type SelectProps } from './forms/select/Select';
-export { SelectOption, type SelectOptionProps, type SelectOptionType, } from './forms/select/select-option/SelectOption';
+export { Select, type SelectOption, type SelectProps, } from './forms/select/Select';
 export { Slider, type SliderProps } from './forms/slider/Slider';
 export { Switch, type SwitchProps } from './forms/switch/Switch';
 export { TextArea, type TextAreaProps } from './forms/text-area/TextArea';

package/dist/index.js

@@ -29,7 +29,7 @@ import { Legend } from "./components/popovers/legend/Legend.js";
 import { Popover } from "./components/popovers/popover/Popover.js";
 import { PopoverMenu } from "./components/popovers/popover-menu/PopoverMenu.js";
 import { PopoverMenuContext } from "./components/popovers/popover-menu/PopoverMenuContext.js";
-import { PopoverMenuItem } from "./components/popovers/popover-menu-item/PopoverMenuItem.js";
+import { PopoverMenuItem } from "./components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.js";
 import { Tooltip } from "./components/popovers/tooltip/Tooltip.js";
 import { Progress } from "./components/progress/Progress.js";
 import { SearchInput } from "./components/search-input/SearchInput.js";
@@ -45,15 +45,16 @@ import { Tabs } from "./components/tab/Tabs.js";
 import { TabPane } from "./components/tab/tab-pane/TabPane.js";
 import { TableHeaderCell } from "./components/table-header-cell/TableHeaderCell.js";
 import { Checkbox } from "./forms/checkbox/Checkbox.js";
+import { ComboBox } from "./forms/combobox/ComboBox.js";
+import { MultiSelect } from "./forms/multi-select/MultiSelect.js";
 import { RadioButton } from "./forms/radio/RadioButton.js";
 import { RadioGroup } from "./forms/radio/RadioGroup.js";
 import { Segment } from "./forms/segment/Segment.js";
 import { SegmentControl } from "./forms/segment/segment-control/SegmentControl.js";
 import { Select } from "./forms/select/Select.js";
-import { SelectOption } from "./forms/select/select-option/SelectOption.js";
 import { Slider } from "./forms/slider/Slider.js";
 import { Switch } from "./forms/switch/Switch.js";
 import { TextArea } from "./forms/text-area/TextArea.js";
 import { TextInput } from "./forms/text-input/TextInput.js";
 import { TimePicker } from "./forms/time-picker/TimePicker.js";
-export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, SelectOption, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };
+export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, BottomSheet, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ComboBox, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, Legend, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, MultiSelect, Pagination, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };

package/dist/utils/types.d.ts

@@ -1,9 +1,3 @@
-export interface ClassNameProps {
-    className?: string;
-}
-export interface ClassNamePropsWithChildren extends ClassNameProps {
-    children?: React.ReactNode;
-}
 export interface Image {
     src: string;
     alt: string;

package/dist/utils/useControlled.js

@@ -1,16 +1,16 @@
 import { useCallback, useRef, useState } from "react";
 function useControlled({ controlled, default: defaultValue, onChange }) {
     const { current: isControlled } = useRef(void 0 !== controlled);
-    const [valueState, setValue] = useState(defaultValue);
+    const [valueState, setValueState] = useState(defaultValue);
     const value = isControlled ? controlled : valueState;
     const setValueIfUncontrolled = useCallback((newValue)=>{
-        if (!isControlled) setValue(newValue);
+        if (!isControlled) setValueState(newValue);
         const setter = newValue;
         const onChangeValue = 'function' == typeof newValue ? setter(controlled) : newValue;
         onChange?.(onChangeValue);
     }, [
-        controlled,
-        onChange
+        onChange,
+        controlled
     ]);
     return [
         value,

package/dist/utils/useForkRef.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare function useForkRef<T>(refA: React.Ref<T> | null | undefined, refB: React.Ref<T> | null | undefined): React.RefCallback<T> | null;
+import { type Ref, type RefCallback } from 'react';
+export declare function useForkRef<T>(refA: Ref<T> | null | undefined, refB: Ref<T> | null | undefined): RefCallback<T> | null;

package/dist/utils/useForkRef.js

@@ -1,7 +1,7 @@
-import react from "react";
+import { useMemo } from "react";
 import { setRef } from "./setRef.js";
 function useForkRef(refA, refB) {
-    return react.useMemo(()=>{
+    return useMemo(()=>{
         if (null == refA && (null == refB || void 0 === refB)) return null;
         return (instance)=>{
             setRef(refA, instance);

package/dist/utils/useOnClickOutside.d.ts

@@ -1,2 +1,2 @@
 import { type RefObject } from 'react';
-export declare function useOnClickOutside(ref: RefObject<HTMLElement>, callback: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<HTMLElement>): void;
+export declare function useOnClickOutside(ref: RefObject<HTMLElement | null>, callback: (event: MouseEvent | TouchEvent) => void, ref2?: RefObject<HTMLElement | null>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "9.0.1",
+  "version": "10.0.0-dev.826",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -34,17 +34,16 @@
   },
   "dependencies": {
     "@festo-ui/react-icons": "*",
-    "@popperjs/core": "^2.11.0",
+    "@floating-ui/react": "^0.26.0",
+    "@headlessui/react": "^2.2.9",
     "classnames": "^2.2.6",
-    "react-popper": "^2.3.0",
-    "react-remove-scroll": "^2.5.7",
-    "react-transition-group": "^4.4.2",
+    "react-remove-scroll": "^2.7.2",
+    "react-transition-group": "^4.4.5",
     "swiper": "^12.0.3"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.2",
-    "@chromatic-com/storybook": "^4.1.1",
-    "@cyclonedx/cyclonedx-npm": "^1.19.3",
+    "@chromatic-com/storybook": "^5.0.0",
     "@rsbuild/core": "~1.6.2",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rsbuild/plugin-sass": "^1.4.0",
@@ -52,38 +51,28 @@
     "@rslib/core": "^0.17.1",
     "@rstest/core": "^0.6.5",
     "@rstest/coverage-istanbul": "^0.0.5",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^9.1.16",
+    "@storybook/addon-docs": "^10.2.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@types/react-transition-group": "^4.4.5",
-    "autoprefixer": "^10.4.13",
-    "cross-env": "^7.0.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "cross-env": "^10.1.0",
     "jsdom": "^26.1.0",
-    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.49",
-    "postcss-loader": "^8.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "sass": "^1.82.0",
-    "sass-loader": "^16.0.4",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.3",
-    "storybook-react-rsbuild": "^2.1.3",
-    "ts-loader": "^9.4.2",
+    "storybook": "^10.2.3",
+    "storybook-addon-rslib": "^3.2.2",
+    "storybook-react-rsbuild": "^3.2.2",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@festo-ui/web-essentials": "*",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }

package/dist/components/popovers/popover-menu-item/PopoverMenuItem.d.ts

@@ -1,9 +0,0 @@
-export interface PopoverMenuItemProps {
-    text: string;
-    icon: React.ReactNode;
-    action?: (data: unknown) => void;
-    data?: unknown;
-}
-export declare function PopoverMenuItem({ item, }: Readonly<{
-    item: PopoverMenuItemProps;
-}>): import("react/jsx-runtime").JSX.Element | null;