rsuite 5.2.0 → 5.2.4

package/esm/Carousel/Carousel.d.ts

@@ -10,7 +10,7 @@ export interface CarouselProps extends WithAsProps {
     /** Button shape */
     shape?: 'dot' | 'bar';
     /** Callback fired when the active item changes */
-    onSelect: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
     onSlideStart?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition ends */

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -406,10 +406,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
   usePublicMethods(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleClean = useCallback(function (event) {
     var target = event.target; // exclude searchBar
 
@@ -630,7 +633,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, style) : {};
     return /*#__PURE__*/React.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,

package/esm/CheckTreePicker/utils.d.ts

@@ -19,7 +19,7 @@ export interface TreeNodesType {
     [key: string]: TreeNodeType;
 }
 export declare function isEveryChildChecked(nodes: TreeNodesType, parent: TreeNodeType): boolean;
-export declare function isSomeChildChecked(nodes: TreeNodesType, parent: TreeNodeType): boolean;
+export declare function isSomeChildChecked(nodes: TreeNodesType, parent: TreeNodeType, childrenKey: string): boolean;
 export declare function isSomeNodeHasChildren(data: any[], childrenKey: string): boolean;
 /**
  * is all siblings nodes is uncheckable

package/esm/CheckTreePicker/utils.js

@@ -18,18 +18,19 @@ export function isEveryChildChecked(nodes, parent) {
     return nodes[child.refKey].check;
   });
 }
-export function isSomeChildChecked(nodes, parent) {
+export function isSomeChildChecked(nodes, parent, childrenKey) {
   if (_isNil(nodes[parent.refKey])) {
     return false;
   }
 
   var children = getChildrenByFlattenNodes(nodes, parent);
+  return children.some(function (child) {
+    var _child$childrenKey;
 
-  if (!children.length) {
-    return nodes[parent.refKey].check;
-  }
+    if ((child === null || child === void 0 ? void 0 : (_child$childrenKey = child[childrenKey]) === null || _child$childrenKey === void 0 ? void 0 : _child$childrenKey.length) > 0) {
+      return isSomeChildChecked(nodes, child, childrenKey);
+    }
 
-  return children.some(function (child) {
     return nodes[child.refKey].check;
   });
 }
@@ -184,7 +185,7 @@ export function getNodeCheckState(_ref) {
     return CHECK_STATE.CHECK;
   }
 
-  if (isSomeChildChecked(nodes, node)) {
+  if (isSomeChildChecked(nodes, node, childrenKey)) {
     nodes[node.refKey].checkAll = false;
     return CHECK_STATE.INDETERMINATE;
   }

package/esm/CheckboxGroup/CheckboxGroup.js

@@ -65,10 +65,10 @@ var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, {
+  }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, _extends({
     ref: ref,
     localeKey: "notSelected"
-  }, value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     role: "group",
     className: classes

package/esm/DateRangePicker/Calendar.d.ts

@@ -3,7 +3,7 @@ import { CalendarProps as CalendarCoreProps } from '../Calendar/Calendar';
 import { ValueType } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import { DatePickerLocale } from '../locales';
-declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate';
+declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'onToggleMeridian';
 export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
     calendarDate?: ValueType;
     disabledDate?: (date: Date, selectValue: ValueType, type: string) => boolean;
@@ -15,6 +15,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     locale?: DatePickerLocale;
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
+    onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;

package/esm/DateRangePicker/Calendar.js

@@ -5,6 +5,15 @@ import React, { useCallback, useState } from 'react';
 import { addMonths, isAfter, isSameMonth, setDate } from '../utils/dateUtils';
 import CalendarCore, { CalendarState } from '../Calendar/Calendar';
 import { DATERANGE_DISABLED_TARGET } from '../utils';
+
+/**
+ * Omit the time in the date, which is used to compare and judge the date.
+ * eg: isAfter/isBefore
+ */
+function omitTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? CalendarCore : _props$as,
@@ -18,10 +27,11 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
+      onToggleMeridian = props.onToggleMeridian,
       showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = useState(),
       calendarState = _useState[0],
@@ -40,6 +50,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChangePageTime = useCallback(function (nextPageDate) {
     onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = useCallback(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = useCallback(function () {
     setCalendarState(calendarState === CalendarState.DROP_MONTH ? undefined : CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -59,22 +72,30 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = useCallback(function () {
-    var after = isAfter(setDate(calendarDate[1], 1), setDate(addMonths(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = setDate(addMonths(calendarDate[0], 1), 1);
+    var endDate = setDate(omitTime(calendarDate[1]), 1);
+    var after = isAfter(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = useCallback(function () {
-    if (showOneCalendar) return false;
-    var after = isAfter(setDate(calendarDate[1], 1), setDate(addMonths(calendarDate[0], 1), 1));
+    // If only one calendar is displayed, do not disable
+    if (showOneCalendar) {
+      return false;
+    } // Do not disable the Forward button on the second calendar.
+
 
     if (index === 1) {
       return false;
     }
 
+    var startDate = setDate(addMonths(omitTime(calendarDate[0]), 1), 1);
+    var endDate = setDate(omitTime(calendarDate[1]), 1);
+    var after = isAfter(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = useCallback(function (date) {
@@ -110,6 +131,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -19,6 +19,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     showWeekNumbers?: boolean;
     /** Show only one calendar select */
     showOneCalendar?: boolean;
+    /** Meridian format */
+    showMeridian?: boolean;
     /** Set default date for calendar */
     defaultCalendarValue?: ValueType;
     /** The character that separates two dates */

package/esm/DateRangePicker/DateRangePicker.js

@@ -52,6 +52,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$showOneCalenda = props.showOneCalendar,
       showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
       showWeekNumbers = props.showWeekNumbers,
+      showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
       valueProp = props.value,
@@ -64,7 +65,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -344,6 +345,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = useCallback(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+    var hours = DateUtils.getHours(clonedDate);
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = DateUtils.setHours(clonedDate, nextHours);
+    setCalendarDate(next); // If the value already exists, update the value again.
+
+    if (selectValue.length === 2) {
+      setSelectValue(next);
+    }
+  }, [calendarDate, selectValue]);
   /**
    * Toolbar operation callback function
    */
@@ -511,10 +528,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
+      showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange
+      onSelect: handleSelectValueChange,
+      onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       className: classes,
@@ -609,11 +628,12 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,
   limitEndYear: PropTypes.number,
-  showWeekNumbers: PropTypes.bool,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,
+  showWeekNumbers: PropTypes.bool,
+  showMeridian: PropTypes.bool,
   showOneCalendar: PropTypes.bool
 });
 export default DateRangePicker;

package/esm/Dropdown/DropdownItem.js

@@ -15,6 +15,7 @@ import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import useInternalId from '../utils/useInternalId';
 import { DropdownActionType } from './DropdownState';
+import { useRenderDropdownItem } from './useRenderDropdownItem';
 
 /**
  * The <Dropdown.Item> API
@@ -88,15 +89,7 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
     }
   }, [internalId, selected, dispatch]);
-  var renderDropdownItem = useCallback(function (ui) {
-    if (Component === 'li') {
-      return ui;
-    }
-
-    return /*#__PURE__*/React.createElement("li", {
-      role: "none presentation"
-    }, ui);
-  }, [Component]);
+  var renderDropdownItem = useRenderDropdownItem(Component);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/React.createElement(SidenavDropdownItem, _extends({
@@ -105,18 +98,19 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   if (divider) {
-    return renderDropdownItem( /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      role: "separator",
+      role: 'separator',
       className: merge(prefix('divider'), className)
-    }, restProps)));
+    }, restProps));
   }
 
   if (panel) {
-    return renderDropdownItem( /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      className: merge(prefix('panel'), className)
-    }, restProps), children));
+      className: merge(prefix('panel'), className),
+      children: children
+    }, restProps));
   }
 
   if (navbar) {
@@ -172,12 +166,14 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return renderDropdownItem( /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: mergeRefs(ref, menuitemRef),
       className: classes
-    }, menuitem, dataAttributes, restProps), icon && /*#__PURE__*/React.cloneElement(icon, {
-      className: prefix('menu-icon')
-    }), children));
+    }, menuitem, dataAttributes, restProps, {
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), children)
+    }));
   });
 });
 DropdownItem.displayName = 'Dropdown.Item';

package/esm/Dropdown/useRenderDropdownItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => JSX.Element;

package/esm/Dropdown/useRenderDropdownItem.js

@@ -0,0 +1,18 @@
+import React, { useCallback } from 'react';
+export function useRenderDropdownItem(Component) {
+  return useCallback(function (props, OverrideComponent) {
+    if (Component === 'li') {
+      if (OverrideComponent) {
+        return /*#__PURE__*/React.createElement("li", {
+          role: "none presentation"
+        }, /*#__PURE__*/React.createElement(OverrideComponent, props));
+      }
+
+      return /*#__PURE__*/React.createElement(Component, props);
+    }
+
+    return /*#__PURE__*/React.createElement("li", {
+      role: "none presentation"
+    }, /*#__PURE__*/React.createElement(Component, props));
+  }, [Component]);
+}

package/esm/InputPicker/InputPicker.js

@@ -666,7 +666,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper
     // for fixing margin-left on tags from 2nd line on
 
-    if (multi) {
+    if (multi && hasValue) {
       plaintextProps.style = {
         marginLeft: -6
       };

package/esm/MaskedInput/MaskedInput.d.ts

@@ -1,43 +1,6 @@
-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>>;
+import { InputProps } from '../Input';
+import type { TextMaskProps } from './TextMask';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;
+declare const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;
 export default MaskedInput;

package/esm/MaskedInput/MaskedInput.js

@@ -1,67 +1,13 @@
-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));
-};
-
+import React from 'react';
+import TextMask from './TextMask';
+import Input from '../Input';
 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'])));
+  var _props$as = props.as,
+      inputAs = _props$as === void 0 ? TextMask : _props$as;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    as: inputAs,
+    ref: ref
+  }));
 });
-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/TextMask.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 TextMaskBaseProps {
+    /**
+     * `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 TextMaskProps = TextMaskBaseProps & 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 TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & 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 TextMask;

package/esm/MaskedInput/TextMask.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 TextMask = /*#__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'])));
+});
+TextMask.displayName = 'TextMask';
+TextMask.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 TextMask;