@festo-ui/react-extra 9.0.1 → 10.0.0-dev.827

package/README.md

@@ -5,7 +5,7 @@
 Install the dependencies:
 
 ```bash
-pnpm install
+npm install
 ```
 
 ## Get started
@@ -13,11 +13,11 @@ pnpm install
 Build the library:
 
 ```bash
-pnpm build
+npm run build
 ```
 
 Build the library in watch mode:
 
 ```bash
-pnpm dev
+npm run dev
 ```

package/dist/components/color-indicator/ColorIndicator.d.ts

@@ -1,11 +1,11 @@
-import { type JSX, type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 import './ColorIndicator.scss';
-export interface ColorIndicatorProps {
-    className?: string;
+export interface ColorIndicatorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
     text: string;
     label: string;
     color?: string;
-    showPopOver?: boolean;
-    disabled?: boolean;
+    showPopover?: boolean;
 }
-export declare function ColorIndicator({ text, label, color, className, showPopOver, children, disabled, }: PropsWithChildren<ColorIndicatorProps>): JSX.Element;
+export declare const ColorIndicator: (props: ColorIndicatorProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/color-indicator/ColorIndicator.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@festo-ui/react";
 import classnames from "classnames";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import "./ColorIndicator.css";
-function ColorIndicator({ text, label, color, className, showPopOver = false, children, disabled }) {
-    const classes = classnames('fwe-color-indicator', className, disabled);
+const ColorIndicator = /*#__PURE__*/ forwardRef(({ text, label, color, className, showPopover = false, children, ...props }, ref)=>{
     const [isEditorOpen, setEditorOpen] = useState(false);
     function getBorderColor() {
         if (!color || '#FFFFFF' === color.toUpperCase() || '#F0F2F3' === color.toUpperCase()) return '#b6bec6';
@@ -14,7 +13,8 @@ function ColorIndicator({ text, label, color, className, showPopOver = false, ch
         className: "fwe-color-box",
         style: {
             background: color,
-            borderColor: getBorderColor()
+            borderColor: getBorderColor(),
+            cursor: showPopover ? 'pointer' : 'default'
         },
         children: !color && /*#__PURE__*/ jsxs("svg", {
             className: "fwe-no-color-pattern",
@@ -82,42 +82,38 @@ function ColorIndicator({ text, label, color, className, showPopOver = false, ch
             ]
         })
     });
-    const wrapperProperties = showPopOver ? {
-        onClick: ()=>setEditorOpen((prevOpen)=>!prevOpen)
-    } : {};
-    const wrapper = (wrapperChildren)=>/*#__PURE__*/ jsxs("div", {
-            className: classes,
-            ...wrapperProperties,
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    style: {
-                        opacity: isEditorOpen ? 0 : 1
-                    },
-                    className: "fwe-color-label",
-                    children: label
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: "fwe-color-container",
-                    children: [
-                        wrapperChildren,
-                        ' ',
-                        text && /*#__PURE__*/ jsx("div", {
-                            className: "fwe-color-indicator-text",
-                            children: text
-                        }),
-                        ' '
-                    ]
-                })
-            ]
-        });
-    return showPopOver ? /*#__PURE__*/ jsx(Popover, {
-        position: "top",
-        wrapper: wrapper,
-        popoverContent: children,
-        open: isEditorOpen,
-        onStatusChange: setEditorOpen,
-        stopPropagation: true,
-        children: colorBox
-    }) : wrapper(colorBox);
-}
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('fwe-color-indicator', className),
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    opacity: isEditorOpen ? 0 : 1
+                },
+                className: "fwe-color-label",
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "fwe-color-container",
+                children: [
+                    showPopover ? /*#__PURE__*/ jsx(Popover, {
+                        position: "top",
+                        content: children,
+                        isOpen: isEditorOpen,
+                        onChange: setEditorOpen,
+                        stopPropagation: true,
+                        children: colorBox
+                    }) : colorBox,
+                    text && /*#__PURE__*/ jsx("div", {
+                        className: "fwe-color-indicator-text",
+                        children: text
+                    }),
+                    ' '
+                ]
+            })
+        ]
+    });
+});
+ColorIndicator.displayName = 'ColorIndicator';
 export { ColorIndicator };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -1,4 +1,6 @@
-export interface ScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+import { type ComponentPropsWithoutRef } from 'react';
+import type SimpleBarCore from 'simplebar-core';
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<'div'> {
     readonly scrollbarMinSize?: number;
 }
-export declare function ScrollArea({ children, scrollbarMinSize, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollArea: (props: ScrollAreaProps & import("react").RefAttributes<SimpleBarCore | null>) => React.ReactElement | null;

package/dist/components/scroll-area/ScrollArea.js

@@ -1,10 +1,13 @@
 import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
 import simplebar_react from "simplebar-react";
-function ScrollArea({ children, scrollbarMinSize = 25, ...props }) {
-    return /*#__PURE__*/ jsx(simplebar_react, {
+const ScrollArea = /*#__PURE__*/ forwardRef(({ children, className, scrollbarMinSize = 25, ...props }, ref)=>/*#__PURE__*/ jsx(simplebar_react, {
+        ref: ref,
+        className: classnames(className),
         ...props,
         scrollbarMinSize: scrollbarMinSize,
         children: children
-    });
-}
+    }));
+ScrollArea.displayName = 'ScrollArea';
 export { ScrollArea };

package/dist/forms/color-picker/ColorHelper.js

@@ -33,7 +33,9 @@ function rgbToHsv(rgb) {
     };
 }
 function hsvToRgb(_hsv) {
-    const hsv = _hsv;
+    const hsv = {
+        ..._hsv
+    };
     hsv.h = limitToOne(_hsv.h);
     hsv.s = limitToOne(_hsv.s);
     hsv.v = limitToOne(_hsv.v);
@@ -100,7 +102,9 @@ function numberToHex(rgb) {
     return hex.toUpperCase();
 }
 function rgbToHex(_rgb) {
-    const rgb = _rgb;
+    const rgb = {
+        ..._rgb
+    };
     rgb.r = limitToByte(rgb.r);
     rgb.g = limitToByte(rgb.g);
     rgb.b = limitToByte(rgb.b);

package/dist/forms/color-picker/ColorPicker.css

@@ -153,7 +153,7 @@
   padding: 16px;
 }
 
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button {
+.fwe-popover-menu-trigger {
   cursor: pointer;
   background: none;
   border: none;
@@ -163,7 +163,7 @@
   display: block;
 }
 
-.fwe-popover-menu-trigger .fwe-popover-menu-trigger-button:hover {
+.fwe-popover-menu-trigger:hover {
   color: var(--fwe-hero);
 }
 
@@ -358,6 +358,7 @@
   align-items: center;
   margin-bottom: 8px;
   margin-right: 8px;
+  padding: 0;
   display: flex;
 }
 

package/dist/forms/color-picker/ColorPicker.d.ts

@@ -1,6 +1,8 @@
+import type React from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 import './ColorPicker.scss';
-export interface ColorPickerProps {
-    readonly className?: string;
+export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    readonly name?: string;
     readonly palette?: string[];
     readonly useAlpha?: boolean;
     readonly alpha?: number;
@@ -9,4 +11,4 @@ export interface ColorPickerProps {
     readonly onChange?: (color?: string | null) => void;
     readonly onAlphaChange?: (alpha?: number) => void;
 }
-export declare function ColorPicker({ className, palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const ColorPicker: (props: ColorPickerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/forms/color-picker/ColorPicker.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IconCheckSmall, IconCollapse } from "@festo-ui/react-icons";
 import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import react_draggable from "react-draggable";
 import "./ColorPicker.css";
 import { useId } from "../../utils/useId.js";
@@ -19,7 +19,7 @@ const PREDEFINED_COLORS = [
     '#ff9600',
     '#d50000'
 ];
-function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false, alpha = 100, paletteOnly, color = '#FFFFFF', onChange, onAlphaChange }) {
+const ColorPicker = /*#__PURE__*/ forwardRef(({ className, name, palette = PREDEFINED_COLORS, useAlpha = false, alpha = 100, paletteOnly, color = '#FFFFFF', onChange, onAlphaChange, ...props }, ref)=>{
     const baseSize = 184;
     const initialRgb = hexToRgb(color);
     const defaultHsv = {
@@ -43,6 +43,7 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
     const blueId = useId();
     const hexId = useId();
     const alphaId = useId();
+    const patternId = useId();
     const gradientKnobRef = useRef(null);
     const hueKnobRef = useRef(null);
     const alphaKnobRef = useRef(null);
@@ -210,10 +211,17 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
         else updateColorRgb();
     }
     return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
         className: classnames('fwe-color-picker', {
             'fwe-alpha-active': useAlpha
         }, className),
+        ...props,
         children: [
+            name && /*#__PURE__*/ jsx("input", {
+                type: "hidden",
+                name: name,
+                value: innerColor ?? ''
+            }),
             !paletteOnly && /*#__PURE__*/ jsxs("div", {
                 className: "fwe-d-flex",
                 children: [
@@ -345,7 +353,7 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
                                 children: [
                                     /*#__PURE__*/ jsx("defs", {
                                         children: /*#__PURE__*/ jsxs("pattern", {
-                                            id: "bwsquare2px",
+                                            id: `bwsquare-alpha-${patternId}`,
                                             width: "4",
                                             height: "4",
                                             patternUnits: "userSpaceOnUse",
@@ -392,7 +400,7 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
                                         ry: "4",
                                         width: "8",
                                         height: "184",
-                                        fill: "url(#bwsquare2px)",
+                                        fill: `url(#bwsquare-alpha-${patternId})`,
                                         strokeWidth: "0"
                                     })
                                 ]
@@ -594,7 +602,7 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
                                 children: [
                                     /*#__PURE__*/ jsx("defs", {
                                         children: /*#__PURE__*/ jsxs("pattern", {
-                                            id: "bwsquare2px",
+                                            id: `bwsquare-remove-${patternId}`,
                                             width: "4",
                                             height: "4",
                                             patternUnits: "userSpaceOnUse",
@@ -641,7 +649,7 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
                                         ry: "0",
                                         width: "18",
                                         height: "18",
-                                        fill: "url(#bwsquare2px)",
+                                        fill: `url(#bwsquare-remove-${patternId})`,
                                         strokeWidth: "0"
                                     })
                                 ]
@@ -671,5 +679,6 @@ function ColorPicker({ className, palette = PREDEFINED_COLORS, useAlpha = false,
             })
         ]
     });
-}
+});
+ColorPicker.displayName = 'ColorPicker';
 export { ColorPicker };

package/dist/forms/date-picker/DatePicker.d.ts

@@ -1,25 +1,24 @@
-import { type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 import './DatePicker.scss';
-export interface DatePickerOptions {
-    minDate?: Date;
-    maxDate?: Date;
-    keepOpenOnDateChange?: boolean;
-    position?: 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
-}
-export interface DatePickerProps {
-    className?: string;
+export interface DatePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'defaultValue' | 'disabled' | 'name'> {
     disabled?: boolean;
     required?: boolean;
+    name?: string;
     hint?: string;
     error?: string;
     value?: Date;
     defaultValue?: Date;
     formatDate?: (date: Date) => string;
-    options?: DatePickerOptions;
+    minDate?: Date;
+    maxDate?: Date;
+    keepOpenOnDateChange?: boolean;
+    position?: 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
     onChange?: (date: Date) => void;
     id?: string;
     allowManualInput?: boolean;
     dateFormat?: string;
     openOnInputClick?: boolean;
 }
-export declare function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue, formatDate, options, onChange, id: idProps, allowManualInput, dateFormat, openOnInputClick, }: PropsWithChildren<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: (props: DatePickerProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/forms/date-picker/DatePicker.js

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { IconCalendar } from "@festo-ui/react-icons";
 import classnames from "classnames";
 import flatpickr from "flatpickr";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import "./DatePicker.css";
 import { useId } from "../../utils/useId.js";
-function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue = new Date(), formatDate = Intl.DateTimeFormat().format, options, onChange, id: idProps, allowManualInput = false, dateFormat = 'd/m/Y', openOnInputClick = true }) {
+const DatePicker = /*#__PURE__*/ forwardRef(({ children, className, disabled, required, error, hint, name, value, defaultValue = new Date(), formatDate = Intl.DateTimeFormat().format, minDate, maxDate, keepOpenOnDateChange, position = 'below center', onChange, id: idProps, allowManualInput = false, dateFormat = 'd/m/Y', openOnInputClick = true, ...props }, ref)=>{
     const id = useId(idProps);
     const [open, setOpen] = useState(false);
     const [calendar, setCalendar] = useState(null);
+    const [selectedDate, setSelectedDate] = useState(value || defaultValue);
     const innerDefaultValue = value || defaultValue;
     function toggle() {
         const newOpen = !open;
@@ -17,9 +18,11 @@ function DatePicker({ children, className, disabled, required, error, hint, valu
         else calendar?.close();
     }
     const datePickerRef = useRef(null);
-    const { keepOpenOnDateChange, maxDate, minDate, position = 'below center' } = options || {};
     useEffect(()=>{
-        if (null !== calendar && void 0 !== value) calendar.setDate(value);
+        if (null !== calendar && void 0 !== value) {
+            calendar.setDate(value);
+            setSelectedDate(value);
+        }
     }, [
         calendar,
         value
@@ -27,6 +30,7 @@ function DatePicker({ children, className, disabled, required, error, hint, valu
     useEffect(()=>{
         function handleChange(date) {
             datePickerRef.current?.blur();
+            setSelectedDate(date);
             if (onChange) onChange(date);
         }
         function handleClose() {
@@ -78,61 +82,71 @@ function DatePicker({ children, className, disabled, required, error, hint, valu
     const handleKeyUp = (event)=>{
         if (' ' === event.key) toggle();
     };
-    return /*#__PURE__*/ jsx("button", {
-        className: "fr-date-picker",
+    return /*#__PURE__*/ jsxs("button", {
+        ref: ref,
+        className: classnames('fr-date-picker', className),
         type: "button",
         onClick: toggle,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        children: /*#__PURE__*/ jsxs("label", {
-            className: classnames('fwe-input-text fwe-input-text-icon', className),
-            htmlFor: id,
-            children: [
-                /*#__PURE__*/ jsx(IconCalendar, {
-                    className: classnames({
-                        'fwe-color-hero': open && !disabled,
-                        'fwe-color-control-disabled': disabled,
-                        'icon-hover': allowManualInput && !openOnInputClick
-                    })
-                }),
-                /*#__PURE__*/ jsx("input", {
-                    id: id,
-                    ref: datePickerRef,
-                    "aria-label": "picked date",
-                    type: "text",
-                    readOnly: !allowManualInput,
-                    onClick: (e)=>{
-                        if (allowManualInput && !openOnInputClick) e.stopPropagation();
-                    },
-                    onKeyDown: (e)=>{
-                        if (allowManualInput && !openOnInputClick) e.stopPropagation();
-                    },
-                    onBlur: ()=>{
-                        if (allowManualInput && calendar && datePickerRef.current) {
-                            const raw = datePickerRef.current.value;
-                            if (raw) calendar.setDate(raw, true, dateFormat);
-                        }
-                    },
-                    required: required,
-                    className: classnames({
-                        'fwe-border-hero': open && !disabled
+        ...props,
+        children: [
+            name && /*#__PURE__*/ jsx("input", {
+                type: "hidden",
+                name: name,
+                value: selectedDate ? selectedDate.toISOString() : ''
+            }),
+            /*#__PURE__*/ jsxs("label", {
+                className: 'fwe-input-text fwe-input-text-icon',
+                htmlFor: id,
+                children: [
+                    /*#__PURE__*/ jsx(IconCalendar, {
+                        className: classnames({
+                            'fwe-color-hero': open && !disabled,
+                            'fwe-color-control-disabled': disabled,
+                            'icon-hover': allowManualInput && !openOnInputClick
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        id: id,
+                        ref: datePickerRef,
+                        "aria-label": "picked date",
+                        type: "text",
+                        readOnly: !allowManualInput,
+                        onClick: (e)=>{
+                            if (allowManualInput && !openOnInputClick) e.stopPropagation();
+                        },
+                        onKeyDown: (e)=>{
+                            if (allowManualInput && !openOnInputClick) e.stopPropagation();
+                        },
+                        onBlur: ()=>{
+                            if (allowManualInput && calendar && datePickerRef.current) {
+                                const raw = datePickerRef.current.value;
+                                if (raw) calendar.setDate(raw, true, dateFormat);
+                            }
+                        },
+                        required: required,
+                        className: classnames({
+                            'fwe-border-hero': open && !disabled
+                        }),
+                        disabled: disabled
                     }),
-                    disabled: disabled
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-label",
-                    children: children
-                }),
-                hint && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-info",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-invalid fwe-d-block",
-                    children: error
-                })
-            ]
-        })
+                    /*#__PURE__*/ jsx("span", {
+                        className: "fwe-input-text-label",
+                        children: children
+                    }),
+                    hint && /*#__PURE__*/ jsx("span", {
+                        className: "fwe-input-text-info",
+                        children: hint
+                    }),
+                    error && /*#__PURE__*/ jsx("span", {
+                        className: "fwe-input-text-invalid fwe-d-block",
+                        children: error
+                    })
+                ]
+            })
+        ]
     });
-}
+});
+DatePicker.displayName = 'DatePicker';
 export { DatePicker };

package/dist/forms/date-range-picker/DateRangePicker.d.ts

@@ -1,19 +1,19 @@
-import { type PropsWithChildren } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
 import './DateRangePicker.scss';
-export interface DateRangePickerOptions {
-    maxDate?: Date;
-    minDate?: Date;
-    keepOpenOnDateChange?: boolean;
-}
-export interface DateRangePickerProps {
-    className?: string;
+export interface DateRangePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'defaultValue' | 'disabled' | 'name' | 'value'> {
     disabled?: boolean;
     required?: boolean;
+    name?: string;
     hint?: string;
     error?: string;
+    value?: Date[];
     defaultValue?: Date;
     formatDate?: (date: Date) => string;
-    options?: DateRangePickerOptions;
+    minDate?: Date;
+    maxDate?: Date;
+    keepOpenOnDateChange?: boolean;
     onChange?: (dates: Date[]) => void;
 }
-export declare function DateRangePicker({ className, children, disabled, error, formatDate, hint, onChange, options, required, defaultValue, }: PropsWithChildren<DateRangePickerProps>): import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: (props: DateRangePickerProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/forms/date-range-picker/DateRangePicker.js

@@ -1,14 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IconCalendar } from "@festo-ui/react-icons";
 import classnames from "classnames";
 import flatpickr from "flatpickr";
 import rangePlugin from "flatpickr/dist/plugins/rangePlugin.js";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import "./DateRangePicker.css";
 import { useId } from "../../utils/useId.js";
-function DateRangePicker({ className, children, disabled, error, formatDate, hint, onChange, options, required, defaultValue = new Date() }) {
+const DateRangePicker = /*#__PURE__*/ forwardRef(({ className, children, disabled, error, formatDate, hint, name, onChange, minDate, maxDate, keepOpenOnDateChange, required, value, defaultValue = new Date(), ...props }, ref)=>{
     const [open, setOpen] = useState(false);
     const [calendar, setCalendar] = useState(null);
+    const [selectedDates, setSelectedDates] = useState([]);
     const id = useId();
     function toggle() {
         const newOpen = !open;
@@ -21,6 +22,7 @@ function DateRangePicker({ className, children, disabled, error, formatDate, hin
     const containerRef = useRef(null);
     useEffect(()=>{
         function handleChange(dates) {
+            setSelectedDates(dates);
             if (onChange) onChange(dates);
         }
         function handleClose() {
@@ -39,18 +41,29 @@ function DateRangePicker({ className, children, disabled, error, formatDate, hin
             position: 'below center',
             positionElement: containerRef.current,
             formatDate,
-            closeOnSelect: !options?.keepOpenOnDateChange || true,
+            closeOnSelect: !keepOpenOnDateChange,
             clickOpens: false,
             onClose: handleClose,
-            minDate: options?.minDate,
-            maxDate: options?.maxDate
+            minDate,
+            maxDate
         }));
     }, [
         formatDate,
         onChange,
         calendar,
         defaultValue,
-        options
+        keepOpenOnDateChange,
+        minDate,
+        maxDate
+    ]);
+    useEffect(()=>{
+        if (null !== calendar && void 0 !== value) {
+            calendar.setDate(value);
+            setSelectedDates(value);
+        }
+    }, [
+        calendar,
+        value
     ]);
     useEffect(()=>()=>{
             if (null !== calendar) calendar.destroy();
@@ -63,68 +76,86 @@ function DateRangePicker({ className, children, disabled, error, formatDate, hin
     const handleKeyUp = (event)=>{
         if (' ' === event.key) toggle();
     };
-    return /*#__PURE__*/ jsx("button", {
-        tabIndex: 0,
+    return /*#__PURE__*/ jsxs("button", {
+        ref: ref,
         type: "button",
         className: classnames('fr-date-range-picker', className),
         onClick: toggle,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        children: /*#__PURE__*/ jsxs("label", {
-            className: "fwe-input-text fwe-input-text-icon",
-            htmlFor: id,
-            children: [
-                /*#__PURE__*/ jsx(IconCalendar, {
-                    className: classnames({
-                        'fwe-color-hero': open && !disabled,
-                        'fwe-color-control-disabled': disabled
+        ...props,
+        children: [
+            name && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        type: "hidden",
+                        name: `${name}-start`,
+                        value: selectedDates[0] ? selectedDates[0].toISOString() : ''
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        type: "hidden",
+                        name: `${name}-end`,
+                        value: selectedDates[1] ? selectedDates[1].toISOString() : ''
                     })
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    ref: containerRef,
-                    className: "fr-date-range-picker-inputs",
-                    children: [
-                        /*#__PURE__*/ jsx("input", {
-                            ref: inputRef,
-                            "aria-label": "picked start date",
-                            type: "text",
-                            readOnly: true,
-                            required: required,
-                            className: classnames({
-                                'fwe-border-hero': open && !disabled
+                ]
+            }),
+            /*#__PURE__*/ jsxs("label", {
+                className: "fwe-input-text fwe-input-text-icon",
+                htmlFor: id,
+                children: [
+                    /*#__PURE__*/ jsx(IconCalendar, {
+                        className: classnames({
+                            'fwe-color-hero': open && !disabled,
+                            'fwe-color-control-disabled': disabled
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        ref: containerRef,
+                        className: "fr-date-range-picker-inputs",
+                        children: [
+                            /*#__PURE__*/ jsx("input", {
+                                ref: inputRef,
+                                "aria-label": "picked start date",
+                                type: "text",
+                                readOnly: true,
+                                required: required,
+                                className: classnames({
+                                    'fwe-border-hero': open && !disabled
+                                }),
+                                disabled: disabled,
+                                id: id
                             }),
-                            disabled: disabled,
-                            id: id
+                            /*#__PURE__*/ jsx("input", {
+                                ref: input2Ref,
+                                "aria-label": "picked end date",
+                                type: "text",
+                                readOnly: true,
+                                required: required,
+                                className: classnames({
+                                    'fwe-border-hero': open && !disabled
+                                }),
+                                disabled: disabled
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: classnames('fwe-input-text-label', {
+                            'fwe-color-text-disabled': disabled
                         }),
-                        /*#__PURE__*/ jsx("input", {
-                            ref: input2Ref,
-                            "aria-label": "picked end date",
-                            type: "text",
-                            readOnly: true,
-                            required: required,
-                            className: classnames({
-                                'fwe-border-hero': open && !disabled
-                            }),
-                            disabled: disabled
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: classnames('fwe-input-text-label', {
-                        'fwe-color-text-disabled': disabled
+                        children: children
                     }),
-                    children: children
-                }),
-                hint && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-info",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-invalid fwe-d-block",
-                    children: error
-                })
-            ]
-        })
+                    hint && /*#__PURE__*/ jsx("span", {
+                        className: "fwe-input-text-info",
+                        children: hint
+                    }),
+                    error && /*#__PURE__*/ jsx("span", {
+                        className: "fwe-input-text-invalid fwe-d-block",
+                        children: error
+                    })
+                ]
+            })
+        ]
     });
-}
+});
+DateRangePicker.displayName = 'DateRangePicker';
 export { DateRangePicker };

package/dist/forms/text-editor/TextEditor.d.ts

@@ -1,20 +1,20 @@
+import { type ComponentPropsWithoutRef } from 'react';
 import './TextEditor.scss';
-export interface TextEditorConfiguration {
-    toolbar?: {
-        bold?: boolean;
-        italic?: boolean;
-        underline?: boolean;
-        alignCenter?: boolean;
-        alignRight?: boolean;
-        bulletList?: boolean;
-        orderedList?: boolean;
-        image?: boolean;
-        link?: boolean;
-    };
+export interface TextEditorToolbarConfig {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    alignCenter?: boolean;
+    alignRight?: boolean;
+    bulletList?: boolean;
+    orderedList?: boolean;
+    image?: boolean;
+    link?: boolean;
 }
-export interface TextEditorProps {
+export interface TextEditorProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange' | 'defaultValue'> {
     readonly disabled?: boolean;
     readonly label: string;
+    readonly name?: string;
     readonly maxLength?: number;
     readonly value?: string;
     readonly defaultValue?: string;
@@ -22,7 +22,6 @@ export interface TextEditorProps {
     readonly error?: string;
     readonly readOnly?: boolean;
     readonly onChange?: (value: string | null) => void;
-    readonly className?: string;
-    readonly config?: TextEditorConfiguration;
+    readonly toolbarConfig?: TextEditorToolbarConfig;
 }
-export declare function TextEditor({ disabled, defaultValue, label, maxLength, value, hint, error, readOnly, onChange, className, config: configProps, }: TextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare const TextEditor: (props: TextEditorProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/text-editor/TextEditor.js

@@ -1,38 +1,34 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import "./TextEditor.css";
 import { IconAlignCenter, IconAlignRight, IconEnumeration, IconImage, IconLink, IconListView } from "@festo-ui/react-icons";
 import quill from "quill";
 import { filterXSS, whiteList as external_xss_whiteList } from "xss";
 import { useId } from "../../utils/useId.js";
 import { TextEditorButton } from "./TextEditorButton.js";
-const defaultConfig = {
-    toolbar: {
-        bold: true,
-        italic: true,
-        underline: true,
-        alignCenter: false,
-        alignRight: false,
-        bulletList: true,
-        orderedList: true,
-        image: true,
-        link: true
-    }
+const defaultToolbarConfig = {
+    bold: true,
+    italic: true,
+    underline: true,
+    alignCenter: false,
+    alignRight: false,
+    bulletList: true,
+    orderedList: true,
+    image: true,
+    link: true
 };
 function postpone(fn) {
     Promise.resolve().then(fn);
 }
-function TextEditor({ disabled = false, defaultValue, label, maxLength, value, hint, error, readOnly = false, onChange, className, config: configProps }) {
+const TextEditor = /*#__PURE__*/ forwardRef(({ disabled = false, defaultValue, label, name, maxLength, value, hint, error, readOnly = false, onChange, className, toolbarConfig: toolbarConfigProps, ...props }, ref)=>{
     const editorRef = useRef(null);
     const [editor, setEditor] = useState(null);
     const id = useId();
     const [innerValue, setInnerValue] = useState(null);
-    const config = {
-        toolbar: {
-            ...defaultConfig.toolbar,
-            ...configProps?.toolbar
-        }
+    const toolbar = {
+        ...defaultToolbarConfig,
+        ...toolbarConfigProps
     };
     const setEditorContents = useCallback((e, v)=>{
         if (e) {
@@ -90,16 +86,22 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
         defaultValue
     ]);
     useEffect(()=>{
-        if (editor) editor.on('text-change', ()=>{
-            let html = editor.getSemanticHTML();
-            if ('<p><br></p>' === html || '<div><br></div>' === html || void 0 === html) html = null;
-            if (null !== html) {
-                const relativeLinkRegex = /href="(?!https?:\/\/|mailto:|tel:)([^"]+)"/g;
-                html = html.replace(relativeLinkRegex, 'href="https://$1"');
-            }
-            if (onChange) onChange(html);
-            setInnerValue(html);
-        });
+        if (editor) {
+            const handler = ()=>{
+                let html = editor.getSemanticHTML();
+                if ('<p><br></p>' === html || '<div><br></div>' === html || void 0 === html) html = null;
+                if (null !== html) {
+                    const relativeLinkRegex = /href="(?!https?:\/\/|mailto:|tel:)([^"]+)"/g;
+                    html = html.replace(relativeLinkRegex, 'href="https://$1"');
+                }
+                if (onChange) onChange(html);
+                setInnerValue(html);
+            };
+            editor.on('text-change', handler);
+            return ()=>{
+                editor.off('text-change', handler);
+            };
+        }
     }, [
         editor,
         onChange
@@ -116,10 +118,10 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
         return innerValue?.length || 0;
     }
     function hideDivider(name) {
-        const linkOrImage = config.toolbar?.image || config.toolbar?.link;
-        const lists = config.toolbar?.bulletList || config.toolbar?.orderedList;
-        const typos = config.toolbar?.bold || config.toolbar?.italic || config.toolbar?.underline;
-        const textAlign = config.toolbar?.alignCenter || config.toolbar?.alignRight;
+        const linkOrImage = toolbar.image || toolbar.link;
+        const lists = toolbar.bulletList || toolbar.orderedList;
+        const typos = toolbar.bold || toolbar.italic || toolbar.underline;
+        const textAlign = toolbar.alignCenter || toolbar.alignRight;
         switch(name){
             case 'typo':
                 return !typos || !textAlign && !linkOrImage && !lists;
@@ -128,39 +130,39 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
             case 'lists':
                 return !lists || !linkOrImage;
             case 'image':
-                return !config.toolbar?.image || !config.toolbar.link;
+                return !toolbar.image || !toolbar.link;
             default:
                 break;
         }
         return true;
     }
     return /*#__PURE__*/ jsxs("label", {
+        ref: ref,
         className: classnames('fwe-input-text', {
-            disabled
-        }),
+            'fwe-disabled': disabled
+        }, className),
         htmlFor: `editor-label-${id}`,
+        ...props,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: classnames('fwe-editor-toolbar', {
-                    [`fwe-editor-toolbar-${className}`]: className
-                }),
+                className: 'fwe-editor-toolbar',
                 id: `editor-toolbar-${id}`,
                 children: /*#__PURE__*/ jsxs("span", {
                     className: "ql-formats fwe-mr-3",
                     children: [
-                        config?.toolbar?.bold && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.bold && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             type: "bold",
                             className: "fwe-mr-3",
                             label: "B"
                         }),
-                        config?.toolbar?.italic && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.italic && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             type: "italic",
                             className: "fwe-mr-3",
                             label: "I"
                         }),
-                        config?.toolbar?.underline && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.underline && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             type: "underline",
                             label: "U"
@@ -168,7 +170,7 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                         !hideDivider('typo') && /*#__PURE__*/ jsx("div", {
                             className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
                         }),
-                        config?.toolbar?.alignCenter && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.alignCenter && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             category: "align",
                             type: "align-center",
@@ -179,10 +181,10 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                             }),
                             value: "center",
                             className: classnames({
-                                'fwe-mr-3': config?.toolbar?.alignRight
+                                'fwe-mr-3': toolbar.alignRight
                             })
                         }),
-                        config?.toolbar?.alignRight && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.alignRight && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             category: "align",
                             type: "align-right",
@@ -196,7 +198,7 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                         !hideDivider('text-align') && /*#__PURE__*/ jsx("div", {
                             className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
                         }),
-                        config?.toolbar?.bulletList && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.bulletList && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             className: "fwe-mr-3",
                             type: "ul",
@@ -204,14 +206,14 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                             icon: /*#__PURE__*/ jsx(IconListView, {}),
                             value: "bullet"
                         }),
-                        config?.toolbar?.orderedList && /*#__PURE__*/ jsx(TextEditorButton, {
+                        toolbar.orderedList && /*#__PURE__*/ jsx(TextEditorButton, {
                             disabled: disabled,
                             type: "ol",
                             list: true,
                             icon: /*#__PURE__*/ jsx(IconEnumeration, {}),
                             value: "ordered"
                         }),
-                        config?.toolbar?.image && /*#__PURE__*/ jsxs(Fragment, {
+                        toolbar.image && /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 /*#__PURE__*/ jsx("div", {
                                     className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
@@ -224,7 +226,7 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                                 })
                             ]
                         }),
-                        config?.toolbar?.link && /*#__PURE__*/ jsxs(Fragment, {
+                        toolbar.link && /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 /*#__PURE__*/ jsx("div", {
                                     className: "fwe-divider-y fwe-d-inline-flex fwe-mx-4"
@@ -254,6 +256,11 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                 className: "fwe-input-text-label",
                 children: label
             }),
+            name && /*#__PURE__*/ jsx("input", {
+                type: "hidden",
+                name: name,
+                value: innerValue ?? ''
+            }),
             error && /*#__PURE__*/ jsx("span", {
                 className: "fwe-text-editor-invalid",
                 children: error
@@ -262,11 +269,12 @@ function TextEditor({ disabled = false, defaultValue, label, maxLength, value, h
                 className: "fwe-text-editor-info",
                 children: hint
             }),
-            maxLength && maxLength > 0 && null != value && /*#__PURE__*/ jsx("span", {
+            maxLength && maxLength > 0 && (null != innerValue || null != value) && /*#__PURE__*/ jsx("span", {
                 className: "fwe-input-text-count",
                 children: `${currentLength()} / ${maxLength}`
             })
         ]
     });
-}
+});
+TextEditor.displayName = 'TextEditor';
 export { TextEditor };

package/dist/forms/text-editor/TextEditorButton.js

@@ -6,7 +6,6 @@ function TextEditorButton({ disabled, label, type, className, icon, list, value,
     const btnRef = useRef(null);
     function handleClick() {
         const btn = btnRef.current;
-        setActive((prevActive)=>!prevActive);
         btn?.click();
     }
     useEffect(()=>{

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { ColorIndicator, type ColorIndicatorProps, } from './components/color-indicator/ColorIndicator';
 export { ScrollArea, type ScrollAreaProps, } from './components/scroll-area/ScrollArea';
 export { ColorPicker, type ColorPickerProps, } from './forms/color-picker/ColorPicker';
-export { DatePicker, type DatePickerOptions, type DatePickerProps, } from './forms/date-picker/DatePicker';
-export { DateRangePicker, type DateRangePickerOptions, type DateRangePickerProps, } from './forms/date-range-picker/DateRangePicker';
-export { TextEditor, type TextEditorConfiguration, type TextEditorProps, } from './forms/text-editor/TextEditor';
+export { DatePicker, type DatePickerProps, } from './forms/date-picker/DatePicker';
+export { DateRangePicker, type DateRangePickerProps, } from './forms/date-range-picker/DateRangePicker';
+export { TextEditor, type TextEditorProps, type TextEditorToolbarConfig, } from './forms/text-editor/TextEditor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react-extra",
-  "version": "9.0.1",
+  "version": "10.0.0-dev.827",
   "license": "apache-2.0",
   "author": "Festo UI (styleguide@festo.com)",
   "type": "module",
@@ -25,7 +25,7 @@
     "dev": "rslib build --watch",
     "format": "biome check --write",
     "lint": "biome check",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6008",
     "test": "rstest",
     "test:watch": "rstest --watch"
   },
@@ -40,7 +40,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.2",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@festo-ui/react": "9.0.1-dev.785",
     "@rsbuild/core": "~1.6.2",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rsbuild/plugin-sass": "^1.4.0",
@@ -48,25 +49,25 @@
     "@rslib/core": "^0.17.1",
     "@rstest/core": "^0.6.5",
     "@rstest/coverage-istanbul": "^0.0.5",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/react": "^9.1.16",
+    "@storybook/addon-docs": "^10.2.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "cross-env": "^10.1.0",
     "jsdom": "^26.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^9.1.16",
-    "storybook-addon-rslib": "^2.1.3",
-    "storybook-react-rsbuild": "^2.1.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.2.3",
+    "storybook-addon-rslib": "^3.2.2",
+    "storybook-react-rsbuild": "^3.2.2",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@festo-ui/react": ">=9.0.0 || >=9.0.0-dev",
-    "@festo-ui/web-essentials": ">=9.0.0 || >=9.0.0-dev",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "@festo-ui/react": "*",
+    "@festo-ui/web-essentials": "*",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved."
 }