rsuite 5.16.1 → 5.17.0-beta

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [5.16.3](https://github.com/rsuite/rsuite/compare/v5.16.2...v5.16.3) (2022-07-29)
+
+### Bug Fixes
+
+- **DateRangePicker:** fix predefined `ranges` cannot close picker ([#2614](https://github.com/rsuite/rsuite/issues/2614)) ([7773899](https://github.com/rsuite/rsuite/commit/7773899d5cda5ce53d556be85abc76f23166fc28))
+- **listProps:** fix properties in listProps to be optional ([#2622](https://github.com/rsuite/rsuite/issues/2622)) ([650abbd](https://github.com/rsuite/rsuite/commit/650abbdd7b1073fb1a5a3d3ca761127ac2dcdd08))
+
+## [5.16.2](https://github.com/rsuite/rsuite/compare/v5.16.1...v5.16.2) (2022-07-28)
+
+### Bug Fixes
+
+- **CustomProvider:** fix warnings caused by server-side rendering ([#2599](https://github.com/rsuite/rsuite/issues/2599)) ([ea05efb](https://github.com/rsuite/rsuite/commit/ea05efba3c53bf7e04ea4caa7b378a762b85af93))
+- **DateRangePicker:** improved experience for date range selection ([#2618](https://github.com/rsuite/rsuite/issues/2618)) ([225fc08](https://github.com/rsuite/rsuite/commit/225fc08e21d43c41d92c1514f67c05eb660bf9dd))
+- **focus:** fix outline style for form components when focused ([#2601](https://github.com/rsuite/rsuite/issues/2601)) ([0e2f9df](https://github.com/rsuite/rsuite/commit/0e2f9dffe5e882fc56727eb8ba8901aaf1b7d7b3))
+- **OverlayTrigger:** fix invalid rendering without followCursor ([#2600](https://github.com/rsuite/rsuite/issues/2600)) ([08abc8e](https://github.com/rsuite/rsuite/commit/08abc8e825af55d8334a6e6057d4f5582a3197ac))
+- **Panel:** allow custom header in collapsible panels ([#2611](https://github.com/rsuite/rsuite/issues/2611)) ([6372d44](https://github.com/rsuite/rsuite/commit/6372d441235b5b65036c257608098df01f93bf6d))
+- **Picker:** add missing caretAs prop declaration ([#2592](https://github.com/rsuite/rsuite/issues/2592)) ([faabba4](https://github.com/rsuite/rsuite/commit/faabba4b32d82f819b5c5431c3d7040798db1765))
+- **Picker:** fix style dependency ([#2612](https://github.com/rsuite/rsuite/issues/2612)) ([0b5b1d6](https://github.com/rsuite/rsuite/commit/0b5b1d60909a069c317f069e9ab235da70eb4aa3))
+- **SelectPicker:** make controlled value nullable ([#2591](https://github.com/rsuite/rsuite/issues/2591)) ([6619a75](https://github.com/rsuite/rsuite/commit/6619a75eca9eabf9bf08dd84dee78f1df0e094ca))
+- **treelike:** fix data item stringify throw error ([#2606](https://github.com/rsuite/rsuite/issues/2606)) ([3a586d2](https://github.com/rsuite/rsuite/commit/3a586d28e075b5bdd95d8df948ce4887570fab1d))
+
 ## [5.16.1](https://github.com/rsuite/rsuite/compare/v5.16.0...v5.16.1) (2022-07-15)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -277,6 +277,8 @@
   overflow: hidden;
   // Remove transition
   transition: none;
+  display: flex;
+  flex-direction: column;
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);

package/Slider/styles/index.less

@@ -50,10 +50,11 @@
   }
 }
 
-//
+// Handle
 .rs-slider-handle {
   position: absolute;
   top: -50%;
+  outline: none;
 
   &::before {
     content: '';

package/TreePicker/styles/index.less

@@ -207,9 +207,6 @@
 }
 
 .rs-picker-menu {
-  display: flex;
-  flex-direction: column;
-
   &.rs-tree-menu {
     padding-top: @picker-menu-padding;
 

package/cjs/Cascader/utils.js

@@ -6,8 +6,6 @@ exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
 exports.usePaths = usePaths;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("react");
 
 var _slice = _interopRequireDefault(require("lodash/slice"));
@@ -16,6 +14,8 @@ var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
 
+var _attachParent = require("../utils/attachParent");
+
 function getColumnsAndPaths(data, value, options) {
   var childrenKey = options.childrenKey,
       valueKey = options.valueKey,
@@ -39,9 +39,7 @@ function getColumnsAndPaths(data, value, options) {
 
         if (node) {
           columns.push(children.map(function (item) {
-            return (0, _extends2.default)({}, item, {
-              parent: items[i]
-            });
+            return (0, _attachParent.attachParent)(item, items[i]);
           }));
           paths.push(node.active);
           return {

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -4,7 +4,7 @@ import { PickerInstance, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label'> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs'> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */

package/cjs/CheckPicker/test/CheckPicker.test.js

@@ -88,4 +88,12 @@ _react.default.createElement(_CheckPicker.default, {
 _react.default.createElement(_CheckPicker.default, {
   label: "User",
   data: []
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
 });

package/cjs/CheckTreePicker/CheckTreePicker.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (string | number)[];
-export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
     /** Tree node cascade */
     cascade?: boolean;
     /** A picker that can be counted */

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -592,6 +592,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var children = node[childrenKey];
     var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);
     var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
+      /**
+       * spread operator dont copy unenumerable properties
+       * so we need to copy them manually
+       */
+      parent: node.parent,
       expand: expand
     }), layer), {
       hasChildren: visibleChildren

package/cjs/CheckTreePicker/test/CheckTreePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/CheckTreePicker/test/CheckTreePicker.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CheckTreePicker = _interopRequireDefault(require("../CheckTreePicker"));
+
+/*#__PURE__*/
+_react.default.createElement(_CheckTreePicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
+});

package/cjs/CheckTreePicker/utils.js

@@ -25,6 +25,8 @@ var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
 
+var _attachParent = require("../utils/attachParent");
+
 function isEveryChildChecked(nodes, parent) {
   if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
@@ -147,7 +149,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.check = curNode.check;
       formatted.expand = curNode.expand;
       formatted.uncheckable = curNode.uncheckable;
-      formatted.parent = curNode.parent;
+      (0, _attachParent.attachParent)(formatted, curNode.parent);
       formatted.checkState = checkState;
 
       if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {

package/cjs/CustomProvider/CustomProvider.js

@@ -40,7 +40,8 @@ var CustomProvider = function CustomProvider(props) {
   var toasters = _react.default.useRef(new Map());
 
   var _usePortal = (0, _utils.usePortal)({
-    container: container
+    container: container,
+    waitMount: true
   }),
       Portal = _usePortal.Portal;
 
@@ -65,7 +66,9 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
-  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, _ToastContainer.toastPlacements.map(function (placement) {
+  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "rs-toast-provider"
+  }, _ToastContainer.toastPlacements.map(function (placement) {
     return /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
       key: placement,
       placement: placement,
@@ -73,7 +76,7 @@ var CustomProvider = function CustomProvider(props) {
         toasters.current.set(placement, _ref);
       }
     });
-  })));
+  }))));
 };
 
 var _default = CustomProvider;

package/cjs/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
-    /** Configure shortcut options */
+    /** Predefined date Ranges */
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;

package/cjs/DatePicker/Toolbar.js

@@ -95,7 +95,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         return;
       }
 
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== null && closeOverlay !== void 0 ? closeOverlay : false, event);
+      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
     };
 
     return /*#__PURE__*/_react.default.createElement(_Button.default, {

package/cjs/DateRangePicker/Calendar.d.ts

@@ -19,7 +19,6 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.SyntheticEvent) => void;
-    showOneCalendar?: boolean;
     showWeekNumbers?: boolean;
     value?: [] | [Date] | [Date, Date];
 }

package/cjs/DateRangePicker/Calendar.js

@@ -21,14 +21,6 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../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.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -43,10 +35,9 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
       onToggleMeridian = props.onToggleMeridian,
-      showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -86,33 +77,6 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleMoveBackward = (0, _react.useCallback)(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
-  var disabledBackward = (0, _react.useCallback)(function () {
-    // Do not disable the Backward button on the first calendar.
-    if (index === 0) {
-      return false;
-    }
-
-    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
-    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
-    var after = (0, _dateUtils.isAfter)(endDate, startDate);
-    return !after;
-  }, [calendarDate, index]);
-  var disabledForward = (0, _react.useCallback)(function () {
-    // 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 = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
-    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
-    var after = (0, _dateUtils.isAfter)(endDate, startDate);
-    return !after;
-  }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
   }, [disabledDate, value]);
@@ -120,9 +84,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     format: format,
     calendarState: calendarState,
     dateRange: value,
-    disabledBackward: disabledBackward(),
     disabledDate: disabledMonth,
-    disabledForward: disabledForward(),
     inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -3,7 +3,7 @@ import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
 export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
-    /** Configure shortcut options */
+    /** Predefined date ranges */
     ranges?: RangeType[];
     /** Format date */
     format?: string;