@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/lib/es/src/components/saveableInput/SaveableDateInput.d.ts

@@ -1,91 +0,0 @@
-import { type HTMLAttributes } from 'react';
-import type { Moment } from 'moment';
-import { type DatePickerProps } from '../datepicker/DatePicker';
-export type SaveableDateInputProps = {
-    /**
-     * The input placeholder.
-     */
-    placeholder?: string;
-    /**
-     * The actual input value.
-     */
-    value?: Date | Moment | string;
-    /**
-     * Used to control the save button from the outside to disable it in case
-     * the entered value is not valid.
-     *
-     * @default true
-     */
-    isValid?: boolean;
-    /**
-     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
-     */
-    errorMessage?: string | React.ReactNode;
-    /**
-     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
-     */
-    hideErrorIcon?: boolean;
-    /**
-     * Callback function triggered when the value changes and is saved.
-     * @param value
-     * @param previousValue
-     * @returns
-     */
-    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;
-    /**
-     * Callback function that gets triggered on every input change. Use this to control the component
-     * or when implementing key validation.
-     * @param keyValue the key value that has been entered
-     * @returns
-     */
-    onInputChange?: (value: Moment | string, isValid: boolean) => void;
-    /**
-     * Callback function that gets triggered when the input is in edit mode. Use this
-     * to control the component and to handle the previous value on the outside.
-     * @returns
-     */
-    onEnterEdit?: () => void;
-    /**
-     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).
-     * @param wasSaved - true if value was saved, false if cancelled/reset
-     * @returns
-     */
-    onExitEdit?: (wasSaved: boolean) => void;
-    /**
-     * Callback function that gets triggered when the user aborts the edit mode. Use this
-     * to control the component and handle the resetting of previous value on the outside.
-     * @returns
-     */
-    onCancel?: () => void;
-    /**
-     * Behavior when trying to exit edit mode with invalid input:
-     * - 'stay-open': Keep edit mode open until valid input is provided
-     * - 'reset-and-close': Close edit mode and reset to initial value
-     *
-     * @default 'stay-open'
-     */
-    invalidExitBehavior?: 'stay-open' | 'reset-and-close';
-    /**
-     * Defines the button style: `default` or `primary`.
-     */
-    buttonStyle?: 'primary' | 'default';
-    /**
-     * Additional HTML attributes to be set on the input element.
-     */
-    inputProps?: HTMLAttributes<HTMLInputElement>;
-    datePickerProps?: DatePickerProps;
-    /**
-     * Disables the component so the user cannot enter the edit mode.
-     */
-    disabled?: boolean;
-    /**
-     * Additional classes to be set on the input itself.
-     */
-    inputClassName?: string;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-declare const SaveableDateInput: (props: SaveableDateInputProps) => import("react/jsx-runtime").JSX.Element;
-export default SaveableDateInput;

package/lib/es/src/components/saveableInput/SaveableDateInput.js

@@ -1,133 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const Button_1 = tslib_1.__importDefault(require("../../Button"));
-const DatePicker_1 = tslib_1.__importDefault(require("../datepicker/DatePicker"));
-const useIsFocusWithin_1 = tslib_1.__importDefault(require("../../hooks/useIsFocusWithin"));
-const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
-const DEFAULT_BUTTON_STYLE = 'primary';
-// Validate date outside the component (via form library) if controlled usage
-// Use as controlled component: value, is Valid, and change callback
-// - if is valid, on save, call callback "onValueChanged"
-// - if not valid, keep edit mode open, outside is showing error message
-// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
-// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
-const SaveableDateInput = (props) => {
-    const { placeholder, value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop_1.default, onInputChange, // for controlled usage
-    onEnterEdit = noop_1.default, onExitEdit = noop_1.default, onCancel = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
-    // if callback is provided, assume it is controlled case
-    const isControlledCase = onInputChange !== undefined;
-    const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
-    const [editInput, setEditInput] = (0, react_1.useState)(false);
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [isPickerOpen, setIsPickerOpen] = (0, react_1.useState)(false);
-    const wrapperRef = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    const initialInputValueRef = (0, react_1.useRef)(inputValue);
-    (0, useIsFocusWithin_1.default)({
-        ref: wrapperRef,
-        onFocusWithin: () => {
-            setIsFocused(true);
-        },
-        onBlurWithin: () => {
-            setIsFocused(false);
-        },
-    });
-    // Handle escape key to cancel edit mode
-    (0, useEsc_1.default)(() => {
-        if (isFocused && editInput) {
-            handleCancelEdit();
-        }
-    });
-    // Update internal state in a controlled environment
-    const [previousExternalValue, setPreviousExternalValue] = (0, react_1.useState)(externalValue);
-    if (previousExternalValue !== externalValue) {
-        setInputValue(externalValue);
-        setPreviousExternalValue(externalValue);
-        // Update initial value ref when external value changes while not in edit mode
-        if (!editInput) {
-            initialInputValueRef.current = externalValue;
-        }
-    }
-    const handleToggleInput = () => {
-        if (!editInput) {
-            // Enter edit mode
-            setEditInput(true);
-            initialInputValueRef.current = inputValue;
-            // open the dropdown
-            setIsPickerOpen(true);
-            onEnterEdit();
-        }
-        else {
-            // Try to exit edit mode
-            handleSaveAttempt();
-        }
-    };
-    const handleSaveAttempt = () => {
-        if (isValid) {
-            // Save the value (only if valid)
-            setEditInput(false);
-            onValueChanged(inputValue, initialInputValueRef.current);
-            onExitEdit(true);
-            // close the dropdown
-            setIsPickerOpen(false);
-        }
-        else {
-            // Handle invalid input based on behavior setting
-            if (invalidExitBehavior === 'reset-and-close') {
-                handleCancelEdit();
-            }
-            // If 'stay-open', do nothing - keep edit mode open
-        }
-    };
-    const handleCancelEdit = () => {
-        setEditInput(false);
-        // Reset to initial value
-        if (isControlledCase) {
-            // In controlled mode, trigger change to reset to initial value
-            onInputChange(initialInputValueRef.current, true);
-        }
-        else {
-            setInputValue(initialInputValueRef.current);
-        }
-        // Close the dropdown
-        setIsPickerOpen(false);
-        onCancel();
-        onExitEdit(false);
-    };
-    const handleDateChange = (value, isValid) => {
-        if (isControlledCase) {
-            onInputChange(value, isValid);
-        }
-        else {
-            setInputValue(value);
-        }
-    };
-    const handleCloseDropdown = () => setIsPickerOpen(false);
-    const wrapperClasses = (0, classnames_1.default)('form-group', !isValid && 'has-feedback has-error', className);
-    const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    const dateInputClasses = (0, classnames_1.default)('margin-0 width-100pct', inputClassName);
-    // Button should be disabled if:
-    // - Component is disabled, OR
-    // - In edit mode and invalid input (and behavior is stay-open)
-    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
-    let inputStyle = {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-    };
-    if (!isValid && hideErrorIcon) {
-        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value
-        inputStyle = { ...inputStyle, paddingRight: '10px' };
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
-                            ...inputProps,
-                            placeholder,
-                            disabled: !editInput,
-                            style: inputStyle,
-                        }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), !isValid && !hideErrorIcon && ((0, jsx_runtime_1.jsx)("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }), !isValid && errorMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'help-block z-index-max', children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage }) }))] }));
-};
-exports.default = SaveableDateInput;

package/lib/es/src/components/saveableInput/SaveableInput.d.ts

@@ -1,94 +0,0 @@
-import React, { type HTMLAttributes } from 'react';
-export type SaveableInputProps = {
-    /**
-     * The input placeholder.
-     */
-    placeholder?: string;
-    /**
-     * The previous or old value shown above the input value.
-     * This value will *not* be changed for new input values.
-     */
-    fixedPreviousValue?: string;
-    /**
-     * The previous or old value shown above the input value.
-     * This value *changes* when a new input value is accepted.
-     */
-    previousValue?: string;
-    /**
-     * The actual input value.
-     */
-    value?: string;
-    /**
-     * Used to control the save button from the outside to disable it in case
-     * the entered value is not valid.
-     *
-     * @default true
-     */
-    isValid?: boolean;
-    /**
-     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
-     */
-    errorMessage?: string | React.ReactNode;
-    /**
-     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
-     */
-    hideErrorIcon?: boolean;
-    /**
-     * Callback function triggered when the value changes.
-     * @param value
-     * @param previousValue
-     * @returns
-     */
-    onValueChanged?: (value: string, previousValue: string) => void;
-    /**
-     * Callback function that gets triggered on every input change. Use this to control the component
-     * or when implementing key validation.
-     * @param keyValue the key value that has been entered
-     * @param inputValue the current complete value of the input
-     * @returns
-     */
-    onInputChange?: (keyValue: string, inputValue: string) => void;
-    /**
-     * Callback function that gets triggered when the user aborts the edit mode. Use this
-     * to control the component and handle the resetting of previous value on the outside.
-     * @returns
-     */
-    onEsc?: () => void;
-    /**
-     * Callback function that gets triggered when the input is in edit mode. Use this
-     * to control the component dna to handle the previous value on the outside.
-     * @returns
-     */
-    onEnterEdit?: () => void;
-    /**
-     * Defines the button style: `default` or `primary`.
-     */
-    buttonStyle?: 'primary' | 'default';
-    /**
-     * Additional HTML attributes to be set on the input element.
-     */
-    inputProps?: HTMLAttributes<HTMLInputElement>;
-    /**
-     * Adds a given unit to the input.
-     */
-    unit?: string | React.ReactNode;
-    /**
-     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
-     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
-     */
-    icon?: string;
-    /**
-     * Disables the component so the user cannot enter the edit mode.
-     */
-    disabled?: boolean;
-    /**
-     * Additional classes to be set on the input itself.
-     */
-    inputClassName?: string;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-declare const SaveableInput: (props: SaveableInputProps) => import("react/jsx-runtime").JSX.Element;
-export default SaveableInput;

package/lib/es/src/components/saveableInput/SaveableInput.js

@@ -1,121 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-// @ts-ignore
-const Button_1 = tslib_1.__importDefault(require("../../Button"));
-const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
-const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
-const DEFAULT_BUTTON_STYLE = 'primary';
-const useFocus = (isEditable) => {
-    const inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (inputRef.current && isEditable) {
-            inputRef.current.focus();
-        }
-    }, [inputRef.current, isEditable]);
-    return inputRef;
-};
-// Features:
-// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?
-// [x] avoid save without change
-// [x] use fixed previous value
-// [x] enter = save
-// [x] esc key to abort and leave edit mode
-// [x] tab focus + enter = go into edit mode
-// [x] validate after each key, i.e for number inputs - use onInputChange callback
-// [x] support form feedback error - wrap it with form-group and feedback classes
-// [x] allow for unit and icon
-// [x] disabled input
-const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
-    const externalOldValue = previousValue || fixedPreviousValue;
-    const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
-    const [oldInputValue, setOldInputValue] = (0, react_1.useState)(externalOldValue);
-    const [editInput, setEditInput] = (0, react_1.useState)(false);
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const initialInputValueRef = (0, react_1.useRef)(inputValue);
-    const initialOldInputValueRef = (0, react_1.useRef)(oldInputValue);
-    // Update internal state in a controlled environment
-    const [previousExternalValue, setPreviousExternalValue] = (0, react_1.useState)(externalValue);
-    if (previousExternalValue !== externalValue) {
-        setInputValue(externalValue);
-        setPreviousExternalValue(externalValue);
-    }
-    // Update internal state in a controlled environment
-    const [previousExternalOldValue, setPreviousExternalOldValue] = (0, react_1.useState)(externalOldValue);
-    if (previousExternalOldValue !== externalOldValue) {
-        setOldInputValue(externalOldValue);
-        setPreviousExternalOldValue(externalOldValue);
-    }
-    // Set focus on input when being in edit mode
-    const inputRef = useFocus(editInput);
-    // Allow to exit "edit" mode with "Enter" to accept changes
-    (0, useKey_1.default)((event) => {
-        if (isFocused && editInput && isValid && event.key === 'Enter') {
-            handleToggleInput();
-        }
-    });
-    // Allow to exit "edit" mode with "Esc" to ignore changes
-    (0, useEsc_1.default)(() => {
-        if (isFocused) {
-            // Restore local state to initial vales as it was when entering edit mode
-            setInputValue(initialInputValueRef.current);
-            setOldInputValue(initialOldInputValueRef.current);
-            setEditInput(false);
-            onEsc();
-        }
-    });
-    const handleToggleInput = () => {
-        if (editInput === false) {
-            setEditInput(true);
-            // Temporarily store values of input and oldInput to be used when
-            // discarding changes on "esc" or to avoid saving without changes
-            if (!fixedPreviousValue) {
-                initialOldInputValueRef.current = oldInputValue;
-            }
-            initialInputValueRef.current = inputValue;
-            onEnterEdit();
-        }
-        else {
-            setEditInput(false);
-            // In case the new input value has not changed to the initial value
-            // reset the internal old value to the initial
-            if (initialInputValueRef.current !== inputValue) {
-                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);
-                onValueChanged(inputValue, oldInputValue);
-            }
-        }
-    };
-    const handleInputChange = (event) => {
-        // Only update internal value if the external "onInputChange" callback function is not defined
-        // as it will be used in a controlled way
-        if (onInputChange) {
-            // Use type assertion to access nativeEvent.data
-            const nativeEventData = event.nativeEvent?.data;
-            // Whe "backspace" is used to remove a value, the nativeEventData is undefined. In this case
-            // we need to use the target value for the callback otherwise the user will not be able to
-            // remove a character from the input
-            const currentInputValue = event.target.value;
-            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);
-            return;
-        }
-        setInputValue(event.target.value);
-    };
-    const handleFocus = () => setIsFocused(true);
-    const handleBlur = () => setIsFocused(false);
-    const showOldValue = !(0, isEmpty_1.default)(oldInputValue) && oldInputValue !== inputValue && !editInput;
-    const wrapperClasses = (0, classnames_1.default)('form-group', !isValid && 'has-feedback has-error', className);
-    const inputClasses = (0, classnames_1.default)('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
-    !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed
-    inputClassName);
-    const oldValueClasses = (0, classnames_1.default)('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
-    const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    const disableButton = (editInput && !isValid) || disabled;
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'input-group', children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), (0, jsx_runtime_1.jsx)("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && ((0, jsx_runtime_1.jsx)("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && ((0, jsx_runtime_1.jsx)("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), (0, jsx_runtime_1.jsx)("div", { className: 'input-group-btn', children: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) }) })] }), !isValid && !hideErrorIcon && !unit && ((0, jsx_runtime_1.jsx)("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), !isValid && errorMessage && ((0, jsx_runtime_1.jsx)("span", { className: 'help-block z-index-max', children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage }) }))] }));
-};
-exports.default = SaveableInput;

package/lib/es/src/components/selects/BaseSelectDropdown.d.ts

@@ -1,56 +0,0 @@
-import React from 'react';
-export type OptionDOMValue = {
-    id: string;
-    text: string;
-};
-export type SelectOption = {
-    /**
-     * Used to identify an option.
-     */
-    id: string;
-    /**
-     * The option item text.
-     */
-    label: string | React.ReactNode;
-    /**
-     * Icon to be displayed in front of the label.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Defines whether the menu item is selected.
-     *
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * Setting "disabled" to true will disable the respective item.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Will treat the given value as a menu header
-     */
-    header?: boolean;
-};
-export type BaseSelectDropdownProps<T extends SelectOption> = {
-    options?: T[];
-    isOpen?: boolean;
-    isLoading?: boolean;
-    updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
-    onOpen?: (hasDropup: boolean) => void;
-    onSelect?: (selectedItem: T | undefined) => void;
-    onClose?: () => void;
-    placeholder?: string | React.ReactNode;
-    dropup?: boolean;
-    pullRight?: boolean;
-    autoDropDirection?: boolean;
-    noItemMessage?: string | React.ReactNode;
-    focusedItemIndex?: number;
-    dropdownClassName?: string;
-    keyboardUsed?: boolean;
-    useActiveClass?: boolean;
-};
-declare const BaseSelectDropdown: <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const filterOptions: <T extends SelectOption>(itemDOMValues: OptionDOMValue[], filterValue: string, options: T[]) => T[];
-export default BaseSelectDropdown;