@festo-ui/react 9.0.0-dev.707 → 9.0.0-dev.709

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

@@ -0,0 +1,103 @@
+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/{lib → dist}/forms/select/internal/SelectScrollContainer.d.ts

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+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/{lib → dist}/forms/select/internal/utils.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { SelectOptionProps } from "../select-option/SelectOption";
-export default function getChildren<T>(children: React.ReactNode): {
+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

@@ -0,0 +1,30 @@
+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/{lib → dist}/forms/select/select-option/SelectOption.d.ts

@@ -1,14 +1,14 @@
-import { ComponentPropsWithoutRef, Ref } from "react";
+import { type ComponentPropsWithoutRef, type Ref } from 'react';
 export interface SelectOptionType<T> {
     label: string;
     data: T;
     disabled?: boolean;
 }
-export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<"span"> {
+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;
-declare const SelectOption: <T>(props: SelectOptionProps<T> & {
-    ref?: Ref<HTMLDivElement> | undefined;
+export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
+    ref?: Ref<HTMLDivElement>;
 }) => ReturnType<typeof SelectOptionComponent>;
-export default SelectOption;
+export {};

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

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

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

package/dist/forms/select/utils.js

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+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/{lib → dist}/forms/text-area/TextArea.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import type { ClassNameProps } from "../../helper/types";
-import "./TextArea.scss";
+import React from 'react';
+import type { ClassNameProps } from '../../utils/types';
+import './TextArea.scss';
 export interface TextAreaProps extends ClassNameProps {
     disabled?: boolean;
     required?: boolean;
@@ -19,5 +19,4 @@ export interface TextAreaProps extends ClassNameProps {
     maxLength?: number;
     id?: string;
 }
-declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, defaultValue, name, rows, maxLength, className, id: idProps, }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
-export default TextArea;
+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

@@ -0,0 +1,99 @@
+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/{lib → dist}/forms/text-input/TextInput.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import type React from 'react';
 export interface TextInputProps {
     disabled?: boolean;
     required?: boolean;
@@ -21,5 +21,4 @@ export interface TextInputProps {
     icon?: React.ReactNode;
     autoFocus?: boolean;
 }
-declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-export default TextInput;
+export declare const TextInput: (props: TextInputProps & React.HTMLProps<HTMLInputElement> & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;