@festo-ui/react 9.0.1-dev.782 → 9.0.1-dev.784

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,123 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./TimePicker.css";
+import { IconTime } from "@festo-ui/react-icons";
+import { offset, useFloating } from "@floating-ui/react";
+import classnames from "classnames";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+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 { refs, floatingStyles } = useFloating({
+        placement: 'bottom',
+        middleware: [
+            offset(({ rects })=>-rects.reference.height - 12)
+        ]
+    });
+    const buttonRef = useRef(null);
+    const allRefs = useForkRef(ref, buttonRef);
+    const labelRef = useRef(null);
+    const combinedLabelRef = useForkRef(labelRef, refs.setReference);
+    const timePickerRef = useRef(null);
+    const combinedTimePickerRef = useForkRef(timePickerRef, refs.setFloating);
+    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__*/ 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: {
+                    ...floatingStyles,
+                    minWidth: labelRef?.current?.scrollWidth
+                }
+            }), 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 {};

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

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./TimePickerDropdown.css";
+import { IconCollapse, IconExpand } from "@festo-ui/react-icons";
+import classnames from "classnames";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Button } from "../../../components/button/Button.js";
+import { useForkRef } from "../../../utils/useForkRef.js";
+import { useOnClickOutside } from "../../../utils/useOnClickOutside.js";
+import { TimePickerInput } from "./TimePickerInput.js";
+const TimePickerDropdown = /*#__PURE__*/ forwardRef(({ timeFormat, date, onDateChange, showSeconds, minuteStepSize, range, onClose, style, labelRef }, ref)=>{
+    const innerRef = useRef(null);
+    const combinedRef = useForkRef(ref, innerRef);
+    const hoursRef = useRef(null);
+    const [tmpHours, setTmpHours] = useState(null);
+    const [tmpMinutes, setTmpMinutes] = useState(null);
+    const [tmpSeconds, setTmpSeconds] = useState(null);
+    const [innerDate, setInnerDate] = useState(date);
+    useOnClickOutside(labelRef, ()=>onClose(innerDate), innerRef);
+    const min = 0;
+    const hourMax = '12' === timeFormat ? 12 : 23;
+    const minutesSecondsMax = 59;
+    let innerMinuteStepSize = 1;
+    if (minuteStepSize) {
+        if (minuteStepSize > 1 && minuteStepSize < 60) innerMinuteStepSize = Math.round(minuteStepSize);
+    }
+    useEffect(()=>{
+        requestAnimationFrame(()=>{
+            hoursRef.current?.focus();
+        });
+    }, []);
+    function handleKeyPress(e) {
+        if ('Escape' === e.key || 'Enter' === e.key) onClose('Enter' === e.key ? innerDate : void 0);
+    }
+    function limitRange(newDate) {
+        if (range) {
+            if (newDate > range.maxValue) return range.minValue;
+            if (newDate < range.minValue) return range.maxValue;
+        }
+        return newDate;
+    }
+    function handleHourIncrement(increment) {
+        let newDate = new Date(innerDate);
+        newDate.setHours(innerDate.getHours() + increment);
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        onDateChange(newDate);
+        setTmpHours(null);
+    }
+    function handleHourChange(e) {
+        let newDate = new Date(innerDate);
+        const hour = +e.target.value;
+        newDate.setHours(Math.min(Math.max(hour, min), hourMax));
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        setTmpHours(newDate.getHours().toString());
+    }
+    function handleMinuteIncrement(increment) {
+        let newDate = new Date(innerDate);
+        newDate.setMinutes(innerDate.getMinutes() + increment);
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        onDateChange(newDate);
+        setTmpMinutes(null);
+    }
+    function handleMinuteChange(e) {
+        let newDate = new Date(innerDate);
+        const minute = +e.target.value;
+        newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        setTmpMinutes(newDate.getMinutes().toString());
+    }
+    function handleSecondIncrement(increment) {
+        let newDate = new Date(innerDate);
+        newDate.setSeconds(innerDate.getSeconds() + increment);
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        onDateChange(newDate);
+        setTmpSeconds(null);
+    }
+    function handleSecondChange(e) {
+        let newDate = new Date(innerDate);
+        const seconds = +e.target.value;
+        newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
+        newDate = limitRange(newDate);
+        setInnerDate(newDate);
+        setTmpSeconds(newDate.getSeconds().toString());
+    }
+    const hours = '12' === timeFormat ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
+    function toggleAmPm() {
+        const newDate = new Date(innerDate);
+        const currentHours = innerDate.getHours();
+        if (currentHours >= 0 && currentHours < 12) newDate.setHours(currentHours + 12);
+        else newDate.setHours(currentHours - 12);
+        setInnerDate(newDate);
+        onDateChange(newDate);
+    }
+    const formatNumberWithLeadingZero = (number)=>(number < 10 ? '0' : '') + number;
+    return /*#__PURE__*/ jsxs("div", {
+        role: "dialog",
+        style: style,
+        ref: combinedRef,
+        className: classnames('fr-timepicker fwe-timepicker', {
+            'fwe-timepicker-am-pm': '12' === timeFormat
+        }),
+        onKeyDown: (e)=>handleKeyPress(e),
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "fwe-timepicker-spinners",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-timepicker-spinners-hours",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "hour up",
+                                className: "fwe-dark",
+                                onClick: ()=>handleHourIncrement(1),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconExpand, {})
+                            }),
+                            /*#__PURE__*/ jsx(TimePickerInput, {
+                                "aria-label": "hours value",
+                                min: min,
+                                max: hourMax,
+                                value: tmpHours ?? formatNumberWithLeadingZero(hours),
+                                onInput: handleHourChange,
+                                ref: hoursRef
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "hour down",
+                                className: "fwe-dark",
+                                onClick: ()=>handleHourIncrement(-1),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconCollapse, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-timepicker-spinners-minutes",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "minute up",
+                                className: "fwe-dark",
+                                onClick: ()=>handleMinuteIncrement(innerMinuteStepSize),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconExpand, {})
+                            }),
+                            /*#__PURE__*/ jsx(TimePickerInput, {
+                                "aria-label": "minutes value",
+                                min: min,
+                                max: minutesSecondsMax,
+                                value: tmpMinutes ?? formatNumberWithLeadingZero(innerDate.getMinutes()),
+                                onInput: handleMinuteChange
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "minute down",
+                                className: "fwe-dark",
+                                onClick: ()=>handleMinuteIncrement(-innerMinuteStepSize),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconCollapse, {})
+                            })
+                        ]
+                    }),
+                    showSeconds && /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-timepicker-spinners-seconds",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "seconds up",
+                                className: "fwe-dark",
+                                onClick: ()=>handleSecondIncrement(1),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconExpand, {})
+                            }),
+                            /*#__PURE__*/ jsx(TimePickerInput, {
+                                "aria-label": "seconds value",
+                                min: min,
+                                max: minutesSecondsMax,
+                                value: tmpSeconds ?? formatNumberWithLeadingZero(innerDate.getSeconds()),
+                                onInput: handleSecondChange
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                tertiary: true,
+                                "aria-label": "minute down",
+                                className: "fwe-dark",
+                                onClick: ()=>handleSecondIncrement(-1),
+                                iconOnly: true,
+                                icon: /*#__PURE__*/ jsx(IconCollapse, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            '12' === timeFormat && /*#__PURE__*/ jsx("button", {
+                onClick: toggleAmPm,
+                type: "button",
+                className: "fwe-btn fwe-ml-m",
+                children: innerDate.getHours() >= 12 ? 'PM' : 'AM'
+            })
+        ]
+    });
+});
+export { TimePickerDropdown };

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

@@ -0,0 +1,9 @@
+interface TimePickerInputProps {
+    min: number;
+    value: string | number;
+    max: number;
+    onInput: React.FormEventHandler<HTMLInputElement>;
+    'aria-label': string;
+}
+export declare const TimePickerInput: (props: TimePickerInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+export {};

package/dist/forms/time-picker/time-picker-dropdown/TimePickerInput.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const TimePickerInput = /*#__PURE__*/ forwardRef(({ min, max, value, onInput, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("input", {
+        "aria-label": ariaLabel,
+        className: "fwe-timepicker-hide-spinners",
+        type: "number",
+        min: min,
+        step: 1,
+        value: value,
+        max: max,
+        onInput: onInput,
+        ref: ref
+    }));
+export { TimePickerInput };