rsuite 5.29.0 → 5.30.0

package/esm/Calendar/CalendarHeader.js

@@ -9,6 +9,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import { FormattedDate } from '../CustomProvider';
 import { useCalendarContext } from './CalendarContext';
+import { useDateRangePickerContext } from '../DateRangePicker/DateRangePickerContext';
 var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -39,6 +40,9 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inline = _useCalendarContext.inline,
       disabledDate = _useCalendarContext.disabledDate;
 
+  var _useDateRangePickerCo = useDateRangePickerContext(),
+      isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -114,7 +118,9 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     'has-month': hasMonth,
     'has-time': showTime
-  }));
+  })); // If the date is not selected, the time cannot be selected (it only works in DateRangePicker).
+
+  var disableSelectTime = typeof isSelectedIdle === 'undefined' ? false : !isSelectedIdle;
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
@@ -122,13 +128,15 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     className: timeTitleClasses,
-    onClick: onToggleTimeDropdown
+    onClick: onToggleTimeDropdown,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/React.createElement(FormattedDate, {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     className: prefix('meridian'),
-    onClick: onToggleMeridian
+    onClick: onToggleMeridian,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/React.createElement(FormattedDate, {
     date: date,
     formatStr: "a"

package/esm/Cascader/Cascader.js

@@ -272,7 +272,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           node.loading = false;
           node[childrenKey] = data;
 
-          if (targetRef.current) {
+          if (targetRef.current || inline) {
             addColumn(data, columnIndex);
           }
         });

package/esm/DateRangePicker/DateRangePicker.js

@@ -18,6 +18,7 @@ import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import DateRangePickerContext from './DateRangePickerContext';
 var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
 
@@ -98,7 +99,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
 
-  var hasDoneSelect = useRef(true);
+  var _useState = useState(true),
+      isSelectedIdle = _useState[0],
+      setSelectedIdle = _useState[1];
   /**
    * The currently selected date range.
    *
@@ -108,25 +111,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    *
    */
 
-  var _useState = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-      selectedDates = _useState[0],
-      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
+  var _useState2 = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
+      selectedDates = _useState2[0],
+      setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
-  var _useState2 = useState(null),
-      hoverDateRange = _useState2[0],
-      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
+  var _useState3 = useState(null),
+      hoverDateRange = _useState3[0],
+      setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
 
-  var _useState3 = useState(getSafeCalendarDate({
+
+  var _useState4 = useState(getSafeCalendarDate({
     value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
-      calendarDate = _useState3[0],
-      setCalendarDate = _useState3[1];
+      calendarDate = _useState4[0],
+      setCalendarDate = _useState4[1];
 
-  var _useState4 = useState(),
-      inputState = _useState4[0],
-      setInputState = _useState4[1];
+  var _useState5 = useState(),
+      inputState = _useState5[0],
+      setInputState = _useState5[1];
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
    * which will cause the `selectValue` to be updated after the first click,
@@ -182,9 +186,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
-  var _useState5 = useState(false),
-      isPickerToggleActive = _useState5[0],
-      setPickerToggleActive = _useState5[1];
+  var _useState6 = useState(false),
+      isPickerToggleActive = _useState6[0],
+      setPickerToggleActive = _useState6[1];
 
   var rootRef = useRef(null);
   var overlayRef = useRef(null);
@@ -287,7 +291,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // it means there's already one selected date
     // and waiting for user to select the second date to complete the selection.
 
-    if (!hasDoneSelect.current) {
+    if (!isSelectedIdle) {
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!isNil(nextHoverDateRange) && !isNil(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
@@ -306,7 +310,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (!isNil(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue]);
+  }, [getHoverRangeValue, isSelectedIdle]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */
@@ -317,23 +321,23 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = isNil(hoverRangeValue); // in `oneTap` mode
 
-    if (hasDoneSelect.current && oneTap) {
+    if (isSelectedIdle && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [startOfDay(date), endOfDay(date)] : hoverRangeValue);
-      hasDoneSelect.current = false;
+      setSelectedIdle(false);
       return;
     } // no preset hover range can use
 
 
     if (noHoverRangeValid) {
       // start select
-      if (hasDoneSelect.current) {
+      if (isSelectedIdle) {
         nextSelectDates = [date];
       } else {
         // finish select
         nextSelectDates[1] = date;
       }
     } else {
-      if (!hasDoneSelect.current) {
+      if (!isSelectedIdle) {
         nextSelectDates = selectedDates;
         selectRangeValueRef.current = null;
       } else {
@@ -370,8 +374,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       eventName: 'changeDate'
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
-    hasDoneSelect.current = !hasDoneSelect.current;
-  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+    setSelectedIdle(!isSelectedIdle);
+  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, isSelectedIdle, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -447,7 +451,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } // End unfinished selections.
 
 
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
   }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = useCallback(function (event) {
     handleValueUpdate(event, selectedDates);
@@ -534,7 +538,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onOpen]);
   var handleExited = useCallback(function () {
     setPickerToggleActive(false);
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   var isDateDisabled = useCallback(function (date, selectDate, selectedDone, target) {
@@ -552,7 +556,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // If the date is between the start and the end
     // the button is disabled
     while (DateUtils.isBefore(start, end) || DateUtils.isSameDay(start, end)) {
-      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
         return true;
       }
 
@@ -560,17 +564,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return false;
-  }, [isDateDisabled, selectedDates]);
+  }, [isDateDisabled, isSelectedIdle, selectedDates]);
   var disabledOkButton = useCallback(function () {
     var start = selectedDates[0],
         end = selectedDates[1];
 
-    if (!start || !end || !hasDoneSelect.current) {
+    if (!start || !end || !isSelectedIdle) {
       return true;
     }
 
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectedDates]);
+  }, [disabledByBetween, isSelectedIdle, selectedDates]);
   var disabledShortcutButton = useCallback(function (value) {
     if (value === void 0) {
       value = [];
@@ -587,8 +591,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = useCallback(function (date, values, type) {
-    return isDateDisabled(date, values, hasDoneSelect.current, type);
-  }, [isDateDisabled]);
+    return isDateDisabled(date, values, isSelectedIdle, type);
+  }, [isDateDisabled, isSelectedIdle]);
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -659,11 +663,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('daterange-header')
     }, getDisplayString(selectedDates)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
+    }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
+      value: {
+        isSelectedIdle: isSelectedIdle
+      }
     }, /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 0
     }, calendarProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 1
-    }, calendarProps)))), /*#__PURE__*/React.createElement(Toolbar, {
+    }, calendarProps))))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,

package/esm/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DateRangePickerContextValue {
+    isSelectedIdle?: boolean;
+}
+declare const DateRangePickerContext: React.Context<DateRangePickerContextValue>;
+export default DateRangePickerContext;
+export declare const useDateRangePickerContext: () => DateRangePickerContextValue;

package/esm/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,6 @@
+import React, { useContext } from 'react';
+var DateRangePickerContext = /*#__PURE__*/React.createContext({});
+export default DateRangePickerContext;
+export var useDateRangePickerContext = function useDateRangePickerContext() {
+  return useContext(DateRangePickerContext) || {};
+};

package/esm/utils/dateUtils.js

@@ -57,21 +57,21 @@ function validTime(calendarProps, date) {
 
   return Object.keys(calendarProps).some(function (key) {
     if (/(Hours)/.test(key)) {
-      var _calendarProps$key, _calendarProps$key2;
+      var _calendarProps$key;
 
-      return (_calendarProps$key = (_calendarProps$key2 = calendarProps[key]) === null || _calendarProps$key2 === void 0 ? void 0 : _calendarProps$key2.call(calendarProps, getHours(date), date)) !== null && _calendarProps$key !== void 0 ? _calendarProps$key : true;
+      return (_calendarProps$key = calendarProps[key]) === null || _calendarProps$key === void 0 ? void 0 : _calendarProps$key.call(calendarProps, getHours(date), date);
     }
 
     if (/(Minutes)/.test(key)) {
-      var _calendarProps$key3, _calendarProps$key4;
+      var _calendarProps$key2;
 
-      return (_calendarProps$key3 = (_calendarProps$key4 = calendarProps[key]) === null || _calendarProps$key4 === void 0 ? void 0 : _calendarProps$key4.call(calendarProps, getMinutes(date), date)) !== null && _calendarProps$key3 !== void 0 ? _calendarProps$key3 : true;
+      return (_calendarProps$key2 = calendarProps[key]) === null || _calendarProps$key2 === void 0 ? void 0 : _calendarProps$key2.call(calendarProps, getMinutes(date), date);
     }
 
     if (/(Seconds)/.test(key)) {
-      var _calendarProps$key5, _calendarProps$key6;
+      var _calendarProps$key3;
 
-      return (_calendarProps$key5 = (_calendarProps$key6 = calendarProps[key]) === null || _calendarProps$key6 === void 0 ? void 0 : _calendarProps$key6.call(calendarProps, getSeconds(date), date)) !== null && _calendarProps$key5 !== void 0 ? _calendarProps$key5 : true;
+      return (_calendarProps$key3 = calendarProps[key]) === null || _calendarProps$key3 === void 0 ? void 0 : _calendarProps$key3.call(calendarProps, getSeconds(date), date);
     }
 
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",