@rio-cloud/rio-uikit 1.11.0 → 1.13.0

package/src/components/datepicker/DayPicker.js

@@ -0,0 +1,330 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { DayPicker as ReactDayPicker } from 'react-day-picker';
+import { format, isValid, parse } from 'date-fns';
+import * as locales from 'date-fns/locale';
+import noop from 'lodash/fp/noop';
+import debounce from 'lodash/fp/debounce';
+import 'react-day-picker/dist/style.css';
+import useClickOutside from '../../hooks/useClickOutside';
+import usePopperDropdown from '../../hooks/usePopperDropdown';
+import useKey from '../../hooks/useKey';
+import ClearableInput from '../clearableInput/ClearableInput';
+import classNames from 'classnames';
+const DayPicker = (props) => {
+    const { id, selected, inputProps = {}, alignRight, bsSize = '', locale = 'en-GB', footer, inline, showOutsideDays = true, fixedWeeks = true, mode = 'single', dateFormat, placeholder, isClearable = false, closeOnSelect = true, onSelectChange = noop, defaultMonth, startMonth, endMonth, inputClassName, className, } = props;
+    const isSingleMode = mode === 'single';
+    const isMultipleMode = mode === 'multiple';
+    const isRangeMode = mode === 'range';
+    const isControlled = selected !== undefined;
+    const [internalSelected, setInternalSelected] = useState();
+    const selectedValue = isControlled ? selected : internalSelected;
+    const narrowedSelected = (() => {
+        if (isSingleMode) {
+            return selectedValue instanceof Date ? selectedValue : undefined;
+        }
+        if (isMultipleMode) {
+            return Array.isArray(selectedValue) ? selectedValue : undefined;
+        }
+        return isDateRange(selectedValue) ? selectedValue : undefined;
+    })();
+    const selectionProps = { selected: narrowedSelected };
+    const resolvedLocale = resolveLocale(locale);
+    const [internalInputValue, setInternalInputValue] = useState('');
+    const inputValue = isControlled && !isSingleMode
+        ? formatSelectedForInput(narrowedSelected, locale, mode, dateFormat)
+        : internalInputValue;
+    // const inputValue = isSingleMode
+    //     ? internalInputValue
+    //     : formatSelectedForInput(narrowedSelected, locale, mode, dateFormat);
+    // const inputValue = internalInputValue;
+    // This ensures that whenever the external selected prop changes, the input field gets updated accordingly
+    useEffect(() => {
+        if (isSingleMode && isControlled && selected instanceof Date) {
+            setInternalInputValue(formatDate(selected, locale, dateFormat));
+        }
+    }, [selected, isSingleMode, isControlled, locale, dateFormat]);
+    const handleInputChange = (newValue) => doHandleInputValue(newValue);
+    const handleInputChangeNative = (event) => doHandleInputValue(event.currentTarget.value);
+    const debouncedParseInput = useRef(debounce(300, (rawValue) => {
+        const parsed = parseDateString(rawValue, locale);
+        console.log(parsed);
+        const isValid = !!parsed;
+        setInternalSelected(parsed);
+        if (isSingleMode && 'onInputChange' in props && props.onInputChange) {
+            props.onInputChange(rawValue, parsed, isValid);
+        }
+        const shouldNotify = parsed !== undefined || rawValue === '';
+        if (shouldNotify) {
+            // parse to desired dateFormat for use on outside
+            const formattedSelected = dateFormat ? parseDateString(rawValue, locale, dateFormat) : parsed;
+            onSelectChange(formattedSelected, {});
+        }
+    })).current;
+    const doHandleInputValue = (rawValue) => {
+        // const parsed = parseDateString(rawValue, locale, dateFormat);
+        // const isValid = !!parsed;
+        // if (!isControlled) {
+        //     // && isValidDate(parsed); // TODO: optional second validation
+        //     setInternalInputValue(rawValue);
+        //     setInternalSelected(parsed as typeof props.selected);
+        // } else if (isSingleMode) {
+        //     setInternalInputValue(rawValue);
+        // }
+        // if (isSingleMode && 'onInputChange' in props && props.onInputChange) {
+        //     props.onInputChange(rawValue, parsed, isValid);
+        // }
+        // const shouldNotify = parsed !== undefined || rawValue === '';
+        // if (shouldNotify) {
+        //     onSelectChange(parsed as typeof selected, {});
+        // }
+        setInternalInputValue(rawValue); // always update input state
+        debouncedParseInput(rawValue); // defer parsing & callback execution
+    };
+    const keyboardRef = useRef(false);
+    const handleInputBlur = (event) => {
+        // Do not close the dropdown on input blur when the user selects something inside the dropdown itself
+        const nextFocused = event.relatedTarget;
+        const focusInsideDropdown = nextFocused && popperElementRef.current?.contains(nextFocused);
+        if (isDropdownOpen && !focusInsideDropdown) {
+            closePopper();
+        }
+        if (!isSingleMode) {
+            return;
+        }
+        const parsed = parseDateString(internalInputValue, locale, dateFormat);
+        if (parsed && isValid(parsed)) {
+            setInternalSelected(parsed);
+            onSelectChange?.(parsed, {});
+            setInternalInputValue(formatDate(parsed, locale, dateFormat));
+        }
+    };
+    const handleOnInputFocus = () => {
+        if (!isDropdownOpen) {
+            openPopper();
+        }
+    };
+    const handleInputKeyPress = (event) => {
+        // Workaround to figure out if the user navigates via keyboard
+        if (event.key === 'Tab') {
+            keyboardRef.current = true;
+        }
+        if (event.key !== 'Enter') {
+            return;
+        }
+        // In case the dropdown is not open but the input is focused, open the dropdown on enter
+        if (!isDropdownOpen) {
+            handleInputClick();
+            return;
+        }
+        // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown
+        if (isDropdownOpen && closeOnSelect) {
+            onSelectChange(narrowedSelected, {});
+            closePopper();
+        }
+    };
+    const handleSelectedChange = (newValue) => {
+        if (!isControlled) {
+            setInternalSelected(newValue);
+        }
+    };
+    const handleClearSelection = () => {
+        handleInputChange('');
+        handleSelectedChange(undefined);
+        setInternalInputValue('');
+        if (isControlled) {
+            setInternalSelected(undefined);
+        }
+        if (isRangeMode && 'onChange' in props && props.onChange) {
+            props.onChange(undefined);
+        }
+        onSelectChange(undefined, {});
+    };
+    const handleDaySelect = (selected, triggerDate, modifiers, event) => {
+        // safe because of discriminated union
+        handleSelectedChange(selected);
+        // trigger callback
+        onSelectChange(selected, modifiers);
+        if (isSingleMode && !isControlled) {
+            // should be the only place formatting is applied to the input
+            setInternalInputValue(formatDate(selected, locale, dateFormat));
+        }
+        if (keyboardRef.current) {
+            // Note: When the date is selected via enter key, assume the user uses keyboard navigation.
+            // In this case the input should be focused to allow to tab to another element in his form.
+            // However, it is not possible to detect according to the event since the event.type is alway "click".
+            // Instead we check if the user used the tab key to focus the day picker.
+            inputRef?.current?.focus();
+        }
+        if (closeOnSelect) {
+            closePopper();
+            keyboardRef.current = false;
+        }
+    };
+    const { isOpen: isDropdownOpen, open: openPopper, close: closePopper, referenceRef: popperRef, popperElementRef: setPopperElement, popperStyles, popperAttributes, } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });
+    const inputRef = useRef(null);
+    const popperElementRef = useRef(null);
+    const assignPopperElement = (element) => {
+        popperElementRef.current = element;
+        setPopperElement(element);
+    };
+    // Close the dropdown when clicking outside the dropdown wrapper.
+    // It also checks if the click happened into the input, in which case the
+    // dropdown will remain open.
+    const outsideRef = useClickOutside(event => {
+        const target = event.target;
+        if (!target) {
+            closePopper();
+            return;
+        }
+        const clickedWithinTrigger = popperRef.current?.contains(target);
+        const clickedWithinInput = inputRef.current?.contains(target);
+        if (clickedWithinTrigger || clickedWithinInput) {
+            return;
+        }
+        closePopper();
+    }, undefined, isDropdownOpen);
+    const handleInputClick = () => {
+        openPopper();
+        inputRef.current?.focus();
+    };
+    // Needed to select all tabbable elements inside the dropdown calendar and to disable the
+    // focus on tab for all of these. This allows the user to tab between multiple inputs on the page
+    // or when having two day pickers side by side. Tabbing from one day picker input to the other will
+    // open and close the dropdown respectively and achieving the same usability as the old DatePicker.
+    // useEffect(() => {
+    //     if (isDropdownOpen && outsideRef.current) {
+    //         // get all buttons to disable the tab on them
+    //         const tabbableElements = (outsideRef.current as HTMLElement).querySelectorAll<HTMLElement>(
+    //             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    //         );
+    //         tabbableElements.forEach((element: Element) => {
+    //             element.setAttribute('tabindex', '-1');
+    //         });
+    //     }
+    // }, [isDropdownOpen, outsideRef]);
+    // Close the dropdown when it is open and when the user presses the "escape" key
+    useKey('Escape', event => {
+        const target = event.target;
+        const isInput = inputRef.current && inputRef.current === target;
+        if (isInput && isDropdownOpen) {
+            closePopper();
+        }
+    });
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isDropdownOpen || !outsideRef.current) {
+                return;
+            }
+            if (event.key === 'Tab') {
+                const focusedInside = outsideRef.current.contains(document.activeElement);
+                if (focusedInside) {
+                    keyboardRef.current = true;
+                    console.log('User tabbed into dropdown');
+                    // Optional: closePopper(); or focus inputRef.current
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isDropdownOpen]);
+    const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;
+    if (inline) {
+        // Render day picker inline without a dropdown and an input
+        return (_jsxs("div", { className: `display-flex flex-column justify-content-between ${className}`, children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }));
+    }
+    const clearableInputProps = {
+        ...inputProps,
+        readOnly: !isSingleMode,
+        style: {
+            background: 'var(--color-white)',
+            ...(inputProps?.style ?? {}),
+        },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: popperRef, className: `form-group ${className}`, children: _jsxs("div", { className: 'input-group', children: [_jsx("span", { className: 'input-group-addon', onClick: handleInputClick, children: _jsx("span", { className: 'rioglyph rioglyph-calendar', "aria-hidden": 'true' }) }), isClearable && (_jsx(ClearableInput, { id: id, autoComplete: 'off', placeholder: placeholder, ...clearableInputProps, type: 'text', value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onClear: handleClearSelection, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyPress: handleInputKeyPress, 
+                            // hasError={hasError}
+                            ref: inputRef, inputClassName: inputClassName })), !isClearable && (_jsx("input", { id: id, size: 12, type: 'text', autoComplete: 'off', placeholder: placeholder, ...inputProps, value: inputValue, onChange: handleInputChangeNative, onClick: handleInputClick, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyDown: handleInputKeyPress, ref: inputRef, readOnly: !isSingleMode, className: classNames('ClearableInput form-control bg-white', inputClassName) }))] }) }), isDropdownOpen && (_jsx("div", { style: popperStyles, className: 'DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border', ...popperAttributes, ref: assignPopperElement, role: 'dialog', "aria-label": 'DayPicker calendar', children: _jsxs("div", { ref: outsideRef, className: 'display-flex flex-column justify-content-between', children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }) }))] }));
+};
+const isDateRange = (value) => {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const range = value;
+    const fromIsValid = range.from === undefined || range.from instanceof Date;
+    const toIsValid = range.to === undefined || range.to instanceof Date;
+    return fromIsValid && toIsValid;
+};
+const resolveLocale = (localeCode) => {
+    const baseCode = localeCode.split('-')[0]; // 'de-DE' → 'de'
+    return (locales[baseCode] || locales[localeCode] || locales.enGB);
+};
+const formatDate = (date, localeCode, dateFormat) => {
+    if (!date) {
+        return '';
+    }
+    if (dateFormat) {
+        return format(date, dateFormat); // use override
+    }
+    // fallback to locale-based formatting
+    return new Intl.DateTimeFormat(localeCode).format(date);
+};
+const formatSelectedForInput = (selected, localeCode, mode, dateFormat) => {
+    if (!selected) {
+        return '';
+    }
+    const formatFn = (date) => dateFormat ? format(date, dateFormat) : new Intl.DateTimeFormat(localeCode).format(date);
+    if (mode === 'single' && selected instanceof Date) {
+        return formatFn(selected);
+    }
+    if (mode === 'multiple' && Array.isArray(selected)) {
+        return selected.map(formatFn).join(', ');
+    }
+    if (mode === 'range' && typeof selected === 'object' && 'from' in selected) {
+        const { from, to } = selected;
+        if (!from || !to) {
+            return '';
+        }
+        return [from, to].filter(Boolean).map(formatFn).join(' – ');
+    }
+    return '';
+};
+const localeFormatMap = {
+    'bg-BG': 'dd.MM.yyyy',
+    'cs-CZ': 'dd.MM.yyyy',
+    'da-DK': 'dd-MM-yyyy',
+    'de-DE': 'dd.MM.yyyy',
+    'el-GR': 'dd/MM/yyyy',
+    'en-GB': 'dd/MM/yyyy',
+    'es-ES': 'dd/MM/yyyy',
+    'et-EE': 'dd.MM.yyyy',
+    'fi-FI': 'dd.MM.yyyy',
+    'fr-FR': 'dd/MM/yyyy',
+    'hr-HR': 'dd.MM.yyyy',
+    'hu-HU': 'yyyy. MM. dd.',
+    'it-IT': 'dd/MM/yyyy',
+    'lt-LT': 'dd-MM-yyyy',
+    'lv-LV': 'dd.MM.yyyy',
+    'nb-NO': 'dd.MM.yyyy',
+    'nl-NL': 'dd-MM-yyyy',
+    'pl-PL': 'dd.MM.yyyy',
+    'pt-BR': 'dd/MM/yyyy',
+    'pt-PT': 'dd/MM/yyyy',
+    'ro-RO': 'dd.MM.yyyy',
+    'sk-SK': 'dd.MM.yyyy',
+    'sl-SI': 'dd.MM.yyyy',
+    'sv-SE': 'yyyy-MM-dd',
+};
+const getFormatForLocale = (localeCode, fallback = 'yyyy-MM-dd') => {
+    return localeFormatMap[localeCode] || fallback;
+};
+const parseDateString = (value, localeCode, dateFormat) => {
+    if (!value) {
+        return undefined;
+    }
+    const formatToUse = dateFormat || getFormatForLocale(localeCode, dateFormat);
+    const parsed = parse(value, formatToUse, new Date());
+    return isValid(parsed) ? parsed : undefined;
+};
+export default DayPicker;

package/src/components/filepicker/FilePicker.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from 'react';
+type FilePickerRenderProps = {
+    isDragActive: boolean;
+};
+export type FilePickerProps = {
+    /**
+     * Defines the file picker display mode.
+     *
+     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,
+     * or `'full'` for showing both.
+     *
+     * @default 'button'
+     */
+    displayMode?: 'button' | 'dropzone' | 'full';
+    /**
+     * Indicating if multiple files may be selected.
+     *
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Text to display on Button if displayMode is set to "button".
+     *
+     * @default 'Select files'
+     */
+    label?: string | ReactNode;
+    /**
+     * Maximum file size in byte. 5 MB = 5,242,880 byte
+     */
+    maxSize?: number;
+    /**
+     * Function called after one or multiple files have been picked.
+     */
+    onPick?: (files: FileList | null) => void;
+    /**
+     * Additional classes for the select button.
+     *
+     * @default ''
+     */
+    className?: string;
+    /**
+     * Flag to set the dropzone wrapper element to 100% height.
+     *
+     * This comes in handy, when the dropzone should have 100 % height so it can grow.
+     *
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     * Object list of accepted Mime Types as keys and file extensions array as value.
+     */
+    accept?: {
+        [mimeType: string]: string[];
+    };
+    /**
+     * Pass a custom dropzone element as function receiving some render props.
+     */
+    children?: ({ isDragActive }: FilePickerRenderProps) => any;
+};
+declare const FilePicker: {
+    (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+    DISPLAY_MODE_BUTTON: "button";
+    DISPLAY_MODE_DROPZONE: "dropzone";
+    DISPLAY_MODE_FULL: "full";
+};
+export default FilePicker;

package/src/components/filepicker/FilePicker.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import Dropzone from 'react-dropzone';
+import noop from 'lodash/noop';
+import Button from '../button/Button';
+const FilePicker = (props) => {
+    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, fullHeight = false, children, ...remainingProps } = props;
+    const dropzoneRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const isFull = displayMode === 'full';
+    const showButton = isFull || displayMode === 'button';
+    const showDropzone = isFull || displayMode === 'dropzone';
+    const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
+        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
+        const files = hasImagesType
+            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
+            : acceptedFiles;
+        onPick(files, rejectedFiles);
+    }, [onPick, accept]);
+    const handleClick = () => dropzoneRef.current?.open();
+    useEffect(() => {
+        // Set height to dropzones inner presentation div where there is no other access to this DOM element.
+        // This comes in handy, when the dropzone should have 100 % height so it can grow.
+        if (wrapperRef.current && fullHeight) {
+            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');
+        }
+    }, [fullHeight, wrapperRef.current]);
+    return (_jsxs("div", { ref: wrapperRef, className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
+                    return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
+                } })] }));
+};
+FilePicker.DISPLAY_MODE_BUTTON = 'button';
+FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
+FilePicker.DISPLAY_MODE_FULL = 'full';
+export default FilePicker;

package/src/components/formLabel/FormLabel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+const FormLabel = (props) => {
+    const { className = '', children, supportingText, ...remainingProps } = props;
+    const elementRef = useRef(null);
+    const [parentSize, setParentSize] = useState(null);
+    const isLabel = 'htmlFor' in remainingProps;
+    useEffect(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        const parent = elementRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (parent.classList.contains('form-group-lg')) {
+            setParentSize('lg');
+        }
+        else if (parent.classList.contains('form-group-sm')) {
+            setParentSize('sm');
+        }
+    }, []);
+    const supportingTextClasses = classNames('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
+    if (isLabel && remainingProps.htmlFor) {
+        const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        return (
+        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
+        _jsxs("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
+    }
+    const classes = classNames('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    return (
+    // @ts-ignore
+    _jsxs("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
+};
+export default FormLabel;