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

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

@@ -1,170 +1,100 @@
 "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));
+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 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 }))] })));
 };
-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);
+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;
+    (0, react_1.useEffect)(() => {
+        const input = getInput();
+        input.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const handleToggleKeyDown = event => {
+        switch (event.keyCode) {
+            case 32:
+                // toggle on space
+                toggle(event);
+                break;
+            case 13:
+                // open on enter
+                toggle(event);
+                break;
+            default:
+                break;
+        }
+    };
+    const toggle = event => {
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        const input = getInput();
+        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, { 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: function onClick() {},
-  onChange: function onChange() {}
+    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: _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
+    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,
 };
-var _default = Checkbox;
-exports["default"] = _default;
+exports.default = Checkbox;

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

@@ -0,0 +1,59 @@
+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";

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

@@ -1,194 +1,121 @@
 "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);
-      }
+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
-  }, {
-    key: "handleKeyPress",
-    value: function handleKeyPress(event) {
-      var onKeyPress = this.props.onKeyPress;
-      onKeyPress(event);
+    handleKeyPress(event) {
+        const { onKeyPress } = this.props;
+        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);
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.changeInternalValue(nextProps.value);
     }
-  }, {
-    key: "hasValue",
-    value: function hasValue(value) {
-      return !(0, _isEmpty["default"])("".concat(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.
-  }, {
-    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)
-        };
-      });
+    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),
+        }));
     }
-  }, {
-    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);
-      }
+    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
-  }, {
-    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'
-      })));
+    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' }) }))] })));
     }
-  }]);
-  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() {}
+    type: exports.DEFAULT_TYPE,
+    className: '',
+    inputClassName: '',
+    hasError: false,
+    tabIndex: 0,
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+    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
+    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,
 };
-var _default = ClearableInput;
-exports["default"] = _default;
+exports.default = ClearableInput;