@festo-ui/react 9.0.1-dev.768 → 9.0.1-dev.769

package/dist/forms/combobox/ComboBox.js

@@ -0,0 +1,169 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./ComboBox.css";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+function getHighlightedLabel(label, query) {
+    if (!query) return [
+        {
+            text: label,
+            highlighted: false
+        }
+    ];
+    const parts = [];
+    const lowerLabel = label.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    let currentIndex = 0;
+    while(currentIndex < label.length){
+        const matchIndex = lowerLabel.indexOf(lowerQuery, currentIndex);
+        if (-1 === matchIndex) {
+            parts.push({
+                text: label.slice(currentIndex),
+                highlighted: false
+            });
+            break;
+        }
+        if (matchIndex > currentIndex) parts.push({
+            text: label.slice(currentIndex, matchIndex),
+            highlighted: false
+        });
+        parts.push({
+            text: label.slice(matchIndex, matchIndex + query.length),
+            highlighted: true
+        });
+        currentIndex = matchIndex + query.length;
+    }
+    return parts;
+}
+function ComboBoxComponent({ defaultValue = '', value: controlled, label, options = [], onChange, required = false, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage = 'No results found', className, ...props }, ref) {
+    const id = useId(idProp);
+    const controlRef = useRef(null);
+    const [value, setValue] = useControlled({
+        controlled,
+        default: defaultValue,
+        onChange
+    });
+    const [query, setQuery] = useState('');
+    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
+        options,
+        value
+    ]);
+    const filteredOptions = useMemo(()=>{
+        if (!query) return options;
+        const normalizedQuery = query.toLowerCase();
+        return options.filter((option)=>option.label.toLowerCase().includes(normalizedQuery));
+    }, [
+        options,
+        query
+    ]);
+    function handleChange(option) {
+        if (!option || option.disabled) return;
+        setValue(option.data);
+        setQuery('');
+    }
+    function handleInputChange(inputValue) {
+        setQuery(inputValue);
+        onInputChange?.(inputValue);
+    }
+    const inputClasses = classnames('fr-combobox-input', {
+        'fr-required': required,
+        'fr-disabled': disabled,
+        'fr-invalid': error,
+        'fr-empty': !query && !selectedOption
+    });
+    return /*#__PURE__*/ jsx(Combobox, {
+        value: selectedOption ?? null,
+        onChange: handleChange,
+        disabled: disabled,
+        immediate: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames(className, 'fr-combobox-wrapper', {
+                'fr-disabled': disabled,
+                'fr-invalid': error,
+                'fr-required': required
+            }),
+            ref: ref,
+            ...props,
+            children: [
+                /*#__PURE__*/ jsx("label", {
+                    className: classnames('fr-combobox-label'),
+                    htmlFor: id,
+                    children: label || ''
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "fr-combobox-control",
+                    ref: controlRef,
+                    children: [
+                        /*#__PURE__*/ jsx(ComboboxInput, {
+                            className: inputClasses,
+                            id: id,
+                            name: name,
+                            required: required,
+                            disabled: disabled,
+                            placeholder: placeholder,
+                            autoComplete: "off",
+                            displayValue: (option)=>option?.label ?? '',
+                            onChange: (event)=>handleInputChange(event.target.value)
+                        }),
+                        /*#__PURE__*/ jsx(ComboboxButton, {
+                            className: "fr-combobox-button",
+                            disabled: disabled,
+                            "aria-label": "Optionen anzeigen"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(ComboboxOptions, {
+                    className: "fr-combobox-options-container",
+                    as: "ul",
+                    portal: false,
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 20,
+                        padding: 8
+                    },
+                    children: [
+                        0 === filteredOptions.length && /*#__PURE__*/ jsx("li", {
+                            className: "fr-combobox-option fr-combobox-empty",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: "fr-combobox-option-content",
+                                children: emptyMessage
+                            })
+                        }),
+                        filteredOptions.map((option)=>/*#__PURE__*/ jsx(ComboboxOption, {
+                                value: option,
+                                disabled: option.disabled,
+                                as: "li",
+                                className: ({ focus, selected, disabled: isDisabled })=>classnames('fr-combobox-option', {
+                                        'fr-selected': selected,
+                                        'fr-focus': focus,
+                                        'fr-disabled': isDisabled
+                                    }),
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "fr-combobox-option-content",
+                                    "data-testid": "fr-combobox-option-content",
+                                    children: getHighlightedLabel(option.label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
+                                            className: classnames({
+                                                'fr-combobox-highlight': part.highlighted
+                                            }),
+                                            children: part.text
+                                        }, `${part.text}-${index}`))
+                                })
+                            }, String(option.data)))
+                    ]
+                }),
+                hint && !error && /*#__PURE__*/ jsx("div", {
+                    className: "fr-combobox-description",
+                    children: hint
+                }),
+                error && /*#__PURE__*/ jsx("div", {
+                    className: "fr-combobox-invalid",
+                    children: error
+                })
+            ]
+        })
+    });
+}
+const ComboBox = /*#__PURE__*/ forwardRef(ComboBoxComponent);
+export { ComboBox };

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

@@ -0,0 +1,14 @@
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+export interface RadioButtonProps extends ClassNamePropsWithChildren {
+    readonly id?: string;
+    readonly defaultChecked?: boolean;
+    readonly checked?: boolean;
+    readonly onChange?: (value: string) => void;
+    readonly name?: string;
+    readonly value?: string;
+    readonly labelPosition?: 'before' | 'after' | 'below';
+    readonly large?: boolean;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+}
+export declare function RadioButton(props: RadioButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/radio/RadioButton.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { 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 { 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', {
+        'fwe-radio-label-below': 'below' === innerLabelPosition
+    }, {
+        'fwe-radio-label-before': 'before' === innerLabelPosition
+    }, {
+        'fwe-radio-lg': large || groupLarge
+    }, className);
+    const controlledChecked = void 0 !== checked || isControlled && void 0 !== groupValue ? Boolean(checked || groupValue === value) : void 0;
+    const 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);
+    }
+    const id = useId(idProps);
+    return /*#__PURE__*/ jsxs("label", {
+        className: classes,
+        htmlFor: id,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "fwe-radio-check",
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        defaultChecked: defaultChecked,
+                        checked: controlledChecked,
+                        type: "radio",
+                        id: id,
+                        name: groupName || name,
+                        value: value,
+                        onChange: handleChange,
+                        disabled: disabled || groupDisabled,
+                        required: required || groupRequired
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-radio-checkmark"
+                    }),
+                    ' '
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-radio-label-content",
+                children: children
+            })
+        ]
+    });
+}
+export { RadioButton };

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

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+    readonly name?: 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

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useCallback, useMemo } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+import { useId } from "../../utils/useId.js";
+import { RadioGroupContext } from "./RadioGroupContext.js";
+const RadioGroup = /*#__PURE__*/ forwardRef(({ children, className, onValueChange, value: controlledValue, defaultValue, name, labelPosition, large, disabled, required, ...props }, ref)=>{
+    const contextName = useId(name);
+    const [value, setValue] = useControlled({
+        controlled: controlledValue,
+        default: defaultValue
+    });
+    const handleValueChange = useCallback((newValue)=>{
+        onValueChange?.(newValue);
+        setValue(newValue);
+    }, [
+        onValueChange,
+        setValue
+    ]);
+    const contextValue = useMemo(()=>({
+            labelPosition,
+            large,
+            disabled,
+            required,
+            handleValueChange,
+            value,
+            isControlled: void 0 !== controlledValue,
+            name: contextName
+        }), [
+        controlledValue,
+        handleValueChange,
+        labelPosition,
+        large,
+        disabled,
+        required,
+        value,
+        contextName
+    ]);
+    return /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: classnames('fwe-radio-group', className),
+            role: "radiogroup",
+            ...props,
+            children: children
+        })
+    });
+});
+export { RadioGroup };

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

@@ -0,0 +1,12 @@
+interface ContextProps {
+    name: string;
+    value: string;
+    isControlled: boolean;
+    labelPosition: 'before' | 'after' | 'below';
+    large: boolean;
+    handleValueChange: (value: string) => void;
+    disabled: boolean;
+    required: boolean;
+}
+export declare const RadioGroupContext: import("react").Context<Partial<ContextProps>>;
+export {};

package/dist/forms/radio/RadioGroupContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const RadioGroupContext = /*#__PURE__*/ createContext({});
+export { RadioGroupContext };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+export interface SegmentConfiguration {
+    readonly outline?: boolean;
+    readonly iconOnly?: boolean;
+}
+export interface SegmentProps extends ClassNamePropsWithChildren {
+    readonly legend: string;
+    readonly config?: SegmentConfiguration;
+    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
+    readonly value?: any;
+}
+export declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/segment/Segment.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import react 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 innerConfig = {
+        ...defaultConfig,
+        ...config
+    };
+    let useIcon = false;
+    let useIconAndText = false;
+    let tmpValue = '';
+    react.Children.forEach(children, (child, index)=>{
+        if (!/*#__PURE__*/ react.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;
+        return null;
+    });
+    const [value, setValue] = useControlled({
+        controlled: valueProps,
+        default: tmpValue
+    });
+    const handleChange = (event, _value)=>{
+        if (onChange) onChange(event, _value);
+        setValue(_value);
+    };
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: classnames('fwe-segment', {
+            'fwe-segment-outline': innerConfig.outline,
+            'fwe-segment-icon': useIcon,
+            'fwe-segment-icon-text': useIconAndText
+        }, className),
+        children: [
+            /*#__PURE__*/ jsx("legend", {
+                className: "fwe-sr-only fwe-d-inline-block",
+                children: legend
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "fwe-segment-group",
+                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
+                    });
+                })
+            })
+        ]
+    });
+}
+export { Segment };

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

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { ClassNameProps } from '../../../utils/types';
+export interface SegmentControlProps extends ClassNameProps {
+    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 iconOnly?: boolean;
+}
+export declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { 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 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);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                className: "fwe-segment-input",
+                type: "radio",
+                id: componentId.current,
+                name: name,
+                value: value,
+                checked: checked,
+                disabled: disabled,
+                onChange: (e)=>handleChange(e)
+            }),
+            /*#__PURE__*/ jsxs("label", {
+                className: classnames('fwe-segment-label', className),
+                htmlFor: componentId.current,
+                children: [
+                    'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-sr-only",
+                                children: label
+                            }),
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            })
+                        ]
+                    }),
+                    'text' === viewMode && label,
+                    'icon-text' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconWrapper, {
+                                icon: icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-ml-xxs",
+                                children: label
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { SegmentControl };

package/dist/forms/select/Select.css

@@ -0,0 +1,160 @@
+.fwe-select-wrapper {
+  width: inherit;
+  min-width: 48px;
+  display: flex;
+}
+
+.fwe-select-wrapper .fr-select-input {
+  opacity: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fwe-select-wrapper.fwe-disabled:before {
+  color: var(--fwe-text-disabled);
+}
+
+.fwe-select-wrapper .fwe-select {
+  text-align: left;
+  cursor: pointer;
+  height: unset;
+  background: none;
+  min-height: 33px;
+  padding: 0;
+}
+
+.fwe-select-wrapper .fwe-select .fwe-select-content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-right: 24px;
+  line-height: 1.5rem;
+  overflow: hidden;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled) ~ .fwe-select-label:after {
+  content: "*";
+  display: inline-block;
+  position: relative;
+  left: 3px;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid) ~ .fwe-select-valid {
+  display: block;
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
+  color: var(--fwe-hero);
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
+  color: var(--fwe-text);
+}
+
+.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
+  border-color: var(--fwe-hero);
+}
+
+.fwe-select-wrapper .fwe-select:focus:invalid {
+  border-color: var(--fwe-red);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled {
+  cursor: default;
+  border-color: var(--fwe-control-disabled) !important;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled ~ .fwe-select-label, .fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content {
+  color: var(--fwe-text-disabled);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip {
+  color: var(--fwe-text-disabled);
+  border: 1px solid var(--fwe-control-disabled);
+  pointer-events: none;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover, .fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus {
+  border-color: var(--fwe-red);
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid {
+  display: block;
+}
+
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description {
+  display: none;
+}
+
+.fr-select-scroll {
+  overflow-y: scroll;
+}
+
+.fwe-select-options-container {
+  z-index: var(--fwe-z-index-popover);
+  max-width: 100vw;
+  font-size: var(--fwe-font-size-base);
+  background-color: var(--fwe-white);
+  border: 1px solid var(--fwe-gray-200);
+  border-radius: 4px;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  box-shadow: 0 1px 4px #00000029;
+}
+
+.fwe-select-options-container .fwe-select-option {
+  cursor: pointer;
+  min-height: 24px;
+  padding: 12px 8px;
+  line-height: 24px;
+  position: relative;
+}
+
+.fwe-select-options-container .fwe-select-option:hover, .fwe-select-options-container .fwe-select-option:focus {
+  background-color: var(--fwe-gray-100);
+  outline: none;
+}
+
+.fwe-select-options-container .fwe-select-option:last-child {
+  border-bottom: none;
+}
+
+.fwe-select-options-container .fwe-select-option .fwe-select-option-content {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-height: 24px;
+  line-height: 24px;
+  display: block;
+  overflow: hidden;
+}
+
+.fr-backdrop {
+  z-index: var(--fwe-z-index-modal);
+  position: fixed;
+  inset: 0;
+}
+
+.chip-text-truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.chip-removable {
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+
+.fwe-chip .chip-removable svg {
+  margin: 0;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+}
+

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

@@ -0,0 +1,26 @@
+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;
+    readonly disabled?: boolean;
+    readonly name?: string;
+    readonly hint?: string;
+    readonly error?: string;
+    readonly onOpenChange?: (value: boolean) => void;
+    readonly renderLabelContent?: (label?: string | string[]) => JSX.Element;
+}
+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;
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof SelectComponent>;
+export {};