rsuite 5.60.0 → 5.60.2

package/cjs/DateInput/hooks/useSelectedState.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function useSelectedState(): {
+    selectedState: {
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    };
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<{
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    }>>;
+};
+export default useSelectedState;

package/cjs/DateInput/hooks/useSelectedState.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useSelectedState = useSelectedState;
+exports.default = void 0;
+var _react = require("react");
+var defaultSelectedState = {
+  selectedPattern: 'y',
+  selectionStart: 0,
+  selectionEnd: 0
+};
+function useSelectedState() {
+  var _useState = (0, _react.useState)(defaultSelectedState),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  return {
+    selectedState: selectedState,
+    setSelectedState: setSelectedState
+  };
+}
+var _default = useSelectedState;
+exports.default = _default;

package/cjs/DateInput/index.d.ts

@@ -1,7 +1,9 @@
 import DateInput from './DateInput';
-export { useDateInputState } from './useDateInputState';
-export { useKeyboardInputEvent } from './useKeyboardInputEvent';
-export { useIsFocused } from './useIsFocused';
+export { useDateInputState } from './hooks/useDateInputState';
+export { useKeyboardInputEvent } from './hooks/useKeyboardInputEvent';
+export { useIsFocused } from './hooks/useIsFocused';
+export { useSelectedState } from './hooks/useSelectedState';
+export { useFieldCursor } from './hooks/useFieldCursor';
 export * from './utils';
 export type { DateInputProps } from './DateInput';
 export default DateInput;

package/cjs/DateInput/index.js

@@ -6,16 +6,22 @@ exports.__esModule = true;
 var _exportNames = {
   useDateInputState: true,
   useKeyboardInputEvent: true,
-  useIsFocused: true
+  useIsFocused: true,
+  useSelectedState: true,
+  useFieldCursor: true
 };
-exports.default = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
+exports.default = exports.useFieldCursor = exports.useSelectedState = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
 var _DateInput = _interopRequireDefault(require("./DateInput"));
-var _useDateInputState = require("./useDateInputState");
+var _useDateInputState = require("./hooks/useDateInputState");
 exports.useDateInputState = _useDateInputState.useDateInputState;
-var _useKeyboardInputEvent = require("./useKeyboardInputEvent");
+var _useKeyboardInputEvent = require("./hooks/useKeyboardInputEvent");
 exports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;
-var _useIsFocused = require("./useIsFocused");
+var _useIsFocused = require("./hooks/useIsFocused");
 exports.useIsFocused = _useIsFocused.useIsFocused;
+var _useSelectedState = require("./hooks/useSelectedState");
+exports.useSelectedState = _useSelectedState.useSelectedState;
+var _useFieldCursor = require("./hooks/useFieldCursor");
+exports.useFieldCursor = _useFieldCursor.useFieldCursor;
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/DateInput/utils.d.ts

@@ -58,6 +58,5 @@ export declare function getInputSelectedState(options: SelectedStateOptions): {
 };
 export declare function validateDateTime(type: string, value: number): boolean;
 export declare function modifyDate(date: Date, type: string, value: number): Date;
-export declare function isFieldFullValue(formatStr: string, value: number, pattern: string): boolean;
 export declare function useInputSelection(input: React.RefObject<any>): (selectionStart: number, selectionEnd: number) => void;
 export {};

package/cjs/DateInput/utils.js

@@ -10,7 +10,6 @@ exports.isCursorAfterMonth = isCursorAfterMonth;
 exports.getInputSelectedState = getInputSelectedState;
 exports.validateDateTime = validateDateTime;
 exports.modifyDate = modifyDate;
-exports.isFieldFullValue = isFieldFullValue;
 exports.useInputSelection = useInputSelection;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _dateUtils = require("../utils/dateUtils");
@@ -228,31 +227,10 @@ function modifyDate(date, type, value) {
   }
   return date;
 }
-function isFieldFullValue(formatStr, value, pattern) {
-  var patternGroup = getPatternGroups(formatStr, pattern);
-  if (value.toString().length === patternGroup.length) {
-    return true;
-  }
-  switch (pattern) {
-    case 'M':
-      return parseInt(value + "0") > 12;
-    case 'd':
-      return parseInt(value + "0") > 31;
-    case 'H':
-      return parseInt(value + "0") > 23;
-    case 'h':
-      return parseInt(value + "0") > 12;
-    case 'm':
-    case 's':
-      return parseInt(value + "0") > 59;
-    default:
-      return false;
-  }
-}
-var isTestEnvironment = typeof process !== 'undefined' && undefined === 'test';
 function useInputSelection(input) {
   return function setSelectionRange(selectionStart, selectionEnd) {
-    if (isTestEnvironment) {
+    var isTest = input.current.dataset.test === 'true';
+    if (isTest) {
       (0, _utils.safeSetSelection)(input.current, selectionStart, selectionEnd);
       return;
     }

package/cjs/DateRangeInput/DateRangeInput.js

@@ -40,13 +40,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
   var inputRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = (0, _DateInput.useSelectedState)(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
   var rangeFormatStr = "" + formatStr + character + formatStr;
@@ -55,9 +51,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var _useState2 = (0, _react.useState)(_utils2.DateType.Start),
-    dateType = _useState2[0],
-    setDateType = _useState2[1];
+  var _useState = (0, _react.useState)(_utils2.DateType.Start),
+    dateType = _useState[0],
+    setDateType = _useState[1];
   var dateInputOptions = {
     formatStr: formatStr,
     locale: dateLocale,
@@ -69,6 +65,10 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
     date: (value === null || value === void 0 ? void 0 : value[1]) || null
   }));
+  var _useFieldCursor = (0, _DateInput.useFieldCursor)(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var getActiveState = function getActiveState(type) {
     if (type === void 0) {
       type = dateType;
@@ -122,8 +122,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
@@ -146,6 +147,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     if (!pattern) {
       return;
     }
+    increment();
     var field = getActiveState().getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
@@ -155,10 +157,6 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     if ((0, _DateInput.validateDateTime)(field.name, padValue)) {
       newValue = padValue;
     }
-    if (pattern === 'M') {
-      // Month cannot be less than 1.
-      newValue = Math.max(1, newValue);
-    }
     getActiveState().setDateField(pattern, newValue, function (date) {
       return handleChange(date, event);
     });
@@ -174,7 +172,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if ((0, _DateInput.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -190,6 +188,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = (0, _utils.useEventCallback)(function (event) {
@@ -198,7 +197,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       return;
     }
     var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
-    var dateType = (0, _utils2.getDateType)(renderedValue, character, cursorIndex);
+    var dateType = (0, _utils2.getDateType)(renderedValue || rangeFormatStr, character, cursorIndex);
     var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
       dateType: dateType,
       selectedMonth: getActiveState(dateType).dateField.month,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -108,7 +108,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -135,7 +136,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _useState2 = (0, _react.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 _useState3 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
@@ -171,14 +172,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var _startDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
       var _endDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -188,7 +189,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
       value: nextValue,
       calendarKey: calendarKey,
-      allowAameMonth: onlyShowMonth
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
     setCalendarDate(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
@@ -337,6 +340,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -408,7 +416,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
@@ -737,11 +745,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
-    onKeyDown: handleInputKeyDown,
-    htmlSize: getInputHtmlSize()
+    htmlSize: getInputHtmlSize(),
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/cjs/DateRangePicker/utils.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
-    allowAameMonth?: boolean;
+    allowSameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/cjs/DateRangePicker/utils.js

@@ -10,10 +10,10 @@ function getSafeCalendarDate(_ref) {
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
     calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
-    allowAameMonth = _ref.allowAameMonth;
+    allowSameMonth = _ref.allowSameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
-  var gap = allowAameMonth ? 0 : 1;
+  var gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);
     if (calendarKey === 'start') {

package/dist/rsuite-no-reset-rtl.css

@@ -4487,6 +4487,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-date .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-date .rs-input-group-addon .rs-btn-close {
   padding: 0;
@@ -4627,6 +4628,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-daterange .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-daterange .rs-input-group-addon .rs-btn-close {
   padding: 0;
@@ -4662,9 +4664,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-  max-width: 255px;
-}
 .rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
@@ -4703,6 +4702,8 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   bottom: -1px;
   border-bottom: 2px solid #3498ff;
   right: 0;
+  -webkit-transition: right 0.3s;
+  transition: right 0.3s;
 }
 .rs-picker-daterange-header.rs-picker-tab-active-end::after {
   right: 50%;
@@ -13191,7 +13192,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 }
 .rs-slider-disabled .rs-slider-bar,
 .rs-slider-disabled .rs-slider-handle::before {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-slider-with-mark:not(.rs-slider-vertical) {
   margin-bottom: 29px;
@@ -14471,6 +14472,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 }
 .rs-toggle {
   position: relative;
+  display: inline-block;
 }
 .rs-toggle .rs-toggle-loader {
   width: 18px;
@@ -14596,7 +14598,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;
@@ -14620,7 +14622,12 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   display: none;
 }
 .rs-toggle-inner {
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-transition: margin 0.15s ease-out;
   transition: margin 0.15s ease-out;
 }