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

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 './Slider.scss';
+import type React from 'react';
+import type { ClassNameProps } from '../../utils/types';
+export interface SliderProps extends ClassNameProps {
+    readonly disabled?: boolean;
+    readonly min: number;
+    readonly max: number;
+    readonly step?: number;
+    readonly value: number;
+    readonly onChangeCommitted?: (value: number) => void;
+    readonly label?: string;
+    readonly showValue?: boolean;
+    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: number) => void;
+    readonly id?: string;
+    readonly 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 "./Slider.css";
+import classnames from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+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 {
+    readonly labelPosition?: 'before' | 'after' | 'below';
+    readonly large?: boolean;
+    readonly title: string;
+    readonly value?: boolean;
+    readonly defaultValue?: boolean;
+    readonly disabled?: boolean;
+    readonly onChange?: (value: boolean) => void;
+    readonly 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/dist/forms/text-area/TextArea.d.ts

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

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./TextArea.css";
+import classnames from "classnames";
+import react, { useEffect, useState } from "react";
+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

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

package/dist/forms/text-input/TextInput.js

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

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

package/dist/forms/time-picker/TimePicker.d.ts

@@ -0,0 +1,24 @@
+import './TimePicker.scss';
+import type React from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TimePickerOptions {
+    readonly timeFormat?: '12' | '24';
+    readonly showSeconds?: boolean;
+    readonly minuteStepSize?: number;
+    readonly range?: {
+        minValue: Date;
+        maxValue: Date;
+    };
+}
+export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'onChange'> {
+    readonly error?: string;
+    readonly hint?: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly value?: Date;
+    readonly defaultValue?: Date;
+    readonly options?: TimePickerOptions;
+    readonly formatDate?: (date: Date) => string;
+    readonly onChange?: (date: Date) => void;
+}
+export declare const TimePicker: (props: TimePickerProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

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

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

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

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

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