rsuite 5.1.0 → 5.2.3

package/esm/Toggle/Toggle.js

@@ -1,14 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useControlled, useCustom } from '../utils';
 import Plaintext from '../Plaintext';
 import Loader from '../Loader';
-
-/**
- * fixme: Should contain an input[type=checkbox]
- */
 var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'span' : _props$as,
@@ -21,7 +17,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       checkedChildren = props.checkedChildren,
       unCheckedChildren = props.unCheckedChildren,
       _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'btn-toggle' : _props$classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'toggle' : _props$classPrefix,
       checkedProp = props.checked,
       defaultChecked = props.defaultChecked,
       size = props.size,
@@ -29,6 +25,8 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange = props.onChange,
       rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
 
+  var inputRef = useRef();
+
   var _useControlled = useControlled(checkedProp, defaultChecked),
       checked = _useControlled[0],
       setChecked = _useControlled[1];
@@ -48,48 +46,49 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
-  var handleChange = useCallback(function (event) {
+  var handleInputChange = useCallback(function (e) {
     if (disabled || readOnly) {
       return;
     }
 
-    setChecked(!checked);
-    onChange === null || onChange === void 0 ? void 0 : onChange(!checked, event);
-  }, [checked, disabled, onChange, readOnly, setChecked]);
-  var handleKeyDown = useCallback(function (event) {
-    if (event.key !== ' ') {
-      return;
-    }
-
-    handleChange(event);
-    event.preventDefault();
-  }, [handleChange]);
+    var checked = e.target.checked;
+    setChecked(checked);
+    onChange === null || onChange === void 0 ? void 0 : onChange(checked, e);
+  }, [disabled, readOnly, setChecked, onChange]);
 
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
   }
 
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement("label", _extends({
+    ref: ref,
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "checkbox",
+    checked: checked,
+    disabled: disabled,
+    readOnly: readOnly,
+    onChange: handleInputChange,
+    className: prefix('input'),
     role: "switch",
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
-    "aria-busy": loading || undefined,
-    tabIndex: 0
-  }, rest, {
-    ref: ref,
-    className: classes,
-    onClick: handleChange,
-    onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React.createElement("span", {
+    "aria-busy": loading || undefined
+  }), /*#__PURE__*/React.createElement(Component, {
+    className: prefix('presentation')
+  }, /*#__PURE__*/React.createElement("span", {
     className: prefix('inner')
   }, inner), loading && /*#__PURE__*/React.createElement(Loader, {
     className: prefix('loader')
-  }));
+  })));
 });
 Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
   disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  plaintext: PropTypes.bool,
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   checkedChildren: PropTypes.node,
@@ -97,6 +96,12 @@ Toggle.propTypes = {
   loading: PropTypes.bool,
   classPrefix: PropTypes.string,
   className: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  as: PropTypes.elementType,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  locale: PropTypes.shape({
+    on: PropTypes.string,
+    off: PropTypes.string
+  })
 };
 export default Toggle;

package/esm/Tree/Tree.d.ts

@@ -23,7 +23,7 @@ export interface TreeDragProps<ItemDataType = Record<string, any>> {
     /** Whether the node can  be dragged */
     draggable?: boolean;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
     /** Called when node drag start */
     onDragStart?: (nodeData: ItemDataType, e: React.DragEvent) => void;
     /** Called when node drag enter */
@@ -61,7 +61,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** Callback function for data change */
     onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: React.ReactNode) => ItemDataType[]) => void;
     /** Callback function after selecting tree node */
-    onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
     /** Custom Render tree Node */
     renderTreeNode?: (nodeData: ItemDataType) => React.ReactNode;
     /** Custom Render icon */
@@ -69,7 +69,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** callback fired when search */
     onSearch?: (searchKeyword: string, event: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Called when clean */
-    onClean?: (event: React.SyntheticEvent<any>) => void;
+    onClean?: (event: React.SyntheticEvent) => void;
     /** Custom search rules. */
     searchBy?: (keyword: string, label: React.ReactNode, item: any) => boolean;
     /** Customizing the Rendering Menu list */

package/esm/TreePicker/TreeNode.d.ts

@@ -22,7 +22,7 @@ export interface TreeNodeProps extends WithAsProps {
     classPrefix?: string;
     style?: React.CSSProperties;
     onExpand?: (nodeData: any) => void;
-    onSelect?: (nodeData: any, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
     onRenderTreeIcon?: (nodeData: any) => React.ReactNode;
     onRenderTreeNode?: (nodeData: any) => React.ReactNode;
     onDragStart?: (data: any, event: React.DragEvent<any>) => void;

package/esm/TreePicker/TreeNode.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { forwardRef, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { hasClass } from 'dom-lib';
+import hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
 import TreeContext from '../Tree/TreeContext';

package/esm/TreePicker/TreePicker.d.ts

@@ -22,7 +22,7 @@ export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, I
     /** Custom render selected items */
     renderValue?: (value: T, selectedItems: ItemDataType, selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
 }
 declare const TreePicker: PickerComponent<TreePickerProps>;
 export default TreePicker;

package/esm/Uploader/Uploader.d.ts

@@ -82,13 +82,13 @@ export interface UploaderProps extends WithAsProps {
     /** In the file list, for uploading failed files, click the callback function to upload */
     onReupload?: (file: FileType) => void;
     /** In the file list, click the callback function for the uploaded file */
-    onPreview?: (file: FileType, event: React.SyntheticEvent<any>) => void;
+    onPreview?: (file: FileType, event: React.SyntheticEvent) => void;
     /** Upload callback function with erro */
-    onError?: (status: any, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onError?: (status: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** callback function after successful upload */
-    onSuccess?: (response: any, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onSuccess?: (response: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** Callback functions that upload progress change */
-    onProgress?: (percent: number, file: FileType, event: React.SyntheticEvent<any>, xhr: XMLHttpRequest) => void;
+    onProgress?: (percent: number, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
     /** In the file list, click the callback function to delete a file */
     onRemove?: (file: FileType) => void;
     /** Custom render file information */

package/esm/locales/fa_IR.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import faIR from 'date-fns/locale/fa-IR';
 var Calendar = {
-  sunday: 'یکشنبه',
-  monday: 'دوشنبه',
-  tuesday: 'سه شنبه',
-  wednesday: 'چهارشنبه',
-  thursday: 'پنجشنبه',
-  friday: 'جمعه',
-  saturday: 'شنبه',
-  ok: 'خوب',
+  sunday: 'ی',
+  monday: 'د',
+  tuesday: 'س',
+  wednesday: 'چ',
+  thursday: 'پ',
+  friday: 'ج',
+  saturday: 'ش',
+  ok: 'تایید',
   today: 'امروز',
   yesterday: 'دیروز',
   hours: 'ساعت',

package/esm/utils/BrowserDetection.js

@@ -1,5 +1,5 @@
 // from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
-import canUseDOM from 'dom-lib/lib/query/canUseDOM'; // Internet Explorer 6-11
+import canUseDOM from 'dom-lib/canUseDOM'; // Internet Explorer 6-11
 
 export var isIE = function isIE() {
   return canUseDOM && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);

package/esm/utils/index.d.ts

@@ -39,3 +39,4 @@ export { default as useEventCallback } from './useEventCallback';
 export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useIsMounted } from './useIsMounted';

package/esm/utils/index.js

@@ -41,4 +41,5 @@ export { default as stringToObject } from './stringToObject';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
-export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useIsMounted } from './useIsMounted';

package/esm/utils/scrollTopAnimation.js

@@ -1,5 +1,5 @@
-import { scrollTop } from 'dom-lib';
-import requestAnimationFramePolyfill from 'dom-lib/lib/animation/requestAnimationFramePolyfill';
+import scrollTop from 'dom-lib/scrollTop';
+import requestAnimationFramePolyfill from 'dom-lib/requestAnimationFramePolyfill';
 export default function scrollTopAnimation(target, nextTop, animation, callback) {
   if (animation === void 0) {
     animation = true;

package/esm/utils/treeUtils.d.ts

@@ -210,7 +210,7 @@ interface TreeSearchProps {
     searchKeyword: string;
     data: ItemDataType[];
     searchBy: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent<any>) => void;
+    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
 }
 /**
  * A hook that handles tree search filter options
@@ -221,7 +221,7 @@ export declare function useTreeSearch(props: TreeSearchProps): {
     filteredData: ItemDataType[];
     setFilteredData: (data: ItemDataType[], searchKeyword: string) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent<any>) => void;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
 };
 export declare function useGetTreeNodeChildren(treeData: ItemDataType[], valueKey: string, childrenKey: string): {
     data: ItemDataType[];

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,18 @@ 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);
+    if (!resizeObserver.current) {
+      var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
+      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/esm/utils/useEventListener.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { on } from 'dom-lib';
+import on from 'dom-lib/on';
 /**
  * Attach the event handler directly to the specified DOM element.
  *

package/esm/utils/useIsMounted.d.ts

@@ -0,0 +1,2 @@
+declare function useIsMounted(): () => boolean;
+export default useIsMounted;

package/esm/utils/useIsMounted.js

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+function useIsMounted() {
+  var isMounted = useRef(false);
+  useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return useCallback(function () {
+    return isMounted.current;
+  }, []);
+}
+
+export default useIsMounted;

package/esm/utils/usePortal.js

@@ -1,6 +1,6 @@
 import { useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import helper from '../DOMHelper';
+import canUseDOM from 'dom-lib/canUseDOM';
 
 function usePortal(props) {
   if (props === void 0) {
@@ -10,7 +10,7 @@ function usePortal(props) {
   var _props = props,
       id = _props.id,
       container = _props.container;
-  var rootElemRef = useRef(helper.canUseDOM ? document.body : null);
+  var rootElemRef = useRef(canUseDOM ? document.body : null);
   useEffect(function () {
     var containerElement = typeof container === 'function' ? container() : container; // Look for existing target dom element to append to
 

package/esm/utils/useRootClose.js

@@ -1,5 +1,7 @@
 import { useEffect, useCallback } from 'react';
-import helper from '../DOMHelper';
+import contains from 'dom-lib/contains';
+import ownerDocument from 'dom-lib/ownerDocument';
+import on from 'dom-lib/on';
 import { getDOMNode, KEY_VALUES } from './';
 
 function isLeftClickEvent(event) {
@@ -31,12 +33,12 @@ function useRootClose(onRootClose, _ref) {
     var triggerElement = getDOMNode(triggerTarget);
     var overlayElement = getDOMNode(overlayTarget); // Check if the clicked element is a trigger.
 
-    if (triggerElement && helper.contains(triggerElement, event.target)) {
+    if (triggerElement && contains(triggerElement, event.target)) {
       return;
     } // Check if the clicked element is a overlay.
 
 
-    if (overlayElement && helper.contains(overlayElement, event.target)) {
+    if (overlayElement && contains(overlayElement, event.target)) {
       return;
     }
 
@@ -49,9 +51,9 @@ function useRootClose(onRootClose, _ref) {
   useEffect(function () {
     var currentTarget = getDOMNode(triggerTarget);
     if (disabled || !currentTarget) return;
-    var doc = helper.ownerDocument(currentTarget);
-    var onDocumentMouseDownListener = helper.on(doc, 'mousedown', handleDocumentMouseDown, true);
-    var onDocumentKeyupListener = helper.on(doc, 'keyup', handleDocumentKeyUp);
+    var doc = ownerDocument(currentTarget);
+    var onDocumentMouseDownListener = on(doc, 'mousedown', handleDocumentMouseDown, true);
+    var onDocumentKeyupListener = on(doc, 'keyup', handleDocumentKeyUp);
     return function () {
       onDocumentMouseDownListener === null || onDocumentMouseDownListener === void 0 ? void 0 : onDocumentMouseDownListener.off();
       onDocumentKeyupListener === null || onDocumentKeyupListener === void 0 ? void 0 : onDocumentKeyupListener.off();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.1.0",
+  "version": "5.2.3",
   "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",
@@ -32,13 +33,12 @@
     "@types/react-virtualized": "^9.21.11",
     "classnames": "^2.3.1",
     "date-fns": "^2.13.0",
-    "dom-lib": "^2.1.0",
-    "element-resize-event": "^3.0.6",
+    "dom-lib": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.0.2",
-    "schema-typed": "^2.0.1"
+    "rsuite-table": "^5.2.1",
+    "schema-typed": "^2.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/styles/plugins/palette.js

@@ -1353,7 +1353,16 @@ module.exports = {
      * @param colorNumber
      */
     functions.add('palette', function (color, colorNumber) {
-      const hsv = tinycolor(color.value).toHsv();
+      const {
+        rgb: [r, g, b],
+        alpha: a
+      } = color;
+      const hsv = tinycolor({
+        r,
+        g,
+        b,
+        a
+      }).toHsv();
       const index = COLOR_NUMBER_SET.indexOf('' + colorNumber.value);
       if (index === -1 || index === PRIMARY_INDEX) {
         return less.color(color.rgb);