rsuite 5.4.2 → 5.5.1

package/esm/RangeSlider/RangeSlider.js

@@ -21,6 +21,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       Component = _props$as === void 0 ? 'div' : _props$as,
       barClassName = props.barClassName,
       className = props.className,
+      constraint = props.constraint,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,
       graduated = props.graduated,
@@ -47,7 +48,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMark = props.renderMark,
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
-      rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+      rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
 
   var barRef = useRef(null); // Define the parameter position of the handle
 
@@ -157,14 +158,27 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return nextValue;
   }, [getRangeValue, getValidValue]);
+  /**
+   * Whether a range is valid against given constraint (if any)
+   * Should check before every `setValue` calls
+   */
+
+  var isRangeMatchingConstraint = useCallback(function (range) {
+    // If no constraint is defined, any range is valid
+    if (!constraint) return true;
+    return constraint(range);
+  }, [constraint]);
   /**
    * Callback function that is fired when the mousemove is triggered
    */
 
   var handleDragMove = useEventCallback(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
   });
   /**
    * Callback function that is fired when the mouseup is triggered
@@ -172,9 +186,12 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var handleChangeCommitted = useCallback(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
-  }, [getNextValue, onChangeCommitted, setValue]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
+    }
+  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);
   var handleKeyDown = useCallback(function (event) {
     var _event$target;
 
@@ -217,9 +234,12 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
     event.preventDefault();
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [max, min, onChange, rtl, setValue, step, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);
   var handleClick = useCallback(function (event) {
     if (disabled) {
       return;
@@ -236,9 +256,12 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     var nextValue = getValidValue([start, end].sort());
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [disabled, getValidValue, getValueByPosition, onChange, setValue, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);
   var handleProps = useMemo(function () {
     return [{
       value: value[0],

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
@@ -42,7 +43,9 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
 export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
 }
 export interface SelectPickerComponent {
-    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    <T>(props: SelectPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }

package/esm/SelectPicker/test/SelectPicker.test.js

@@ -49,4 +49,11 @@ React.createElement(SelectPicker, {
   onChange: function onChange(newValue) {
     expectType(newValue);
   }
+});
+var pickerRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  ref: pickerRef,
+  data: []
 });

package/esm/Uploader/UploadFileItem.d.ts

@@ -4,7 +4,7 @@ import { UploaderLocale } from '../locales';
 import { WithAsProps } from '../@types/common';
 export interface UploadFileItemProps extends WithAsProps {
     file: FileType;
-    listType: 'text' | 'picture-text' | 'picture';
+    listType?: 'text' | 'picture-text' | 'picture';
     disabled?: boolean;
     className?: string;
     maxPreviewFileSize?: number;

package/esm/Uploader/UploadFileItem.js

@@ -276,7 +276,7 @@ UploadFileItem.displayName = 'UploadFileItem';
 UploadFileItem.propTypes = {
   locale: PropTypes.any,
   file: PropTypes.object.isRequired,
-  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']).isRequired,
+  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']),
   disabled: PropTypes.bool,
   className: PropTypes.string,
   maxPreviewFileSize: PropTypes.number,

package/esm/Uploader/Uploader.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import find from 'lodash/find';
 import FileItem from './UploadFileItem';
 import UploadTrigger from './UploadTrigger';
-import { ajaxUpload, useClassNames, useCustom, guid } from '../utils';
+import { ajaxUpload, useClassNames, useCustom, guid, useWillUnmount } from '../utils';
 import Plaintext from '../Plaintext';
 
 var getFiles = function getFiles(event) {
@@ -83,6 +83,9 @@ var useFileList = function useFileList(defaultFileList) {
     (_fileListUpdateCallba = fileListUpdateCallback.current) === null || _fileListUpdateCallba === void 0 ? void 0 : _fileListUpdateCallba.call(fileListUpdateCallback, fileList);
     fileListUpdateCallback.current = null;
   }, [fileList]);
+  useWillUnmount(function () {
+    fileListUpdateCallback.current = null;
+  });
   var dispatchCallback = useCallback(function (action, callback) {
     dispatch(action);
     fileListUpdateCallback.current = callback;

package/esm/utils/propTypeChecker.d.ts

@@ -1,7 +1,3 @@
-import PropTypes, { Requireable, Validator } from 'prop-types';
-declare type ExtractValue<T extends ReadonlyArray<Validator<any>>> = {
-    [K in keyof T]: T[K] extends Validator<infer V> ? V : never;
-};
-export declare function tupleType<T extends readonly Validator<any>[]>(...types: T): Requireable<ExtractValue<T>>;
+import PropTypes from 'prop-types';
+export declare function tupleType<T>(...typeCheckers: any[]): PropTypes.Requireable<T>;
 export declare const refType: PropTypes.Requireable<any>;
-export {};

package/esm/utils/propTypeChecker.js

@@ -1,69 +1,17 @@
 import PropTypes from 'prop-types';
-var ANONYMOUS = '';
-
-function createChainableTypeChecker(validate) {
-  function checkType(isRequired, props, propName, componentName, location, propFullName) {
-    componentName = componentName || ANONYMOUS;
-    propFullName = propFullName || propName;
-
-    if (props[propName] == null) {
-      if (isRequired) {
-        if (props[propName] === null) {
-          return new Error('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
-        }
-
-        return new Error('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
-      }
-
-      return null;
-    } else {
-      return validate(props, propName, componentName, location, propFullName);
-    }
-  }
-
-  var chainedCheckType = Object.assign(checkType.bind(null, false), {
-    isRequired: checkType.bind(null, true)
-  });
-  return chainedCheckType;
-}
-
 export function tupleType() {
-  for (var _len = arguments.length, types = new Array(_len), _key = 0; _key < _len; _key++) {
-    types[_key] = arguments[_key];
+  for (var _len = arguments.length, typeCheckers = new Array(_len), _key = 0; _key < _len; _key++) {
+    typeCheckers[_key] = arguments[_key];
   }
 
-  return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
-    var value = props[propName];
-
-    if (!location) {
-      location = 'prop';
-    }
-
-    if (!propFullName) {
-      propFullName = propName;
-    }
-
-    if (!Array.isArray(value)) {
-      return new Error("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`, expected " + types.length + "-element array");
-    }
-
-    if (value.length === 0) {
-      return null;
-    }
-
-    if (value.length !== types.length) {
-      return new Error("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`, expected " + types.length + "-element array, got array of length " + value.length);
-    }
-
-    for (var i = 0; i < value.length; ++i) {
-      var error = types[i](value, String(i), componentName, 'element', propFullName + "[" + i + "]");
+  return PropTypes.arrayOf(function (value, index) {
+    var _typeCheckers$index;
 
-      if (error) {
-        return error;
-      }
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      rest[_key2 - 2] = arguments[_key2];
     }
 
-    return null;
+    return (_typeCheckers$index = typeCheckers[index]).call.apply(_typeCheckers$index, [PropTypes, value, index].concat(rest));
   });
 }
 export var refType = PropTypes.oneOfType([PropTypes.func, PropTypes.any]);

package/esm/utils/treeUtils.js

@@ -258,6 +258,9 @@ export function createUpdateTreeDataFunction(params, _ref2) {
     var dragNode = params.dragNode,
         dropNode = params.dropNode,
         dropNodePosition = params.dropNodePosition;
+
+    var cloneDragNode = _extends({}, dragNode);
+
     removeDragNode(data, params, {
       valueKey: valueKey,
       childrenKey: childrenKey
@@ -272,16 +275,16 @@ export function createUpdateTreeDataFunction(params, _ref2) {
           if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER) {
             _item2[childrenKey] = _isNil(_item2[childrenKey]) ? [] : _item2[childrenKey];
 
-            _item2[childrenKey].push(dragNode);
+            _item2[childrenKey].push(cloneDragNode);
 
             break;
           } else if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {
             // drag to top of node
-            items.splice(_index2, 0, dragNode);
+            items.splice(_index2, 0, cloneDragNode);
             break;
           } else if (dropNodePosition === TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {
             // drag to bottom of node
-            items.splice(_index2 + 1, 0, dragNode);
+            items.splice(_index2 + 1, 0, cloneDragNode);
             break;
           }
         }

package/esm/utils/useClickOutside.js

@@ -13,8 +13,12 @@ export default function useClickOutside(_ref) {
   useEffect(function () {
     if (enabled) {
       var eventHandler = function eventHandler(event) {
-        if (isOutsideRef.current(event)) {
-          handleRef.current(event);
+        var _isOutsideRef$current;
+
+        if ((_isOutsideRef$current = isOutsideRef.current) !== null && _isOutsideRef$current !== void 0 && _isOutsideRef$current.call(isOutsideRef, event)) {
+          var _handleRef$current;
+
+          (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.call(handleRef, event);
         }
       };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.4.2",
+  "version": "5.5.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.2.2",
+    "rsuite-table": "^5.3.2",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -27,6 +27,7 @@
   --rs-bg-active: @H700;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

package/styles/color-modes/high-contrast.less

@@ -27,6 +27,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: @B000;
   --rs-state-focus-shadow: 0 0 0 3px @B900, 0 0 0 5px @B000;
   --rs-state-focus-shadow-slim: 0 0 0 2px @B000;
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);

package/styles/color-modes/light.less

@@ -34,6 +34,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 30%);
   --rs-state-hover-bg: @H050;
+  --rs-color-focus-ring: fade(@H500, 25%);
   --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

package/styles/mixins/utilities.less

@@ -122,26 +122,38 @@
 
 // Useful when adding focus ring to an element
 .with-focus-ring() {
-  &:focus {
+  &:focus-visible {
     .focus-ring();
   }
 }
 
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
-  box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid var(--rs-color-focus-ring);
+  // box-shadow: var(--rs-state-focus-shadow);
+
+  .high-contrast-mode({
+    outline-offset: 2px;
+  });
 }
 
 .focus-ring(slim) {
-  box-shadow: var(--rs-state-focus-shadow-slim);
+  .focus-ring();
+
+  outline-width: 2px;
+  outline-offset: 0;
 }
 
 .focus-ring(inset) {
-  box-shadow: inset var(--rs-state-focus-shadow);
+  .focus-ring();
+
+  outline-offset: -3px;
 }
 
 .focus-ring(slim-inset) {
-  box-shadow: inset var(--rs-state-focus-shadow-slim);
+  .focus-ring(inset);
+
+  outline-width: 2px;
 }
 
 .focus-ring(outline) {