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

package/dist/forms/combobox/ComboBox.js

@@ -1,169 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,160 +0,0 @@
-.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

@@ -1,26 +0,0 @@
-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 {};