rsuite 5.2.1 → 5.2.2

package/esm/Dropdown/DropdownItem.js

@@ -108,7 +108,8 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (panel) {
     return renderDropdownItem(_extends({
       ref: ref,
-      className: merge(prefix('panel'), className)
+      className: merge(prefix('panel'), className),
+      children: children
     }, restProps));
   }
 

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;

package/esm/Modal/utils.js

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 import getHeight from 'dom-lib/getHeight';
 import on from 'dom-lib/on';
+import { ResizeObserver } from '@juggle/resize-observer';
 export var useBodyStyles = function useBodyStyles(ref, options) {
   var _useState = useState({}),
       bodyStyles = _useState[0],
@@ -12,6 +12,7 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       prefix = options.prefix;
   var windowResizeListener = useRef();
   var contentElement = useRef();
+  var contentElementResizeObserver = useRef();
   var updateBodyStyles = useCallback(function (_event, entering) {
     var dialog = ref.current;
     var scrollHeight = dialog ? dialog.scrollHeight : 0;
@@ -40,13 +41,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles(styles);
   }, [prefix, ref]);
   var onDestroyEvents = useCallback(function () {
-    var _windowResizeListener, _windowResizeListener2;
+    var _windowResizeListener, _windowResizeListener2, _contentElementResize;
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
-
-    if (contentElement.current) {
-      unbindElementResize(contentElement.current);
-    }
+    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
   }, []);
   var onChangeBodyStyles = useCallback(function (entering) {
     if (overflow && !drawer) {
@@ -55,7 +53,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       updateBodyStyles(null, entering);
       contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
       windowResizeListener.current = on(window, 'resize', updateBodyStyles);
-      bindElementResize(contentElement.current, updateBodyStyles);
+      contentElementResizeObserver.current = new ResizeObserver(function () {
+        return updateBodyStyles();
+      });
+      contentElementResizeObserver.current.observe(contentElement.current);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {

package/esm/Overlay/Position.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
-import bindElementResize from 'element-resize-event';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getContainer from 'dom-lib/getContainer';
@@ -8,6 +7,7 @@ import removeClass from 'dom-lib/removeClass';
 import on from 'dom-lib/on';
 import addClass from 'dom-lib/addClass';
 import addStyle from 'dom-lib/addStyle';
+import { ResizeObserver } from '@juggle/resize-observer';
 import isElement from '../DOMHelper/isElement';
 import positionUtils from './positionUtils';
 import { getDOMNode } from '../utils';
@@ -23,6 +23,7 @@ var usePosition = function usePosition(props, ref) {
       triggerTarget = props.triggerTarget;
   var containerRef = useRef();
   var lastTargetRef = useRef();
+  var overlayResizeObserver = useRef();
   var defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
@@ -109,17 +110,19 @@ var usePosition = function usePosition(props, ref) {
 
     if (overlay) {
       // Update the position when the size of the overlay changes
-      bindElementResize(overlay, function () {
+      overlayResizeObserver.current = new ResizeObserver(function () {
         return updatePosition(true, true);
       });
+      overlayResizeObserver.current.observe(overlay);
     }
 
     return function () {
-      var _containerScrollListe;
+      var _containerScrollListe, _overlayResizeObserve;
 
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
       resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
+      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
   useUpdateEffect(function () {

package/esm/Picker/PickerToggle.js

@@ -12,7 +12,7 @@ import CloseButton from '../CloseButton';
 import { useClassNames, KEY_VALUES, mergeRefs } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
-import MaskedInput from '../MaskedInput';
+import TextMask from '../MaskedInput/TextMask';
 import deprecatePropType from '../utils/deprecatePropType';
 var defaultInputMask = [];
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -146,7 +146,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
     ,
     onBlur: !disabled ? debounce(handleBlur, 200) : null
-  }), /*#__PURE__*/React.createElement(MaskedInput, {
+  }), /*#__PURE__*/React.createElement(TextMask, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,

package/esm/utils/useElementResize.d.ts

@@ -5,4 +5,4 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export default function useElementResize(eventTarget: EventTarget | (() => EventTarget), listener: EventListenerOrEventListenerObject): void;
+export default function useElementResize(eventTarget: Element | (() => Element), listener: ResizeObserverCallback): void;

package/esm/utils/useElementResize.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import bindElementResize, { unbind } from 'element-resize-event';
+import { useEffect, useRef } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
 /**
  * Attach the event handler directly to the specified DOM element,
  * and it will be triggered when the size of the DOM element is changed.
@@ -9,11 +9,15 @@ import bindElementResize, { unbind } from 'element-resize-event';
  */
 
 export default function useElementResize(eventTarget, listener) {
+  var resizeObserver = useRef();
   useEffect(function () {
     var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    bindElementResize(target, listener);
+    resizeObserver.current = new ResizeObserver(listener);
+    resizeObserver.current.observe(target);
     return function () {
-      return unbind(target);
+      var _resizeObserver$curre;
+
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
     };
   }, [eventTarget, listener]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
+    "@juggle/resize-observer": "^3.3.1",
     "@rsuite/icons": "^1.0.2",
     "@types/chai": "^4.2.18",
     "@types/lodash": "^4.14.134",
@@ -33,11 +34,10 @@
     "classnames": "^2.3.1",
     "date-fns": "^2.13.0",
     "dom-lib": "^3.0.0",
-    "element-resize-event": "^3.0.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.0.3",
+    "rsuite-table": "^5.2.0",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {