@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/lib/es/components/clearableInput/ClearableInput.d.ts

@@ -1,59 +1,96 @@
-export const DEFAULT_TYPE: "text";
-export const SUPPORTED_TYPES: string[];
-export default ClearableInput;
-declare class ClearableInput extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        inputValue: any;
-        showClear: boolean;
-        isControlled: boolean;
-    };
-    handleChange(event: any): void;
-    handleKeyPress(event: any): void;
-    clearInputValue(event: any): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    hasValue(value: any): boolean;
-    changeInternalValue(newValue?: string): void;
-    render(): JSX.Element;
-}
-declare namespace ClearableInput {
-    namespace defaultProps {
-        export { DEFAULT_TYPE as type };
-        export const className: string;
-        export const inputClassName: string;
-        export const hasError: boolean;
-        export const tabIndex: number;
-        export function onChange(): void;
-        export function onBlur(): void;
-        export function onFocus(): void;
-        export function onKeyPress(): void;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const inputClassName_1: PropTypes.Requireable<string>;
-        export { inputClassName_1 as inputClassName };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        const onBlur_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onBlur_1 as onBlur };
-        const onFocus_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onFocus_1 as onFocus };
-        export const onClear: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyPress_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onKeyPress_1 as onKeyPress };
-        export const placeholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const type: PropTypes.Requireable<string>;
-        export const defaultValue: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const maxLength: PropTypes.Requireable<number>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-        const hasError_1: PropTypes.Requireable<boolean>;
-        export { hasError_1 as hasError };
-        export const inputRef: PropTypes.Requireable<object>;
-        export const autoComplete: PropTypes.Requireable<string>;
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+export declare const DEFAULT_TYPE = "text";
+export declare const SUPPORTED_TYPES: string[];
+export type ClearableInputProps = {
+    /**
+     * The translated text that shall be shown when the input is empty.
+     */
+    placeholder?: string | React.ReactNode;
+    /**
+     * Defines the type of the input itself.
+     *
+     * There are three types supported:
+     * `text`, `email`, `password`.
+     */
+    type?: 'text' | 'password' | 'email';
+    /**
+     * Initial value of the ClearableInput. Pass this prop if you want to use this
+     * component as an uncontrolled component.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the ClearableInput. Pass this prop if you want to use this
+     * component as a controlled component.
+     */
+    value?: string;
+    /**
+     * Defines the maximum amount of characters that can be entered.
+     */
+    maxLength?: number;
+    /**
+     * Defines the tab index to be added to the input element.
+     */
+    tabIndex?: number;
+    /**
+     * Defined whether or not the input has the error styling.
+     */
+    hasError?: boolean;
+    /**
+     * The callback ref for the underlying input. Alternatively, use can use a forward ref.
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Sets autocomplete value for autosuggest forms.
+     */
+    autoComplete?: string;
+    /**
+     * Callback function for when the value changes. Receives new value as an argument.
+     * @param newValue
+     * @param event
+     * @returns
+     */
+    onChange?: (newValue: string, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function which gets triggered when the input looses the focus.
+     * @param event
+     * @returns
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function which gets triggered when the input gains the focus.
+     * @param event
+     * @returns
+     */
+    onFocus?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function for when the value is cleared via the clear button.
+     * @param event
+     * @returns
+     */
+    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Callback function for every key pressed including `Enter` key.
+     * @param event
+     * @returns
+     */
+    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Additional classes to be set on the input element.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+type ChildrenProp = {
+    /**
+     * Providing a function enables the render props approach. The function gets the input props
+     * passed and is responsible for rendering the custom `input` component.
+     * @param props
+     * @returns
+     */
+    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
+};
+declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
+export default ClearableInput;

package/lib/es/components/clearableInput/ClearableInput.js

@@ -1,121 +1,71 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SUPPORTED_TYPES = exports.DEFAULT_TYPE = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
-const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-exports.DEFAULT_TYPE = 'text';
-exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
-class ClearableInput extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        const initialValue = props.value || props.defaultValue || '';
-        this.state = {
-            inputValue: initialValue,
-            showClear: this.hasValue(initialValue),
-            // Note: check for null and undefined not for empty string
-            isControlled: !(0, isNil_1.default)(props.value),
-        };
-        this.handleChange = this.handleChange.bind(this);
-        this.handleKeyPress = this.handleKeyPress.bind(this);
-        this.clearInputValue = this.clearInputValue.bind(this);
-    }
-    // only gets triggered on user interaction.
-    handleChange(event) {
-        const { isControlled } = this.state;
-        const { onChange } = this.props;
-        const value = event.target.value;
-        if (isControlled) {
-            onChange(value, event);
-        }
-        else {
-            this.changeInternalValue(value, event);
-            onChange(value, event);
-        }
-    }
-    // Will be triggered on every key press but also when pressing 'Enter' for example
-    handleKeyPress(event) {
-        const { onKeyPress } = this.props;
-        onKeyPress(event);
-    }
-    // important for when used as a controlled component (value from outside).
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.changeInternalValue(nextProps.value);
-    }
-    hasValue(value) {
-        return !(0, isEmpty_1.default)(`${value}`);
-    }
-    // handles new input value and saves it in the state.
-    // the value stored in the state is used for rendering.
-    changeInternalValue(newValue = '') {
-        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-        if (this.state.inputValue === newValue) {
-            return;
-        }
-        this.setState(() => ({
-            inputValue: newValue,
-            showClear: this.hasValue(newValue),
-        }));
-    }
-    clearInputValue(event) {
-        const { onChange, onClear } = this.props;
-        this.changeInternalValue('', event);
-        onChange('', event);
-        if (onClear) {
-            onClear(event);
-        }
-    }
-    // it is always the value from the state which is used for rendering.
-    // reason: make it possible to use the component as a controlled or uncontrolled component.
-    // https://facebook.github.io/react/docs/uncontrolled-components.html
-    render() {
-        const filteredProps = (0, omit_1.default)(['value', 'defaultValue', 'onClear']);
-        const _a = this.props, { children, className, inputClassName, type, hasError, inputRef, autoComplete } = _a, customProps = tslib_1.__rest(_a, ["children", "className", "inputClassName", "type", "hasError", "inputRef", "autoComplete"]);
-        const { showClear, inputValue } = this.state;
-        const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-        const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton');
-        const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
-        const convertedType = type && type.toLowerCase();
-        const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
-        const inputProps = Object.assign(Object.assign({}, filteredProps(customProps)), { className: inputClassNames, type: inputType, value: inputValue, onChange: this.handleChange, onKeyPress: this.handleKeyPress, 
-            // ref={this.props.innerRef} is the equivalent of forwardRef
-            ref: inputRef || this.props.innerRef, autoComplete });
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children ? children(inputProps) : (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: this.clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
-    }
-}
-ClearableInput.defaultProps = {
-    type: exports.DEFAULT_TYPE,
-    className: '',
-    inputClassName: '',
-    hasError: false,
-    tabIndex: 0,
-    onChange: () => { },
-    onBlur: () => { },
-    onFocus: () => { },
-    onKeyPress: () => { },
-};
-ClearableInput.propTypes = {
-    className: prop_types_1.default.string,
-    inputClassName: prop_types_1.default.string,
-    onChange: prop_types_1.default.func,
-    onBlur: prop_types_1.default.func,
-    onFocus: prop_types_1.default.func,
-    onClear: prop_types_1.default.func,
-    onKeyPress: prop_types_1.default.func,
-    placeholder: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    type: prop_types_1.default.oneOf(exports.SUPPORTED_TYPES),
-    defaultValue: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    maxLength: prop_types_1.default.number,
-    tabIndex: prop_types_1.default.number,
-    hasError: prop_types_1.default.bool,
-    inputRef: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.object]),
-    autoComplete: prop_types_1.default.string,
-};
-exports.default = ClearableInput;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SUPPORTED_TYPES = exports.DEFAULT_TYPE = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+exports.DEFAULT_TYPE = 'text';
+exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
+const hasValue = (value) => !(0, isEmpty_1.default)(`${value}`);
+const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
+    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, inputClassName = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "inputClassName", "className", "children"]);
+    const initialValue = value || defaultValue || '';
+    const [inputValue, setInputValue] = (0, react_1.useState)(initialValue);
+    const [showClear, setShowClear] = (0, react_1.useState)(hasValue(initialValue));
+    const isControlled = !(0, isNil_1.default)(value);
+    // Handles new input value and saves it in the local state.
+    // The value stored in the state is used for rendering.
+    const changeInternalValue = (newValue = '') => {
+        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
+        if (inputValue === newValue) {
+            return;
+        }
+        setInputValue(newValue);
+        setShowClear(hasValue(newValue));
+    };
+    // important for when used as a controlled component and value changes from the outside.
+    const previousValue = (0, usePrevious_1.default)(value);
+    if (previousValue !== value) {
+        changeInternalValue(value);
+    }
+    // only gets triggered on user interaction.
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (isControlled) {
+            onChange(newValue, event);
+        }
+        else {
+            changeInternalValue(newValue);
+            onChange(newValue, event);
+        }
+    };
+    // Will be triggered on every key press but also when pressing 'Enter' for example
+    const handleKeyPress = (event) => {
+        onKeyPress(event);
+    };
+    const clearInputValue = (event) => {
+        changeInternalValue('');
+        onChange('', event);
+        if (onClear) {
+            onClear(event);
+        }
+    };
+    const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', className && className);
+    const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton');
+    const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
+    const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
+    const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
+    const inputProps = Object.assign(Object.assign({}, (0, omit_1.default)(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
+        onFocus,
+        maxLength,
+        tabIndex, ref: inputRef || ref });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+});
+exports.default = ClearableInput;

package/lib/es/components/collapse/Collapse.d.ts

@@ -1,59 +1,59 @@
-declare class Collapse extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {};
-    handleEnter(): void;
-    handleEntering(element: any): void;
-    handleEntered(): void;
-    handleExit(element: any): void;
-    handleExiting(): void;
-    handleExited(): void;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    getFullHeight(element: any): any;
-    render(): JSX.Element;
-    refTransition: Transition<HTMLElement | undefined> | null | undefined;
-}
-declare namespace Collapse {
-    namespace defaultProps {
-        const _in: boolean;
-        export { _in as in };
-        export const timeout: number;
-        export const mountOnEnter: boolean;
-        export const unmountOnExit: boolean;
-        export const appear: boolean;
-        export function onEnter(): void;
-        export function onEntering(): void;
-        export function onEntered(): void;
-        export function onExit(): void;
-        export function onExiting(): void;
-        export function onExited(): void;
-    }
-    namespace propTypes {
-        const _in_1: PropTypes.Validator<boolean>;
-        export { _in_1 as in };
-        const mountOnEnter_1: PropTypes.Requireable<boolean>;
-        export { mountOnEnter_1 as mountOnEnter };
-        const unmountOnExit_1: PropTypes.Requireable<boolean>;
-        export { unmountOnExit_1 as unmountOnExit };
-        const appear_1: PropTypes.Requireable<boolean>;
-        export { appear_1 as appear };
-        const timeout_1: PropTypes.Requireable<number>;
-        export { timeout_1 as timeout };
-        const onEnter_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEnter_1 as onEnter };
-        const onEntering_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEntering_1 as onEntering };
-        const onEntered_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEntered_1 as onEntered };
-        const onExit_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExit_1 as onExit };
-        const onExiting_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExiting_1 as onExiting };
-        const onExited_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExited_1 as onExited };
-    }
-}
-export default Collapse;
-import React from "react";
-import Transition from "react-transition-group/Transition";
-import PropTypes from "prop-types";
+declare class Collapse extends React.Component<any, any, any> {
+    constructor(props: any);
+    state: {};
+    handleEnter(): void;
+    handleEntering(element: any): void;
+    handleEntered(): void;
+    handleExit(element: any): void;
+    handleExiting(): void;
+    handleExited(): void;
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    getFullHeight(element: any): any;
+    render(): import("react/jsx-runtime").JSX.Element;
+    refTransition: Transition<HTMLElement | undefined> | null | undefined;
+}
+declare namespace Collapse {
+    namespace defaultProps {
+        const _in: boolean;
+        export { _in as in };
+        export const timeout: number;
+        export const mountOnEnter: boolean;
+        export const unmountOnExit: boolean;
+        export const appear: boolean;
+        export function onEnter(): void;
+        export function onEntering(): void;
+        export function onEntered(): void;
+        export function onExit(): void;
+        export function onExiting(): void;
+        export function onExited(): void;
+    }
+    namespace propTypes {
+        const _in_1: PropTypes.Validator<boolean>;
+        export { _in_1 as in };
+        const mountOnEnter_1: PropTypes.Requireable<boolean>;
+        export { mountOnEnter_1 as mountOnEnter };
+        const unmountOnExit_1: PropTypes.Requireable<boolean>;
+        export { unmountOnExit_1 as unmountOnExit };
+        const appear_1: PropTypes.Requireable<boolean>;
+        export { appear_1 as appear };
+        const timeout_1: PropTypes.Requireable<number>;
+        export { timeout_1 as timeout };
+        const onEnter_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEnter_1 as onEnter };
+        const onEntering_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEntering_1 as onEntering };
+        const onEntered_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onEntered_1 as onEntered };
+        const onExit_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExit_1 as onExit };
+        const onExiting_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExiting_1 as onExiting };
+        const onExited_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onExited_1 as onExited };
+    }
+}
+export default Collapse;
+import React from "react";
+import Transition from "react-transition-group/Transition";
+import PropTypes from "prop-types";