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

package/lib/es/components/browserWarning/BrowserIcons.d.ts

@@ -1,2 +1,2 @@
-export function ChromeIcon(): JSX.Element;
-export function FirefoxIcon(): JSX.Element;
+export function ChromeIcon(): import("react/jsx-runtime").JSX.Element;
+export function FirefoxIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/browserWarning/BrowserWarning.d.ts

@@ -1,5 +1,5 @@
 export default BrowserWarning;
-declare function BrowserWarning(props: any): JSX.Element;
+declare function BrowserWarning(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace BrowserWarning {
     namespace defaultProps {
         function onClose(): void;

package/lib/es/components/browserWarning/BrowserWarningMessageDE.d.ts

@@ -1,4 +1,4 @@
 export default BrowserWarningMessageDE;
 declare function BrowserWarningMessageDE({ onBrowserSelect }: {
     onBrowserSelect: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/browserWarning/BrowserWarningMessageEN.d.ts

@@ -1,4 +1,4 @@
 export default BrowserWarningMessageEN;
 declare function BrowserWarningMessageEN({ onBrowserSelect }: {
     onBrowserSelect: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 export default Button;
-declare function Button(props: any): JSX.Element;
+declare function Button(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace Button {
     const DEFAULT: string;
     const PRIMARY: string;

package/lib/es/components/button/ToggleButton.d.ts

@@ -1,5 +1,5 @@
 export default ToggleButton;
-declare function ToggleButton(props: any): JSX.Element;
+declare function ToggleButton(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace ToggleButton {
     const defaultProps: {
         active: boolean;

package/lib/es/components/carousel/CarouselCaption.d.ts

@@ -2,7 +2,7 @@ export default CarouselCaption;
 declare class CarouselCaption extends React.Component<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 declare namespace CarouselCaption {
     namespace defaultProps {

package/lib/es/components/carousel/CarouselItem.d.ts

@@ -10,7 +10,7 @@ declare class CarouselItem extends React.Component<any, any, any> {
     componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
     startAnimation(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 declare namespace CarouselItem {
     export { propTypes };

package/lib/es/components/charts/AreaChart.d.ts

@@ -1,5 +1,5 @@
 export default AreaChart;
-declare function AreaChart(props: any): JSX.Element;
+declare function AreaChart(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace AreaChart {
     namespace defaultProps {
         const width: number;
@@ -12,6 +12,6 @@ declare namespace AreaChart {
         const showYAxis: boolean;
         const showGrid: boolean;
         const brush: boolean;
-        const tooltip: JSX.Element;
+        const tooltip: import("react/jsx-runtime").JSX.Element;
     }
 }

package/lib/es/components/charts/AreaGradient.d.ts

@@ -2,7 +2,7 @@ export default AreaGradient;
 declare function AreaGradient({ id, color }: {
     id: any;
     color: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace AreaGradient {
     namespace defaultProps {
         const id: string;

package/lib/es/components/charts/BarChart.d.ts

@@ -1,5 +1,5 @@
 export default BarChart;
-declare function BarChart(props: any): JSX.Element;
+declare function BarChart(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace BarChart {
     namespace defaultProps {
         const width: number;
@@ -12,7 +12,7 @@ declare namespace BarChart {
         const showYAxis: boolean;
         const useDataColors: boolean;
         const brush: boolean;
-        const tooltip: JSX.Element;
+        const tooltip: import("react/jsx-runtime").JSX.Element;
         const legend: boolean;
     }
 }

package/lib/es/components/charts/ChartNeedle.d.ts

@@ -1,5 +1,5 @@
 export default ChartNeedle;
-declare function ChartNeedle(props: any): JSX.Element;
+declare function ChartNeedle(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartNeedle {
     namespace defaultProps {
         const width: string;

package/lib/es/components/charts/LineChart.d.ts

@@ -1,5 +1,5 @@
 export default LineChart;
-declare function LineChart(props: any): JSX.Element;
+declare function LineChart(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace LineChart {
     namespace defaultProps {
         const width: number;
@@ -11,6 +11,6 @@ declare namespace LineChart {
         const showYAxis: boolean;
         const showGrid: boolean;
         const brush: boolean;
-        const tooltip: JSX.Element;
+        const tooltip: import("react/jsx-runtime").JSX.Element;
     }
 }

package/lib/es/components/charts/PieChart.d.ts

@@ -1,5 +1,5 @@
 export default PieChart;
-declare function PieChart(props: any): JSX.Element;
+declare function PieChart(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace PieChart {
     namespace defaultProps {
         const width: string;
@@ -14,7 +14,7 @@ declare namespace PieChart {
         const labels: boolean;
         const innerLabels: boolean;
         const paddingAngle: number;
-        const legend: JSX.Element;
-        const tooltip: JSX.Element;
+        const legend: import("react/jsx-runtime").JSX.Element;
+        const tooltip: import("react/jsx-runtime").JSX.Element;
     }
 }

package/lib/es/components/charts/RadialBarChart.d.ts

@@ -1,5 +1,5 @@
 export default RadialBarChart;
-declare function RadialBarChart(props: any): JSX.Element;
+declare function RadialBarChart(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace RadialBarChart {
     namespace defaultProps {
         const width: number;
@@ -11,7 +11,7 @@ declare namespace RadialBarChart {
         const innerRadius: string;
         const outerRadius: string;
         const clockWise: boolean;
-        const legend: JSX.Element;
+        const legend: import("react/jsx-runtime").JSX.Element;
         const showBarLabel: boolean;
         const cornerRadius: number;
         const background: boolean;

package/lib/es/components/checkbox/Checkbox.d.ts

@@ -1,57 +1,127 @@
+import React, { type ReactNode, type PropsWithChildren } from 'react';
+declare const ICON_LABEL_VERTICAL = "vertical";
+declare const ICON_LABEL_HORIZONTAL = "horizontal";
+export type CheckboxProps = {
+    /**
+     * Passed through as HTML attribute to the underlying input.
+     * Set an `id` or a `name` otherwise.
+     */
+    id?: string;
+    /**
+     * Passed through as HTML attribute to the underlying input
+     */
+    name?: string;
+    /**
+     * Define some text or component as a label.
+     */
+    label?: string | ReactNode;
+    /**
+     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.
+     */
+    icon?: string;
+    /**
+     * The icon size in pixel.
+     */
+    iconSize?: number;
+    /**
+     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.
+     *
+     * Possible values are: `horizontal` or `vertical`.
+     */
+    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;
+    /**
+     * Callback function that is invoked when the checkbox is checked or unchecked.
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function that is invoked when the checkbox value changes.
+     * This will also be invoked by a keyboard event.
+     * @param event
+     * @returns
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Defines whether the checkbox is checked or not (state cannot be changed).
+     */
+    checked?: boolean;
+    /**
+     * Defines whether the checkbox is initially checked or not (state can be changed on click).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Defines whether the checkbox is disabled or not.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows for rendering a completely different layout with or without a checkbox tick.
+     * Note, when using the `custom` option, make sure to wrap the children with the class name
+     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name
+     * `checkbox-text`.
+     * @example
+     * <div className='checkbox-text-wrapper display-flex justify-content-between'>
+            <div className='margin-right-15'>
+                <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+                <div className='text-color-dark'>This option is a first option</div>
+            </div>
+            <div className='checkbox-text' />
+        </div>
+     */
+    custom?: boolean;
+    /**
+     * Defines whether the checkbox is required or not.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different
+     * selection state.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Defines whether the checkbox is applying an inline style. Use this in combination
+     * with other checkboxes.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Defines whether the checkbox is on the right side.
+     * @default false
+     */
+    right?: boolean;
+    /**
+     * Use "error" to change color of the checkbox.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.
+     *
+     * Possible values are:
+     * `large`
+     */
+    size?: 'large';
+    /**
+     * A React ref assigned to the input itself.
+     */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Number of the index used for keyboard support.
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Additional classes to be set on the input field.
+     */
+    className?: string;
+};
+declare const Checkbox: {
+    (props: PropsWithChildren<CheckboxProps>): import("react/jsx-runtime").JSX.Element;
+    ICON_LABEL_VERTICAL: "vertical";
+    ICON_LABEL_HORIZONTAL: "horizontal";
+};
 export default Checkbox;
-declare function Checkbox(props: any): JSX.Element;
-declare namespace Checkbox {
-    const ICON_LABEL_VERTICAL: string;
-    const ICON_LABEL_HORIZONTAL: string;
-    namespace defaultProps {
-        export const inline: boolean;
-        export const error: boolean;
-        export const disabled: boolean;
-        export const custom: boolean;
-        export const indeterminate: boolean;
-        export const required: boolean;
-        export const tabIndex: number;
-        export const icon: string;
-        export const iconSize: number;
-        import iconLabelPosition = Checkbox.ICON_LABEL_VERTICAL;
-        export { iconLabelPosition };
-        export function onClick(): void;
-        export function onChange(): void;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<string>;
-        export const name: PropTypes.Requireable<string>;
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const icon_1: PropTypes.Requireable<string>;
-        export { icon_1 as icon };
-        const iconSize_1: PropTypes.Requireable<number>;
-        export { iconSize_1 as iconSize };
-        const iconLabelPosition_1: PropTypes.Requireable<string>;
-        export { iconLabelPosition_1 as iconLabelPosition };
-        const onClick_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onClick_1 as onClick };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        export const checked: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
-        export const defaultChecked: PropTypes.Requireable<boolean>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const custom_1: PropTypes.Requireable<boolean>;
-        export { custom_1 as custom };
-        const required_1: PropTypes.Requireable<boolean>;
-        export { required_1 as required };
-        const indeterminate_1: PropTypes.Requireable<boolean>;
-        export { indeterminate_1 as indeterminate };
-        export const className: PropTypes.Requireable<string>;
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        export const right: PropTypes.Requireable<boolean>;
-        const error_1: PropTypes.Requireable<boolean>;
-        export { error_1 as error };
-        export const size: PropTypes.Requireable<string>;
-        export const inputRef: PropTypes.Requireable<(...args: any[]) => any>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/checkbox/Checkbox.js

@@ -2,34 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const CheckboxIcon = props => {
-    const { icon, iconSize, iconLabelPosition, text } = props;
-    const iconStyles = {
-        width: `${iconSize}px`,
-        height: `${iconSize}px`,
-        fontSize: `${iconSize}px`,
-        lineHeight: `${iconSize}px`,
-    };
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
-};
-const Checkbox = props => {
-    const { checked, children, className, custom, defaultChecked, disabled, error, icon, iconLabelPosition, iconSize, id = props.name, indeterminate, inline, inputRef, label, name, onChange, onClick, required, right, size, tabIndex } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"]);
-    const labelRef = (0, react_1.useRef)();
-    const getInput = () => labelRef.current.firstChild;
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const CheckboxIcon_1 = require("./CheckboxIcon");
+const DEFAULT_ICON_SIZE = 16;
+const ICON_LABEL_VERTICAL = 'vertical';
+const ICON_LABEL_HORIZONTAL = 'horizontal';
+const Checkbox = (props) => {
+    const { checked, children, className, custom = false, defaultChecked, disabled = false, error = false, icon = '', iconLabelPosition = ICON_LABEL_VERTICAL, iconSize = DEFAULT_ICON_SIZE, id = props.name, indeterminate = false, inline = false, inputRef, label, name, onChange = noop_1.default, onClick = noop_1.default, required = false, right, size, tabIndex = 0 } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"]);
+    const labelRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        const input = getInput();
-        input.indeterminate = indeterminate;
-    }, [indeterminate]);
-    const handleToggleKeyDown = event => {
-        switch (event.keyCode) {
-            case 32:
+        var _a;
+        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+        if (input) {
+            input.indeterminate = indeterminate;
+        }
+    }, [indeterminate, labelRef.current]);
+    const handleToggleKeyDown = (event) => {
+        switch (event.key) {
+            case ' ':
                 // toggle on space
                 toggle(event);
                 break;
-            case 13:
+            case 'Enter':
                 // open on enter
                 toggle(event);
                 break;
@@ -37,12 +33,13 @@ const Checkbox = props => {
                 break;
         }
     };
-    const toggle = event => {
+    const toggle = (event) => {
+        var _a;
         event.preventDefault();
         if (disabled) {
             return;
         }
-        const input = getInput();
+        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
         if (input.indeterminate) {
             input.indeterminate = false;
         }
@@ -56,45 +53,8 @@ const Checkbox = props => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
-};
-Checkbox.ICON_LABEL_VERTICAL = 'vertical';
-Checkbox.ICON_LABEL_HORIZONTAL = 'horizontal';
-Checkbox.defaultProps = {
-    inline: false,
-    error: false,
-    disabled: false,
-    custom: false,
-    indeterminate: false,
-    required: false,
-    tabIndex: 0,
-    icon: '',
-    iconSize: 16,
-    iconLabelPosition: Checkbox.ICON_LABEL_VERTICAL,
-    onClick: () => { },
-    onChange: () => { },
-};
-Checkbox.propTypes = {
-    id: prop_types_1.default.string,
-    name: prop_types_1.default.string,
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    icon: prop_types_1.default.string,
-    iconSize: prop_types_1.default.number,
-    iconLabelPosition: prop_types_1.default.oneOf([Checkbox.ICON_LABEL_VERTICAL, Checkbox.ICON_LABEL_HORIZONTAL]),
-    onClick: prop_types_1.default.func.isRequired,
-    onChange: prop_types_1.default.func,
-    checked: prop_types_1.default.oneOfType([prop_types_1.default.bool, prop_types_1.default.string]),
-    defaultChecked: prop_types_1.default.bool,
-    disabled: prop_types_1.default.bool,
-    custom: prop_types_1.default.bool,
-    required: prop_types_1.default.bool,
-    indeterminate: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    inline: prop_types_1.default.bool,
-    right: prop_types_1.default.bool,
-    error: prop_types_1.default.bool,
-    size: prop_types_1.default.string,
-    inputRef: prop_types_1.default.func,
-    tabIndex: prop_types_1.default.number,
+    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && ((0, jsx_runtime_1.jsx)(CheckboxIcon_1.CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-text' }, { children: (0, jsx_runtime_1.jsx)("span", { children: text }) }))), renderCustomContent && children] })));
 };
+Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
+Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;
 exports.default = Checkbox;

package/lib/es/components/checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type CheckboxIconProps = {
+    icon: string;
+    iconSize: number;
+    iconLabelPosition: 'vertical' | 'horizontal';
+    text?: string | ReactNode;
+};
+export declare const CheckboxIcon: (props: CheckboxIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/es/components/checkbox/CheckboxIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckboxIcon = (props) => {
+    const { icon, iconSize, iconLabelPosition, text } = props;
+    const iconStyles = {
+        width: `${iconSize}px`,
+        height: `${iconSize}px`,
+        fontSize: `${iconSize}px`,
+        lineHeight: `${iconSize}px`,
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `checkbox-icon label-${iconLabelPosition}` }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, style: iconStyles }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'checkbox-label' }, { children: text }))] })));
+};
+exports.CheckboxIcon = CheckboxIcon;

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

@@ -1,59 +1,96 @@
-export const DEFAULT_TYPE: "text";
-export const SUPPORTED_TYPES: string[];
+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;
-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";