@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

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.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.js

@@ -1,74 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useEffect, useRef } from "react";
-import { useId } from "../../utils/useId.js";
-const TextInput = /*#__PURE__*/ forwardRef(({ disabled, required, readonly, placeholder, max, min, onBlur, onFocus, onInput, step, type, value, defaultValue, name, error, hint, label, labelClassName, icon, id: idProps, autoFocus, ...props }, ref)=>{
-    const id = useId(idProps);
-    const inputRef = useRef(null);
-    useEffect(()=>{
-        if (autoFocus && inputRef.current) {
-            const timer = setTimeout(()=>{
-                inputRef.current?.focus();
-            }, 0);
-            return ()=>clearTimeout(timer);
-        }
-    }, [
-        autoFocus
-    ]);
-    const supported = [
-        'text',
-        'number',
-        'password',
-        'datetime-local'
-    ];
-    const innerType = type && supported.includes(type) ? type : 'text';
-    const labelClasses = classnames('fwe-input-text', {
-        'fwe-input-text-icon': icon
-    }, labelClassName);
-    const hintClasses = classnames('fwe-input-text-info');
-    function handleChange(e) {
-        if (props.onChange) props.onChange(e);
-    }
-    return /*#__PURE__*/ jsxs("label", {
-        className: labelClasses,
-        htmlFor: id,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                name: name,
-                disabled: disabled,
-                required: required,
-                readOnly: readonly,
-                placeholder: placeholder,
-                autoComplete: "off",
-                min: min,
-                max: max,
-                step: step,
-                onChange: handleChange,
-                onBlur: onBlur,
-                onFocus: onFocus,
-                onInput: onInput,
-                type: innerType,
-                value: value,
-                defaultValue: defaultValue,
-                id: id,
-                ref: inputRef,
-                ...props
-            }),
-            icon,
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-label",
-                children: label
-            }),
-            hint && /*#__PURE__*/ jsx("span", {
-                className: hintClasses,
-                children: hint
-            }),
-            error && /*#__PURE__*/ jsx("span", {
-                className: "fwe-input-text-invalid",
-                children: error
-            })
-        ]
-    });
-});
-export { TextInput };

package/dist/forms/time-picker/TimePicker.css

@@ -1,10 +0,0 @@
-.fr-time-picker {
-  all: unset;
-  cursor: pointer;
-  display: contents;
-}
-
-.fr-time-picker:disabled {
-  cursor: default;
-}
-

package/dist/forms/time-picker/TimePicker.js

@@ -1,140 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "./TimePicker.css";
-import { IconTime } from "@festo-ui/react-icons";
-import classnames from "classnames";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import react_dom from "react-dom";
-import { usePopper } from "react-popper";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { useId } from "../../utils/useId.js";
-import { TimePickerDropdown } from "./time-picker-dropdown/TimePickerDropdown.js";
-const TimePicker = /*#__PURE__*/ forwardRef(({ error, hint, required, disabled, children, value, options, defaultValue, formatDate, onChange, id: idProps, ...props }, ref)=>{
-    const id = useId(idProps);
-    const innerFormatDate = formatDate ?? Intl.DateTimeFormat('default', {
-        hour: 'numeric',
-        minute: 'numeric',
-        ...options?.showSeconds && {
-            second: 'numeric'
-        }
-    }).format;
-    const timeFormat = options?.timeFormat ?? '24';
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const customModifier = useMemo(()=>({
-            name: 'offset',
-            options: {
-                offset: ({ placement })=>{
-                    if ('bottom' === placement) return [
-                        0,
-                        -12
-                    ];
-                    return [
-                        0,
-                        0
-                    ];
-                }
-            }
-        }), []);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            customModifier
-        ]
-    });
-    const buttonRef = useRef(null);
-    const allRefs = useForkRef(ref, buttonRef);
-    const labelRef = useRef(null);
-    const combinedLabelRef = useForkRef(labelRef, (r)=>setReferenceElement(r));
-    const timePickerRef = useRef(null);
-    const combinedTimePickerRef = useForkRef(timePickerRef, (r)=>setPopperElement(r));
-    const [open, setOpen] = useState(false);
-    const controlled = void 0 !== value;
-    const initialValue = controlled ? value : defaultValue;
-    const [innerValue, setInnerValue] = useState(initialValue ?? new Date());
-    useEffect(()=>{
-        if (void 0 !== value) {
-            value.setMilliseconds(0);
-            setInnerValue(value);
-        }
-    }, [
-        value
-    ]);
-    function toggle(e) {
-        e?.preventDefault();
-        if (!disabled) setOpen((prevOpen)=>!prevOpen);
-    }
-    function handleDateChange(newDate) {
-        if (!controlled) setInnerValue(newDate);
-        if (onChange) onChange(newDate);
-    }
-    function handleClose(newDate) {
-        if (newDate) handleDateChange(newDate);
-        setOpen(false);
-    }
-    const container = labelRef?.current?.ownerDocument || document;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("button", {
-                type: "button",
-                ref: allRefs,
-                onClick: toggle,
-                disabled: disabled,
-                className: "fr-time-picker",
-                ...props,
-                children: /*#__PURE__*/ jsxs("label", {
-                    htmlFor: id,
-                    ref: combinedLabelRef,
-                    className: "fr-time-picker fwe-input-text fwe-input-text-icon",
-                    children: [
-                        /*#__PURE__*/ jsx(IconTime, {
-                            className: classnames({
-                                'fwe-color-hero': open && !disabled,
-                                'fwe-color-control-disabled': disabled
-                            })
-                        }),
-                        /*#__PURE__*/ jsx("input", {
-                            id: id,
-                            "aria-label": "picked time",
-                            type: "text",
-                            readOnly: true,
-                            required: required,
-                            className: classnames({
-                                'fwe-border-hero': open
-                            }),
-                            value: innerFormatDate(innerValue),
-                            disabled: disabled
-                        }),
-                        /*#__PURE__*/ jsx("span", {
-                            className: "fwe-input-text-label",
-                            children: children
-                        }),
-                        hint && /*#__PURE__*/ jsx("span", {
-                            className: "fwe-input-text-info",
-                            children: hint
-                        }),
-                        error && /*#__PURE__*/ jsx("span", {
-                            className: "fwe-input-text-invalid",
-                            children: error
-                        })
-                    ]
-                })
-            }),
-            open && /*#__PURE__*/ react_dom.createPortal(/*#__PURE__*/ jsx(TimePickerDropdown, {
-                labelRef: labelRef,
-                ref: combinedTimePickerRef,
-                onClose: handleClose,
-                onDateChange: handleDateChange,
-                timeFormat: timeFormat,
-                showSeconds: options?.showSeconds,
-                minuteStepSize: options?.minuteStepSize,
-                range: options?.range,
-                date: innerValue,
-                style: {
-                    ...styles.popper,
-                    minWidth: labelRef?.current?.scrollWidth
-                },
-                ...attributes.popper
-            }), container.body)
-        ]
-    });
-});
-export { TimePicker };

package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.css

@@ -1,4 +0,0 @@
-.fr-timepicker {
-  z-index: var(--fwe-z-index-modal);
-}
-

package/dist/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts

@@ -1,19 +0,0 @@
-import './TimePickerDropdown.scss';
-import type React from 'react';
-import { type RefObject } from 'react';
-interface TimePickerDropdownProps {
-    timeFormat: '12' | '24';
-    date: Date;
-    onDateChange: (date: Date) => void;
-    showSeconds?: boolean;
-    minuteStepSize?: number;
-    range?: {
-        minValue: Date;
-        maxValue: Date;
-    };
-    onClose: (date?: Date) => void;
-    style?: React.CSSProperties;
-    labelRef: RefObject<HTMLLabelElement>;
-}
-export declare const TimePickerDropdown: (props: TimePickerDropdownProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};