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

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

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

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

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

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

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

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