@festo-ui/react 9.0.0-dev.715 → 9.0.0-dev.717

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/select/internal/SelectScrollContainer.d.ts

@@ -1,8 +0,0 @@
-import type { SelectConfiguration } from '../../../utils/types';
-interface SelectScrollContainerProps {
-    readonly config?: SelectConfiguration;
-    readonly children: React.ReactNode;
-    readonly length: number;
-}
-export declare function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,15 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { calcVirtualScrollHeight } from "../utils.js";
-function SelectScrollContainer({ config, children, length }) {
-    if (config?.scroll?.enabled) return /*#__PURE__*/ jsx("div", {
-        className: "fr-select-scroll",
-        style: {
-            height: calcVirtualScrollHeight(config, length)
-        },
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectScrollContainer };

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

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-interface SelectWrapperProps extends ComponentPropsWithoutRef<'div'> {
-    disabled?: boolean;
-}
-export declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};

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

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const SelectWrapper = /*#__PURE__*/ forwardRef(({ children, disabled, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        ref: ref,
-        className: classnames('fwe-select-wrapper', {
-            'fwe-disabled': disabled
-        }, className),
-        children: children
-    }));
-export { SelectWrapper };

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

@@ -1,6 +0,0 @@
-export { HiddenInput } from './HiddenInput';
-export { ListItem } from './ListItem';
-export { SelectButton } from './SelectButton';
-export { SelectLabel } from './SelectLabel';
-export { SelectOptionsContainer } from './SelectOptionsContainer';
-export { SelectWrapper } from './SelectWrapper';

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

@@ -1,7 +0,0 @@
-import { HiddenInput } from "./HiddenInput.js";
-import { ListItem } from "./ListItem.js";
-import { SelectButton } from "./SelectButton.js";
-import { SelectLabel } from "./SelectLabel.js";
-import { SelectOptionsContainer } from "./SelectOptionsContainer.js";
-import { SelectWrapper } from "./SelectWrapper.js";
-export { HiddenInput, ListItem, SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper };

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { SelectOptionProps } from '../select-option/SelectOption';
-export declare function getChildren<T>(children: React.ReactNode): {
-    childrenList: React.ReactElement<SelectOptionProps<T>, string | React.JSXElementConstructor<any>>[];
-    after: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    before: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-};

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

@@ -1,30 +0,0 @@
-import classnames from "classnames";
-import react from "react";
-import { SelectOption } from "../select-option/SelectOption.js";
-function getChildren(children) {
-    const before = [];
-    const childrenList = [];
-    const after = [];
-    let foundFirstOption = false;
-    react.Children.forEach(children, (element)=>{
-        if (react.isValidElement(element)) if (react.isValidElement(element) && element.type === SelectOption) {
-            foundFirstOption = true;
-            const className = classnames('fwe-select-option-content', element.props.className);
-            const { props } = element;
-            childrenList.push({
-                ...element,
-                props: {
-                    ...props,
-                    className
-                }
-            });
-        } else if (foundFirstOption) after.push(element);
-        else before.push(element);
-    });
-    return {
-        childrenList,
-        after,
-        before
-    };
-}
-export { getChildren };

package/dist/forms/select/select-option/SelectOption.d.ts

@@ -1,14 +0,0 @@
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-export interface SelectOptionType<T> {
-    label: string;
-    data: T;
-    disabled?: boolean;
-}
-export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<'span'> {
-    option: SelectOptionType<T>;
-}
-declare function SelectOptionComponent<T>({ children, className, ...props }: SelectOptionProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectOptionComponent>;
-export {};

package/dist/forms/select/select-option/SelectOption.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-function SelectOptionComponent({ children, className, ...props }, ref) {
-    return /*#__PURE__*/ jsx("span", {
-        ref: ref,
-        className: className,
-        ...props,
-        children: children
-    });
-}
-const SelectOption = /*#__PURE__*/ forwardRef(SelectOptionComponent);
-export { SelectOption };

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

@@ -1,2 +0,0 @@
-import type { SelectConfiguration } from '../../utils/types';
-export declare function calcVirtualScrollHeight(config: SelectConfiguration | undefined, itemLength: number): number;

package/dist/forms/select/utils.js

@@ -1,12 +0,0 @@
-function calcVirtualScrollHeight(config, itemLength) {
-    const defaultHeight = 48;
-    let height = defaultHeight;
-    if (2 === itemLength) height = 2 * defaultHeight;
-    else if (itemLength >= 3) height = 3 * defaultHeight;
-    if (config?.scroll?.viewportSize != null && void 0 !== config.scroll.viewportSize) {
-        if (itemLength >= config.scroll.viewportSize) height = config.scroll.viewportSize * defaultHeight;
-        else if (itemLength < config.scroll.viewportSize) height = itemLength * defaultHeight;
-    }
-    return height;
-}
-export { calcVirtualScrollHeight };

package/dist/forms/slider/Slider.css

@@ -1,50 +0,0 @@
-label.fwe-slider {
-  display: block;
-  position: relative;
-}
-
-label.fwe-slider .fr-slider-indicator {
-  background: var(--fwe-hero);
-  height: 2px;
-  position: absolute;
-  bottom: 22px;
-  left: 0;
-}
-
-label.fwe-slider .fr-slider-indicator.disabled {
-  background: var(--fwe-border);
-}
-
-label.fwe-slider.fr-slider-value {
-  height: 56px;
-}
-
-label.fwe-slider.fr-slider-value .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider.fr-slider-label {
-  height: 67px;
-}
-
-label.fwe-slider.fr-slider-label .fr-slider-indicator {
-  bottom: 22px;
-}
-
-label.fwe-slider.fr-slider-value-label {
-  height: 83px;
-}
-
-label.fwe-slider.fr-slider-value-label .fr-slider-indicator {
-  bottom: 38px;
-}
-
-label.fwe-slider .fr-slider-value {
-  color: var(--fwe-text);
-  font-size: var(--fwe-font-size-base);
-  user-select: none;
-  margin-bottom: 0;
-  position: absolute;
-  bottom: 0;
-}
-

package/dist/forms/slider/Slider.d.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-import './Slider.scss';
-export interface SliderProps extends ClassNameProps {
-    disabled?: boolean;
-    min: number;
-    max: number;
-    step?: number;
-    value: number;
-    onChangeCommitted?: (value: number) => void;
-    label?: string;
-    showValue?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
-    id?: string;
-    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;

package/dist/forms/slider/Slider.js

@@ -1,93 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import "./Slider.css";
-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 id = useId(idProps);
-    const [innerValue, setInnerValue] = useState(value);
-    const [left, setLeft] = useState(null);
-    const [numberoffset, setNumberOffset] = useState(0);
-    const labelEl = useRef(null);
-    const classes = classnames('fwe-slider', {
-        'fr-slider-value': !label && showValue
-    }, {
-        'fr-slider-label': label && !showValue
-    }, {
-        'fr-slider-value-label': label && showValue
-    }, className);
-    useEffect(()=>{
-        setInnerValue(value);
-    }, [
-        value
-    ]);
-    const updateValuePosition = useCallback(()=>{
-        if (labelEl.current) {
-            const { width } = labelEl.current.getBoundingClientRect();
-            const diff = max - min;
-            setLeft((innerValue - min) / diff * (width - widthOffset));
-            setNumberOffset(8 - 6 * innerValue.toString().length);
-        }
-    }, [
-        innerValue,
-        max,
-        min,
-        widthOffset
-    ]);
-    const handleAfterChange = ()=>{
-        if (onChangeCommitted) onChangeCommitted(innerValue);
-    };
-    const handleChange = (e)=>{
-        const newValue = Number.parseFloat(e.target.value);
-        setInnerValue(newValue);
-        if (onChange) onChange(e, newValue);
-    };
-    useEffect(()=>{
-        function handleResize() {
-            updateValuePosition();
-        }
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, [
-        updateValuePosition
-    ]);
-    return /*#__PURE__*/ jsxs("label", {
-        ref: labelEl,
-        className: classes,
-        htmlFor: id,
-        children: [
-            label && /*#__PURE__*/ jsx("span", {
-                children: label
-            }),
-            /*#__PURE__*/ jsx("input", {
-                id: id,
-                className: "fwe-slider-input",
-                type: "range",
-                disabled: disabled,
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                value: innerValue,
-                onKeyUp: handleAfterChange,
-                onMouseUp: handleAfterChange,
-                onTouchEnd: handleAfterChange
-            }),
-            showValue && null !== left && /*#__PURE__*/ jsx("span", {
-                className: "fr-slider-value",
-                style: {
-                    left: `${left + numberoffset}px`
-                },
-                children: innerValue
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `fr-slider-indicator${disabled ? ' disabled' : ''}`,
-                style: {
-                    width: `${left}px`
-                }
-            })
-        ]
-    });
-}
-export { Slider };

package/dist/forms/switch/Switch.d.ts

@@ -1,12 +0,0 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface SwitchProps extends ClassNameProps {
-    labelPosition?: 'before' | 'after' | 'below';
-    large?: boolean;
-    title: string;
-    value?: boolean;
-    defaultValue?: boolean;
-    disabled?: boolean;
-    onChange?: (value: boolean) => void;
-    id?: string;
-}
-export declare function Switch({ labelPosition, large, title, value, defaultValue, disabled, onChange, className, id: idProps, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/switch/Switch.js

@@ -1,42 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-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 id = useId(idProps);
-    const labelClassName = classnames('fwe-switch', {
-        [`fwe-switch-label-${labelPosition}`]: true
-    }, {
-        'fwe-switch-lg': large
-    }, className);
-    const [currentValue, setCurrentValue] = useControlled({
-        controlled: value,
-        default: defaultValue
-    });
-    const handleChange = ()=>{
-        const newValue = !currentValue;
-        setCurrentValue(newValue);
-        if (onChange) onChange(newValue);
-    };
-    return /*#__PURE__*/ jsxs("label", {
-        className: labelClassName,
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                type: "checkbox",
-                disabled: disabled,
-                checked: currentValue,
-                onChange: ()=>handleChange(),
-                id: id
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-track"
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-switch-label-content",
-                children: title
-            })
-        ]
-    });
-}
-export { Switch };

package/dist/forms/text-area/TextArea.css

@@ -1,14 +0,0 @@
-label.fwe-input-text .fwe-input-text-count {
-  line-height: var(--fwe-line-height-base);
-  color: var(--fwe-text-disabled);
-  font-size: var(--fwe-font-size-small);
-  display: block;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-label.fwe-input-text .fr-textarea {
-  overflow: visible;
-}
-

package/dist/forms/text-area/TextArea.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { ClassNameProps } from '../../utils/types';
-import './TextArea.scss';
-export interface TextAreaProps extends ClassNameProps {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-    label: string;
-    hint?: string;
-    error?: string;
-    value?: string;
-    defaultValue?: string;
-    name?: string;
-    rows?: number;
-    maxLength?: number;
-    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;

package/dist/forms/text-area/TextArea.js

@@ -1,99 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import react, { useEffect, useState } from "react";
-import "./TextArea.css";
-import { useId } from "../../utils/useId.js";
-function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps }) {
-    const controlled = void 0 !== value;
-    const [innerValue, setInnerValue] = useState(controlled ? value : defaultValue);
-    const id = useId(idProps);
-    const hintClasses = classnames('fwe-input-text-info');
-    const shadowRef = react.useRef(null);
-    const ref = react.useRef(null);
-    const [height, setHeight] = useState(void 0);
-    useEffect(()=>{
-        if (controlled) setInnerValue(value);
-    }, [
-        value,
-        controlled
-    ]);
-    useEffect(()=>{
-        const input = ref.current;
-        const shadow = shadowRef.current;
-        const minRows = 2;
-        if (shadow && input) {
-            shadow.value = input.value || 'x';
-            shadow.style.width = `${input.clientWidth}`;
-            const newHeight = Math.max(24 * minRows, shadow.scrollHeight);
-            setHeight(newHeight + 4 + 4 + 1);
-        }
-    }, []);
-    function handleChange(event) {
-        if (!controlled) setInnerValue(event.target.value);
-        if (onChange) onChange(event);
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: classnames('fwe-input-text', className),
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    ...!rows && {
-                        height,
-                        overflow: 'hidden'
-                    }
-                },
-                ref: ref,
-                name: name,
-                className: classnames('fr-textarea', `fwe-row-${rows}`),
-                disabled: disabled,
-                readOnly: readonly,
-                required: required,
-                autoComplete: "off",
-                onChange: handleChange,
-                onFocus: onFocus,
-                onInput: onInput,
-                onBlur: onBlur,
-                maxLength: maxLength,
-                defaultValue: defaultValue,
-                value: value,
-                id: id
-            }),
-            /*#__PURE__*/ jsx("textarea", {
-                style: {
-                    visibility: 'hidden',
-                    position: 'absolute',
-                    overflow: 'hidden',
-                    height: 0,
-                    top: 0,
-                    left: 0,
-                    transform: 'translateZ(0)',
-                    padding: '0'
-                },
-                ref: shadowRef,
-                readOnly: true
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
-                children: hint
-            }),
-            void 0 !== error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-invalid",
-                children: error
-            }),
-            !!maxLength && void 0 !== innerValue && /*#__PURE__*/ jsxs("span", {
-                className: "fwe-input-text-count",
-                children: [
-                    innerValue.length,
-                    " /",
-                    maxLength
-                ]
-            })
-        ]
-    });
-}
-export { TextArea };

package/dist/forms/text-input/TextInput.d.ts

@@ -1,24 +0,0 @@
-import type React from 'react';
-export interface TextInputProps {
-    disabled?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    placeholder?: string;
-    type?: string;
-    step?: string;
-    min?: number;
-    max?: number;
-    value?: string;
-    defaultValue?: string;
-    name?: string;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    label?: string;
-    hint?: string;
-    error?: string;
-    labelClassName?: string;
-    icon?: React.ReactNode;
-    autoFocus?: boolean;
-}
-export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;