rsuite 5.64.0 → 5.64.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [5.64.2](https://github.com/rsuite/rsuite/compare/v5.64.1...v5.64.2) (2024-06-21)
+
+
+### Bug Fixes
+
+* **Panel:** fix unable to add className to PanelBody ([#3845](https://github.com/rsuite/rsuite/issues/3845)) ([ca70540](https://github.com/rsuite/rsuite/commit/ca705409fcd5539b2e95e34be3245414ede84237))
+* **radio:** disabled radio control hover cursor ([#3847](https://github.com/rsuite/rsuite/issues/3847)) ([99f7859](https://github.com/rsuite/rsuite/commit/99f7859921defdd7b7fc980552653a4c2f391028))
+* remove unnecessary dependencies ([#3844](https://github.com/rsuite/rsuite/issues/3844)) ([51d70ba](https://github.com/rsuite/rsuite/commit/51d70ba00a35c5fc8d75c324cb856e811adebcd1))
+
+
+
+## [5.64.1](https://github.com/rsuite/rsuite/compare/v5.64.0...v5.64.1) (2024-06-14)
+
+
+### Bug Fixes
+
+* **DateInput,DateRangeInput:** fix date input error when manually input date ([#3832](https://github.com/rsuite/rsuite/issues/3832)) ([40db883](https://github.com/rsuite/rsuite/commit/40db883280d940aa871a77f92608ae0d2c37f2e9))
+* **Modal:** fix `overflow` not working when Modal is in Drawer ([#3839](https://github.com/rsuite/rsuite/issues/3839)) ([d65b28d](https://github.com/rsuite/rsuite/commit/d65b28dc2ba3fb534ee760ace5bc93dd34e06afb))
+
+
+
 # [5.64.0](https://github.com/rsuite/rsuite/compare/v5.62.1...v5.64.0) (2024-05-30)
 
 

package/Radio/styles/index.css

@@ -167,6 +167,9 @@
   bottom: -10px;
   left: -10px;
 }
+.rs-radio-control [type='radio']:disabled {
+  cursor: not-allowed;
+}
 .rs-radio-control::before,
 .rs-radio-control .rs-radio-inner::before,
 .rs-radio-control .rs-radio-inner::after {

package/Radio/styles/index.less

@@ -40,6 +40,10 @@
     right: -@radio-sense-width;
     bottom: -@radio-sense-width;
     left: -@radio-sense-width;
+
+    &:disabled {
+      cursor: @cursor-disabled;
+    }
   }
 
   &::before,

package/cjs/DateInput/DateField.js

@@ -170,7 +170,7 @@ var useDateField = exports.useDateField = function useDateField(format, localize
       hour = dateField.hour,
       minute = dateField.minute,
       second = dateField.second;
-    var date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
+    var date = new Date(year || 0, typeof month === 'number' ? Math.max(month - 1, 0) : 0,
     // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
     day || 1, hour || 0, minute || 0, second || 0);
     if (typeof type === 'undefined' || typeof value === 'undefined') {
@@ -183,7 +183,7 @@ var useDateField = exports.useDateField = function useDateField(format, localize
 
       // Invalid Date
       return new Date('');
-    } else if (type === 'day' && value === 0) {
+    } else if ((type === 'day' || type === 'month') && value === 0) {
       // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.
       return new Date('');
     }

package/cjs/DateInput/DateInput.js

@@ -61,6 +61,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     isEmptyValue = _useDateInputState.isEmptyValue;
   var _useFieldCursor = (0, _useFieldCursor2.default)(formatStr, valueProp),
     isMoveCursor = _useFieldCursor.isMoveCursor,
+    isResetValue = _useFieldCursor.isResetValue,
     increment = _useFieldCursor.increment,
     reset = _useFieldCursor.reset;
   var dateString = toDateString();
@@ -87,7 +88,11 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }));
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
-    reset();
+
+    // If the selected field changes, reset the input state
+    if (selectedState.selectedPattern !== state.selectedPattern) {
+      reset();
+    }
   });
   var onSegmentValueChange = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
@@ -110,14 +115,12 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (!pattern) {
       return;
     }
-    increment();
     var field = getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
     var newValue = value;
-
-    // Check if the value entered by the user is a valid date
-    if ((0, _utils2.validateDateTime)(field.name, padValue)) {
+    if ((0, _utils2.validateDateTime)(field.name, padValue) && !isResetValue()) {
+      // Check if the value entered by the user is a valid date
       newValue = padValue;
     }
     setDateField(pattern, newValue, function (date) {
@@ -133,6 +136,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }));
     setSelectedState(nextState);
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+    increment();
 
     // If the field is full value, move the cursor to the next field
     if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
@@ -161,6 +165,9 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }));
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
+    if (selectedState.selectedPattern !== state.selectedPattern) {
+      reset();
+    }
   });
   var onKeyboardInput = (0, _useKeyboardInputEvent.default)({
     onSegmentChange: onSegmentChange,

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

@@ -2,5 +2,6 @@ export declare function useFieldCursor<V = Date | null>(format: string, value?:
     increment: () => void;
     reset: () => void;
     isMoveCursor: (value: number, pattern: string) => boolean;
+    isResetValue: () => boolean;
 };
 export default useFieldCursor;

package/cjs/DateInput/hooks/useFieldCursor.js

@@ -9,12 +9,17 @@ var _utils = require("../utils");
 var _hooks = require("../../internals/hooks");
 function useFieldCursor(format, value) {
   var typeCount = (0, _react.useRef)(0);
-  var increment = function increment() {
+  var increment = (0, _react.useCallback)(function () {
     typeCount.current += 1;
-  };
-  var reset = function reset() {
+  }, []);
+  var reset = (0, _react.useCallback)(function () {
     typeCount.current = 0;
-  };
+  }, []);
+  var isResetValue = (0, _react.useCallback)(function () {
+    return typeCount.current === 0;
+  }, []);
+
+  // Check if the cursor should move to the next field
   var isMoveCursor = (0, _react.useCallback)(function (value, pattern) {
     var patternGroup = (0, _utils.getPatternGroups)(format, pattern);
     if (value.toString().length === patternGroup.length) {
@@ -48,7 +53,8 @@ function useFieldCursor(format, value) {
   return {
     increment: increment,
     reset: reset,
-    isMoveCursor: isMoveCursor
+    isMoveCursor: isMoveCursor,
+    isResetValue: isResetValue
   };
 }
 var _default = exports.default = useFieldCursor;

package/cjs/DateRangeInput/DateRangeInput.js

@@ -70,6 +70,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }));
   var _useFieldCursor = (0, _DateInput.useFieldCursor)(formatStr, valueProp),
     isMoveCursor = _useFieldCursor.isMoveCursor,
+    isResetValue = _useFieldCursor.isResetValue,
     increment = _useFieldCursor.increment,
     reset = _useFieldCursor.reset;
   var getActiveState = function getActiveState(type) {
@@ -127,7 +128,11 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     }));
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
-    reset();
+
+    // If the selected field changes, reset the input state
+    if (selectedState.selectedPattern !== state.selectedPattern) {
+      reset();
+    }
   });
   var onSegmentValueChange = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
@@ -150,14 +155,13 @@ 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);
     var newValue = value;
 
     // Check if the value entered by the user is a valid date
-    if ((0, _DateInput.validateDateTime)(field.name, padValue)) {
+    if ((0, _DateInput.validateDateTime)(field.name, padValue) && !isResetValue()) {
       newValue = padValue;
     }
     getActiveState().setDateField(pattern, newValue, function (date) {
@@ -173,6 +177,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     }));
     setSelectedState(nextState);
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+    increment();
 
     // If the field is full value, move the cursor to the next field
     if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
@@ -209,6 +214,9 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     setDateType(dateType);
     setSelectedState(state);
     setSelectionRange(state.selectionStart, state.selectionEnd);
+    if (selectedState.selectedPattern !== state.selectedPattern) {
+      reset();
+    }
   });
   var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({
     onSegmentChange: onSegmentChange,

package/cjs/Drawer/Drawer.d.ts

@@ -6,7 +6,7 @@ import DrawerHeader from './DrawerHeader';
 import DrawerActions from './DrawerActions';
 import DrawerFooter from './DrawerFooter';
 import DrawerTitle from './DrawerTitle';
-export interface DrawerProps extends ModalProps {
+export interface DrawerProps extends Omit<ModalProps, 'overflow'> {
     /** The placement of Drawer */
     placement?: TypeAttributes.Placement4;
     /** Custom close button */

package/cjs/Modal/Modal.js

@@ -93,7 +93,6 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   // The style of the Modal body will be updated with the size of the window or container.
   var _useBodyStyles = (0, _utils2.useBodyStyles)(dialogRef, {
       overflow: overflow,
-      drawer: isDrawer,
       prefix: prefix,
       size: size
     }),

package/cjs/Modal/utils.d.ts

@@ -3,7 +3,6 @@ import { TypeAttributes } from '../internals/types';
 export type ModalSize = TypeAttributes.Size | 'full' | number | string;
 export declare const useBodyStyles: (ref: React.RefObject<HTMLElement>, options: {
     overflow: boolean;
-    drawer: boolean;
     size?: ModalSize | undefined;
     prefix: (...classes: any) => string;
 }) => [import("react").CSSProperties | null, (entering?: boolean) => void, () => void];

package/cjs/Modal/utils.js

@@ -13,7 +13,6 @@ var useBodyStyles = exports.useBodyStyles = function useBodyStyles(ref, options)
     bodyStyles = _useState[0],
     setBodyStyles = _useState[1];
   var overflow = options.overflow,
-    drawer = options.drawer,
     prefix = options.prefix,
     size = options.size;
   var windowResizeListener = (0, _react.useRef)();
@@ -52,11 +51,11 @@ var useBodyStyles = exports.useBodyStyles = function useBodyStyles(ref, options)
     contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
-    if (drawer || size === 'full') {
+    if (!overflow || size === 'full') {
       setBodyStyles(null);
       return;
     }
-    if (overflow && ref.current) {
+    if (ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
       if (!windowResizeListener.current) {
@@ -69,7 +68,7 @@ var useBodyStyles = exports.useBodyStyles = function useBodyStyles(ref, options)
         contentElementResizeObserver.current.observe(contentElement.current);
       }
     }
-  }, [drawer, overflow, prefix, ref, size, updateBodyStyles]);
+  }, [overflow, prefix, ref, size, updateBodyStyles]);
   (0, _react.useEffect)(function () {
     return onDestroyEvents;
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/cjs/Panel/PanelBody.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
 var _hooks = require("../internals/hooks");
 var _ScrollView = _interopRequireDefault(require("../internals/ScrollView"));
-var _excluded = ["classPrefix", "children", "collapsible", "expanded", "bodyFill", "role", "id", "labelId", "scrollShadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onScroll"],
+var _excluded = ["classPrefix", "children", "collapsible", "expanded", "bodyFill", "role", "id", "labelId", "scrollShadow", "className", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onScroll"],
   _excluded2 = ["className"];
 var PanelBody = function PanelBody(props) {
   var _props$classPrefix = props.classPrefix,
@@ -23,6 +23,7 @@ var PanelBody = function PanelBody(props) {
     id = props.id,
     labelId = props.labelId,
     scrollShadow = props.scrollShadow,
+    className = props.className,
     onEnter = props.onEnter,
     onEntering = props.onEntering,
     onEntered = props.onEntered,
@@ -35,9 +36,9 @@ var PanelBody = function PanelBody(props) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var bodyClasses = withClassPrefix({
+  var bodyClasses = merge(className, withClassPrefix({
     fill: bodyFill
-  });
+  }));
   var renderBody = function renderBody(bodyProps) {
     return /*#__PURE__*/_react.default.createElement(_ScrollView.default, (0, _extends2.default)({}, rest, bodyProps, {
       customScrollbar: true,

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

@@ -12101,6 +12101,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   bottom: -10px;
   right: -10px;
 }
+.rs-radio-control [type='radio']:disabled {
+  cursor: not-allowed;
+}
 .rs-radio-control::before,
 .rs-radio-control .rs-radio-inner::before,
 .rs-radio-control .rs-radio-inner::after {