@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

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

@@ -1,170 +1,60 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var CheckboxIcon = function CheckboxIcon(props) {
-  var icon = props.icon,
-    iconSize = props.iconSize,
-    iconLabelPosition = props.iconLabelPosition,
-    text = props.text;
-  var iconStyles = {
-    width: "".concat(iconSize, "px"),
-    height: "".concat(iconSize, "px"),
-    fontSize: "".concat(iconSize, "px"),
-    lineHeight: "".concat(iconSize, "px")
-  };
-  return /*#__PURE__*/_react["default"].createElement("span", {
-    className: "checkbox-icon label-".concat(iconLabelPosition)
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph ".concat(icon),
-    style: iconStyles
-  }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "checkbox-label"
-  }, text));
-};
-var Checkbox = function Checkbox(props) {
-  var checked = props.checked,
-    children = props.children,
-    className = props.className,
-    custom = props.custom,
-    defaultChecked = props.defaultChecked,
-    disabled = props.disabled,
-    error = props.error,
-    icon = props.icon,
-    iconLabelPosition = props.iconLabelPosition,
-    iconSize = props.iconSize,
-    _props$id = props.id,
-    id = _props$id === void 0 ? props.name : _props$id,
-    indeterminate = props.indeterminate,
-    inline = props.inline,
-    inputRef = props.inputRef,
-    label = props.label,
-    name = props.name,
-    onChange = props.onChange,
-    onClick = props.onClick,
-    required = props.required,
-    right = props.right,
-    size = props.size,
-    tabIndex = props.tabIndex,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var labelRef = (0, _react.useRef)();
-  var getInput = function getInput() {
-    return labelRef.current.firstChild;
-  };
-  (0, _react.useEffect)(function () {
-    var input = getInput();
-    input.indeterminate = indeterminate;
-  }, [indeterminate]);
-  var handleToggleKeyDown = function handleToggleKeyDown(event) {
-    switch (event.keyCode) {
-      case 32:
-        // toggle on space
-        toggle(event);
-        break;
-      case 13:
-        // open on enter
-        toggle(event);
-        break;
-      default:
-        break;
-    }
-  };
-  var toggle = function toggle(event) {
-    event.preventDefault();
-    if (disabled) {
-      return;
-    }
-    var input = getInput();
-    if (input.indeterminate) {
-      input.indeterminate = false;
-    }
-    input.checked = !input.checked;
-    onClick(event);
-    onChange(event);
-  };
-  var text = label || children;
-  var labelClassnames = (0, _classnames["default"])('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-  var inputClassnames = (0, _classnames["default"])(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
-  var renderCustomIcon = !!icon;
-  var renderCustomContent = custom && children;
-  var renderDefault = !icon && !custom;
-  return /*#__PURE__*/_react["default"].createElement("label", (0, _extends2["default"])({}, remainingProps, {
-    className: labelClassnames,
-    tabIndex: tabIndex,
-    htmlFor: id,
-    onKeyDown: handleToggleKeyDown,
-    ref: labelRef
-  }), /*#__PURE__*/_react["default"].createElement("input", {
-    id: id,
-    name: name,
-    type: "checkbox",
-    checked: checked,
-    required: required,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    className: inputClassnames,
-    onClick: onClick,
-    onChange: onChange,
-    ref: inputRef
-  }), renderCustomIcon && /*#__PURE__*/_react["default"].createElement(CheckboxIcon, {
-    icon: icon,
-    iconSize: iconSize,
-    iconLabelPosition: iconLabelPosition,
-    text: text
-  }), renderDefault && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "checkbox-text"
-  }, /*#__PURE__*/_react["default"].createElement("span", null, 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: function onClick() {},
-  onChange: function onChange() {}
-};
-Checkbox.propTypes = {
-  id: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  icon: _propTypes["default"].string,
-  iconSize: _propTypes["default"].number,
-  iconLabelPosition: _propTypes["default"].oneOf([Checkbox.ICON_LABEL_VERTICAL, Checkbox.ICON_LABEL_HORIZONTAL]),
-  onClick: _propTypes["default"].func.isRequired,
-  onChange: _propTypes["default"].func,
-  checked: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
-  defaultChecked: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  custom: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  indeterminate: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  inline: _propTypes["default"].bool,
-  right: _propTypes["default"].bool,
-  error: _propTypes["default"].bool,
-  size: _propTypes["default"].string,
-  inputRef: _propTypes["default"].func,
-  tabIndex: _propTypes["default"].number
-};
-var _default = Checkbox;
-exports["default"] = _default;
+"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 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)(() => {
+        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 'Enter':
+                // open on enter
+                toggle(event);
+                break;
+            default:
+                break;
+        }
+    };
+    const toggle = (event) => {
+        var _a;
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const input = (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.firstChild;
+        if (input.indeterminate) {
+            input.indeterminate = false;
+        }
+        input.checked = !input.checked;
+        onClick(event);
+        onChange(event);
+    };
+    const text = label || children;
+    const labelClassnames = (0, classnames_1.default)('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+    const inputClassnames = (0, classnames_1.default)(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+    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_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

@@ -0,0 +1,96 @@
+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,194 +1,71 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.SUPPORTED_TYPES = exports.DEFAULT_TYPE = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _omit = _interopRequireDefault(require("lodash/fp/omit"));
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["children", "className", "inputClassName", "type", "hasError", "inputRef", "autoComplete"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var DEFAULT_TYPE = 'text';
-exports.DEFAULT_TYPE = DEFAULT_TYPE;
-var SUPPORTED_TYPES = ['text', 'password', 'email'];
-exports.SUPPORTED_TYPES = SUPPORTED_TYPES;
-var ClearableInput = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ClearableInput, _React$Component);
-  var _super = _createSuper(ClearableInput);
-  function ClearableInput(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, ClearableInput);
-    _this = _super.call(this, props);
-    var 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["default"])(props.value)
-    };
-    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleKeyPress = _this.handleKeyPress.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.clearInputValue = _this.clearInputValue.bind((0, _assertThisInitialized2["default"])(_this));
-    return _this;
-  }
-
-  // only gets triggered on user interaction.
-  (0, _createClass2["default"])(ClearableInput, [{
-    key: "handleChange",
-    value: function handleChange(event) {
-      var isControlled = this.state.isControlled;
-      var onChange = this.props.onChange;
-      var 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
-  }, {
-    key: "handleKeyPress",
-    value: function handleKeyPress(event) {
-      var onKeyPress = this.props.onKeyPress;
-      onKeyPress(event);
-    }
-
-    // important for when used as a controlled component (value from outside).
-    // eslint-disable-next-line camelcase
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.changeInternalValue(nextProps.value);
-    }
-  }, {
-    key: "hasValue",
-    value: function hasValue(value) {
-      return !(0, _isEmpty["default"])("".concat(value));
-    }
-
-    // handles new input value and saves it in the state.
-    // the value stored in the state is used for rendering.
-  }, {
-    key: "changeInternalValue",
-    value: function changeInternalValue() {
-      var _this2 = this;
-      var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-      if (this.state.inputValue === newValue) {
-        return;
-      }
-      this.setState(function () {
-        return {
-          inputValue: newValue,
-          showClear: _this2.hasValue(newValue)
-        };
-      });
-    }
-  }, {
-    key: "clearInputValue",
-    value: function clearInputValue(event) {
-      var _this$props = this.props,
-        onChange = _this$props.onChange,
-        onClear = _this$props.onClear;
-      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
-  }, {
-    key: "render",
-    value: function render() {
-      var filteredProps = (0, _omit["default"])(['value', 'defaultValue', 'onClear']);
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        inputClassName = _this$props2.inputClassName,
-        type = _this$props2.type,
-        hasError = _this$props2.hasError,
-        inputRef = _this$props2.inputRef,
-        autoComplete = _this$props2.autoComplete,
-        customProps = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
-      var _this$state = this.state,
-        showClear = _this$state.showClear,
-        inputValue = _this$state.inputValue;
-      var classes = (0, _classnames["default"])('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-      var inputClassNames = (0, _classnames["default"])('form-control', inputClassName, showClear && 'withClearButton');
-      var clearButtonClassNames = (0, _classnames["default"])('clearButton', !showClear && 'hide');
-      var convertedType = type && type.toLowerCase();
-      var inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-      var inputProps = _objectSpread(_objectSpread({}, 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: autoComplete
-      });
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes
-      }, children ? children(inputProps) : /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-        className: clearButtonClassNames,
-        onClick: this.clearInputValue
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'clearButtonIcon rioglyph rioglyph-remove-sign'
-      })));
-    }
-  }]);
-  return ClearableInput;
-}(_react["default"].Component);
-ClearableInput.defaultProps = {
-  type: DEFAULT_TYPE,
-  className: '',
-  inputClassName: '',
-  hasError: false,
-  tabIndex: 0,
-  onChange: function onChange() {},
-  onBlur: function onBlur() {},
-  onFocus: function onFocus() {},
-  onKeyPress: function onKeyPress() {}
-};
-ClearableInput.propTypes = {
-  className: _propTypes["default"].string,
-  inputClassName: _propTypes["default"].string,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onClear: _propTypes["default"].func,
-  onKeyPress: _propTypes["default"].func,
-  placeholder: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  type: _propTypes["default"].oneOf(SUPPORTED_TYPES),
-  defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  maxLength: _propTypes["default"].number,
-  tabIndex: _propTypes["default"].number,
-  hasError: _propTypes["default"].bool,
-  inputRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object]),
-  autoComplete: _propTypes["default"].string
-};
-var _default = ClearableInput;
-exports["default"] = _default;
+"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;