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

package/dist/forms/select/Select.js

@@ -1,95 +1,93 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "./Select.css";
-import { forwardRef, useRef } from "react";
-import react_dom from "react-dom";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useMemo } from "react";
 import { useControlled } from "../../utils/useControlled.js";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper } from "./internal/index.js";
-import { HiddenInput } from "./internal/HiddenInput.js";
-import { getChildren } from "./internal/utils.js";
-function SelectComponent({ defaultValue = '', open, defaultOpen = false, value: controlled, label, options, onChange, required = false, config, disabled, name, id, children, hint, error, onOpenChange, renderLabelContent, ...props }, ref) {
+import { useId } from "../../utils/useId.js";
+function SelectComponent({ defaultValue = '', value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
+    const id = useId(idProp);
+    const labelId = `${id}-label`;
     const [value, setValue] = useControlled({
         controlled,
         default: defaultValue,
         onChange
     });
-    const [focused, setFocused] = useControlled({
-        controlled: open,
-        default: defaultOpen,
-        onChange: onOpenChange
-    });
-    const buttonEl = useRef(null);
-    const usedOptions = options ?? getChildren(children).childrenList.map((child)=>child.props.option);
-    const innerRef = useRef(null);
-    const combinedRef = useForkRef(ref, innerRef);
-    const multiple = Array.isArray(value);
-    const refocusButton = ()=>{
-        setFocused(false);
-        buttonEl?.current?.focus();
-    };
-    const handleOptionChange = (newOption)=>{
-        let newValue = newOption.data;
-        if (Array.isArray(value)) newValue = value.includes(newValue) ? value.filter((item)=>item !== newValue) : [
-            ...value,
-            newValue
-        ];
-        setValue(newValue);
-        if (!multiple) refocusButton();
-    };
-    const removeChip = (chipLabel)=>{
-        const chipOption = usedOptions.find((option)=>option.label === chipLabel);
-        if (chipOption) handleOptionChange(chipOption);
-    };
-    const selectedLabel = multiple ? usedOptions.filter((option)=>value.includes(option.data))?.map((option)=>option.label) : usedOptions.find((option)=>option.data === value)?.label;
-    return /*#__PURE__*/ jsxs(SelectWrapper, {
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
+        options,
+        value
+    ]);
+    function handleChange(option) {
+        if (!option || option.disabled) return;
+        setValue(option.data);
+    }
+    return /*#__PURE__*/ jsx(Listbox, {
+        value: selectedOption ?? null,
+        onChange: handleChange,
         disabled: disabled,
-        ref: combinedRef,
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(HiddenInput, {
-                onChange: handleOptionChange,
-                options: usedOptions,
-                value: value
-            }),
-            /*#__PURE__*/ jsx(SelectButton, {
-                ref: buttonEl,
-                onToggle: ()=>setFocused((prev)=>!prev),
-                error: error,
-                disabled: disabled,
-                focused: focused,
-                required: required,
-                onChipClick: removeChip,
-                label: selectedLabel,
-                renderLabelContent: renderLabelContent
-            }),
-            /*#__PURE__*/ jsx(SelectLabel, {
-                hideLabel: config?.hideLabel,
-                label: label,
-                id: id
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-underline"
-            }),
-            hint && !error && /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-description",
-                children: hint
-            }),
-            error && /*#__PURE__*/ jsx("div", {
-                className: "fwe-select-invalid",
-                children: error
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fwe-select-wrapper', {
+                'fwe-disabled': disabled
             }),
-            focused && /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsx(SelectOptionsContainer, {
-                multiple: multiple,
-                ref: innerRef,
-                config: config,
-                onClose: refocusButton,
-                onOptionChange: handleOptionChange,
-                options: options,
-                label: selectedLabel,
-                children: children
-            }), document.body)
-        ]
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx(ListboxButton, {
+                    className: classnames('fwe-select', {
+                        'fwe-invalid': error
+                    }),
+                    id: id,
+                    "aria-labelledby": label ? labelId : void 0,
+                    disabled: disabled,
+                    children: selectedOption ? selectedOption.label : placeholder ?? ''
+                }),
+                /*#__PURE__*/ jsx("label", {
+                    className: "fwe-select-label",
+                    id: labelId,
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsx(ListboxOptions, {
+                    className: "fwe-options-container",
+                    as: "ul",
+                    portal: false,
+                    style: {
+                        minWidth: 'var(--button-width)'
+                    },
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 12,
+                        padding: 8
+                    },
+                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
+                            value: option,
+                            disabled: option.disabled,
+                            as: "li",
+                            className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
+                                    'fwe-selected': selected,
+                                    'fwe-focus': focus,
+                                    'fwe-disabled': isDisabled
+                                }),
+                            children: option.label
+                        }, String(option.data)))
+                }),
+                name && /*#__PURE__*/ jsx("input", {
+                    type: "hidden",
+                    name: name,
+                    value: String(value ?? ''),
+                    disabled: disabled
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-invalid",
+                    children: error
+                })
+            ]
+        })
     });
 }
 const Select = /*#__PURE__*/ forwardRef(SelectComponent);
+Select.displayName = 'Select';
 export { Select };

package/dist/forms/select/internal/SelectButton.d.ts

@@ -1,12 +0,0 @@
-interface SelectButtonProps {
-    onToggle: () => void;
-    focused?: boolean;
-    required: boolean;
-    error?: string;
-    disabled?: boolean;
-    onChipClick: (label: string) => void;
-    label?: string | string[];
-    renderLabelContent?: (label?: string | string[]) => JSX.Element;
-}
-export declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-export {};

package/dist/forms/select/internal/SelectButton.js

@@ -1,49 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-import { SelectButtonContent } from "./SelectButtonContent.js";
-const SelectButton = /*#__PURE__*/ forwardRef(({ onToggle, disabled, label, focused, required, error, onChipClick, renderLabelContent }, ref)=>{
-    const empty = void 0 === label && !focused;
-    function handleKeyDown(e) {
-        if (disabled) return;
-        const validKeys = [
-            'Enter',
-            ' ',
-            'ArrowUp',
-            'ArrowDown'
-        ];
-        if (validKeys.includes(e.key)) {
-            e.preventDefault();
-            onToggle();
-        }
-    }
-    function handleClick(e) {
-        if (disabled) return;
-        e.stopPropagation();
-        onToggle();
-    }
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        tabIndex: 0,
-        className: classnames('fwe-select', {
-            'fwe-focus': focused,
-            'fwe-empty': empty,
-            'fwe-required': required,
-            'fwe-disabled': disabled,
-            'fwe-invalid': error
-        }),
-        onClick: handleClick,
-        ref: ref,
-        onKeyDown: handleKeyDown,
-        disabled: disabled,
-        children: /*#__PURE__*/ jsx("div", {
-            className: "fwe-select-content",
-            children: /*#__PURE__*/ jsx(SelectButtonContent, {
-                onClick: onChipClick,
-                label: label,
-                renderLabelContent: renderLabelContent
-            })
-        })
-    });
-});
-export { SelectButton };

package/dist/forms/select/internal/SelectButtonContent.d.ts

@@ -1,7 +0,0 @@
-interface SelectButtonContentProps {
-    label?: string | string[];
-    renderLabelContent?: (label?: string | string[]) => JSX.Element;
-    onClick: (label: string) => void;
-}
-export declare function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectButtonContent.js

@@ -1,31 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { IconCloseSmall } from "@festo-ui/react-icons";
-function SelectButtonContent({ label, renderLabelContent, onClick }) {
-    const handleChipClick = (chipLabel)=>(e)=>{
-            e.stopPropagation();
-            onClick(chipLabel);
-        };
-    if (renderLabelContent) return renderLabelContent(label);
-    if (Array.isArray(label)) return /*#__PURE__*/ jsx("div", {
-        className: "fwe-chip-container",
-        children: label.map((v)=>/*#__PURE__*/ jsxs("div", {
-                className: "fwe-chip chip-text-truncate fwe-pr-4",
-                title: v,
-                children: [
-                    v,
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: "chip-removable",
-                        onClick: handleChipClick(v),
-                        children: /*#__PURE__*/ jsx(IconCloseSmall, {
-                            size: 16
-                        })
-                    })
-                ]
-            }, v))
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: label
-    });
-}
-export { SelectButtonContent };

package/dist/forms/select/internal/SelectOptionsContainer.d.ts

@@ -1,17 +0,0 @@
-import { type Key, type Ref } from 'react';
-import type { SelectConfiguration } from '../../../utils/types';
-import type { SelectOptionType } from '../select-option/SelectOption';
-interface SelectOptionsContainerProps<T> {
-    options?: SelectOptionType<T>[];
-    config?: SelectConfiguration;
-    onClose: () => void;
-    label?: string | string[];
-    onOptionChange: (option: SelectOptionType<T>) => void;
-    multiple?: boolean;
-    children: React.ReactNode;
-}
-declare function SelectOptionsContainerComponent<T extends Key | null | undefined>({ options, config, onClose, label, onOptionChange, multiple, children, }: SelectOptionsContainerProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectOptionsContainerComponent>;
-export {};

package/dist/forms/select/internal/SelectOptionsContainer.js

@@ -1,103 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createRef, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import { ListItem } from "./ListItem.js";
-import { SelectScrollContainer } from "./SelectScrollContainer.js";
-import { getChildren } from "./utils.js";
-function SelectOptionsContainerComponent({ options, config, onClose, label, onOptionChange, multiple, children }, ref) {
-    const [popperElement, setPopperElement] = useState(null);
-    const refObject = 'function' != typeof ref ? ref?.current : null;
-    const { styles, attributes } = usePopper(refObject, popperElement, {
-        placement: 'bottom-start',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [
-                        0,
-                        3
-                    ]
-                }
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: [
-                        'bottom-start',
-                        'top-start'
-                    ]
-                }
-            }
-        ]
-    });
-    function getCssProperies() {
-        if (config?.contentWidth) return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`,
-            width: config?.contentWidth
-        };
-        return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`
-        };
-    }
-    const allChildren = getChildren(children);
-    const childrenList = allChildren.childrenList;
-    const usedOptions = options ?? childrenList.map((child)=>child.props.option);
-    const { length } = usedOptions;
-    const listItemRef = useRef(Array.from({
-        length
-    }, ()=>/*#__PURE__*/ createRef()));
-    const selectedIndex = Array.isArray(label) ? usedOptions.findIndex((option)=>option.label === label.at(-1)) : usedOptions.findIndex((option)=>option.label === label);
-    const [init, setInit] = useState(false);
-    useEffect(()=>{
-        if (!init) requestAnimationFrame(()=>{
-            setInit(true);
-            const index = -1 === selectedIndex ? 0 : selectedIndex;
-            listItemRef.current?.[index].current?.focus();
-        });
-    }, [
-        selectedIndex,
-        init
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                "aria-hidden": true,
-                className: "fr-backdrop",
-                onClick: onClose
-            }),
-            /*#__PURE__*/ jsxs("ul", {
-                ref: setPopperElement,
-                style: getCssProperies(),
-                ...attributes.popper,
-                className: "fwe-select-options-container",
-                role: "listbox",
-                children: [
-                    allChildren.before,
-                    /*#__PURE__*/ jsx(SelectScrollContainer, {
-                        length: length,
-                        config: config,
-                        children: [
-                            ...options || [],
-                            ...childrenList
-                        ].map((item, i)=>/*#__PURE__*/ jsx(ListItem, {
-                                withCheckbox: multiple,
-                                item: item,
-                                selectedLabel: label,
-                                onClose: onClose,
-                                onFocusChange: (index)=>listItemRef.current[index].current?.focus(),
-                                onOptionChange: onOptionChange,
-                                ref: listItemRef,
-                                index: i,
-                                options: usedOptions
-                            }, /*#__PURE__*/ (isValidElement(item) ? item.props.option : item).data))
-                    }),
-                    allChildren.after
-                ]
-            })
-        ]
-    });
-}
-const SelectOptionsContainer = /*#__PURE__*/ forwardRef(SelectOptionsContainerComponent);
-export { SelectOptionsContainer };

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;