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

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

@@ -0,0 +1,192 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+import "./MultiSelect.css";
+function MultiSelectComponent({ 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 selectedOptions = useMemo(()=>options.filter((option)=>!option.disabled && (value ?? []).includes(option.data)), [
+        options,
+        value
+    ]);
+    function handleChange(nextOptions) {
+        setValue(nextOptions.map((option)=>option.data));
+    }
+    const chipsRef = useRef(null);
+    const [overflowCount, setOverflowCount] = useState(0);
+    const measureOverflow = useCallback((optionCount)=>{
+        const container = chipsRef.current;
+        if (!container) return void setOverflowCount(0);
+        const allChildren = Array.from(container.children);
+        const optionChildren = allChildren.filter((child)=>'true' === child.dataset.optionChip);
+        for (const child of optionChildren)child.style.display = '';
+        const containerRect = container.getBoundingClientRect();
+        const isOverflow = optionChildren.some((child)=>{
+            const childRect = child.getBoundingClientRect();
+            return childRect.right > containerRect.right;
+        });
+        if (isOverflow && optionCount > 1) {
+            let remainingWidth = containerRect.width - 64;
+            let count = 0;
+            for (const child of optionChildren){
+                const width = child.getBoundingClientRect().width + 8;
+                if (width <= remainingWidth) {
+                    remainingWidth -= width;
+                    child.style.display = '';
+                } else {
+                    count++;
+                    child.style.display = 'none';
+                }
+            }
+            setOverflowCount(count);
+        } else setOverflowCount(0);
+    }, []);
+    useLayoutEffect(()=>{
+        measureOverflow(selectedOptions.length);
+        const container = chipsRef.current;
+        if (!container) return;
+        const observer = new ResizeObserver(()=>{
+            measureOverflow(selectedOptions.length);
+        });
+        observer.observe(container);
+        return ()=>observer.disconnect();
+    }, [
+        selectedOptions,
+        measureOverflow
+    ]);
+    return /*#__PURE__*/ jsx(Listbox, {
+        value: selectedOptions,
+        onChange: handleChange,
+        disabled: disabled,
+        multiple: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fwe-select-wrapper', {
+                'fwe-disabled': disabled
+            }),
+            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: selectedOptions.length > 0 ? /*#__PURE__*/ jsxs("span", {
+                        ref: chipsRef,
+                        className: "fr-multiselect-chip-container",
+                        children: [
+                            selectedOptions.map((o)=>/*#__PURE__*/ jsx("span", {
+                                    "data-option-chip": "true",
+                                    className: classnames('fwe-chip', {
+                                        'fwe-disabled': disabled
+                                    }),
+                                    style: {
+                                        minWidth: 0,
+                                        flexShrink: 1 === selectedOptions.length ? 1 : 0
+                                    },
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "fr-multiselect-chip-ellipsis",
+                                        children: o.label
+                                    })
+                                }, String(o.data))),
+                            overflowCount > 0 && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: "..."
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "fwe-chip",
+                                        children: overflowCount
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : placeholder ?? ''
+                }),
+                /*#__PURE__*/ jsx("label", {
+                    className: "fwe-select-label",
+                    id: labelId,
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsx(ListboxOptions, {
+                    className: "fwe-options-container fwe-options-container--multi-select",
+                    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",
+                            style: {
+                                cursor: option.disabled ? 'default' : 'pointer'
+                            },
+                            children: ({ selected })=>/*#__PURE__*/ jsxs("label", {
+                                    className: classnames('fwe-checkbox', {
+                                        'fwe-disabled': option.disabled
+                                    }),
+                                    style: {
+                                        pointerEvents: 'none',
+                                        cursor: 'pointer'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("input", {
+                                            type: "checkbox",
+                                            checked: selected,
+                                            disabled: option.disabled,
+                                            readOnly: true,
+                                            tabIndex: -1,
+                                            style: {
+                                                pointerEvents: 'none',
+                                                cursor: 'pointer'
+                                            }
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "fwe-checkbox-checkmark"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "fwe-checkbox-label-content",
+                                            children: option.label
+                                        })
+                                    ]
+                                })
+                        }, String(option.data)))
+                }),
+                name && (value ?? []).map((selectedValue, index)=>/*#__PURE__*/ jsx("input", {
+                        type: "hidden",
+                        name: name,
+                        value: String(selectedValue),
+                        disabled: disabled
+                    }, `${name}-${String(selectedValue)}-${index}`)),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fwe-select-invalid",
+                    children: error
+                })
+            ]
+        })
+    });
+}
+const MultiSelect = /*#__PURE__*/ forwardRef(MultiSelectComponent);
+MultiSelect.displayName = 'MultiSelect';
+export { MultiSelect };

package/dist/forms/radio/RadioButton.d.ts

@@ -1,9 +1,9 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface RadioButtonProps extends ClassNamePropsWithChildren {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface RadioButtonProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'checked' | 'defaultChecked' | 'value'> {
     readonly id?: string;
     readonly defaultChecked?: boolean;
     readonly checked?: boolean;
-    readonly onChange?: (value: string) => void;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly name?: string;
     readonly value?: string;
     readonly labelPosition?: 'before' | 'after' | 'below';
@@ -11,4 +11,4 @@ export interface RadioButtonProps extends ClassNamePropsWithChildren {
     readonly disabled?: boolean;
     readonly required?: boolean;
 }
-export declare function RadioButton(props: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: (props: RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/radio/RadioButton.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useContext } from "react";
+import { forwardRef, useContext } from "react";
 import { useId } from "../../utils/useId.js";
 import { RadioGroupContext } from "./RadioGroupContext.js";
-function RadioButton(props) {
-    const { id: idProps, onChange, value, name, defaultChecked: defaultCheckedProp, checked, labelPosition = 'after', large = false, disabled = false, required = false, children, className } = props;
+const RadioButton = /*#__PURE__*/ forwardRef(({ id: idProps, onChange, value, name, defaultChecked: defaultCheckedProp, checked, labelPosition = 'after', large = false, disabled = false, required = false, children, className, ...props }, ref)=>{
     const { disabled: groupDisabled, labelPosition: groupLabelPosition, large: groupLarge, name: groupName, value: groupValue, required: groupRequired, handleValueChange: onGroupValueChange, isControlled } = useContext(RadioGroupContext);
     const innerLabelPosition = groupLabelPosition ?? labelPosition;
     const classes = classnames('fwe-radio', {
@@ -15,21 +14,22 @@ function RadioButton(props) {
         'fwe-radio-lg': large || groupLarge
     }, className);
     const controlledChecked = void 0 !== checked || isControlled && void 0 !== groupValue ? Boolean(checked || groupValue === value) : void 0;
-    const getDefaultChecked = ()=>{
+    function getDefaultChecked() {
         if (void 0 !== controlledChecked) return;
         if (void 0 !== defaultCheckedProp) return defaultCheckedProp;
         if (!isControlled && void 0 !== groupValue) return groupValue === value;
-    };
+    }
     const defaultChecked = getDefaultChecked();
     function handleChange(event) {
         const newValue = event.target.value;
         if (newValue) onGroupValueChange?.(newValue);
-        onChange?.(newValue);
+        onChange?.(newValue, event);
     }
     const id = useId(idProps);
     return /*#__PURE__*/ jsxs("label", {
         className: classes,
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: "fwe-radio-check",
@@ -43,12 +43,12 @@ function RadioButton(props) {
                         value: value,
                         onChange: handleChange,
                         disabled: disabled || groupDisabled,
-                        required: required || groupRequired
+                        required: required || groupRequired,
+                        ...props
                     }),
                     /*#__PURE__*/ jsx("div", {
                         className: "fwe-radio-checkmark"
-                    }),
-                    ' '
+                    })
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
@@ -57,5 +57,6 @@ function RadioButton(props) {
             })
         ]
     });
-}
+});
+RadioButton.displayName = 'RadioButton';
 export { RadioButton };

package/dist/forms/radio/RadioGroup.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentPropsWithoutRef } from 'react';
-export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue'> {
     readonly name?: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly value?: string;
     readonly defaultValue?: string;
     readonly onValueChange?: (value: string) => void;
-    readonly value?: string;
     readonly labelPosition?: 'before' | 'after' | 'below';
     readonly large?: boolean;
-    readonly disabled?: boolean;
-    readonly required?: boolean;
 }
 export declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/forms/radio/RadioGroup.js

@@ -47,4 +47,5 @@ const RadioGroup = /*#__PURE__*/ forwardRef(({ children, className, onValueChang
         })
     });
 });
+RadioGroup.displayName = 'RadioGroup';
 export { RadioGroup };

package/dist/forms/segment/Segment.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import React, { type ChangeEvent, type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 export interface SegmentConfiguration {
     readonly outline?: boolean;
     readonly iconOnly?: boolean;
 }
-export interface SegmentProps extends ClassNamePropsWithChildren {
+export interface SegmentProps extends PropsWithChildren, Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange' | 'defaultValue' | 'required' | 'disabled'> {
     readonly legend: string;
     readonly config?: SegmentConfiguration;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
+    readonly onChange?: (value: any, event: ChangeEvent<HTMLInputElement>) => void;
     readonly value?: any;
 }
-export declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;
+export declare const Segment: (props: SegmentProps & React.RefAttributes<HTMLFieldSetElement>) => React.ReactElement | null;

package/dist/forms/segment/Segment.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import react from "react";
+import react, { Children, forwardRef, isValidElement } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 const defaultConfig = {
     outline: true,
     iconOnly: true
 };
-function Segment(props) {
-    const { children, legend, config, onChange, className, value: valueProps } = props;
+const Segment = /*#__PURE__*/ forwardRef(({ children, legend, config, onChange, className, value: valueProps, ...props }, ref)=>{
     const innerConfig = {
         ...defaultConfig,
         ...config
@@ -15,8 +14,8 @@ function Segment(props) {
     let useIcon = false;
     let useIconAndText = false;
     let tmpValue = '';
-    react.Children.forEach(children, (child, index)=>{
-        if (!/*#__PURE__*/ react.isValidElement(child)) return null;
+    Children.forEach(children, (child, index)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return null;
         if (0 === index && null !== child.props.icon) if (innerConfig.iconOnly) useIcon = true;
         else useIconAndText = true;
         if (child.props.checked) tmpValue = child.props.value;
@@ -26,8 +25,8 @@ function Segment(props) {
         controlled: valueProps,
         default: tmpValue
     });
-    const handleChange = (event, _value)=>{
-        if (onChange) onChange(event, _value);
+    const handleChange = (_value, event)=>{
+        if (onChange) onChange(_value, event);
         setValue(_value);
     };
     return /*#__PURE__*/ jsxs("fieldset", {
@@ -36,6 +35,8 @@ function Segment(props) {
             'fwe-segment-icon': useIcon,
             'fwe-segment-icon-text': useIconAndText
         }, className),
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx("legend", {
                 className: "fwe-sr-only fwe-d-inline-block",
@@ -46,7 +47,6 @@ function Segment(props) {
                 children: react.Children.map(children, (child)=>{
                     if (!/*#__PURE__*/ react.isValidElement(child)) return null;
                     return /*#__PURE__*/ react.cloneElement(child, {
-                        ...child.props,
                         onChange: handleChange,
                         iconOnly: innerConfig.iconOnly,
                         checked: child.props.value === value
@@ -55,5 +55,6 @@ function Segment(props) {
             })
         ]
     });
-}
+});
+Segment.displayName = 'Segment';
 export { Segment };

package/dist/forms/segment/segment-control/SegmentControl.d.ts

@@ -1,14 +1,10 @@
-import type React from 'react';
-import type { ClassNameProps } from '../../../utils/types';
-export interface SegmentControlProps extends ClassNameProps {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SegmentControlProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value'> {
     readonly label: string;
-    readonly name: string;
     readonly value: any;
     readonly checked?: boolean;
-    readonly disabled?: boolean;
     readonly icon?: React.ReactNode;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
-    readonly id?: string;
+    readonly onChange?: (value: any, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly iconOnly?: boolean;
 }
-export declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const SegmentControl: (props: SegmentControlProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/segment/segment-control/SegmentControl.js

@@ -1,14 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
-function SegmentControl(props) {
-    const { label, checked, disabled, name, value, icon, onChange, id, className, iconOnly } = props;
+const SegmentControl = /*#__PURE__*/ forwardRef(({ label, checked, disabled, name, value, icon, onChange, id, className, iconOnly, ...props }, ref)=>{
     const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
     let viewMode = 'text';
     if (icon) viewMode = iconOnly ? 'icon' : 'icon-text';
     const handleChange = (event)=>{
-        if (onChange) onChange(event, value);
+        if (onChange) onChange(value, event);
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -20,11 +19,13 @@ function SegmentControl(props) {
                 value: value,
                 checked: checked,
                 disabled: disabled,
-                onChange: (e)=>handleChange(e)
+                onChange: (e)=>handleChange(e),
+                ...props
             }),
             /*#__PURE__*/ jsxs("label", {
                 className: classnames('fwe-segment-label', className),
                 htmlFor: componentId.current,
+                ref: ref,
                 children: [
                     'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
@@ -53,5 +54,6 @@ function SegmentControl(props) {
             })
         ]
     });
-}
+});
+SegmentControl.displayName = 'SegmentControl';
 export { SegmentControl };

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

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