rsuite 5.48.0 → 5.49.0

package/esm/DateRangePicker/DateRangePicker.js

@@ -575,6 +575,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
     });
+
+    /**
+     * Set a min-width (528px) when there are two calendars
+     * @see https://github.com/rsuite/rsuite/issues/3522
+     */
+    var panelStyles = {
+      minWidth: showOneCalendar ? 'auto' : 528
+    };
     var styles = _extends({}, menuStyle, {
       left: left,
       top: top
@@ -611,7 +619,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
-      className: panelClasses
+      className: panelClasses,
+      style: panelStyles
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
@@ -626,7 +635,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
-      className: prefix('daterange-header')
+      className: prefix('daterange-header'),
+      "data-testid": "daterange-header"
     }, getDisplayString(selectedDates)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {

package/esm/FormControl/FormControl.js

@@ -137,7 +137,8 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);
   return /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    ref: ref
+    ref: ref,
+    "data-testid": "form-control-wrapper"
   }, /*#__PURE__*/React.createElement(AccepterComponent, _extends({
     id: controlId,
     "aria-labelledby": controlId ? controlId + "-control-label" : null,

package/esm/Input/Input.d.ts

@@ -13,12 +13,23 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
+    /**
+     * The htmlSize attribute defines the width of the <input> element.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size
+     * @version 5.49.0
+     */
+    htmlSize?: number;
+    /**
+     * The callback function in which value is changed.
+     */
     onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement>, [value: string]>;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 /**
  * The `<Input>` component is used to get user input in a text field.
+ *
  * @see https://rsuitejs.com/components/input
  */
 declare const Input: RsRefForwardingComponent<'input', InputProps>;

package/esm/Input/Input.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroupContext } from '../FormGroup/FormGroup';
 import { InputGroupContext } from '../InputGroup/InputGroup';
@@ -9,6 +9,7 @@ import Plaintext from '../Plaintext';
 import { createChainedFunction, TypeChecker, mergeRefs, useClassNames, KEY_VALUES } from '../utils';
 /**
  * The `<Input>` component is used to get user input in a text field.
+ *
  * @see https://rsuitejs.com/components/input
  */
 var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -25,6 +26,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inputRef = props.inputRef,
     id = props.id,
     size = props.size,
+    htmlSize = props.htmlSize,
     plaintext = props.plaintext,
     readOnly = props.readOnly,
     onPressEnter = props.onPressEnter,
@@ -32,17 +34,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onBlur = props.onBlur,
     onKeyDown = props.onKeyDown,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
-  var handleKeyDown = useCallback(function (event) {
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
+  var handleKeyDown = function handleKeyDown(event) {
     if (event.key === KEY_VALUES.ENTER) {
       onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [onPressEnter, onKeyDown]);
-  var handleChange = useCallback(function (event) {
+  };
+  var handleChange = function handleChange(event) {
     var _event$target;
     onChange === null || onChange === void 0 ? void 0 : onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  }, [onChange]);
+  };
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -60,9 +62,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
-  var operable = !disabled && !readOnly;
+  var inputable = !disabled && !readOnly;
   var eventProps = {};
-  if (operable) {
+  if (inputable) {
     eventProps.onChange = handleChange;
     eventProps.onKeyDown = handleKeyDown;
     eventProps.onFocus = createChainedFunction(onFocus, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onFocus);
@@ -76,7 +78,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value: value,
     defaultValue: defaultValue,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    size: htmlSize
   }));
 });
 Input.displayName = 'Input';

package/esm/MultiCascader/MultiCascader.js

@@ -12,7 +12,7 @@ import Checkbox from '../Checkbox';
 import { useCascadeValue, useColumnData, useFlattenData, isSomeChildChecked } from './utils';
 import { getNodeParents, findNodeOfTree } from '../utils/treeUtils';
 import { getColumnsAndPaths } from '../Cascader/utils';
-import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect } from '../utils';
+import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect, useControlled } from '../utils';
 import { PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 
@@ -90,10 +90,12 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useFlattenData = useFlattenData(data, itemKeys),
     flattenData = _useFlattenData.flattenData,
     addFlattenData = _useFlattenData.addFlattenData;
+  var _useControlled = useControlled(valueProp, defaultValue),
+    controlledValue = _useControlled[0];
   var _useCascadeValue = useCascadeValue(_extends({}, itemKeys, {
       uncheckableItemValues: uncheckableItemValues,
       cascade: cascade,
-      value: valueProp || defaultValue
+      value: controlledValue
     }), flattenData),
     value = _useCascadeValue.value,
     setValue = _useCascadeValue.setValue,

package/esm/Overlay/OverlayTrigger.d.ts

@@ -77,6 +77,9 @@ export interface OverlayTriggerHandle {
     updatePosition: () => void;
     open: (delay?: number) => void;
     close: (delay?: number) => void;
+    getState: () => {
+        open?: boolean;
+    };
 }
 /**
  * OverlayTrigger is used to display floating elements on another component.

package/esm/Overlay/OverlayTrigger.js

@@ -165,6 +165,11 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var _overlayRef$current;
         return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;
       },
+      getState: function getState() {
+        return {
+          open: open
+        };
+      },
       open: handleOpen,
       close: function close(delay) {
         return handleClose(delay, function () {

package/esm/Picker/PickerToggle.js

@@ -212,7 +212,8 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       'read-only': !inputFocused
     }),
     placeholder: inputPlaceholder,
-    render: renderInput
+    render: renderInput,
+    "data-testid": "picker-toggle-input"
   }), children ? /*#__PURE__*/React.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : undefined

package/esm/Picker/usePickerRef.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { OverlayTriggerHandle } from './PickerToggleTrigger';
+import type { ListHandle } from '../Windowing';
+export interface PickerDependentParameters {
+    inline?: boolean;
+}
+/**
+ * A hook of the exposed method of Picker
+ */
+declare function usePickerRef(ref: any, parmas?: PickerDependentParameters): {
+    trigger: import("react").RefObject<OverlayTriggerHandle>;
+    root: import("react").RefObject<HTMLElement>;
+    overlay: import("react").RefObject<HTMLElement>;
+    target: import("react").RefObject<HTMLElement>;
+    list: import("react").RefObject<ListHandle>;
+};
+export default usePickerRef;

package/esm/Picker/usePickerRef.js

@@ -0,0 +1,77 @@
+'use client';
+import { useCallback, useImperativeHandle, useRef } from 'react';
+/**
+ * A hook of the exposed method of Picker
+ */
+function usePickerRef(ref, parmas) {
+  var trigger = useRef(null);
+  var root = useRef(null);
+  var target = useRef(null);
+  var overlay = useRef(null);
+  var list = useRef(null);
+  var _ref = parmas || {},
+    inline = _ref.inline;
+  var handleOpen = useCallback(function () {
+    var _trigger$current;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.open();
+  }, [trigger]);
+  var handleClose = useCallback(function () {
+    var _trigger$current2;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.close();
+  }, [trigger]);
+  var handleUpdatePosition = useCallback(function () {
+    var _trigger$current3;
+    trigger === null || trigger === void 0 ? void 0 : (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.updatePosition();
+  }, [trigger]);
+  useImperativeHandle(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
+      return {
+        get root() {
+          var _trigger$current$root, _trigger$current4;
+          return root !== null && root !== void 0 && root.current ? root === null || root === void 0 ? void 0 : root.current : (_trigger$current$root = trigger === null || trigger === void 0 ? void 0 : (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.root) !== null && _trigger$current$root !== void 0 ? _trigger$current$root : null;
+        },
+        get list() {
+          if (!(list !== null && list !== void 0 && list.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
+          return list === null || list === void 0 ? void 0 : list.current;
+        }
+      };
+    }
+    return {
+      get root() {
+        var _ref2, _trigger$current5;
+        return (_ref2 = (root === null || root === void 0 ? void 0 : root.current) || (trigger === null || trigger === void 0 ? void 0 : (_trigger$current5 = trigger.current) === null || _trigger$current5 === void 0 ? void 0 : _trigger$current5.root)) !== null && _ref2 !== void 0 ? _ref2 : null;
+      },
+      get overlay() {
+        var _overlay$current;
+        if (!(overlay !== null && overlay !== void 0 && overlay.current)) {
+          throw new Error('The overlay is not found. Please confirm whether the picker is open.');
+        }
+        return (_overlay$current = overlay === null || overlay === void 0 ? void 0 : overlay.current) !== null && _overlay$current !== void 0 ? _overlay$current : null;
+      },
+      get target() {
+        var _target$current;
+        return (_target$current = target === null || target === void 0 ? void 0 : target.current) !== null && _target$current !== void 0 ? _target$current : null;
+      },
+      get list() {
+        if (!(list !== null && list !== void 0 && list.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+        return list === null || list === void 0 ? void 0 : list.current;
+      },
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
+  return {
+    trigger: trigger,
+    root: root,
+    overlay: overlay,
+    target: target,
+    list: list
+  };
+}
+export default usePickerRef;

package/esm/index.d.ts

@@ -94,6 +94,8 @@ export { default as DateInput } from './DateInput';
 export type { DateInputProps } from './DateInput';
 export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { default as DateRangeInput } from './DateRangeInput';
+export type { DateRangeInputProps } from './DateRangeInput';
 export { default as DateRangePicker } from './DateRangePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
 export { default as AutoComplete } from './AutoComplete';

package/esm/index.js

@@ -50,6 +50,7 @@ export { default as Cascader } from './Cascader';
 export { default as MultiCascader } from './MultiCascader';
 export { default as DateInput } from './DateInput';
 export { default as DatePicker } from './DatePicker';
+export { default as DateRangeInput } from './DateRangeInput';
 export { default as DateRangePicker } from './DateRangePicker';
 export { default as AutoComplete } from './AutoComplete';
 export { default as Uploader } from './Uploader';

package/esm/locales/index.d.ts

@@ -31,8 +31,8 @@ export declare type CalendarLocale = PickKeys<typeof defaultLocale.Calendar>;
 export declare type PlaintextLocale = PickKeys<typeof defaultLocale.Plaintext>;
 export declare type PaginationLocale = PickKeys<typeof defaultLocale.Pagination>;
 export declare type TableLocale = CommonLocale;
-export declare type DatePickerLocale = PickKeys<typeof defaultLocale.DatePicker>;
-export declare type DateRangePickerLocale = PickKeys<typeof defaultLocale.DateRangePicker>;
+export declare type DatePickerLocale = PickKeys<typeof defaultLocale.DatePicker> & CommonLocale;
+export declare type DateRangePickerLocale = PickKeys<typeof defaultLocale.DateRangePicker> & CommonLocale;
 export declare type PickerLocale = typeof defaultLocale.Picker & CommonLocale;
 export declare type InputPickerLocale = PickerLocale & typeof defaultLocale.InputPicker;
 export declare type UploaderLocale = PickKeys<typeof defaultLocale.Uploader> & CommonLocale;

package/esm/useMediaQuery/useMediaQuery.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import canUseDOM from 'dom-lib/canUseDOM';
+import pick from 'lodash/pick';
 export var mediaQuerySizeMap = {
   xs: '(max-width: 575px)',
   sm: '(min-width: 576px)',
@@ -33,7 +34,7 @@ export function useMediaQueryLegacy(query) {
   });
   var _useState = useState(function () {
       return mediaQueries.map(function (query) {
-        return matchMedia(query);
+        return pick(matchMedia(query), ['matches', 'media']);
       });
     }),
     mediaQueryArray = _useState[0],
@@ -59,7 +60,6 @@ export function useMediaQueryLegacy(query) {
         query.removeEventListener('change', handleChange);
       });
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mediaQueries]);
   return mediaQueryArray.map(function (query) {
     return query.matches;

package/esm/utils/index.d.ts

@@ -42,3 +42,5 @@ export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useIsMounted } from './useIsMounted';
 export { default as useMount } from './useMount';
+export { default as useUniqueId } from './useUniqueId';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/esm/utils/index.js

@@ -45,4 +45,6 @@ export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useIsMounted } from './useIsMounted';
-export { default as useMount } from './useMount';
+export { default as useMount } from './useMount';
+export { default as useUniqueId } from './useUniqueId';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/esm/utils/useCustom.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useContext, useCallback } from 'react';
 import defaultLocale from '../locales/default';
 import { CustomContext } from '../CustomProvider/CustomProvider';
-import { format, parse } from '../utils/dateUtils';
+import { format, parse, isValid } from '../utils/dateUtils';
 var mergeObject = function mergeObject(list) {
   return list.reduce(function (a, b) {
     a = _extends({}, a, b);
@@ -39,7 +39,7 @@ function useCustom(keys, overrideLocale) {
   }
   var defaultFormatDate = useCallback(function (date, formatStr) {
     var _locale$Calendar;
-    return format(date, formatStr, {
+    return format(isValid(date) ? date : new Date(), formatStr, {
       locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar = locale.Calendar) === null || _locale$Calendar === void 0 ? void 0 : _locale$Calendar.dateLocale
     });
   }, [(_locale$Calendar2 = locale.Calendar) === null || _locale$Calendar2 === void 0 ? void 0 : _locale$Calendar2.dateLocale]);

package/esm/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/esm/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+'use client';
+import { useEffect, useLayoutEffect } from 'react';
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/package.json

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

package/styles/color-modes/dark.less

@@ -79,6 +79,7 @@
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-focus-outline: 3px solid rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Button

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

@@ -80,6 +80,7 @@
   --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-state-focus-shadow-slim: 0 0 0 2px var(--rs-gray-0);
   --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Button

package/styles/color-modes/light.less

@@ -86,6 +86,7 @@
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Button