rsuite 5.0.0 → 5.1.0

package/esm/FlexboxGrid/FlexboxGrid.js

@@ -4,18 +4,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import FlexboxGridItem from './FlexboxGridItem';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'flex-box-grid',
-  align: 'top',
-  justify: 'start'
-};
 var FlexboxGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
-      align = props.align,
-      justify = props.justify,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'flex-box-grid' : _props$classPrefix,
+      _props$align = props.align,
+      align = _props$align === void 0 ? 'top' : _props$align,
+      _props$justify = props.justify,
+      justify = _props$justify === void 0 ? 'start' : _props$justify,
       rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "align", "justify"]);
 
   var _useClassNames = useClassNames(classPrefix),
@@ -30,7 +28,6 @@ var FlexboxGrid = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 FlexboxGrid.Item = FlexboxGridItem;
 FlexboxGrid.displayName = 'FlexboxGrid';
-FlexboxGrid.defaultProps = defaultProps;
 FlexboxGrid.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,

package/esm/FlexboxGrid/FlexboxGridItem.js

@@ -3,20 +3,18 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'flex-box-grid-item',
-  colspan: 0,
-  order: 0
-};
 var FlexboxGridItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _withClassPrefix;
 
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
-      colspan = props.colspan,
-      order = props.order,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'flex-box-grid-item' : _props$classPrefix,
+      _props$colspan = props.colspan,
+      colspan = _props$colspan === void 0 ? 0 : _props$colspan,
+      _props$order = props.order,
+      order = _props$order === void 0 ? 0 : _props$order,
       rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "colspan", "order"]);
 
   var _useClassNames = useClassNames(classPrefix),
@@ -31,7 +29,6 @@ var FlexboxGridItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 FlexboxGridItem.displayName = 'FlexboxGridItem';
-FlexboxGridItem.defaultProps = defaultProps;
 FlexboxGridItem.propTypes = {
   as: PropTypes.elementType,
   className: PropTypes.string,

package/esm/Form/Form.js

@@ -12,24 +12,22 @@ import FormControlLabel from '../FormControlLabel';
 import FormErrorMessage from '../FormErrorMessage';
 import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
-var defaultProps = {
-  checkTrigger: 'change',
-  classPrefix: 'form',
-  errorFromContext: true,
-  formDefaultValue: {},
-  layout: 'vertical',
-  model: SchemaModel({})
-};
 var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var checkTrigger = props.checkTrigger,
-      classPrefix = props.classPrefix,
-      errorFromContext = props.errorFromContext,
-      formDefaultValue = props.formDefaultValue,
+  var _props$checkTrigger = props.checkTrigger,
+      checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,
+      _props$errorFromConte = props.errorFromContext,
+      errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
+      _props$formDefaultVal = props.formDefaultValue,
+      formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
       formValue = props.formValue,
       formError = props.formError,
       fluid = props.fluid,
-      layout = props.layout,
-      model = props.model,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      _props$model = props.model,
+      model = _props$model === void 0 ? SchemaModel({}) : _props$model,
       readOnly = props.readOnly,
       plaintext = props.plaintext,
       className = props.className,
@@ -268,7 +266,6 @@ Form.Group = FormGroup;
 Form.HelpText = FormHelpText;
 Form.Control = FormControl;
 Form.displayName = 'Form';
-Form.defaultProps = defaultProps;
 Form.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,

package/esm/FormControl/FormControl.js

@@ -123,14 +123,18 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }
 
-  var ariaDescribedby = controlId ? controlId + "-" + (messageNode ? 'error-message' : 'help-text') : null;
+  var ariaDescribedby = controlId ? controlId + "-help-text" : null;
+  var fieldHasError = Boolean(messageNode);
+  var ariaErrormessage = fieldHasError && controlId ? controlId + "-error-message" : undefined;
   return /*#__PURE__*/React.createElement(Component, {
     className: classes,
     ref: ref
   }, /*#__PURE__*/React.createElement(AccepterComponent, _extends({
     id: controlId,
     "aria-labelledby": controlId ? controlId + "-control-label" : null,
-    "aria-describedby": ariaDescribedby
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": fieldHasError || undefined,
+    "aria-errormessage": ariaErrormessage
   }, rest, {
     readOnly: readOnly,
     plaintext: plaintext,

package/esm/IconButton/IconButton.js

@@ -4,16 +4,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
 import { useClassNames } from '../utils';
-var defaultProps = {
-  classPrefix: 'btn-icon',
-  placement: 'left'
-};
 var IconButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var icon = props.icon,
-      placement = props.placement,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'left' : _props$placement,
       children = props.children,
       circle = props.circle,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'btn-icon' : _props$classPrefix,
       className = props.className,
       rest = _objectWithoutPropertiesLoose(props, ["icon", "placement", "children", "circle", "classPrefix", "className"]);
 
@@ -31,7 +29,6 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), icon, children);
 });
 IconButton.displayName = 'IconButton';
-IconButton.defaultProps = defaultProps;
 IconButton.propTypes = {
   className: PropTypes.string,
   icon: PropTypes.any,

package/esm/Input/Input.js

@@ -6,16 +6,14 @@ import { FormGroupContext } from '../FormGroup/FormGroup';
 import { InputGroupContext } from '../InputGroup/InputGroup';
 import Plaintext from '../Plaintext';
 import { createChainedFunction, TypeChecker, mergeRefs, useClassNames, KEY_VALUES } from '../utils';
-var defaultProps = {
-  as: 'input',
-  classPrefix: 'input',
-  type: 'text'
-};
 var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
-      classPrefix = props.classPrefix,
-      Component = props.as,
-      type = props.type,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'input' : _props$classPrefix,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'input' : _props$as,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
       disabled = props.disabled,
       value = props.value,
       defaultValue = props.defaultValue,
@@ -84,7 +82,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 Input.displayName = 'Input';
-Input.defaultProps = defaultProps;
 Input.propTypes = {
   type: PropTypes.string,
   as: PropTypes.elementType,

package/esm/InputNumber/InputNumber.js

@@ -75,19 +75,12 @@ function disableMinValue(value, min) {
   return false;
 }
 
-var defaultProps = {
-  as: InputGroup,
-  classPrefix: 'input-number',
-  min: -Infinity,
-  max: Infinity,
-  step: 1,
-  buttonAppearance: 'subtle',
-  scrollable: true
-};
 var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? InputGroup : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'input-number' : _props$classPrefix,
       disabled = props.disabled,
       readOnly = props.readOnly,
       plaintext = props.plaintext,
@@ -96,11 +89,16 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       prefixElement = props.prefix,
       postfix = props.postfix,
-      step = props.step,
-      buttonAppearance = props.buttonAppearance,
-      min = props.min,
-      max = props.max,
-      scrollable = props.scrollable,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$buttonAppearan = props.buttonAppearance,
+      buttonAppearance = _props$buttonAppearan === void 0 ? 'subtle' : _props$buttonAppearan,
+      _props$min = props.min,
+      min = _props$min === void 0 ? -Infinity : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? Infinity : _props$max,
+      _props$scrollable = props.scrollable,
+      scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
       onChange = props.onChange,
       onWheel = props.onWheel,
       restProps = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
@@ -246,7 +244,6 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(AngleDownIcon, null))), postfix && /*#__PURE__*/React.createElement(InputGroupAddon, null, postfix));
 });
 InputNumber.displayName = 'InputNumber';
-InputNumber.defaultProps = defaultProps;
 InputNumber.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,

package/esm/InputPicker/InputAutosize.js

@@ -29,7 +29,8 @@ var copyStyles = function copyStyles(styles, node) {
  * @param placeholderRef
  */
 var useInputWidth = function useInputWidth(props, sizerRef, placeholderRef) {
-  var minWidth = props.minWidth,
+  var _props$minWidth = props.minWidth,
+      minWidth = _props$minWidth === void 0 ? 1 : _props$minWidth,
       placeholder = props.placeholder,
       value = props.value,
       onAutosize = props.onAutosize;
@@ -170,7 +171,4 @@ InputAutosize.propTypes = {
   value: PropTypes.any,
   onAutosize: PropTypes.func
 };
-InputAutosize.defaultProps = {
-  minWidth: 1
-};
 export default InputAutosize;

package/esm/InputPicker/InputPicker.js

@@ -24,51 +24,49 @@ import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import InputSearch from './InputSearch';
 export var InputPickerContext = /*#__PURE__*/React.createContext({});
-var defaultProps = {
-  as: 'div',
-  appearance: 'default',
-  cleanable: true,
-  cacheData: [],
-  classPrefix: 'picker',
-  data: [],
-  disabledItemValues: [],
-  valueKey: 'value',
-  labelKey: 'label',
-  placement: 'bottomStart',
-  searchable: true,
-  menuAutoWidth: true,
-  menuMaxHeight: 320
-};
 var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _merge;
 
-  var Component = props.as,
-      cleanable = props.cleanable,
-      cacheData = props.cacheData,
-      classPrefix = props.classPrefix,
-      controlledData = props.data,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      _props$cleanable = props.cleanable,
+      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+      _props$cacheData = props.cacheData,
+      cacheData = _props$cacheData === void 0 ? [] : _props$cacheData,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+      _props$data = props.data,
+      controlledData = _props$data === void 0 ? [] : _props$data,
       disabled = props.disabled,
       readOnly = props.readOnly,
       plaintext = props.plaintext,
       defaultValue = props.defaultValue,
       defaultOpen = props.defaultOpen,
-      disabledItemValues = props.disabledItemValues,
+      _props$disabledItemVa = props.disabledItemValues,
+      disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
       overrideLocale = props.locale,
       toggleAs = props.toggleAs,
       style = props.style,
-      searchable = props.searchable,
+      _props$searchable = props.searchable,
+      searchable = _props$searchable === void 0 ? true : _props$searchable,
       controlledOpen = props.open,
       placeholder = props.placeholder,
       groupBy = props.groupBy,
       menuClassName = props.menuClassName,
       menuStyle = props.menuStyle,
-      menuAutoWidth = props.menuAutoWidth,
-      menuMaxHeight = props.menuMaxHeight,
+      _props$menuAutoWidth = props.menuAutoWidth,
+      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       creatable = props.creatable,
       valueProp = props.value,
-      valueKey = props.valueKey,
+      _props$valueKey = props.valueKey,
+      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
       virtualized = props.virtualized,
-      labelKey = props.labelKey,
+      _props$labelKey = props.labelKey,
+      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
       listProps = props.listProps,
       id = props.id,
       tabIndex = props.tabIndex,
@@ -92,8 +90,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       searchBy = props.searchBy,
-      placement = props.placement,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
 
   var _useContext = useContext(InputPickerContext),
       multi = _useContext.multi,
@@ -642,8 +641,11 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var hasValue = multi ? !!(tagElements !== null && tagElements !== void 0 && tagElements.length) || hasMultiValue : isValid || hasSingleValue;
 
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
+    classPrefix: classPrefix,
+    appearance: appearance,
     hasValue: hasValue,
-    name: 'input'
+    name: 'input',
+    cleanable: cleanable
   })),
       pickerClasses = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
@@ -694,6 +696,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: onPickerKeyDown
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
+    appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
     ref: targetRef,
@@ -720,7 +723,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })))));
 });
 InputPicker.displayName = 'InputPicker';
-InputPicker.defaultProps = defaultProps;
 InputPicker.propTypes = _extends({}, listPickerPropTypes, {
   locale: PropTypes.any,
   appearance: PropTypes.oneOf(['default', 'subtle']),

package/esm/List/List.js

@@ -6,25 +6,23 @@ import useSortHelper from './helper/useSortHelper';
 import { mergeRefs, useClassNames } from '../utils';
 import ListContext from './ListContext';
 import ListItem from './ListItem';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'list',
-  size: 'md',
-  autoScroll: true,
-  pressDelay: 0,
-  transitionDuration: 300
-};
 var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'list' : _props$classPrefix,
       className = props.className,
       bordered = props.bordered,
       hover = props.hover,
-      size = props.size,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
       sortable = props.sortable,
-      autoScroll = props.autoScroll,
-      pressDelay = props.pressDelay,
-      transitionDuration = props.transitionDuration,
+      _props$autoScroll = props.autoScroll,
+      autoScroll = _props$autoScroll === void 0 ? true : _props$autoScroll,
+      _props$pressDelay = props.pressDelay,
+      pressDelay = _props$pressDelay === void 0 ? 0 : _props$pressDelay,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
       children = props.children,
       onSort = props.onSort,
       onSortEnd = props.onSortEnd,
@@ -77,7 +75,6 @@ var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 List.Item = ListItem;
 List.displayName = 'List';
-List.defaultProps = defaultProps;
 List.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,

package/esm/List/ListItem.js

@@ -5,17 +5,15 @@ import PropTypes from 'prop-types';
 import { useContext, useEffect, useRef } from 'react';
 import { mergeRefs, useClassNames } from '../utils';
 import ListContext from './ListContext';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'list-item',
-  collection: 0
-};
 var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       children = props.children,
       className = props.className,
-      classPrefix = props.classPrefix,
-      collection = props.collection,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'list-item' : _props$classPrefix,
+      _props$collection = props.collection,
+      collection = _props$collection === void 0 ? 0 : _props$collection,
       disabled = props.disabled,
       index = props.index,
       rest = _objectWithoutPropertiesLoose(props, ["as", "children", "className", "classPrefix", "collection", "disabled", "index"]);
@@ -57,7 +55,6 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 ListItem.displayName = 'ListItem';
-ListItem.defaultProps = defaultProps;
 ListItem.propTypes = {
   index: PropTypes.number,
   collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/esm/Loader/Loader.js

@@ -3,18 +3,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'loader',
-  speed: 'normal'
-};
 var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'loader' : _props$classPrefix,
       className = props.className,
       inverse = props.inverse,
       backdrop = props.backdrop,
-      speed = props.speed,
+      _props$speed = props.speed,
+      speed = _props$speed === void 0 ? 'normal' : _props$speed,
       center = props.center,
       vertical = props.vertical,
       content = props.content,
@@ -51,7 +49,6 @@ var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, content)));
 });
 Loader.displayName = 'Loader';
-Loader.defaultProps = defaultProps;
 Loader.propTypes = {
   as: PropTypes.elementType,
   className: PropTypes.string,

package/esm/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MaskType, MaskFunctionType, ConfigType } from './types';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+interface TextMaskProps {
+    /**
+     * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
+     */
+    guide?: boolean;
+    /**
+     * `mask` is an array or a function that defines how the user input is going to be masked.
+     */
+    mask?: MaskType | MaskFunctionType | boolean;
+    /**
+     * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
+     * in place of the regular placeholder when the input element value is empty.
+     */
+    showMask?: boolean;
+    /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
+    placeholderChar?: string;
+    /** `keepCharPositions` changes the general behavior of the Text Mask component. */
+    keepCharPositions?: boolean;
+    /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
+    pipe?: (conformedValue: string, config: ConfigType) => string;
+}
+export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+};
+declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
+    /** Custom rendering DOM */
+    render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string | number;
+    readOnly?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default MaskedInput;

package/esm/MaskedInput/MaskedInput.js

@@ -0,0 +1,67 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useRef } from 'react';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+import createTextMaskInputElement from './createTextMaskInputElement';
+import { mergeRefs } from '../utils';
+/**
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
+ */
+
+var defaultRender = function defaultRender(ref, props) {
+  return /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref
+  }, props));
+};
+
+var MaskedInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var mask = props.mask,
+      _props$guide = props.guide,
+      guide = _props$guide === void 0 ? true : _props$guide,
+      placeholderChar = props.placeholderChar,
+      value = props.value,
+      showMask = props.showMask,
+      pipe = props.pipe,
+      _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
+
+  var inputRef = useRef(null);
+  var textMaskInputElement = useRef();
+  var initTextMask = useCallback(function () {
+    var _textMaskInputElement;
+
+    textMaskInputElement.current = createTextMaskInputElement(_extends({
+      inputElement: inputRef.current
+    }, props));
+    (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
+  }, [props, value]);
+  var handleChange = useCallback(function (event) {
+    var _textMaskInputElement2;
+
+    (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
+  useEffect(function () {
+    initTextMask();
+  }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
+  return render(mergeRefs(inputRef, ref), _extends({
+    onChange: handleChange,
+    defaultValue: value
+  }, omit(rest, ['keepCharPositions'])));
+});
+MaskedInput.displayName = 'MaskedInput';
+MaskedInput.propTypes = {
+  render: PropTypes.func,
+  onChange: PropTypes.func,
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.bool]).isRequired,
+  guide: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  pipe: PropTypes.func,
+  placeholderChar: PropTypes.string,
+  keepCharPositions: PropTypes.bool,
+  showMask: PropTypes.bool
+};
+export default MaskedInput;

package/esm/MaskedInput/adjustCaretPosition.d.ts

@@ -0,0 +1,11 @@
+export default function adjustCaretPosition({ previousConformedValue, previousPlaceholder, currentCaretPosition, conformedValue, rawValue, placeholderChar, placeholder, indexesOfPipedChars, caretTrapIndexes }: {
+    previousConformedValue?: string;
+    previousPlaceholder?: string;
+    currentCaretPosition?: number;
+    conformedValue: any;
+    rawValue: any;
+    placeholderChar: any;
+    placeholder: any;
+    indexesOfPipedChars?: any[];
+    caretTrapIndexes?: any[];
+}): number;