@festo-ui/react-extra 9.0.0-dev.690 → 9.0.0-dev.692

package/dist/forms/date-picker/DatePicker.css

@@ -1,26 +0,0 @@
-.fr-date-picker {
-  text-align: left;
-  cursor: pointer;
-  background: none;
-  border: none;
-  width: 100%;
-  padding: 0;
-  display: block;
-}
-
-.flatpickr-calendar {
-  margin-top: 6px;
-}
-
-.flatpickr-calendar:not(.open) {
-  display: none;
-}
-
-.fwe-border-hero {
-  border-color: var(--fwe-hero) !important;
-}
-
-.icon-hover:hover {
-  cursor: pointer;
-}
-

package/dist/forms/date-picker/DatePicker.d.ts

@@ -1,25 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import './DatePicker.scss';
-export interface DatePickerOptions {
-    minDate?: Date;
-    maxDate?: Date;
-    keepOpenOnDateChange?: boolean;
-    position?: 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
-}
-export interface DatePickerProps {
-    className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    hint?: string;
-    error?: string;
-    value?: Date;
-    defaultValue?: Date;
-    formatDate?: (date: Date) => string;
-    options?: DatePickerOptions;
-    onChange?: (date: Date) => void;
-    id?: string;
-    allowManualInput?: boolean;
-    dateFormat?: string;
-    openOnInputClick?: boolean;
-}
-export declare function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue, formatDate, options, onChange, id: idProps, allowManualInput, dateFormat, openOnInputClick, }: PropsWithChildren<DatePickerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/date-picker/DatePicker.js

@@ -1,138 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconCalendar } from "@festo-ui/react-icons";
-import classnames from "classnames";
-import flatpickr from "flatpickr";
-import { useEffect, useRef, useState } from "react";
-import "./DatePicker.css";
-import useId from "../../utils/useId.js";
-function DatePicker({ children, className, disabled, required, error, hint, value, defaultValue = new Date(), formatDate = Intl.DateTimeFormat().format, options, onChange, id: idProps, allowManualInput = false, dateFormat = 'd/m/Y', openOnInputClick = true }) {
-    const id = useId(idProps);
-    const [open, setOpen] = useState(false);
-    const [calendar, setCalendar] = useState(null);
-    const innerDefaultValue = value || defaultValue;
-    function toggle() {
-        const newOpen = !open;
-        setOpen(newOpen);
-        if (newOpen) calendar?.open();
-        else calendar?.close();
-    }
-    const datePickerRef = useRef(null);
-    const { keepOpenOnDateChange, maxDate, minDate, position = 'below center' } = options || {};
-    useEffect(()=>{
-        if (null !== calendar && void 0 !== value) calendar.setDate(value);
-    }, [
-        calendar,
-        value
-    ]);
-    useEffect(()=>{
-        function handleChange(date) {
-            datePickerRef.current?.blur();
-            if (onChange) onChange(date);
-        }
-        function handleClose() {
-            setOpen(false);
-            datePickerRef.current?.blur();
-        }
-        if (datePickerRef.current) if (null === calendar) setCalendar(flatpickr(datePickerRef.current, {
-            defaultDate: innerDefaultValue,
-            onChange: (v)=>handleChange(v[0]),
-            onClose: handleClose,
-            position,
-            formatDate,
-            closeOnSelect: !keepOpenOnDateChange,
-            clickOpens: false,
-            minDate,
-            maxDate,
-            allowInput: allowManualInput,
-            dateFormat
-        }));
-        else calendar.set({
-            defaultDate: innerDefaultValue,
-            minDate,
-            maxDate,
-            position,
-            closeOnSelect: !keepOpenOnDateChange,
-            allowInput: allowManualInput,
-            dateFormat
-        });
-    }, [
-        formatDate,
-        onChange,
-        calendar,
-        innerDefaultValue,
-        keepOpenOnDateChange,
-        maxDate,
-        minDate,
-        position,
-        allowManualInput,
-        dateFormat
-    ]);
-    useEffect(()=>()=>{
-            if (null !== calendar) calendar.destroy();
-        }, [
-        calendar
-    ]);
-    const handleKeyDown = (event)=>{
-        if ('Enter' === event.key) toggle();
-    };
-    const handleKeyUp = (event)=>{
-        if (' ' === event.key) toggle();
-    };
-    return /*#__PURE__*/ jsx("button", {
-        className: "fr-date-picker",
-        type: "button",
-        onClick: toggle,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        children: /*#__PURE__*/ jsxs("label", {
-            className: classnames('fwe-input-text fwe-input-text-icon', className),
-            htmlFor: id,
-            children: [
-                /*#__PURE__*/ jsx(IconCalendar, {
-                    className: classnames({
-                        'fwe-color-hero': open && !disabled,
-                        'fwe-color-control-disabled': disabled,
-                        'icon-hover': allowManualInput && !openOnInputClick
-                    })
-                }),
-                /*#__PURE__*/ jsx("input", {
-                    id: id,
-                    ref: datePickerRef,
-                    "aria-label": "picked date",
-                    type: "text",
-                    readOnly: !allowManualInput,
-                    onClick: (e)=>{
-                        if (allowManualInput && !openOnInputClick) e.stopPropagation();
-                    },
-                    onKeyDown: (e)=>{
-                        if (allowManualInput && !openOnInputClick) e.stopPropagation();
-                    },
-                    onBlur: ()=>{
-                        if (allowManualInput && calendar && datePickerRef.current) {
-                            const raw = datePickerRef.current.value;
-                            if (raw) calendar.setDate(raw, true, dateFormat);
-                        }
-                    },
-                    required: required,
-                    className: classnames({
-                        'fwe-border-hero': open && !disabled
-                    }),
-                    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 fwe-d-block",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-export { DatePicker };

package/dist/forms/date-range-picker/DateRangePicker.css

@@ -1,21 +0,0 @@
-.fr-date-range-picker {
-  text-align: left;
-  background: none;
-  border: none;
-  padding: 0;
-  display: block;
-}
-
-.fr-date-range-picker:hover input {
-  color: var(--fwe-hero);
-}
-
-.fr-date-range-picker-inputs {
-  order: 2;
-  display: flex;
-}
-
-.fwe-border-hero {
-  border-color: var(--fwe-hero) !important;
-}
-

package/dist/forms/date-range-picker/DateRangePicker.d.ts

@@ -1,19 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import './DateRangePicker.scss';
-export interface DateRangePickerOptions {
-    maxDate?: Date;
-    minDate?: Date;
-    keepOpenOnDateChange?: boolean;
-}
-export interface DateRangePickerProps {
-    className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    hint?: string;
-    error?: string;
-    defaultValue?: Date;
-    formatDate?: (date: Date) => string;
-    options?: DateRangePickerOptions;
-    onChange?: (dates: Date[]) => void;
-}
-export declare function DateRangePicker({ className, children, disabled, error, formatDate, hint, onChange, options, required, defaultValue, }: PropsWithChildren<DateRangePickerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/date-range-picker/DateRangePicker.js

@@ -1,130 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconCalendar } from "@festo-ui/react-icons";
-import classnames from "classnames";
-import flatpickr from "flatpickr";
-import rangePlugin from "flatpickr/dist/plugins/rangePlugin.js";
-import { useEffect, useRef, useState } from "react";
-import "./DateRangePicker.css";
-import useId from "../../utils/useId.js";
-function DateRangePicker({ className, children, disabled, error, formatDate, hint, onChange, options, required, defaultValue = new Date() }) {
-    const [open, setOpen] = useState(false);
-    const [calendar, setCalendar] = useState(null);
-    const id = useId();
-    function toggle() {
-        const newOpen = !open;
-        setOpen(newOpen);
-        if (newOpen) calendar?.open();
-        else calendar?.close();
-    }
-    const inputRef = useRef(null);
-    const input2Ref = useRef(null);
-    const containerRef = useRef(null);
-    useEffect(()=>{
-        function handleChange(dates) {
-            if (onChange) onChange(dates);
-        }
-        function handleClose() {
-            setOpen(false);
-            inputRef.current?.blur();
-            input2Ref.current?.blur();
-        }
-        if (containerRef.current && inputRef.current && input2Ref.current && null === calendar) setCalendar(flatpickr(inputRef.current, {
-            defaultDate: defaultValue,
-            plugins: [
-                rangePlugin({
-                    input: input2Ref.current
-                })
-            ],
-            onChange: (v)=>handleChange(v),
-            position: 'below center',
-            positionElement: containerRef.current,
-            formatDate,
-            closeOnSelect: !options?.keepOpenOnDateChange || true,
-            clickOpens: false,
-            onClose: handleClose,
-            minDate: options?.minDate,
-            maxDate: options?.maxDate
-        }));
-    }, [
-        formatDate,
-        onChange,
-        calendar,
-        defaultValue,
-        options
-    ]);
-    useEffect(()=>()=>{
-            if (null !== calendar) calendar.destroy();
-        }, [
-        calendar
-    ]);
-    const handleKeyDown = (event)=>{
-        if ('Enter' === event.key) toggle();
-    };
-    const handleKeyUp = (event)=>{
-        if (' ' === event.key) toggle();
-    };
-    return /*#__PURE__*/ jsx("button", {
-        tabIndex: 0,
-        type: "button",
-        className: classnames('fr-date-range-picker', className),
-        onClick: toggle,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        children: /*#__PURE__*/ jsxs("label", {
-            className: "fwe-input-text fwe-input-text-icon",
-            htmlFor: id,
-            children: [
-                /*#__PURE__*/ jsx(IconCalendar, {
-                    className: classnames({
-                        'fwe-color-hero': open && !disabled,
-                        'fwe-color-control-disabled': disabled
-                    })
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    ref: containerRef,
-                    className: "fr-date-range-picker-inputs",
-                    children: [
-                        /*#__PURE__*/ jsx("input", {
-                            ref: inputRef,
-                            "aria-label": "picked start date",
-                            type: "text",
-                            readOnly: true,
-                            required: required,
-                            className: classnames({
-                                'fwe-border-hero': open && !disabled
-                            }),
-                            disabled: disabled,
-                            id: id
-                        }),
-                        /*#__PURE__*/ jsx("input", {
-                            ref: input2Ref,
-                            "aria-label": "picked end date",
-                            type: "text",
-                            readOnly: true,
-                            required: required,
-                            className: classnames({
-                                'fwe-border-hero': open && !disabled
-                            }),
-                            disabled: disabled
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: classnames('fwe-input-text-label', {
-                        'fwe-color-text-disabled': disabled
-                    }),
-                    children: children
-                }),
-                hint && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-info",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("span", {
-                    className: "fwe-input-text-invalid fwe-d-block",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-export { DateRangePicker };